/* ============================================================================
   SerialCars — ПОРТАЛ. Слой КАТАЛОГА: панель фильтров, выдача, сравнение,
   полноэкранная галерея и блок «похожие» внутри окна машины.

   Правила слоя:
     • сырых цветов и кеглей здесь нет — только var(--sc-*, запас).
       Пустая var() роняет шрифт в Times, поэтому запас есть у каждой.
     • у каждого элемента сетки и флекса есть min-width:0, иначе длинное
       название модели растягивает колонку и появляется горизонтальная прокрутка.
     • ширины от 320 px: всё, что шире, переносится, а не выезжает за экран.
   ========================================================================== */

/* ── Шапка страницы: компактнее общей, со строкой поиска ─────────────────── */
.cat-top{padding-bottom:clamp(20px,2.4vw,34px)}
.cat-top .sc-top__in{gap:var(--sc-sp-3,12px)}
.cat-top__h1{max-width:18ch;font-size:clamp(28px,3.4vw,44px);line-height:var(--sc-lh-tight,1.08);
  letter-spacing:var(--sc-track-display,-.03em);margin:0}
.cat-top .sc-top__lead{max-width:66ch}
.cat-q{max-width:620px;margin-top:var(--sc-sp-3,12px)}
.cat-quick{margin-top:var(--sc-sp-1,4px)}

/* ── Каркас каталога ─────────────────────────────────────────────────────── */
.cat{padding-block:clamp(20px,2.6vw,36px) clamp(48px,6vw,96px);
  background:var(--sc-surface-1,#0E0D11)}
.cat__in{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:minmax(0,1fr);align-items:start}
.cat__in > *{min-width:0}
.cat__main{display:flex;flex-direction:column;gap:var(--sc-sp-5,20px);min-width:0}

/* ── Панель фильтров ─────────────────────────────────────────────────────── */
/* Телефон и планшет: шторка снизу. Сдвиг по Y — горизонтальной прокрутки не даёт. */
.cat__aside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:420;
  display:flex;flex-direction:column;min-width:0;max-height:min(90dvh,90vh);
  background:var(--sc-surface-2,#141317);
  border-top:1px solid var(--sc-border-strong,rgba(255,255,255,.16));
  border-radius:var(--sc-r-lg,24px) var(--sc-r-lg,24px) 0 0;
  box-shadow:var(--sc-shadow-4,0 40px 88px rgba(0,0,0,.56));
  transform:translateY(102%);visibility:hidden;
  transition:transform var(--sc-dur-4,260ms) var(--sc-ease,ease),visibility var(--sc-dur-4,260ms) step-end}
.cat__aside.is-open{transform:none;visibility:visible;transition-timing-function:var(--sc-ease,ease),step-start}
.cat__scrim{position:fixed;inset:0;z-index:410;background:var(--sc-scrim,rgba(6,5,8,.78));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cat__scrim[hidden]{display:none}
.cat__asidehead{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-sp-4,16px);
  padding:var(--sc-sp-5,20px) var(--sc-sp-5,20px) var(--sc-sp-3,12px);
  border-bottom:1px solid var(--sc-border-faint,rgba(255,255,255,.05))}
.cat__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sc-sp-5,20px);display:flex;flex-direction:column;gap:var(--sc-sp-6,24px)}
.cat__asidefoot{position:relative;flex:0 0 auto;display:flex;gap:var(--sc-sp-3,12px);
  padding:var(--sc-sp-4,16px) var(--sc-sp-5,20px);
  border-top:1px solid var(--sc-border-faint,rgba(255,255,255,.05));background:var(--sc-surface-3,#1A181D)}
/* Список условий не обрывается на полуслове: над подвалом тень-градиент. */
.cat__asidefoot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:36px;
  pointer-events:none;background:linear-gradient(180deg,rgba(20,19,23,0),var(--sc-surface-2,#141317))}
.cat__apply{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.cat__asidefoot .sc-btn--ghost{flex:0 0 auto}

@media (min-width:1000px){
  .cat__in{grid-template-columns:300px minmax(0,1fr)}
  .cat__aside{position:sticky;left:auto;right:auto;bottom:auto;
    top:calc(var(--sc-header-h,72px) + var(--sc-sp-4,16px));
    max-height:calc(100dvh - var(--sc-header-h,72px) - var(--sc-sp-8,40px));
    transform:none;visibility:visible;border-radius:var(--sc-r-lg,24px);
    border:1px solid var(--sc-border,rgba(255,255,255,.08));
    background:var(--sc-surface-2,#141317);box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07))}
  .cat__scrim{display:none}
  .cat__close{display:none}
  .cat__fbtn{display:none}
  .cat__asidefoot{border-radius:0 0 var(--sc-r-lg,24px) var(--sc-r-lg,24px)}
}

/* ── Группа фильтра ──────────────────────────────────────────────────────── */
.cat-f{display:flex;flex-direction:column;gap:var(--sc-sp-3,12px);min-width:0}
.cat-f__t{margin:0;font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-12,12px);
  line-height:var(--sc-lh-caps,1.35);letter-spacing:var(--sc-track-caps,.10em);text-transform:uppercase;
  font-weight:var(--sc-fw-medium,500);color:var(--sc-text-faint,#998F87)}
.cat-f__hint{margin:0;font-size:var(--sc-fs-12,12px);line-height:var(--sc-lh-12,18px);
  color:var(--sc-text-faint,#998F87);overflow-wrap:break-word}
.cat-f__note{margin:0;max-width:40ch}

/* Список вариантов с честным счётчиком: «BMW — 87» */
.cat-opts{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-sp-3,12px);
  width:100%;min-width:0;min-height:var(--sc-control-sm,36px);padding:var(--sc-sp-2,8px) var(--sc-sp-3,12px);
  border:1px solid transparent;border-radius:var(--sc-r-sm,8px);background:transparent;cursor:pointer;
  font-family:var(--sc-font-text,sans-serif);font-size:var(--sc-fs-14,14px);line-height:var(--sc-lh-14,21px);
  color:var(--sc-text-muted,#BDB5B0);text-align:left;transition:var(--sc-tr-control,all .2s)}
.cat-opt:hover:not([disabled]){background:var(--sc-surface-4,#221F26);color:var(--sc-text,#F6F3F1)}
.cat-opt__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-opt__n{flex:0 0 auto;font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-12,12px);color:var(--sc-text-faint,#998F87)}
.cat-n{white-space:nowrap}
.cat-opt[aria-pressed="true"]{background:var(--sc-accent-soft,rgba(224,45,31,.16));
  border-color:var(--sc-accent-line,rgba(224,45,31,.42));color:var(--sc-text,#F6F3F1)}
.cat-opt[aria-pressed="true"] .cat-opt__n{color:var(--sc-accent-text,#FF5240)}
.cat-opt[disabled]{opacity:.38;cursor:not-allowed}
.cat-opt:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:1px}

/* Чипы фильтра: те же примитивы, но с числом */
.cat-chips{gap:var(--sc-sp-2,8px)}
.cat-chip{min-width:0;max-width:100%}
.cat-chip[disabled]{opacity:.38;cursor:not-allowed}
.cat-chip[aria-pressed="true"]{background:var(--sc-accent-soft,rgba(224,45,31,.16));
  border-color:var(--sc-accent-line,rgba(224,45,31,.42));color:var(--sc-text,#F6F3F1)}
.cat-chip__n{font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-12,12px);color:var(--sc-text-faint,#998F87)}
.cat-chip[aria-pressed="true"] .cat-chip__n{color:var(--sc-accent-text,#FF5240)}

/* Два поля рядом */
.cat-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:var(--sc-sp-2,8px);min-width:0}
.cat-pair > *{min-width:0}
.cat-pair__d{color:var(--sc-text-faint,#998F87);font-size:var(--sc-fs-14,14px)}
.cat-num{font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-14,14px);padding-inline:var(--sc-sp-3,12px);text-align:center}

/* ── Ползунок бюджета: две ручки на одной дорожке ────────────────────────── */
.cat-range{position:relative;height:28px;min-width:0}
.cat-range__track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  border-radius:var(--sc-r-full,999px);background:var(--sc-surface-inset,#0B0A0E);
  border:1px solid var(--sc-border-faint,rgba(255,255,255,.05));overflow:hidden}
.cat-range__fill{position:absolute;top:0;bottom:0;left:0;width:100%;display:block;
  background:linear-gradient(90deg,var(--sc-accent,#E02D1F),var(--sc-accent-text,#FF5240))}
.cat-range__in{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;padding:0;
  background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}
.cat-range__in:focus-visible{outline:none}
.cat-range__in::-webkit-slider-runnable-track{height:28px;background:transparent;border:0}
.cat-range__in::-moz-range-track{height:28px;background:transparent;border:0}
.cat-range__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;
  width:20px;height:20px;margin-top:4px;border-radius:var(--sc-r-full,999px);cursor:grab;
  background:var(--sc-text,#F6F3F1);border:2px solid var(--sc-surface-1,#0E0D11);
  box-shadow:var(--sc-shadow-1,0 1px 2px rgba(0,0,0,.4))}
.cat-range__in::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:999px;cursor:grab;
  background:var(--sc-text,#F6F3F1);border:2px solid var(--sc-surface-1,#0E0D11)}
.cat-range__in:focus-visible::-webkit-slider-thumb{box-shadow:var(--sc-focus-ring-flat,0 0 0 2px #3DE0FF)}
.cat-range__in:focus-visible::-moz-range-thumb{box-shadow:var(--sc-focus-ring-flat,0 0 0 2px #3DE0FF)}
#fPriceR1{z-index:3}
#fPriceR2{z-index:4}

.cat-range__solo{width:100%;min-width:0;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
.cat-range__solo::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--sc-surface-inset,#0B0A0E);
  border:1px solid var(--sc-border-faint,rgba(255,255,255,.05))}
.cat-range__solo::-moz-range-track{height:4px;border-radius:999px;background:var(--sc-surface-inset,#0B0A0E)}
.cat-range__solo::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;
  border-radius:999px;background:var(--sc-text,#F6F3F1);border:2px solid var(--sc-surface-1,#0E0D11);cursor:grab}
.cat-range__solo::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:var(--sc-text,#F6F3F1);
  border:2px solid var(--sc-surface-1,#0E0D11);cursor:grab}
.cat-range__solo:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:4px;border-radius:999px}

/* ── Цвет: кружки по группам colorHex ────────────────────────────────────── */
.cat-colors{display:flex;flex-wrap:wrap;gap:var(--sc-sp-2,8px);min-width:0}
.cat-color{position:relative;width:34px;height:34px;padding:0;flex:0 0 auto;cursor:pointer;
  border-radius:var(--sc-r-full,999px);border:1px solid var(--sc-border-bright,rgba(255,255,255,.28));
  background:var(--sc-surface-4,#221F26);transition:var(--sc-tr-control,all .2s)}
.cat-color i{position:absolute;inset:3px;border-radius:999px;display:block}
.cat-color:hover:not([disabled]){transform:translateY(-2px)}
.cat-color[aria-pressed="true"]{box-shadow:0 0 0 2px var(--sc-surface-2,#141317),0 0 0 4px var(--sc-accent,#E02D1F)}
.cat-color[disabled]{opacity:.3;cursor:not-allowed}
.cat-color:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:2px}

/* ── Переключатели: «Выгодный ввоз» и «без ДТП» ──────────────────────────── */
.cat-switches{display:flex;flex-direction:column;gap:var(--sc-sp-2,8px);min-width:0}
.cat-sw{display:flex;align-items:center;gap:var(--sc-sp-3,12px);width:100%;min-width:0;cursor:pointer;
  padding:var(--sc-sp-3,12px);border-radius:var(--sc-r-sm,8px);background:var(--sc-surface-3,#1A181D);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));text-align:left;
  font-family:var(--sc-font-text,sans-serif);color:var(--sc-text-muted,#BDB5B0);
  transition:var(--sc-tr-control,all .2s)}
.cat-sw:hover:not([disabled]){border-color:var(--sc-border-strong,rgba(255,255,255,.16))}
.cat-sw[disabled]{opacity:.4;cursor:not-allowed}
.cat-sw:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:1px}
.cat-sw__box{flex:0 0 auto;width:38px;height:22px;border-radius:999px;position:relative;
  background:var(--sc-surface-inset,#0B0A0E);border:1px solid var(--sc-border-strong,rgba(255,255,255,.16));
  transition:background-color var(--sc-dur-2,160ms) var(--sc-ease,ease)}
.cat-sw__box::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:999px;
  background:var(--sc-text-muted,#BDB5B0);transition:transform var(--sc-dur-2,160ms) var(--sc-ease,ease)}
.cat-sw[aria-pressed="true"] .cat-sw__box{background:var(--sc-accent,#E02D1F);border-color:var(--sc-accent,#E02D1F)}
.cat-sw[aria-pressed="true"] .cat-sw__box::after{transform:translateX(16px);background:var(--sc-text-on-accent,#fff)}
.cat-sw__t{min-width:0;display:flex;flex-direction:column;gap:2px}
.cat-sw__t b{font-size:var(--sc-fs-14,14px);line-height:var(--sc-lh-14,21px);font-weight:var(--sc-fw-semibold,600);
  color:var(--sc-text,#F6F3F1);overflow-wrap:break-word}
.cat-sw__t span{font-size:var(--sc-fs-12,12px);line-height:var(--sc-lh-12,18px);color:var(--sc-text-faint,#998F87)}
.cat-sw[aria-pressed="true"]{border-color:var(--sc-accent-line,rgba(224,45,31,.42))}

/* ── Полоса над выдачей ──────────────────────────────────────────────────── */
.cat__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sc-sp-3,12px);min-width:0}
.cat__barl,.cat__barr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-sp-3,12px);min-width:0}
.cat__barr{flex:1 1 auto;justify-content:flex-end}
.cat__fbtn{flex:0 0 auto}
/* число внутри кнопки — отдельной плашкой, иначе кнопка растёт и рвёт строку */
.cat__fbtn-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:6px;
  border-radius:var(--sc-r-full,999px);background:var(--sc-accent,#E02D1F);color:var(--sc-text-on-accent,#fff);
  font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-12,12px);line-height:1}
.cat__fbtn-n[hidden]{display:none}
.cat__found{margin:0;min-width:0;font-size:var(--sc-fs-14,14px);line-height:var(--sc-lh-14,21px);
  color:var(--sc-text-muted,#BDB5B0)}
.cat__found b{font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-18,18px);color:var(--sc-text,#F6F3F1);font-weight:var(--sc-fw-medium,500)}
.cat__sort{flex:1 1 170px;max-width:230px;min-width:0;height:var(--sc-control-sm,36px);
  font-size:var(--sc-fs-13,13px);padding-inline:var(--sc-sp-3,12px) var(--sc-sp-7,32px);
  background-position:calc(100% - 16px) 50%,calc(100% - 10px) 50%}

.cat-toggle{display:inline-flex;flex:0 0 auto;min-width:0;padding:3px;gap:2px;
  border-radius:var(--sc-r-full,999px);background:var(--sc-surface-3,#1A181D);
  border:1px solid var(--sc-border,rgba(255,255,255,.08))}
.cat-toggle__b{height:30px;padding-inline:var(--sc-sp-3,12px);border:0;border-radius:var(--sc-r-full,999px);
  background:transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--sc-font-text,sans-serif);font-size:var(--sc-fs-12,12px);font-weight:var(--sc-fw-medium,500);
  color:var(--sc-text-faint,#998F87);transition:var(--sc-tr-control,all .2s)}
.cat-toggle__b[aria-pressed="true"]{background:var(--sc-surface-5,#2B2831);color:var(--sc-text,#F6F3F1)}
.cat-toggle__b:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:1px}

.cat__grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media (min-width:1280px){ .cat__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1560px){ .cat__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cat__note{max-width:82ch;margin:var(--sc-sp-4,16px) 0 0}
.cat__empty .sc-cluster{display:flex;flex-wrap:wrap;gap:var(--sc-sp-3,12px)}

/* ── Сравнение ───────────────────────────────────────────────────────────── */
/* Кнопка на карточке — под «избранным», вне зоны кузова и вне зоны бейджей. */
.cat-cmp{position:absolute;right:var(--sc-sp-3,12px);top:calc(var(--sc-sp-3,12px) + 40px);z-index:4;
  width:34px;height:34px;border-radius:var(--sc-r-full,999px);cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--sc-border,rgba(255,255,255,.08));background:rgba(8,7,10,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--sc-text-muted,#BDB5B0);transition:var(--sc-tr-control,all .2s)}
.cat-cmp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.cat-cmp:hover{color:var(--sc-text,#F6F3F1);border-color:var(--sc-border-strong,rgba(255,255,255,.16))}
.cat-cmp[aria-pressed="true"]{color:var(--sc-electric-text,#3DE0FF);border-color:var(--sc-electric-line,rgba(61,224,255,.38))}
.cat-cmp:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:1px}

.cat-cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--sc-z-sticky,100);
  background:var(--sc-surface-veil-strong,rgba(8,7,10,.88));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--sc-border-strong,rgba(255,255,255,.16))}
.cat-cmpbar[hidden]{display:none}
/* Полоса сравнения закреплена внизу — освобождаем под неё место,
   иначе она накрывает подвал панели фильтров и конец выдачи. */
body.has-cmp{padding-bottom:76px}
@media (min-width:1000px){
  body.has-cmp .cat__aside{max-height:calc(100dvh - var(--sc-header-h,72px) - var(--sc-sp-8,40px) - 68px)}
}
.cat-cmpbar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sc-sp-3,12px);padding-block:var(--sc-sp-3,12px);min-width:0}
.cat-cmpbar__list{display:flex;flex-wrap:wrap;gap:var(--sc-sp-2,8px);min-width:0;flex:1 1 200px}
.cat-cmpbar__act{display:flex;gap:var(--sc-sp-2,8px);flex:0 0 auto}
.cat-cmpitem{display:inline-flex;align-items:center;gap:var(--sc-sp-2,8px);max-width:100%;min-width:0;
  height:34px;padding:0 var(--sc-sp-2,8px) 0 var(--sc-sp-3,12px);border-radius:var(--sc-r-full,999px);
  background:var(--sc-surface-3,#1A181D);border:1px solid var(--sc-border,rgba(255,255,255,.08));
  font-size:var(--sc-fs-13,13px);color:var(--sc-text-muted,#BDB5B0)}
.cat-cmpitem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cat-cmpitem button{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;padding:0;
  border:0;border-radius:999px;background:transparent;color:var(--sc-text-faint,#998F87);cursor:pointer}
.cat-cmpitem button:hover{color:var(--sc-accent-text,#FF5240)}
.cat-cmpitem svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}

/* таблица сравнения — в своём окне, прокрутка по X только внутри обёртки */
.cat-cmpwrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;min-width:0}
.cat-cmptbl{border-collapse:collapse;width:100%;min-width:420px;font-size:var(--sc-fs-13,13px)}
.cat-cmptbl th,.cat-cmptbl td{padding:var(--sc-sp-3,12px);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--sc-border-faint,rgba(255,255,255,.05));color:var(--sc-text-muted,#BDB5B0)}
.cat-cmptbl th{color:var(--sc-text-faint,#998F87);font-weight:var(--sc-fw-medium,500);white-space:nowrap}
.cat-cmptbl thead td{color:var(--sc-text,#F6F3F1);font-weight:var(--sc-fw-semibold,600)}
.cat-cmptbl .is-best{color:var(--sc-electric-text,#3DE0FF)}

/* ── Похожие машины внутри окна ──────────────────────────────────────────── */
.cat-sim{display:flex;flex-direction:column;gap:var(--sc-sp-3,12px);min-width:0}
/* Одна колонка всегда: правая колонка окна узкая при любой ширине экрана,
   в две колонки название модели обрезается на «BMW 5-Seri…». */
.cat-simlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sc-sp-2,8px);
  grid-template-columns:minmax(0,1fr)}
.cat-simlist > *{min-width:0}
.cat-sim__b{display:flex;align-items:center;gap:var(--sc-sp-3,12px);width:100%;min-width:0;cursor:pointer;
  padding:var(--sc-sp-2,8px);border-radius:var(--sc-r-sm,8px);text-align:left;
  background:var(--sc-surface-3,#1A181D);border:1px solid var(--sc-border,rgba(255,255,255,.08));
  transition:var(--sc-tr-control,all .2s)}
.cat-sim__b:hover{border-color:var(--sc-border-strong,rgba(255,255,255,.16));transform:translateY(-2px)}
.cat-sim__b:focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:1px}
.cat-sim__im{flex:0 0 auto;width:74px;height:50px;border-radius:var(--sc-r-sm,8px);overflow:hidden;
  background:linear-gradient(180deg,var(--sc-surface-4,#221F26),var(--sc-surface-0,#08070A));
  display:grid;place-items:center}
.cat-sim__im img{width:100%;height:100%;object-fit:contain}
.cat-sim__x{min-width:0;display:flex;flex-direction:column;gap:2px}
.cat-sim__n{font-size:var(--sc-fs-13,13px);line-height:var(--sc-lh-13,20px);color:var(--sc-text,#F6F3F1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-sim__p{font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-12,12px);color:var(--sc-electric-text,#3DE0FF);white-space:nowrap}

/* кнопка «во весь экран» поверх кадра галереи */
.cat-full{position:absolute;left:var(--sc-sp-4,16px);bottom:var(--sc-sp-4,16px);z-index:2;
  height:34px;padding-inline:var(--sc-sp-3,12px);display:inline-flex;align-items:center;gap:var(--sc-sp-2,8px);
  border-radius:var(--sc-r-full,999px);cursor:pointer;
  border:1px solid var(--sc-border,rgba(255,255,255,.08));background:rgba(8,7,10,.64);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--sc-text-muted,#BDB5B0);font-family:var(--sc-font-text,sans-serif);font-size:var(--sc-fs-12,12px)}
.cat-full svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.cat-full:hover{color:var(--sc-text,#F6F3F1);border-color:var(--sc-border-strong,rgba(255,255,255,.16))}

/* ── Полноэкранный просмотр снимка ───────────────────────────────────────── */
.cat-lb{position:fixed;inset:0;z-index:560;display:flex;flex-direction:column;
  background:var(--sc-surface-veil-strong,rgba(8,7,10,.88));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cat-lb[hidden]{display:none}
.cat-lb__stage{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:grid;place-items:center;
  padding:clamp(44px,6vw,72px) var(--sc-sp-4,16px) var(--sc-sp-5,20px);touch-action:pan-y}
.cat-lb__img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6))}
.cat-lb__x{position:absolute;right:var(--sc-sp-4,16px);top:var(--sc-sp-4,16px);z-index:3}
.cat-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;z-index:3;cursor:pointer;
  border-radius:var(--sc-r-full,999px);border:1px solid var(--sc-border,rgba(255,255,255,.08));
  background:rgba(8,7,10,.64);color:var(--sc-text,#F6F3F1);display:grid;place-items:center}
.cat-lb__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.cat-lb__nav:hover{background:rgba(43,40,49,.92)}
.cat-lb__nav--prev{left:var(--sc-sp-3,12px)}
.cat-lb__nav--next{right:var(--sc-sp-3,12px)}
.cat-lb__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:var(--sc-sp-3,12px);
  padding:0 var(--sc-sp-4,16px) var(--sc-sp-5,20px);min-width:0}
.cat-lb__cap{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--sc-fs-13,13px);color:var(--sc-text-muted,#BDB5B0)}
.cat-lb__n{flex:0 0 auto;font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;
  font-size:var(--sc-fs-12,12px);color:var(--sc-text-faint,#998F87)}

/* ── Мелочи, которые чинят узкие экраны ─────────────────────────────────── */
@media (max-width:420px){
  .cat__sort{max-width:none;flex:1 1 100%}
  .cat__barr{justify-content:flex-start}
  .cat-top__h1{font-size:clamp(26px,7.6vw,32px)}
}
/* Покой: ничего не едет, шторка просто появляется */
@media (prefers-reduced-motion:reduce){
  .cat__aside{transition:none}
  .cat-sim__b:hover,.cat-color:hover:not([disabled]){transform:none}
}