/* =============================================================================
   cat.css — БАЗОВИЙ шар каталогу «Оберіть планування» (/st/, /st/<slug>/).
   Лише токени й спільні примітиви. Компоненти сторінок — у cat-showcase.css / cat-page.css.
   Підключення:  <link rel="stylesheet" href="/assets/css/cat.css?v=1" />  (після home-v2.css)
   Корінь:       <main class="ev2 em-cat">
   ПАСТКА .ev2 * { margin:0; padding:0 } (home-v2.css): КОЖНЕ правило з margin/padding/gap
   має ≥ 2 класи: `.em-cat .em-cat__x`. Лінт:
     grep -nE '^\.[a-z0-9_-]+\s*\{[^}]*(margin|padding)' cat.css   → має бути порожньо
   Анімуємо лише transform / opacity. Радіус 0 (крім круглих міток).
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Токени */
.em-cat {
  /* колір */
  --bg: #F5F0E7; --bg-soft: #EEE6D8; --panel: #FBF8F2; --plan-bg: #F4F1E9;
  --ink: #3D3A2C; --ink-soft: #5E5A4A; --ink-faint: #6B6756;
  /* --mark — колишній --ink-faint, лише для декору (пунктир, лінійки, hover-рамка); НЕ для тексту (2.4–2.8:1) */
  --mark: #9C967F;
  --line: #DCD4C2; --line-soft: #E7E0D2;
  --accent: #B07A52; --accent-2: #C2A269; --dark: #14120E;
  /* --accent-ink — акцент для ТЕКСТУ й суцільних заливок під білим текстом (≥4.5:1 на --bg/--panel/--bg-soft);
     --accent лишається для великих чисел, ліній, кілець і фокусу */
  --accent-ink: #8A5D3C;
  --free: #2F7D4F; --hold: #6B62B3; --sold: #B04A4A; --sold-bg: #EFE3DE;
  /* шрифти */
  --font-display: "Cormorant Garamond", "CormFB", Georgia, serif;
  --font-ui: "Jost", "JostFB", "Manrope", system-ui, sans-serif;
  /* типографічна шкала */
  --fs-h1: clamp(44px, 6.2vw, 96px);
  --fs-h2: clamp(34px, 4vw, 60px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-fact: clamp(26px, 2.4vw, 36px);
  --fs-body: 16px;
  --fs-ui: 14px;
  --fs-eyebrow: 11px;
  /* розмітка */
  --maxw: 1280px; --pad: clamp(16px, 5vw, 88px); --hd-h: 64px; --nav-h: 52px;
  --sec-y: clamp(64px, 9vw, 128px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --tap: 44px;
  /* рух */
  --ease: cubic-bezier(.22,.61,.36,1);
  --expo: cubic-bezier(.16,1,.3,1);
  --soft: cubic-bezier(.22,.7,.25,1);
  --t-fast: .22s; --t-mid: .45s; --t-slow: .8s;
  /* тіні */
  --sh-1: 0 1px 2px rgba(20,18,14,.06), 0 4px 14px rgba(20,18,14,.06);
  --sh-2: 0 10px 30px rgba(20,18,14,.12);
  --sh-plan: 0 18px 40px -18px rgba(20,18,14,.35);
  /* темне «рідке скло» — лише перемикач підтипів і панель */
  --glass-bg: rgba(20,18,14,.52); --glass-brd: rgba(255,255,255,.14);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.18);
  --glass-blur: blur(18px) saturate(140%);

  color: var(--ink);
  background-color: var(--bg);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 767px) { .em-cat { --fs-body: 15px; } }

/* Фолбеки шрифтів з підігнаними метриками (CLS < 0.05) */
@font-face { font-family: "CormFB"; src: local("Georgia"); size-adjust: 92%; ascent-override: 95%; }
@font-face { font-family: "JostFB"; src: local("Arial"); size-adjust: 97%; }

/* styles.css фарбує кожну парну <section> у #fff — повертаємо фон каталогу */
.em-cat section { background-color: var(--bg); }

/* ---------------------------------------------------------------- 2. Каркас */
.em-cat .em-cat__wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.em-cat .em-cat__sec { padding-block: var(--sec-y); scroll-margin-top: calc(var(--hd-h) + var(--nav-h) + 24px); }
.em-cat .em-cat__sec--soft { background-color: var(--bg-soft); }
.em-cat .em-cat__dark { background-color: var(--dark); color: #fff; }
.em-cat .em-cat__hidden { display: none; }
.em-cat .em-cat__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- 3. Типографіка */
.em-cat .em-cat__eyebrow {
  display: block; margin-block-end: var(--s4);
  font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
}
.em-cat .em-cat__dark .em-cat__eyebrow { color: var(--accent-2); }
.em-cat .em-cat__h1 { font: 500 var(--fs-h1)/.98 var(--font-display); letter-spacing: -.01em; }
.em-cat .em-cat__h1 em { font-style: italic; color: var(--accent-2); }
.em-cat .em-cat__h2 { font: 500 var(--fs-h2)/1.02 var(--font-display); letter-spacing: -.005em; }
.em-cat .em-cat__h3 { font: 500 var(--fs-h3)/1.15 var(--font-display); }
.em-cat .em-cat__lede { max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.em-cat .em-cat__dark .em-cat__lede { color: rgba(255,255,255,.72); }
.em-cat .em-cat__prose { max-width: 64ch; text-wrap: pretty; }
.em-cat .em-cat__prose p + p { margin-block-start: 1em; }
.em-cat .em-cat__note { font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.em-cat .em-cat__num,
.em-cat .em-cat__fact-v { font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.em-cat .em-cat__fact-v { font: 500 var(--fs-fact)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.em-cat .em-cat__fact-k { display: block; margin-block-start: var(--s2); font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.em-cat .em-cat__sup { font-family: var(--font-ui); font-size: .55em; vertical-align: .55em; line-height: 0; }

/* ---------------------------------------------------------------- 4. Посилання й кнопки (≥44 px) */
.em-cat .em-cat__arrow { width: 16px; height: 10px; flex: none; transition: transform var(--t-mid) var(--expo); }
.em-cat .em-cat__link {
  position: relative; display: inline-flex; align-items: center; gap: .6em; min-height: var(--tap);
  font: 500 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: inherit;
}
.em-cat .em-cat__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: var(--accent); transform: scaleX(.18); transform-origin: left center;
  transition: transform var(--t-mid) var(--expo);
}
.em-cat .em-cat__link:hover::after,
.em-cat .em-cat__link:focus-visible::after { transform: scaleX(1); }
.em-cat .em-cat__link:hover .em-cat__arrow,
.em-cat .em-cat__btn:hover .em-cat__arrow { transform: translateX(5px); }

.em-cat .em-cat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: var(--tap); padding: 0 var(--s5);
  font: 500 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: transform var(--t-mid) var(--expo);
}
.em-cat .em-cat__btn--solid { background: var(--ink); color: var(--bg); }
.em-cat .em-cat__btn--solid:hover { background: var(--accent-ink); color: #fff; transform: translateY(-2px); }
.em-cat .em-cat__btn--accent { background: var(--accent-ink); color: #fff; }
.em-cat .em-cat__btn--accent:hover { background: var(--ink); transform: translateY(-2px); }
.em-cat .em-cat__btn--ghost { background: transparent; color: inherit; border-color: var(--line); }
.em-cat .em-cat__btn--ghost:hover { border-color: currentColor; }
.em-cat .em-cat__dark .em-cat__btn--ghost { border-color: rgba(255,255,255,.4); }
.em-cat .em-cat__btn--light { background: var(--bg); color: var(--ink); }
.em-cat .em-cat__btn--light:hover { background: var(--accent-2); transform: translateY(-2px); }
.em-cat .em-cat__btn[disabled],
.em-cat .em-cat__btn.is-disabled { opacity: .45; pointer-events: none; }

/* Чіп фільтра */
.em-cat .em-cat__chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s4);
  font: 500 var(--fs-ui)/1 var(--font-ui); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.em-cat .em-cat__chip:hover { border-color: var(--ink-soft); }
.em-cat .em-cat__chip.is-on,
.em-cat .em-cat__chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Статус лота */
.em-cat .em-cat__badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  font: 500 11px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--ink-soft);
}
.em-cat .em-cat__badge--free { background: var(--free); }
.em-cat .em-cat__badge--hold { background: var(--hold); }
.em-cat .em-cat__badge--sold,
.em-cat .em-cat__badge--installment { background: var(--sold-bg); color: var(--sold); }

/* ---------------------------------------------------------------- 5. Планування на «папері» */
.em-cat .em-cat__plan {
  position: relative; overflow: hidden; background-color: var(--plan-bg);
  display: flex; align-items: center; justify-content: center;
}
.em-cat .em-cat__plan > img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
}
.em-cat .em-cat__plan--shadow > img { filter: drop-shadow(0 18px 22px rgba(20,18,14,.16)); }
.em-cat .em-cat__plan-cap {
  position: absolute; right: var(--s3); bottom: var(--s3); padding: 4px 8px;
  font: 500 12px/1.3 var(--font-ui); color: #fff; background: rgba(20,18,14,.45);
}

/* ---------------------------------------------------------------- 6. Шкала (meter) і кільце */
.em-cat .em-cat__meter { position: relative; height: 8px; overflow: hidden; background: var(--line-soft); }
.em-cat .em-cat__meter-fill {
  position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--expo);
}
.em-cat .is-in .em-cat__meter-fill,
.em-cat .em-cat__meter.is-in .em-cat__meter-fill { transform: scaleX(var(--k, 1)); }

.em-cat .em-cat__ring { display: block; transform: rotate(-90deg); }
.em-cat .em-cat__ring-track { fill: none; stroke: var(--line); }
.em-cat .em-cat__ring-val {
  fill: none; stroke: var(--accent); stroke-linecap: butt;
  transition: stroke-dashoffset 1.4s var(--expo);
}

/* ---------------------------------------------------------------- 7. Поява при скролі (EmCat.ui.reveal) */
/* Будь-який елемент з [data-cat-rv] або .em-cat__rv; стагер — style="--i:N" (80 мс крок).
   JS додає .is-in (на сам елемент або на предка); фолбек 2.6 с робить видимим усе.
   Ховаємо лише коли працює JS: cat-core.js ставить html.em-cat-js (без JS контент видно одразу). */
.em-cat-js .em-cat [data-cat-rv],
.em-cat-js .em-cat .em-cat__rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--expo), transform var(--t-slow) var(--expo);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.em-cat-js .em-cat [data-cat-rv].is-in,
.em-cat-js .em-cat .em-cat__rv.is-in,
.em-cat-js .em-cat .is-in [data-cat-rv],
.em-cat-js .em-cat .is-in .em-cat__rv { opacity: 1; transform: none; }
.em-cat-js .em-cat [data-cat-rv="fade"] { transform: none; }

/* Лічильник (EmCat.ui.countUp): ширина з цифр однакова — без стрибків */
.em-cat [data-count],
.em-cat .em-cat__count { font-variant-numeric: lining-nums tabular-nums; }

/* Скелет завантаження: лише opacity */
.em-cat .em-cat__skel { background: var(--line-soft); animation: emCatPulse 1.4s var(--soft) infinite alternate; }
@keyframes emCatPulse { from { opacity: .55; } to { opacity: 1; } }

/* ---------------------------------------------------------------- 8. Фокус і дотик */
.em-cat :focus { outline: none; }
.em-cat :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.em-cat .em-cat__dark :focus-visible { outline-color: var(--accent-2); }
.em-cat .em-cat__tap { min-height: var(--tap); min-width: var(--tap); }
@media (pointer: coarse) {
  .em-cat a, .em-cat button { -webkit-tap-highlight-color: rgba(176,122,82,.12); }
}

/* ---------------------------------------------------------------- 9. Менше руху */
@media (prefers-reduced-motion: reduce) {
  .em-cat *, .em-cat *::before, .em-cat *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .em-cat-js .em-cat [data-cat-rv],
  .em-cat-js .em-cat .em-cat__rv { opacity: 1; transform: none; }
  .em-cat .em-cat__meter-fill { transform: scaleX(var(--k, 1)); }
  .em-cat .em-cat__skel { animation: none; }
  /* styles.css ставить html { scroll-behavior:smooth } — якорі й меню мають стрибати без анімації */
  html:has(main.em-cat) { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- 10. Маленький Шейх
   Ходячий маскот із sheikh.js (position:fixed; bottom:6px; z-index 120/121, спрайт ловить
   кліки й відкриває чат) на сторінках каталогу перекривав ціни у змісті, картки лотів,
   шахматку, липку навігацію, а на телефоні — кнопки нижнього аркуша «Фільтри».
   На цих сторінках Шейх лишається в кнопці «Написати в чат» і в CTA «Запитати Маленького
   Шейха». cat.css підключено лише на /st/ і /st/<slug>/ — на інших сторінках маскот як був. */
body > .sheikh,
body > .sheikh-side,
body > .sheikh-toggle { display: none !important; }

/* ---------------------------------------------------------------- 11. Кнопка «Написати в чат» над липкою навігацією
   Поки навігація категорії ще в потоці внизу першого екрана, плаваюча кнопка (.contact-hub-fab, site.js) закривала
   «Залишити заявку». cat-page.js на цей час піднімає кнопку інлайн-transform (лише transform). */
.contact-hub-fab { transition-property: transform; transition-duration: .35s; transition-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { .contact-hub-fab { transition-duration: 0s; } }