/* =============================================================================
   cat-showcase.css — сторінка /st/ «Оберіть планування» (герой-зміст, шахові блоки
   форматів з панеллю підтипів, генплан). Базові токени/примітиви — у cat.css.
   ПАСТКА .ev2 *: кожне правило з margin/padding/gap — ≥ 2 класи (.em-cat .em-cat__x).
   Анімуємо лише transform / opacity. Радіус 0, крім круглих міток (50%).
   ============================================================================= */

/* Шапка над темним героєм: «скляна» кнопка заявки інакше біла на білому (liquid-glass.css
   має правило лише для data-hero="full"). Файл підключено тільки на /st/. */
body[data-hero="dark"] .ev2 .header:not(.scrolled) .header-cta .btn-ghost {
  background: rgba(20,18,14,.5); color: #fff; border-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 28px -16px rgba(0,0,0,.55);
}
body[data-hero="dark"] .ev2 .header:not(.scrolled) .header-cta .btn-ghost:hover { background: rgba(20,18,14,.84); border-color: rgba(255,255,255,.85); }

/* ============================================================== 1. ГЕРОЙ */
.em-cat .em-cat__hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--dark); color: #F5F0E7;
  padding-block: calc(var(--hd-h) + clamp(40px, 7vw, 104px)) clamp(56px, 7vw, 96px);
}
.em-cat .em-cat__hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/assets/img/cat/cat-hub-texture-v1.webp") center 40% / cover no-repeat;
  opacity: .18;
}
.em-cat .em-cat__hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(110% 90% at 88% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(20,18,14,.35), rgba(20,18,14,0) 30%, rgba(20,18,14,.55));
}
.em-cat .em-cat__hero .em-cat__hero-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center;
}
.em-cat .em-cat__hero .em-cat__eyebrow { color: var(--accent-2); }
.em-cat .em-cat__hero .em-cat__h1 { color: #F5F0E7; min-height: 1.96em; }
.em-cat .em-cat__hero .em-cat__h1 em { display: block; padding-inline-start: .5em; }
.em-cat .em-cat__hero .em-cat__hero-sub {
  margin-block-start: var(--s6);
  font: 500 clamp(16px, 1.35vw, 19px)/1.45 var(--font-ui); color: #F5F0E7;
}
.em-cat .em-cat__hero .em-cat__lede { margin-block-start: var(--s2); color: rgba(255,255,255,.66); }

/* живі цифри */
.em-cat .em-cat__hero .em-cat__stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0;
  margin-block-start: var(--s7); border-top: 1px solid rgba(255,255,255,.14);
}
.em-cat .em-cat__stats .em-cat__stat { padding: 18px 32px 0 0; }
.em-cat .em-cat__stats .em-cat__stat + .em-cat__stat { padding-inline-start: 28px; border-left: 1px solid rgba(255,255,255,.12); }
.em-cat .em-cat__stats .em-cat__stat-l {
  font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.em-cat .em-cat__stats .em-cat__stat-v {
  display: block; margin-block-start: 10px; min-height: 36px; white-space: nowrap;
  font: 500 clamp(28px, 2.6vw, 38px)/1 var(--font-display); color: #F5F0E7;
  font-variant-numeric: lining-nums tabular-nums;
}
.em-cat .em-cat__stats .em-cat__stat-v small {
  margin-inline-start: 4px; font: 400 13px/1 var(--font-ui); color: rgba(255,255,255,.5); letter-spacing: 0;
}
.em-cat .em-cat__stats .em-cat__skel { display: inline-block; width: 4.2em; height: .8em; background: rgba(255,255,255,.12); }
/* «Здача» — дата за політикою («з 30.09.2027») + будинки/«інші — уточнюйте» окремим рядком, що переноситься */
.em-cat .em-cat__stats .em-cat__stat[data-stat="handover"] .em-cat__stat-v small {
  display: block; margin-inline-start: 0; margin-block-start: 8px; max-width: 24ch; white-space: normal; line-height: 1.35;
}

/* штамп свіжості */
.em-cat .em-cat__hero .em-cat__stamp {
  display: inline-flex; align-items: center; gap: 10px; margin-block-start: var(--s5);
  font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.em-cat .em-cat__stamp .em-cat__stamp-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4FB07A; flex: none;
  animation: emScPulse 2s var(--soft) infinite alternate;
}
@keyframes emScPulse { from { opacity: .4; } to { opacity: 1; } }

/* зміст: 6 форматів */
.em-cat .em-cat__hero .em-cat__toc-label {
  display: flex; justify-content: space-between; margin-block-end: var(--s3);
  color: rgba(255,255,255,.62);
}
.em-cat .em-cat__hero .em-cat__toc-label::after { content: attr(data-right); }
.em-cat .em-cat__toc .em-cat__toc-list { list-style: none; border-bottom: 1px solid rgba(255,255,255,.14); }
.em-cat .em-cat__toc .em-cat__toc-row {
  position: relative; display: grid; grid-template-columns: 36px auto 1fr auto;
  grid-template-areas: "n name name price" "n area free price";
  align-items: center; column-gap: 0; min-height: 68px; padding-block: 11px;
  border-top: 1px solid rgba(255,255,255,.14); color: #F5F0E7; text-decoration: none;
}
.em-cat .em-cat__toc .em-cat__toc-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-2);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-mid) var(--expo);
}
.em-cat .em-cat__toc .em-cat__toc-row:hover::after,
.em-cat .em-cat__toc .em-cat__toc-row:focus-visible::after { transform: scaleX(1); }
.em-cat .em-cat__toc .em-cat__toc-n {
  grid-area: n; align-self: start; padding-block-start: 6px;
  font: 400 15px/1 var(--font-display); color: rgba(255,255,255,.62);
}
.em-cat .em-cat__toc .em-cat__toc-row:hover .em-cat__toc-n { color: var(--accent-2); }
.em-cat .em-cat__toc .em-cat__toc-name { grid-area: name; font: 500 clamp(21px, 1.8vw, 25px)/1.15 var(--font-display); }
.em-cat .em-cat__toc .em-cat__toc-area { grid-area: area; margin-block-start: 3px; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.5); min-height: 17px; }
.em-cat .em-cat__toc .em-cat__toc-free { grid-area: free; align-self: start; margin-block-start: 3px; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.6); white-space: nowrap; }
.em-cat .em-cat__toc .em-cat__toc-free::before { content: "·"; margin-inline: 7px; color: rgba(255,255,255,.35); }
.em-cat .em-cat__toc .em-cat__toc-free.is-sold { color: rgba(255,255,255,.38); }
.em-cat .em-cat__toc .em-cat__toc-price {
  grid-area: price; padding-inline-start: 16px; min-width: 104px; text-align: right; white-space: nowrap;
  font: 500 15px/1 var(--font-ui); font-variant-numeric: lining-nums tabular-nums; color: #F5F0E7;
}
.em-cat .em-cat__toc .em-cat__toc-price small { font-size: 11px; color: rgba(255,255,255,.62); margin-inline-end: 4px; }

/* ============================================================== 2. ШАХОВІ БЛОКИ */
.em-cat .em-cat__scs { position: relative; }
.em-cat .em-cat__sc { position: relative; scroll-margin-top: var(--sc-top, 76px); }
/* WCAG 2.4.11: фокус з клавіатури не ховається під фіксованою шапкою (/st/ не вантажить cat-page.css) */
.ev2.em-cat[data-cat-showcase] :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
  scroll-margin-top: calc(var(--sc-top, 76px) + 16px); scroll-margin-bottom: 16px;
}
.em-cat .em-cat__sc + .em-cat__sc { border-top: 1px solid var(--line-soft); }
.em-cat .em-cat__sc .em-cat__sc-in {
  max-width: none; padding-inline: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "media body"; align-items: stretch;
}
.em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-in { grid-template-areas: "body media"; }

/* --- медіа */
.em-cat .em-cat__sc .em-cat__sc-media {
  grid-area: media; position: relative; overflow: hidden; margin: 0;
  min-height: min(calc(100svh - var(--sc-top, 76px)), 880px); background-color: var(--bg-soft);
}
.em-cat .em-cat__sc .em-cat__sc-layer {
  position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--soft);
}
.em-cat .em-cat__sc .em-cat__sc-layer.is-on { opacity: 1; }
.em-cat .em-cat__sc .em-cat__sc-layer.is-base { opacity: 1; }
.em-cat .em-cat__sc.is-sub .em-cat__sc-layer.is-base { opacity: 0; }
.em-cat .em-cat__sc .em-cat__sc-layer.is-base > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.08); transition: transform 1.6s var(--expo);
}
.em-cat .em-cat__sc.is-in .em-cat__sc-layer.is-base > img { transform: scale(1); }
.em-cat .em-cat__sc.is-in .em-cat__sc-media:hover .em-cat__sc-layer.is-base > img { transform: scale(1.04); transition-duration: 1.8s; transition-timing-function: var(--soft); }
.em-cat .em-cat__sc .em-cat__sc-layer.is-base::after {
  content: ""; position: absolute; inset: 0; background: rgba(176,122,82,.12); opacity: 0;
  transition: opacity .6s var(--soft); pointer-events: none;
}
.em-cat .em-cat__sc .em-cat__sc-media:hover .em-cat__sc-layer.is-base::after { opacity: 1; }
.em-cat .em-cat__sc .em-cat__sc-layer.is-base::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 36%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20,18,14,.32));
}

/* шар планування на «папері» */
.em-cat .em-cat__sc .em-cat__sc-layer--plan { background-color: var(--plan-bg); }
.em-cat .em-cat__sc .em-cat__sc-sheet {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 11% 9% 15%;
}
.em-cat .em-cat__sc .em-cat__sc-sheet > img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: var(--sh-plan); background-color: inherit;
  transform: scale(1.015); transition: transform .9s var(--expo);
}
.em-cat .em-cat__sc .em-cat__sc-layer.is-on .em-cat__sc-sheet > img { transform: scale(1); }
.em-cat .em-cat__sc .em-cat__sc-layer--3d .em-cat__sc-sheet { padding: 8% 7% 13%; }
.em-cat .em-cat__sc .em-cat__sc-layer--3d .em-cat__sc-sheet > img { box-shadow: none; }

/* диптих «два плани з’їжджаються» (об’єднання) */
.em-cat .em-cat__sc .em-cat__pair {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12% 7% 16%;
}
.em-cat .em-cat__pair .em-cat__pair-sheet {
  position: relative; flex: 0 1 44%; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: transform .7s var(--expo);
}
.em-cat .em-cat__pair .em-cat__pair-sheet > img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: var(--sh-plan); }
.em-cat .em-cat__pair .em-cat__pair-sheet--l { transform: translateX(-14px); }
.em-cat .em-cat__pair .em-cat__pair-sheet--r { transform: translateX(14px); }
.em-cat .em-cat__pair .em-cat__pair-seam {
  position: absolute; left: 50%; top: 12%; bottom: 16%; width: 0; border-left: 1px dashed var(--accent);
  opacity: 1; transition: opacity .4s var(--soft) .5s;
}
.em-cat .em-cat__pair .em-cat__pair-plus {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--panel); box-shadow: var(--sh-1); color: var(--accent);
  font: 400 18px/1 var(--font-ui); transform: scale(.6); transition: transform .4s var(--expo) .15s;
  z-index: 2;
}
.em-cat .em-cat__sc-layer.is-on .em-cat__pair .em-cat__pair-sheet { transform: none; }
.em-cat .em-cat__sc-layer.is-on .em-cat__pair .em-cat__pair-seam { opacity: 0; }
.em-cat .em-cat__sc-layer.is-on .em-cat__pair .em-cat__pair-plus { transform: scale(1); }

/* паспарту, фоліо, підпис */
.em-cat .em-cat__sc .em-cat__sc-mat {
  position: absolute; inset: 14px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255,255,255,.55); transition: opacity .55s var(--soft);
}
.em-cat .em-cat__sc .em-cat__sc-mat--ink { border-color: rgba(61,58,44,.25); opacity: 0; }
.em-cat .em-cat__sc.is-sub .em-cat__sc-mat { opacity: 0; }
.em-cat .em-cat__sc.is-sub .em-cat__sc-mat--ink { opacity: 1; }
.em-cat .em-cat__sc .em-cat__sc-folio {
  position: absolute; left: 34px; bottom: 32px; z-index: 4;
  font: 500 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: .24em; color: #fff;
  padding: 5px 6px 5px 8px; background: rgba(20,18,14,.45);  /* та сама темна підкладка, що й у підпису — читається на будь-якому фото */
  transition: opacity .4s var(--soft);
}
.em-cat .em-cat__sc .em-cat__sc-cap {
  position: absolute; right: 34px; bottom: 26px; z-index: 4; max-width: 64%;
  padding: 6px 10px; font: 400 12px/1.35 var(--font-ui); color: #fff; background: rgba(20,18,14,.45);
  text-align: right; transition: opacity .3s var(--soft);
}
.em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-cap { right: auto; left: 34px; text-align: left; }
.em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-folio { left: auto; right: 34px; bottom: auto; top: 32px; }
.em-cat .em-cat__sc.is-sub .em-cat__sc-cap { color: var(--ink); background: rgba(251,248,242,.92); border: 1px solid var(--line-soft); }
.em-cat .em-cat__sc.is-sub .em-cat__sc-folio { color: var(--ink-soft); background: rgba(251,248,242,.92); }
.em-cat .em-cat__sc .em-cat__sc-cap.is-swap { opacity: 0; }

/* завіса (поява) */
.em-cat .em-cat__sc .em-cat__sc-curtain {
  position: absolute; inset: 0; z-index: 5; background-color: var(--bg-soft);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-curtain { transform: scaleX(1); transition: transform 1.1s var(--expo); }
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-curtain { transform: scaleX(0); }
.em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-curtain { transform-origin: right center; }

/* --- текст */
.em-cat .em-cat__sc .em-cat__sc-body {
  grid-area: body; display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: clamp(56px, 6vw, 96px) clamp(32px, 4.4vw, 88px);
}
.em-cat .em-cat__sc .em-cat__sc-body > * { width: 100%; max-width: 620px; }
.em-cat .em-cat__sc .em-cat__sc-eyebrow { display: flex; align-items: center; gap: 14px; margin-block-end: 0; }
.em-cat .em-cat__sc .em-cat__sc-eyebrow::after { content: ""; flex: 0 1 110px; height: 1px; background: var(--line); }
.em-cat .em-cat__sc .em-cat__sc-title {
  margin-block-start: 18px; font: 500 var(--fs-h2)/1.02 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.em-cat .em-cat__sc .em-cat__sc-meta {
  margin-block-start: 12px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); min-height: 20px;
}
.em-cat .em-cat__sc .em-cat__sc-meta b { font-weight: 500; color: var(--ink); }
.em-cat .em-cat__sc .em-cat__sc-tag {
  margin-block-start: 14px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty;
}
/* поява тексту */
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-title,
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-eyebrow,
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-meta,
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-tag {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--expo), transform .8s var(--expo);
}
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-title { transition-delay: .2s; }
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-meta { transition-delay: .28s; }
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-tag { transition-delay: .34s; }
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-title,
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-eyebrow,
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-meta,
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-tag { opacity: 1; transform: none; }

/* --- слот: факти й панель в одній клітинці (CLS 0) */
.em-cat .em-cat__sc .em-cat__sc-slot { position: relative; display: grid; margin-block-start: var(--s6); }
.em-cat .em-cat__sc-slot > .em-cat__sc-rest,
.em-cat .em-cat__sc-slot > .em-cat__sc-panel { grid-area: 1 / 1; }
.em-cat .em-cat__sc-slot > .em-cat__sc-facts { grid-area: 1 / 1; }
.em-cat .em-cat__sc .em-cat__sc-rest { align-self: start; transition: opacity .32s var(--ease) .12s, transform .32s var(--ease) .12s; }
.em-cat .em-cat__sc .em-cat__sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.em-cat .em-cat__sc-facts .em-cat__sc-fact { border-top: 1px solid var(--line); padding-block-start: 14px; min-width: 0; }
.em-cat .em-cat__sc-facts .em-cat__sc-fact dt {
  font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.em-cat .em-cat__sc-facts .em-cat__sc-fact dd { margin-block-start: 8px; }
.em-cat .em-cat__sc-facts .em-cat__sc-fv {
  display: block; min-height: 1em; white-space: nowrap;
  font: 500 var(--fs-fact)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
}
.em-cat .em-cat__sc-facts .em-cat__sc-fv.is-accent { color: var(--accent); }
/* довге значення (діапазон дат здачі) — дрібніше й з переносом, а не обрізане */
.em-cat .em-cat__sc-facts .em-cat__sc-fv.is-long { white-space: normal; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.15; }
.em-cat .em-cat__sc-facts .em-cat__sc-fv.is-wrap { white-space: normal; line-height: 1.1; }
.em-cat .em-cat__sc-facts .em-cat__sc-fv small { font: 400 13px/1 var(--font-ui); color: var(--ink-faint); margin-inline-start: 4px; }
.em-cat .em-cat__sc-facts .em-cat__sc-fs { display: block; margin-block-start: 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.em-cat .em-cat__sc-facts .em-cat__skel { display: inline-block; width: 5em; height: .75em; }
.em-cat-js .em-cat .em-cat__sc .em-cat__sc-fact { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--expo), transform .7s var(--expo); transition-delay: calc(.36s + var(--i, 0) * 80ms); }
.em-cat-js .em-cat .em-cat__sc.is-in .em-cat__sc-fact { opacity: 1; transform: none; }

/* підказка «Наведіть — N планувань» з мікро-планами */
.em-cat .em-cat__sc .em-cat__sc-cue { display: none; align-items: center; gap: 14px; margin-block-start: 28px; font-size: 13px; color: var(--ink-soft); }
.em-cat .em-cat__sc-cue .em-cat__sc-dots { display: flex; gap: 6px; }
.em-cat .em-cat__sc-cue .em-cat__sc-dot {
  width: 40px; height: 40px; border: 1px solid var(--line-soft); background-color: var(--plan-bg);
  display: grid; place-items: center; overflow: hidden;
}
.em-cat .em-cat__sc-cue .em-cat__sc-dot > img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.em-cat .em-cat__sc-cue .em-cat__sc-dot.is-sold { opacity: .45; }
.em-cat .em-cat__sc-cue .em-cat__sc-cue-t::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--accent); vertical-align: middle; margin-inline-end: 10px; }

/* --- панель підтипів */
.em-cat .em-cat__sc .em-cat__sc-panel { display: none; position: relative; list-style: none; align-self: start; }
.em-cat .em-cat__sc-panel .em-cat__sc-ph {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px 88px 116px; column-gap: 12px; align-items: end;
  height: 30px; padding-block-end: 8px; border-bottom: 1px solid var(--line);
  font: 500 10.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.em-cat .em-cat__sc-panel .em-cat__sc-ph > span:nth-child(3),
.em-cat .em-cat__sc-panel .em-cat__sc-ph > span:nth-child(4) { text-align: right; }
.em-cat .em-cat__sc-panel .em-cat__sc-hl {
  position: absolute; left: 0; right: 0; top: 30px; height: 64px; z-index: 0; pointer-events: none;
  background-color: var(--bg-soft); opacity: 0;
  transform: translateY(calc(var(--row, 0) * 64px));
  transition: transform .35s var(--expo), opacity .25s var(--soft);
}
.em-cat .em-cat__sc-panel.has-hl .em-cat__sc-hl { opacity: 1; }
.em-cat .em-cat__sc-panel .em-cat__sc-li { position: relative; z-index: 1; }
.em-cat .em-cat__sc-panel .em-cat__sc-li.is-extra { display: none; }
.em-cat .em-cat__sc-panel.is-more .em-cat__sc-li.is-extra { display: block; }
.em-cat .em-cat__sc-panel.is-more .em-cat__sc-li--more { display: none; }
.em-cat .em-cat__sc-panel .em-cat__sc-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px 88px 116px; column-gap: 12px; align-items: center;
  height: 64px; padding-inline-end: 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
.em-cat .em-cat__sc-row .em-cat__sc-thumb {
  width: 52px; height: 50px; display: grid; place-items: center; overflow: hidden;
  background-color: var(--plan-bg); border: 1px solid var(--line-soft);
}
.em-cat .em-cat__sc-row .em-cat__sc-thumb > img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.em-cat .em-cat__sc-row .em-cat__sc-thumb.is-pair { grid-template-columns: 1fr 1fr; gap: 1px; }
.em-cat .em-cat__sc-row .em-cat__sc-thumb.is-pair > img { padding: 3px 1px; }
.em-cat .em-cat__sc-row .em-cat__sc-thumb.is-photo > img { object-fit: cover; padding: 0; }
.em-cat .em-cat__sc-row .em-cat__sc-name { min-width: 0; }
.em-cat .em-cat__sc-row .em-cat__sc-name b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 500 15px/1.2 var(--font-ui); }
.em-cat .em-cat__sc-row .em-cat__sc-name small { display: block; margin-block-start: 2px; font-size: 12px; line-height: 1.3; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-cat .em-cat__sc-row .em-cat__sc-name.is-note2 small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25; }
.em-cat .em-cat__sc-row .em-cat__sc-free { text-align: right; white-space: nowrap; }
.em-cat .em-cat__sc-row .em-cat__sc-free b { display: block; font: 500 20px/1 var(--font-display); color: var(--free); font-variant-numeric: lining-nums tabular-nums; }
.em-cat .em-cat__sc-row .em-cat__sc-free small { display: block; margin-block-start: 3px; font-size: 11px; color: var(--ink-faint); }
.em-cat .em-cat__sc-row .em-cat__sc-price { text-align: right; white-space: nowrap; font: 500 15px/1.2 var(--font-ui); font-variant-numeric: lining-nums tabular-nums; }
.em-cat .em-cat__sc-row .em-cat__sc-price small { display: block; margin-block-start: 3px; font: 400 11px/1 var(--font-ui); color: var(--ink-faint); }
.em-cat .em-cat__sc-row .em-cat__sc-hand { font-size: 12px; line-height: 1.3; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.em-cat .em-cat__sc-row .em-cat__sc-hand small { display: block; color: var(--ink-faint); font-size: 11px; line-height: 1.25; }
.em-cat .em-cat__sc-row .em-cat__sc-hand small > span { display: block; white-space: nowrap; }
.em-cat .em-cat__sc-row .em-cat__sc-go { position: absolute; right: 4px; top: 50%; opacity: 0; transform: translate(-6px, -50%); color: var(--accent); transition: opacity .3s var(--soft), transform .35s var(--expo); }
.em-cat .em-cat__sc-row:hover .em-cat__sc-go,
.em-cat .em-cat__sc-row:focus-visible .em-cat__sc-go { opacity: 1; transform: translate(0, -50%); }
/* розпродано — чесно: рядок лишається, приглушений */
.em-cat .em-cat__sc-row.is-sold .em-cat__sc-name b,
.em-cat .em-cat__sc-row.is-sold .em-cat__sc-price { color: var(--ink-faint); }
.em-cat .em-cat__sc-row.is-sold .em-cat__sc-thumb { opacity: .55; }
.em-cat .em-cat__sc-row .em-cat__sc-soldtag {
  display: inline-block; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--sold) 45%, transparent);
  font: 500 10px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sold); white-space: nowrap;
}
.em-cat .em-cat__sc-panel .em-cat__sc-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  font: 500 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink, #8A5D3C);
  background: none; border: 0; cursor: pointer;
}

/* --- CTA */
.em-cat .em-cat__sc .em-cat__sc-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; margin-block-start: var(--s6); }
.em-cat .em-cat__sc-cta .em-cat__sc-link { color: var(--ink); }
.em-cat .em-cat__sc-cta .em-cat__sc-link-n { letter-spacing: .06em; color: var(--ink-faint); text-transform: none; font-size: 12px; }
.em-cat .em-cat__sc-cta .em-cat__sc-note { font-size: 12px; line-height: 1.45; color: var(--ink-faint); max-width: 40ch; }

/* --- пігулки (мобільний / тач / без JS) */
.em-cat .em-cat__sc .em-cat__sc-pills {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-block-start: var(--s5);
}
.em-cat .em-cat__sc-pills .em-cat__sc-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); background-color: var(--panel); color: var(--ink);
  font: 500 14px/1.2 var(--font-ui); white-space: nowrap; text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.em-cat .em-cat__sc-pills .em-cat__sc-pill:active { transform: scale(.98); }
.em-cat .em-cat__sc-pills .em-cat__sc-pill-meta { font-weight: 400; font-size: 13px; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.em-cat .em-cat__sc-pills .em-cat__sc-pill.is-sold { border-style: dashed; background-color: transparent; color: var(--ink-faint); }
.em-cat .em-cat__sc-pills .em-cat__sc-pill.is-sold .em-cat__sc-pill-meta { color: var(--sold); }
.em-cat .em-cat__sc .em-cat__sc-pills.is-scroll {
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x, 16px)); padding-inline: var(--pad-x, 16px); scroll-padding-inline: var(--pad-x, 16px);
}
.em-cat .em-cat__sc-pills.is-scroll::-webkit-scrollbar { display: none; }
.em-cat .em-cat__sc-pills.is-scroll .em-cat__sc-pill-item { scroll-snap-align: start; flex: none; }

/* --- режим наведення (desktop, pointer:fine, ≥1024) */
.em-cat.is-hover .em-cat__sc .em-cat__sc-pills { display: none; }
.em-cat.is-hover .em-cat__sc .em-cat__sc-panel { display: block; pointer-events: none; }
.em-cat.is-hover .em-cat__sc .em-cat__sc-cue { display: flex; }
.em-cat.is-hover .em-cat__sc .em-cat__sc-panel .em-cat__sc-li,
.em-cat.is-hover .em-cat__sc .em-cat__sc-panel .em-cat__sc-ph {
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.em-cat.is-hover .em-cat__sc.is-open .em-cat__sc-panel { pointer-events: auto; }
.em-cat.is-hover .em-cat__sc.is-open .em-cat__sc-panel .em-cat__sc-li,
.em-cat.is-hover .em-cat__sc.is-open .em-cat__sc-panel .em-cat__sc-ph {
  opacity: 1; transform: none;
  transition: opacity .5s var(--expo), transform .5s var(--expo);
  transition-delay: calc(var(--i, 0) * 60ms + 160ms);
}
.em-cat.is-hover .em-cat__sc.is-open .em-cat__sc-panel .em-cat__sc-ph { transition-delay: 120ms; }
.em-cat.is-hover .em-cat__sc.is-open .em-cat__sc-rest {
  opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden;
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
}

/* ============================================================== 3. ГЕНПЛАН */
.em-cat .em-cat__gp { padding-block: var(--sec-y); background-color: var(--bg); border-top: 1px solid var(--line-soft); }
.em-cat .em-cat__gp .em-cat__gp-in { position: relative; }
.em-cat .em-cat__gp .em-cat__sec-hd { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
.em-cat .em-cat__gp .em-cat__sec-hd > .em-cat__eyebrow,
.em-cat .em-cat__gp .em-cat__sec-hd > .em-cat__h2 { grid-column: 1; }
.em-cat .em-cat__gp .em-cat__sec-sub { grid-column: 1; margin-block-start: 16px; max-width: 52ch; color: var(--ink-soft); }
.em-cat .em-cat__gp .em-cat__gp-ready { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; gap: 16px; }
.em-cat .em-cat__gp-ready .em-cat__gp-ready-t { font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-width: 22ch; }
.em-cat .em-cat__gp-ready .em-cat__gp-ready-t b { display: block; font: 500 28px/1 var(--font-display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

.em-cat .em-cat__gp .em-cat__gp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 32px; }
.em-cat .em-cat__gp-filter .em-cat__gp-filter-l { font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-inline-end: 8px; }
.em-cat .em-cat__gp-filter .em-cat__chip { font-size: 13px; background-color: var(--panel); }
.em-cat .em-cat__gp-filter .em-cat__chip[aria-pressed="true"] { background-color: var(--ink); }

.em-cat .em-cat__gp .em-cat__gp-map { position: relative; margin-block-start: 20px; }
.em-cat .em-cat__gp .em-cat__gp-scroll { position: relative; }
.em-cat .em-cat__gp .em-cat__gp-stage { position: relative; aspect-ratio: 1000 / 620; width: 100%; max-width: calc(72svh * 1000 / 620); margin-inline: auto; }
.em-cat .em-cat__gp .em-cat__gp-bg {
  position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -56px rgba(20,18,14,.55);
}
.em-cat .em-cat__gp-bg .em-cat__gp-svg { display: block; width: 100%; height: 100%; }
.em-cat .em-cat__gp-svg .gp-ground { fill: #ECE4D4; }
.em-cat .em-cat__gp-svg .gp-green { fill: #D9DEC6; opacity: .75; }
.em-cat .em-cat__gp-svg .gp-road { fill: none; stroke: #F8F4EC; stroke-width: 30; stroke-linecap: round; }
.em-cat .em-cat__gp-svg .gp-road--2 { stroke-width: 18; }
.em-cat .em-cat__gp-svg .gp-road-c { fill: none; stroke: #E2D8C5; stroke-width: 1.5; stroke-dasharray: 10 12; }
.em-cat .em-cat__gp-svg .gp-fp { transition: opacity .45s var(--soft); }
.em-cat .em-cat__gp-svg .gp-shadow { fill: rgba(20,18,14,.16); }
.em-cat .em-cat__gp-svg .gp-roof { fill: #4A4536; }
.em-cat .em-cat__gp-svg .gp-fp--th .gp-roof { fill: #6B5A48; }
.em-cat .em-cat__gp-svg .gp-fp--prj .gp-roof { fill: #BDB5A2; }
.em-cat .em-cat__gp-svg .gp-edge { fill: var(--ink-faint); }
.em-cat .em-cat__gp-svg .gp-fp--finishing .gp-edge { fill: var(--free); }
.em-cat .em-cat__gp-svg .gp-fp--building .gp-edge { fill: var(--accent-2); }
.em-cat .em-cat__gp-svg .gp-fp--project .gp-edge { fill: #A9A18B; }
.em-cat .em-cat__gp-svg .gp-units { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.em-cat .em-cat__gp-svg .gp-fp.is-on .gp-roof { fill: var(--accent); }
.em-cat .em-cat__gp-map.is-filter .gp-fp { opacity: .3; }
.em-cat .em-cat__gp-map.is-filter .gp-fp.is-match { opacity: 1; }

.em-cat .em-cat__gp .em-cat__gp-pins { position: absolute; inset: 0; }
.em-cat .em-cat__gp-pins .em-cat__gp-pin {
  position: absolute; width: 0; height: 0; z-index: 2; transition: opacity .45s var(--soft);
}
.em-cat .em-cat__gp-pins .em-cat__gp-pin.is-open,
.em-cat .em-cat__gp-pins .em-cat__gp-pin:hover,
.em-cat .em-cat__gp-pins .em-cat__gp-pin:focus-within { z-index: 20; }
.em-cat .em-cat__gp-map.is-filter .em-cat__gp-pin { opacity: .35; }
.em-cat .em-cat__gp-map.is-filter .em-cat__gp-pin.is-match { opacity: 1; }
.em-cat .em-cat__gp-pin .em-cat__gp-hit {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
}
.em-cat .em-cat__gp-pin .em-cat__gp-ring { position: absolute; inset: 1px; width: 42px; height: 42px; transform: rotate(-90deg); }
.em-cat .em-cat__gp .gp-ring-t,
.em-cat .em-cat__gp .gp-ring-v { fill: none; }
.em-cat .em-cat__gp-ring .gp-ring-t { fill: none; stroke: rgba(251,248,242,.85); stroke-width: 3; }
.em-cat .em-cat__gp-ring .gp-ring-v { fill: none; stroke: var(--free); stroke-width: 3; }
.em-cat .em-cat__gp-pin--building .em-cat__gp-ring .gp-ring-v { stroke: var(--accent-2); }
.em-cat .em-cat__gp-pin .em-cat__gp-dot {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-ink, #8A5D3C); box-shadow: 0 6px 16px -6px rgba(20,18,14,.6);
  font: 600 11px/1 var(--font-ui); letter-spacing: 0; color: #fff; font-variant-numeric: lining-nums tabular-nums;
  transition: transform .35s var(--expo);
}
.em-cat .em-cat__gp-pin--nosale .em-cat__gp-label { display: none; }
.em-cat .em-cat__gp-pin--nosale .em-cat__gp-dot { background: var(--panel); color: var(--ink-soft); border: 1px dashed var(--ink-faint); box-shadow: none; }
.em-cat .em-cat__gp-pin:hover .em-cat__gp-dot,
.em-cat .em-cat__gp-pin.is-open .em-cat__gp-dot,
.em-cat .em-cat__gp-pin:focus-within .em-cat__gp-dot { transform: scale(1.14); }
.em-cat .em-cat__gp-pin .em-cat__gp-label {
  position: absolute; left: 24px; top: -10px; padding: 3px 8px; white-space: nowrap; pointer-events: none;
  font: 500 11px/14px var(--font-ui); letter-spacing: .04em; color: var(--ink); background: rgba(251,248,242,.92);
  border: 1px solid var(--line-soft);
}
.em-cat .em-cat__gp-pin.is-left .em-cat__gp-label { left: auto; right: 24px; }

/* картка будинку */
.em-cat .em-cat__gp-pin .em-cat__gp-card {
  position: absolute; left: 0; bottom: 30px; width: 300px; z-index: 5;
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .28s var(--soft), transform .35s var(--expo), visibility 0s linear .35s;
}
.em-cat .em-cat__gp-pin.is-down .em-cat__gp-card { bottom: auto; top: 30px; transform: translate(-50%, -8px); }
.em-cat .em-cat__gp-pin.is-edge-l .em-cat__gp-card { transform: translate(-40px, 8px); }
.em-cat .em-cat__gp-pin.is-edge-r .em-cat__gp-card { transform: translate(calc(-100% + 40px), 8px); }
.em-cat .em-cat__gp-pin.is-edge-l.is-down .em-cat__gp-card { transform: translate(-40px, -8px); }
.em-cat .em-cat__gp-pin.is-edge-r.is-down .em-cat__gp-card { transform: translate(calc(-100% + 40px), -8px); }
.em-cat.is-hover .em-cat__gp-pin:hover .em-cat__gp-card,
.em-cat .em-cat__gp-pin:focus-within .em-cat__gp-card,
.em-cat .em-cat__gp-pin.is-open .em-cat__gp-card {
  opacity: 1; pointer-events: auto; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .28s var(--soft), transform .35s var(--expo), visibility 0s;
}
.em-cat.is-hover .em-cat__gp-pin.is-edge-l:hover .em-cat__gp-card,
.em-cat .em-cat__gp-pin.is-edge-l:focus-within .em-cat__gp-card,
.em-cat .em-cat__gp-pin.is-edge-l.is-open .em-cat__gp-card { transform: translate(-40px, 0); }
.em-cat.is-hover .em-cat__gp-pin.is-edge-r:hover .em-cat__gp-card,
.em-cat .em-cat__gp-pin.is-edge-r:focus-within .em-cat__gp-card,
.em-cat .em-cat__gp-pin.is-edge-r.is-open .em-cat__gp-card { transform: translate(calc(-100% + 40px), 0); }
.em-cat .em-cat__gp-pin.is-shut .em-cat__gp-card { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.em-cat .em-cat__gp-card,
.em-cat .em-cat__gp-sheet .em-cat__gp-cardbox {
  background-color: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-2); color: var(--ink);
}
.em-cat .em-cat__gp-card .em-cat__gp-cin,
.em-cat .em-cat__gp-sheet .em-cat__gp-cin { padding: 18px 20px 14px; }
.em-cat .em-cat__gp-cin .em-cat__gp-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.em-cat .em-cat__gp-cin .em-cat__gp-ct { font: 500 22px/1.1 var(--font-display); }
.em-cat .em-cat__gp-cin .em-cat__gp-phase {
  flex: none; padding: 4px 8px; font: 500 10px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); background-color: var(--bg-soft);
}
.em-cat .em-cat__gp-cin .em-cat__gp-phase--finishing { color: var(--free); background-color: color-mix(in srgb, var(--free) 12%, var(--panel)); }
.em-cat .em-cat__gp-cin .em-cat__gp-phase--building { color: #8E6E2E; background-color: color-mix(in srgb, var(--accent-2) 18%, var(--panel)); }
.em-cat .em-cat__gp-cin .em-cat__gp-stage-t { margin-block-start: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.em-cat .em-cat__gp-cin .em-cat__gp-kv { display: flex; align-items: center; gap: 14px; margin-block-start: 14px; padding-block-start: 14px; border-top: 1px solid var(--line-soft); }
.em-cat .em-cat__gp-kv .em-cat__gp-kring { position: relative; flex: none; width: 52px; height: 52px; }
.em-cat .em-cat__gp-kv .em-cat__gp-kring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.em-cat .em-cat__gp-kring .gp-ring-t { stroke: var(--line); stroke-width: 4; }
.em-cat .em-cat__gp-kring .gp-ring-v { stroke: var(--accent); stroke-width: 4; }
.em-cat .em-cat__gp-kv .em-cat__gp-kring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.em-cat .em-cat__gp-kv .em-cat__gp-kt { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.em-cat .em-cat__gp-kv .em-cat__gp-kt b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; }
.em-cat .em-cat__gp-cin .em-cat__gp-free { margin-block-start: 12px; list-style: none; border-top: 1px solid var(--line-soft); }
.em-cat .em-cat__gp-free .em-cat__gp-fl {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.em-cat .em-cat__gp-free .em-cat__gp-fl b { font: 500 14px/1 var(--font-ui); color: var(--free); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-cat .em-cat__gp-free .em-cat__gp-fl b::after { content: " →"; color: var(--accent-ink, #8A5D3C); }
.em-cat .em-cat__gp-free .em-cat__gp-fl:hover { color: var(--accent-ink, #8A5D3C); }
.em-cat .em-cat__gp-cin .em-cat__gp-none { margin-block-start: 12px; font-size: 13px; color: var(--ink-faint); font-style: italic; }
.em-cat .em-cat__gp-cin .em-cat__gp-fh { margin-block-start: 14px; font: 500 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

.em-cat .em-cat__gp-view .em-cat__gp-hint { display: none; }
/* нижня «шторка» картки (вузький екран) */
.em-cat .em-cat__gp .em-cat__gp-sheet { display: none; margin-block-start: 12px; }
.em-cat .em-cat__gp-sheet .em-cat__gp-cardbox { position: relative; }
.em-cat .em-cat__gp-sheet .em-cat__gp-x {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-soft); font-size: 20px; cursor: pointer;
}
.em-cat .em-cat__gp-sheet .em-cat__gp-cin .em-cat__gp-ch { padding-inline-end: 40px; }

.em-cat .em-cat__gp .em-cat__gp-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block-start: 18px; font-size: 12.5px; color: var(--ink-soft); }
.em-cat .em-cat__gp-legend .em-cat__gp-lg { display: inline-flex; align-items: center; gap: 8px; }
.em-cat .em-cat__gp-legend .em-cat__gp-lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #A9A18B; }
.em-cat .em-cat__gp-legend .em-cat__gp-lg--finishing::before { background: var(--free); }
.em-cat .em-cat__gp-legend .em-cat__gp-lg--building::before { background: var(--accent-2); }
.em-cat .em-cat__gp .em-cat__gp-note { margin-block-start: 10px; font-size: 12px; color: var(--ink-faint); }

/* ============================================================== 4. «Усі лоти» */
.em-cat .em-cat__all { padding-block: 56px 88px; background-color: var(--bg); }
.em-cat .em-cat__all .em-cat__all-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; border-top: 1px solid var(--line); padding-block-start: 32px; }
.em-cat .em-cat__all .em-cat__all-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 500 clamp(24px, 2.4vw, 34px)/1.1 var(--font-display); color: var(--ink); text-decoration: none;
}
.em-cat .em-cat__all .em-cat__all-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--accent);
  transform: scaleX(.2); transform-origin: left center; transition: transform var(--t-mid) var(--expo);
}
.em-cat .em-cat__all .em-cat__all-link:hover::after { transform: scaleX(1); }
.em-cat .em-cat__all .em-cat__all-note { font-size: 14px; color: var(--ink-soft); }
.em-cat .em-cat__noscript { padding: 24px var(--pad); text-align: center; }

/* ============================================================== 5. АДАПТИВ */
@media (max-width: 1279px) {
  .em-cat .em-cat__sc .em-cat__sc-in { grid-template-columns: 1.05fr 1fr; }
  .em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-in { grid-template-columns: 1fr 1.05fr; }
  .em-cat .em-cat__sc-panel .em-cat__sc-ph,
  .em-cat .em-cat__sc-panel .em-cat__sc-row { grid-template-columns: 52px minmax(0, 1fr) 52px 96px; column-gap: 10px; }
  .em-cat .em-cat__sc-row .em-cat__sc-name b { font-size: 14px; }
  .em-cat .em-cat__sc-row .em-cat__sc-hand,
  .em-cat .em-cat__sc-panel .em-cat__sc-ph > span:nth-child(5) { display: none; }
}
@media (max-width: 1100px) {
  .em-cat .em-cat__hero .em-cat__hero-in { gap: 40px; }
}
@media (max-width: 1023px) {
  .em-cat .em-cat__hero .em-cat__hero-in { grid-template-columns: 1fr; gap: 48px; }
  .em-cat .em-cat__sc .em-cat__sc-in,
  .em-cat .em-cat__sc.em-cat__sc--rev .em-cat__sc-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; }
  .em-cat .em-cat__sc .em-cat__sc-media { min-height: 0; aspect-ratio: 16 / 10; }
  .em-cat .em-cat__sc .em-cat__sc-body { padding: 40px var(--pad) 64px; --pad-x: var(--pad); }
  .em-cat .em-cat__sc .em-cat__sc-body > * { max-width: 680px; }
  .em-cat .em-cat__sc .em-cat__sc-curtain { transform-origin: center bottom; }
  .em-cat .em-cat__gp .em-cat__sec-hd { grid-template-columns: 1fr; }
  .em-cat .em-cat__gp .em-cat__gp-ready { grid-column: 1; grid-row: auto; margin-block-start: 24px; }
}
@media (max-width: 767px) {
  .em-cat .em-cat__hero { padding-block: calc(var(--hd-h) + 40px) 56px; }
  .em-cat .em-cat__hero .em-cat__h1 { min-height: 0; }
  .em-cat .em-cat__hero .em-cat__stats { grid-template-columns: repeat(3, minmax(0, auto)); }
  .em-cat .em-cat__stats .em-cat__stat { padding: 16px 16px 0 0; min-width: 0; }
  .em-cat .em-cat__stats .em-cat__stat + .em-cat__stat { padding-inline-start: 14px; }
  .em-cat .em-cat__stats .em-cat__stat-v { font-size: 26px; min-height: 45px; }
  .em-cat .em-cat__stats .em-cat__stat-v small { display: block; margin-inline-start: 0; margin-block-start: 6px; }
  .em-cat .em-cat__toc .em-cat__toc-row { grid-template-columns: 28px auto 1fr auto; min-height: 64px; }
  .em-cat .em-cat__toc .em-cat__toc-name { font-size: 21px; }
  .em-cat .em-cat__sc .em-cat__sc-media { aspect-ratio: 5 / 4; }
  .em-cat .em-cat__sc .em-cat__sc-body { padding-block: 28px 56px; }
  .em-cat .em-cat__sc .em-cat__sc-slot { margin-block-start: var(--s5); }
  .em-cat .em-cat__sc .em-cat__sc-facts { gap: 18px 20px; }
  .em-cat .em-cat__sc-facts .em-cat__sc-fv { font-size: 26px; }
  .em-cat .em-cat__sc .em-cat__sc-folio { left: 28px; bottom: 26px; }
  .em-cat .em-cat__sc .em-cat__sc-cap { right: 24px; bottom: 20px; font-size: 11px; }
  .em-cat .em-cat__gp .em-cat__gp-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); padding-block-end: 8px; }
  .em-cat .em-cat__gp .em-cat__gp-stage { width: clamp(540px, 150vw, 640px); }
  .em-cat .em-cat__gp .em-cat__gp-sheet { scroll-margin-block: calc(var(--sc-top, 76px) + 12px) 16px; }
  /* карта ширша за екран: тінь на краях, куди ще можна гортати, і підказка до першого жесту */
  .em-cat .em-cat__gp-map .em-cat__gp-view { position: relative; }
  .em-cat .em-cat__gp-view::before,
  .em-cat .em-cat__gp-view::after {
    content: ""; position: absolute; top: 0; bottom: 8px; width: 18px; z-index: 3; pointer-events: none; opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .em-cat .em-cat__gp-view::before { left: calc(-1 * var(--pad)); background: linear-gradient(90deg, var(--bg), transparent); }
  .em-cat .em-cat__gp-view::after { right: calc(-1 * var(--pad)); background: linear-gradient(270deg, var(--bg), transparent); }
  .em-cat .em-cat__gp-map.is-pan:not(.is-start) .em-cat__gp-view::before,
  .em-cat .em-cat__gp-map.is-pan:not(.is-end) .em-cat__gp-view::after { opacity: 1; }
  .em-cat .em-cat__gp-view .em-cat__gp-hint {
    display: block; position: absolute; left: 50%; bottom: 18px; z-index: 4; pointer-events: none;
    padding: 6px 12px; transform: translateX(-50%); white-space: nowrap;
    font: 500 12px/1.2 var(--font-ui); letter-spacing: .04em; color: var(--ink);
    background: rgba(251,248,242,.94); border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
    opacity: 0; transition: opacity .35s var(--ease);
  }
  .em-cat .em-cat__gp-map.is-pan .em-cat__gp-view .em-cat__gp-hint { opacity: 1; }
  .em-cat .em-cat__gp-map.is-pan.is-panned .em-cat__gp-view .em-cat__gp-hint { opacity: 0; }
  .em-cat .em-cat__gp-pin .em-cat__gp-card,
  .em-cat .em-cat__gp-pin .em-cat__gp-label { display: none; }
  .em-cat .em-cat__gp .em-cat__gp-sheet.is-on { display: block; }
  .em-cat .em-cat__gp-free .em-cat__gp-fl { min-height: 44px; }
  .em-cat .em-cat__gp-filter .em-cat__gp-filter-l { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .em-cat .em-cat__sc-pills .em-cat__sc-pill { font-size: 13px; padding: 0 12px; }
  .em-cat .em-cat__stats .em-cat__stat-v { font-size: 23px; min-height: 42px; }
  .em-cat .em-cat__stats .em-cat__stat--long .em-cat__stat-v { font-size: 19px; }
  .em-cat .em-cat__sc .em-cat__sc-facts { gap: 16px 14px; }
  .em-cat .em-cat__sc-facts .em-cat__sc-fv { font-size: 23px; }
  .em-cat .em-cat__sc-facts .em-cat__sc-fact { overflow-wrap: anywhere; }
}

/* ============================================================== 6. МЕНШЕ РУХУ */
@media (prefers-reduced-motion: reduce) {
  .em-cat .em-cat__sc .em-cat__sc-curtain { display: none; }
  .em-cat .em-cat__sc .em-cat__sc-layer.is-base > img,
  .em-cat .em-cat__sc.is-in .em-cat__sc-media:hover .em-cat__sc-layer.is-base > img { transform: none; }
  .em-cat .em-cat__stamp .em-cat__stamp-dot { animation: none; opacity: 1; }
  .em-cat .em-cat__pair .em-cat__pair-sheet { transform: none; }
  .em-cat .em-cat__pair .em-cat__pair-plus { transform: none; }
  .em-cat .em-cat__pair .em-cat__pair-seam { opacity: 0; }
  .em-cat-js .em-cat .em-cat__sc .em-cat__sc-title,
  .em-cat-js .em-cat .em-cat__sc .em-cat__sc-eyebrow,
  .em-cat-js .em-cat .em-cat__sc .em-cat__sc-meta,
  .em-cat-js .em-cat .em-cat__sc .em-cat__sc-tag,
  .em-cat-js .em-cat .em-cat__sc .em-cat__sc-fact { opacity: 1; transform: none; }
}