/* ТОПДОМ — каталог: быстрые плитки (площадь, спальни), компактная панель, выпадающие списки.
   Грузится после projects.css / mobile2.css / smm.css. Выпадающие списки выносятся в body (.ddp), поэтому не режутся панелью. */

/* ---------- быстрый подбор: на экране в начале, не липкий ---------- */
.pquick { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0 var(--gutter) 24px; }
.pq__g { min-width: 0; }
.pq__g--area { flex: 1 1 auto; }
.pq__g--bed { flex: 0 0 auto; margin-left: auto; }
.pq__h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.pq__h b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pq__h span { font-size: 12px; color: var(--ink-3); }
.pq__t .pills { display: flex; gap: 6px; padding: 0; background: none; border-radius: 0; flex-wrap: wrap; }
#pQuick .pill {
  flex: none; min-width: 0; height: 36px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--paper); color: var(--ink);
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, box-shadow .3s;
}
#pQuick .pill:hover { background: #e0e0db; }
#pQuick .pill.is-active { background: var(--ink); color: #fff; }
#pQuick .pill b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
#pQuick .pill small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 0; }
#pQuick .pill.is-active small { color: rgba(255, 255, 255, .62); }
#pQuick .pill.is-zero { opacity: .45; }
.qt__i { width: 18px; height: auto; flex: none; color: var(--ink-3); transition: color .25s; }
.qt__i--bed { width: 18px; }
#pQuick .pill.is-active .qt__i { color: #fff; }

/* ---------- компактная панель ---------- */
.pbar:not(.is-spec) .pbar__panel { min-height: 52px; padding: 8px 60px 8px 12px; border-radius: 20px; clip-path: inset(0 0 0 0 round 20px); }
.pbar:not(.is-spec).is-min .pbar__panel { clip-path: inset(0 0 calc(100% - 52px) calc(100% - 52px) round 26px); }
/* прилипла к шапке: без верхних скруглений; глазик (is-min) возвращает скругление и опускает панель */
.pbar.is-anim { transition: top .6s var(--ease); }
.pbar.is-docked:not(.is-min):not(.is-spec) .pbar__panel { border-radius: 0 0 20px 20px; clip-path: inset(0 0 0 0 round 0 0 20px 20px); }
.pbar:not(.is-spec) .pbar__eye { width: 36px; height: 36px; top: 8px; right: 8px; }
.pbar:not(.is-spec) .pbar__eye .eye { width: 19px; height: 19px; }
.pbar:not(.is-spec) .pbar__stack { min-height: 36px; }
.pbar:not(.is-spec) .pback { height: 52px; }
.pbar .pf__l { font-size: 12.5px; }
.pbar .pills--s { padding: 4px; }
.pbar .pills--s .pill { height: 28px; padding: 0 12px; font-size: 13px; }

/* на ПК: два настоящих ряда; второй раскрывается по «Больше фильтров» */
@media (min-width: 901px) {
  .pbar .pbar__filters { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
  .pbar .pbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
  .pbar .pbar__row--more { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .07); }
  .pbar.is-open .pbar__row--more { display: grid; }
  .pbar__row--more .dd, .pbar__row--more .dd__b { width: 100%; }
  .pbar__row--more .dd__b { padding: 0 9px 0 11px; gap: 5px; font-size: 12.5px; }
  .pbar__row--more .dd__c { width: 10px; }
}
@media (min-width: 901px) and (max-width: 1320px) { .pbar .pbar__row--more { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* счётчик и «Сбросить» — всегда в конце первого ряда, не прыгают */
.pf--end { margin-left: auto; gap: 12px; flex-direction: row; align-items: center; }
.pf__count { min-width: 104px; text-align: right; font-size: 14px; }
.pf__reset { min-width: 62px; text-align: right; }
.pf__reset[hidden] { display: inline; visibility: hidden; pointer-events: none; }

/* «Больше фильтров» */
.pf__more { height: 36px; padding: 0 14px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .25s, color .25s; }
.pf__more svg { width: 16px; height: 16px; }
.pf__more:hover { background: rgba(0, 0, 0, .09); }
.pbar .pills--s .pill:not(.is-active):hover { background: rgba(0, 0, 0, .09); }
.pbar.is-open .pf__more { background: var(--ink); color: #fff; }
.pbar.is-open .pf__more .pf__badge { background: #fff; color: var(--ink); }
.pf__more .pf__badge { background: var(--ink); color: #fff; }

/* ---------- кнопка выпадающего списка ---------- */
.dd { position: relative; flex: none; min-width: 0; }
.dd__b { height: 36px; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 0 12px 0 14px; border-radius: 999px; background: var(--paper); font-size: 13px; white-space: nowrap; transition: background .22s, color .22s, box-shadow .22s; }
.dd__l { color: var(--ink-3); font-weight: 500; flex: none; transition: color .22s; }
.dd__v { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; transition: color .22s; }
.dd__c { flex: none; width: 11px; height: 8px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.dd__b:hover { background: #e0e0db; }
.dd.is-open .dd__b { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dd.is-open .dd__c { transform: rotate(180deg); }
.dd.is-on .dd__b { background: var(--ink); }
.dd.is-on .dd__l { color: rgba(255, 255, 255, .6); }
.dd.is-on .dd__v, .dd.is-on .dd__c { color: #fff; }
.dd.is-on.is-open .dd__b { background: var(--ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.pbar__row--more .dd__v { flex: 0 1 auto; }

/* ---------- панель списка (в body) ---------- */
.ddp-back { position: fixed; inset: 0; z-index: 139; background: rgba(0, 0, 0, .38); opacity: 0; transition: opacity .22s; }
.ddp-back.is-in { opacity: 1; }
.ddp-back[hidden], .ddp[hidden] { display: none; }
.ddp {
  position: fixed; z-index: 140; left: 0; top: 0; min-width: 240px; max-width: min(92vw, 420px); overflow: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ink); border-radius: 20px; padding: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .05); font-size: 14px;
  opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top left; transition: opacity .16s, transform .22s var(--ease);
}
.ddp.is-in { opacity: 1; transform: none; }
.ddp__h { display: none; }
.ddo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 13px; text-align: left; font-weight: 500; transition: background .15s, color .15s; }
.ddo:hover { background: var(--paper); }
.ddo__t { flex: 1; min-width: 0; }
.ddo__m { flex: none; position: relative; width: 19px; height: 19px; border: 1.5px solid #c8c8c2; transition: background .18s, border-color .18s; }
.ddo__m--cb { border-radius: 6px; }
.ddo__m--rd { border-radius: 50%; }
.ddo__m::after { content: ""; position: absolute; opacity: 0; transition: opacity .18s; }
.ddo__m--cb::after { left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ddo__m--rd::after { inset: 3.5px; border-radius: 50%; background: #fff; }
.ddo.is-on { font-weight: 600; }
.ddo.is-on .ddo__m { background: var(--ink); border-color: var(--ink); }
.ddo.is-on .ddo__m::after { opacity: 1; }
.ddo small { font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ddo.is-zero { color: #a5a59f; }
.ddo.is-soon { color: #8d8d87; cursor: default; }
.ddo.is-soon:hover { background: none; }
.ddo em { font-style: normal; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--paper); color: var(--ink-3); }
.ddp__n { margin: 4px 12px 8px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.ddp__clr { display: block; margin: 2px 12px 8px; font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.ddp__clr:hover { color: var(--ink); }

/* цена: два поля и двойной ползунок */
.ddp--range { width: 340px; }
.ddp__pr { padding: 10px 12px 6px; }
.ddp__prh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--ink-3); }
.ddp__prh b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.rng { position: relative; height: 28px; margin: 16px 0 10px; --a: 0; --b: 1; }
.rng__t { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: #e4e4df; }
.rng__f { position: absolute; top: 0; bottom: 0; left: calc(11px + (100% - 22px) * var(--a)); right: calc(11px + (100% - 22px) * (1 - var(--b))); background: var(--ink); border-radius: 2px; }
.rng input { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: none; }
.rng input::-webkit-slider-runnable-track { background: none; height: 28px; }
.rng input::-moz-range-track { background: none; height: 28px; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); cursor: grab; }
.rng input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); cursor: grab; }
.rng input:active::-webkit-slider-thumb { cursor: grabbing; }
.rng input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 0, 0, .15); }
.ddp__pi { display: flex; align-items: center; gap: 8px; }
.ddp__pi label { flex: 1; position: relative; display: block; font-size: 12px; color: var(--ink-3); }
.ddp__pi label span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ddp__pi input { width: 100%; height: 42px; padding: 0 12px 0 34px; border: 1.5px solid #e4e4df; border-radius: 13px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; -moz-appearance: textfield; appearance: textfield; outline: none; transition: border-color .2s; }
.ddp__pi input::-webkit-inner-spin-button, .ddp__pi input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ddp__pi input:focus { border-color: var(--ink); }
.ddp__pi i { color: #b5b5af; font-style: normal; }
.ddp__ch { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.ddp__ch button { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 500; transition: background .2s, color .2s; }
.ddp__ch button:hover { background: #ecece8; }
.ddp__ch button.is-on { background: var(--ink); color: #fff; }
.ddp__pu { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); }

/* ---------- телефон ---------- */
@media (min-width: 901px) { .ddp-back { display: none; } }
@media (max-width: 900px) {
  .catalog { padding-top: calc(var(--hdr) + 62px); }
  .pquick { display: block; margin: 8px 0 18px; }
  .pq__g { margin-bottom: 14px; }
  .pq__h { margin: 0 var(--gutter) 8px; flex-wrap: wrap; gap: 2px 10px; }
  .pq__t { overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); }
  .pq__t .pills { flex-wrap: nowrap; }
  .pq__t::-webkit-scrollbar { display: none; }
  .pq__t .pills { width: max-content; }
  #pQuick .pill { flex: 0 0 auto; }

  /* телефон: ряды фильтров листаются вбок (справа — затухание как подсказка), «Больше фильтров» сдвигает каталог вниз, а не ложится на хлебные крошки */
  .pbar:not(.is-spec) .pbar__row { padding-right: 44px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
  .catalog { transition: padding-top .4s var(--ease); }
  body:has(.pbar.is-open:not(.is-spec)) .catalog { padding-top: calc(var(--hdr) + 62px + 44px); }
  .pbar:not(.is-spec) .pbar__row--more { display: none; }
  .pbar.is-open:not(.is-spec) .pbar__row--more { display: flex; }
  .pbar .pf__more { flex: none; }
  .pbar .pf--end { margin-left: 0; }
  .pf__count { min-width: 0; text-align: left; }
  .dd__b, .pf__more { background-color: var(--paper); }
  .pf__more { box-shadow: none; }
  .pbar.is-open .pf__more { background: var(--ink); }

  .ddp {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; min-width: 0 !important; max-width: none; max-height: 74vh !important;
    border-radius: 24px 24px 0 0; padding: 8px 8px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); transform-origin: bottom center;
  }
  .ddp.is-in { transform: none; }
  .ddp::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 2px; background: #d6d6d0; margin: 2px auto 6px; }
  .ddp__h { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  .ddp__h button { font-size: 14px; font-weight: 600; padding: 6px 4px; }
  .ddo { padding: 14px 12px; font-size: 15.5px; }
  .ddp--range { width: auto; }
  .ddp__pr { padding: 8px 12px 6px; }
}

/* ---------- плитки каталога: без подпрыгивания при наведении, масштаб 2/3/4 в ряд ---------- */
.pgrid .pcard:hover, .pgrid .pcard:focus-visible { translate: none; transform: none; }
.pgrid .pcard img, .pgrid .pcard:hover img { transform: none; scale: 1; transition: filter .5s var(--ease), scale 1.2s var(--ease); }
/* наведение: фото сразу приближается (без затемнения остальных); через 2 с включается авто-листание фото (projects.js, .pc-car) */
@media (hover: hover) and (pointer: fine) {
  .pgrid .pcard:hover img { scale: 1.07; }
}
.pgrid .pcard img, .pgrid .pcard:hover img { transition: scale .9s var(--ease); }
.pc-car { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; transition: scale .9s var(--ease), opacity .45s var(--ease); }
.pgrid .pcard:hover .pc-car { scale: 1.07; }
.pc-car.is-end { opacity: 0; }
.pgrid .pcard .pc-car img.pc-s { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1; opacity: 0; transform: translateX(var(--dx, 0)); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.pgrid .pcard .pc-car img.pc-s.is-on { opacity: 1; transform: none; }
.pgrid .pcard .pc-car img.pc-s.is-off { opacity: 0; transform: translateX(calc(var(--dx, 0) * -.45)); }
.pc-arr { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, .28); opacity: 0; scale: .8; transition: opacity .45s var(--ease), scale .45s var(--ease), background .2s; }
.pc-arr svg { width: 18px; height: 18px; display: block; }
.pc-arr.is-in { opacity: 1; scale: 1; }
.pc-arr.is-in:hover { background: #fff; scale: 1.1; }
.pc-arr--p { left: 14px; }
.pc-arr--n { right: 14px; }
.pgrid[data-cols="4"] .pc-arr { width: 34px; height: 34px; margin-top: -17px; left: auto; }
.pgrid[data-cols="4"] .pc-arr--p { left: 8px; }
.pgrid[data-cols="4"] .pc-arr--n { right: 8px; }
.pscale { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper); }
.pscale__l { padding: 0 10px 0 12px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pscale button { height: 28px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-3); transition: background .22s, color .22s; }
.pscale button svg { display: block; fill: currentColor; }
.pscale button:hover { background: rgba(0, 0, 0, .09); color: var(--ink); }
.pscale button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
@media (min-width: 901px) {
  .pgrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .pgrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .pgrid[data-cols="3"] .pcard__info b { font-size: 22px; }
  .pgrid[data-cols="3"] .pcard__top span { font-size: 19px; }
  .pgrid[data-cols="3"] .pcard__info small { font-size: 17px; }
  .pgrid[data-cols="3"] .pcard__note { font-size: 12.5px; }
  .pgrid[data-cols="4"] .pcard__info { padding: 12px 14px; }
  .pgrid[data-cols="4"] .pcard__info b { font-size: 18px; }
  .pgrid[data-cols="4"] .pcard__top span { font-size: 15px; }
  .pgrid[data-cols="4"] .pcard__info small { font-size: 14px; gap: 4px 8px; }
  .pgrid[data-cols="4"] .pcard__note { font-size: 11.5px; line-height: 1.25; }
  .pgrid[data-cols="4"] .pcard .tag { font-size: 11px; padding: 4px 9px; }
}
@media (max-width: 900px) { .pscale { display: none; } }

/* ---------- sticky-панель каталога: белая, плашки слегка серые, при наведении тёмно-серые с белым текстом ---------- */
.pbar:not(.is-spec) { --chip: #ecece8; --chip-h: #4a4a47; }
.pbar:not(.is-spec) .dd:not(.is-on):not(.is-open) .dd__b { background: var(--chip); }
.pbar:not(.is-spec) .dd:not(.is-on):not(.is-open) .dd__b:hover { background: var(--chip-h); }
.pbar:not(.is-spec) .dd:not(.is-on):not(.is-open) .dd__b:hover .dd__l { color: rgba(255, 255, 255, .72); }
.pbar:not(.is-spec) .dd:not(.is-on):not(.is-open) .dd__b:hover .dd__v,
.pbar:not(.is-spec) .dd:not(.is-on):not(.is-open) .dd__b:hover .dd__c { color: #fff; }
.pbar:not(.is-spec) .pills--s, .pbar:not(.is-spec) .pscale { background: var(--chip); }
.pbar:not(.is-spec) .pills--s .pill:not(.is-active):hover, .pbar:not(.is-spec) .pscale button:not(.is-active):hover { background: var(--chip-h); color: #fff; }
.pbar:not(.is-spec) .pf__more:hover { background: var(--chip-h); color: #fff; box-shadow: inset 0 0 0 1.5px var(--chip-h); }
.pbar:not(.is-spec) .pf__more:hover .pf__badge { background: #fff; color: var(--ink); }
@media (min-width: 901px) {
  .ppage:not(.is-project) .pbar:not(.is-spec) .pbar__panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.ppage:not(.is-project) .header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ПК, обычный стиль: панель критериев каталога — во всю ширину экрана (концов не видно),
   содержимое выровнено по содержимому шапки; на странице проекта снова становится летающей плашкой */
@media (min-width: 901px) {
  html:not(.sc) .pbar__panel { transition: clip-path .75s var(--ease), box-shadow .5s, background-color .5s var(--ease), color .5s var(--ease), margin .6s var(--ease), padding .6s var(--ease); }
  html:not(.sc) .pbar:not(.is-spec) .pbar__panel,
  html:not(.sc) .pbar.is-docked:not(.is-min):not(.is-spec) .pbar__panel { margin: 0 calc(var(--gutter) * -1); padding: 8px calc(var(--gutter) + 52px) 8px var(--gutter); border-radius: 0; clip-path: inset(0 0 0 0 round 0); }
  html:not(.sc) .pbar:not(.is-spec) .pbar__eye { right: var(--gutter); }
  /* свёрнутая — кружок с глазом, как и раньше */
  html:not(.sc) .pbar:not(.is-spec).is-min .pbar__panel { clip-path: inset(0 calc(var(--gutter) - 8px) calc(100% - 52px) calc(100% - var(--gutter) + 8px - 52px) round 26px); }
}

/* ПК: кнопки площади всегда в одну строку (подстраиваются под ширину окна) */
@media (min-width: 901px) {
  .pq__t .pills { flex-wrap: nowrap; gap: clamp(3px, .3vw, 6px); }
  #pQuick .pill { flex: 1 1 auto; padding: 0 clamp(6px, .6vw, 13px); gap: clamp(3px, .3vw, 7px); }
  #pQuick .pill b { font-size: clamp(12px, .68vw, 13px); }
}
@media (min-width: 901px) and (max-width: 1599px) { #pQuick .pill .qt__i { display: none; } }