/* ============================================================================
   ur.estate · PREMIUM MATTE FROST OVERLAY
   ----------------------------------------------------------------------------
   Loaded LAST after tokens.css, platform.css, compact.css.
   Не меняет структуру/layout. Только перетягивает визуал в премиум-стекло:
     • многоцветная палитра blob'ов (emerald + lavender + rose + peach + sage)
     • дорогое матовое стекло — strong blur + low alpha + double specular inset
     • чанковые радиусы (panel-grade 16-24px)
     • многослойные тени с глубиной
     • цветные ambient halo на media-площадках карточек (.lcard__media, .ccard__hero, .fcard__media, .col, .jcard__media)
   ============================================================================ */

:root {
  /* ─── Premium blob palette (multicolor matte luxury) ──────────── */
  --pm-emerald:      #10B981;
  --pm-emerald-deep: #047857;
  --pm-mint:         #6EE7B7;
  --pm-sage:         #BFE9CE;
  --pm-rose:         #E6A8B8;
  --pm-lavender:     #C8B6E2;
  --pm-plum:         #A89BC4;
  --pm-peach:        #FFAE85;
  --pm-stone:        #C9CFD6;
  --pm-action:       #2A6F4E;
  --pm-action-deep:  #1F5238;

  /* Glass tokens — clearer glass: меньше alpha, меньше blur */
  --pm-glass-bg:        rgba(255, 255, 255, 0.12);
  --pm-glass-bg-strong: rgba(255, 255, 255, 0.08);
  --pm-glass-blur:      blur(5px) saturate(150%);
  --pm-glass-blur-lg:   blur(7px) saturate(160%);
  --pm-glass-blur-xl:   blur(6px) saturate(160%);
  --pm-glass-border:    1px solid rgba(255, 255, 255, 0.32);
  --pm-glass-shadow:    0 14px 40px rgba(15, 17, 22, 0.06), 0 2px 6px rgba(15, 17, 22, 0.04);
  --pm-glass-shadow-lg: 0 28px 72px rgba(15, 17, 22, 0.09), 0 6px 18px rgba(15, 17, 22, 0.04);
  --pm-glass-shadow-hover: 0 22px 58px rgba(15, 17, 22, 0.09), 0 4px 12px rgba(15, 17, 22, 0.04);
  --pm-glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  --pm-glass-inset-soft:inset 0 1px 0 rgba(255, 255, 255, 0.40);

  /* Radii — TIGHT product-grade. Все pill'ы превращены в rounded-rectangles. */
  --pm-r-xs:    3px;
  --pm-r-sm:    5px;
  --pm-r-md:    6px;
  --pm-r-base:  8px;
  --pm-r-lg:    10px;
  --pm-r-xl:    12px;
  --pm-r-2xl:   14px;
  --pm-r-pill:  8px;   /* pill больше не круг — мягкий прямоугольник */

  /* Re-route existing tokens so dependent CSS inherits the new look */
  --glass-bg:         var(--pm-glass-bg);
  --glass-bg-strong:  var(--pm-glass-bg-strong);
  --glass-bg-soft:    rgba(255, 255, 255, 0.10);
  --glass-blur:       var(--pm-glass-blur);
  --glass-blur-lg:    var(--pm-glass-blur-lg);
  --glass-border:     rgba(255, 255, 255, 0.32);
  --glass-border-strong: 1px solid rgba(255, 255, 255, 0.48);
  --glass-shadow:     var(--pm-glass-shadow);
  --glass-shadow-lg:  var(--pm-glass-shadow-lg);
}

/* ============================================================================
   AMBIENT (Layer 1) — Neutral multicolor matte wash (без доминанты зелёного)
   ============================================================================
   Зелёный теперь только мягким подмесом снизу. Верх-лево = lavender/stone,
   верх-право = lavender, центр-низ = rose + peach. Зелень читается на
   accent'ах (кнопки, pin'ы), не на фоне. */
.ambient {
  background:
    radial-gradient(ellipse at 10% 5%,   rgba(201, 207, 214, 0.32), transparent 55%),
    radial-gradient(ellipse at 100% 8%,  rgba(200, 182, 226, 0.30), transparent 55%),
    radial-gradient(ellipse at 90% 75%,  rgba(230, 168, 184, 0.22), transparent 55%),
    radial-gradient(ellipse at 30% 95%,  rgba(255, 174, 133, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 50%,  rgba(248, 249, 251, 0.40), transparent 70%) !important;
}
.blob {
  filter: blur(160px) !important;
}
/* Top-left — теперь STONE (нейтральный slate), не emerald */
.blob--cyan {
  width: 820px !important; height: 820px !important;
  top: -200px !important; left: -180px !important;
  background: radial-gradient(circle, var(--pm-stone) 0%, transparent 65%) !important;
  opacity: 0.55 !important;
}
/* Top-right — lavender (как на твоём правом борту, который ты одобрил) */
.blob--violet {
  width: 920px !important; height: 920px !important;
  top: 6vh !important; right: -240px !important;
  background: radial-gradient(circle, var(--pm-lavender) 0%, transparent 65%) !important;
  opacity: 0.62 !important;
}
/* Bottom-center — emerald-deep, но ОЧЕНЬ слабо, далеко внизу.
   Зелёного на верхнем экране быть не должно. */
.blob--lime {
  width: 760px !important; height: 760px !important;
  bottom: -460px !important; left: 38vw !important;
  background: radial-gradient(circle, var(--pm-emerald-deep) 0%, transparent 65%) !important;
  opacity: 0.18 !important;
}
/* Mid-left — rose (тёплый, не зелёный) */
.blob--peach {
  width: 700px !important; height: 700px !important;
  top: 55vh !important; left: -80px !important;
  background: radial-gradient(circle, var(--pm-rose) 0%, transparent 65%) !important;
  opacity: 0.48 !important;
}
/* 5-й blob через ::after — peach в правом нижнем */
.ambient::after {
  content: '';
  position: absolute;
  width: 760px; height: 760px;
  bottom: -240px; right: -160px;
  border-radius: 50%;
  filter: blur(160px);
  background: radial-gradient(circle, var(--pm-peach) 0%, transparent 65%);
  opacity: 0.32;
  pointer-events: none;
}

/* Vignette для глубины */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(15, 17, 22, 0.05) 100%);
}

/* ============================================================================
   TOP-BAR — premium frosted capsule
   ============================================================================ */
.topbar {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-2xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
}
.topnav__link--active {
  background: var(--pm-action) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(42, 111, 78, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ============================================================================
   FILTERS — premium matte panel
   ============================================================================ */
.filters {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  padding: 14px !important;
  gap: 12px !important;
}
.filters__omni {
  background: var(--pm-glass-bg-strong) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--pm-r-md) !important;
  -webkit-backdrop-filter: blur(5px) saturate(150%) !important;
          backdrop-filter: blur(5px) saturate(150%) !important;
}
.filters__omni-icon {
  background: var(--pm-action) !important;
  color: #fff !important;
  border-radius: var(--pm-r-sm) !important;
  box-shadow: 0 2px 8px rgba(42, 111, 78, 0.32) !important;
}
.fbtn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--pm-r-sm) !important;
  -webkit-backdrop-filter: blur(5px) saturate(150%) !important;
          backdrop-filter: blur(5px) saturate(150%) !important;
}
.fbtn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
}
.fbtn-more {
  border-radius: var(--pm-r-sm) !important;
  box-shadow: 0 4px 12px rgba(42, 111, 78, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================================
   SEARCHZONE — rail + map (двухколонник premium)
   ============================================================================ */
.searchzone__rail {
  background: var(--pm-glass-bg) !important;
  border: var(--pm-glass-border) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
}
.searchzone__map {
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
  overflow: hidden !important;
}

/* ============================================================================
   LISTING CARDS (.lcard) — premium matte frost с цветными halo
   ============================================================================ */
.lcard {
  /* Fallback фон 0.22 — карточка читаема даже до того, как браузер
     успеет применить backdrop-filter (устраняет flash на первом paint). */
  background: rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-base) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  isolation: isolate;
  will-change: backdrop-filter, background;   /* GPU-prepare composit layer */
  transform: translateZ(0);                    /* force own compositor layer */
}
.lcard:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.lcard--active {
  transform: translateY(-4px) !important;
  border-color: rgba(42, 111, 78, 0.55) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset),
              0 0 0 2px rgba(42, 111, 78, 0.18) !important;
  scroll-margin-top: 12px !important;
}
.lcard::before {
  inset: -55% -15% auto -15% !important;
  width: 130% !important;
  height: 130% !important;
  filter: blur(80px) !important;
  opacity: 0.55 !important;
  z-index: -1 !important;
}
/* Card halo палитра — нейтрально-тёплая, без emerald-доминанты */
.lcard[data-blob="cyan"]::before   { background: radial-gradient(circle, var(--pm-stone)    0%, transparent 70%) !important; }
.lcard[data-blob="violet"]::before { background: radial-gradient(circle, var(--pm-lavender) 0%, transparent 70%) !important; }
.lcard[data-blob="lime"]::before   { background: radial-gradient(circle, var(--pm-peach)    0%, transparent 70%) !important; }
.lcard[data-blob="peach"]::before  { background: radial-gradient(circle, var(--pm-rose)     0%, transparent 70%) !important; }
.lcard:hover::before { opacity: 0.80 !important; }

/* Lcard media — заменяем плоские background-color на цветные frost-зоны */
.lcard__media {
  background-image: none !important;
  position: relative;
  overflow: hidden;
}
/* Hero render image — sits behind gradient overlay */
.lcard__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
/* When hero image is present, soften the color overlay */
.lcard__media:has(.lcard__hero-img)::before {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.38) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 22px);
  z-index: 1;
}
.lcard__media:has(.lcard__hero-img) .lcard__pics,
.lcard__media:has(.lcard__hero-img) .lcard__tags,
.lcard__media:has(.lcard__hero-img) .lcard__fav,
.lcard__media:has(.lcard__hero-img) .lcard__overlay { position: relative; z-index: 2; }
/* Same for zhk-tile thumbnails */
.zhk-tile__thumb { position: relative; overflow: hidden; }
.lcard__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
  z-index: 1;
}
/* Палитра распределена по нейтрально-тёплым тонам:
   c1=lavender, c2=stone, c3=sage (единственный зелёный), c4=peach, c5=rose */
.lcard__media--c1 {
  background: linear-gradient(135deg, rgba(200,182,226,0.32) 0%, rgba(168,155,196,0.40) 100%),
              radial-gradient(circle at 30% 30%, rgba(200,182,226,0.55), transparent 60%) !important;
}
.lcard__media--c2 {
  background: linear-gradient(135deg, rgba(201,207,214,0.38) 0%, rgba(168,176,185,0.38) 100%),
              radial-gradient(circle at 70% 30%, rgba(201,207,214,0.55), transparent 60%) !important;
}
.lcard__media--c3 {
  background: linear-gradient(135deg, rgba(191,233,206,0.30) 0%, rgba(110,231,183,0.20) 100%),
              radial-gradient(circle at 50% 60%, rgba(191,233,206,0.45), transparent 60%) !important;
}
.lcard__media--c4 {
  background: linear-gradient(135deg, rgba(255,174,133,0.30) 0%, rgba(230,168,184,0.34) 100%),
              radial-gradient(circle at 70% 30%, rgba(255,174,133,0.50), transparent 60%) !important;
}
.lcard__media--c5 {
  background: linear-gradient(135deg, rgba(230,168,184,0.36) 0%, rgba(200,182,226,0.30) 100%),
              radial-gradient(circle at 40% 60%, rgba(230,168,184,0.50), transparent 60%) !important;
}

.ltag {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--pm-r-sm) !important;
  -webkit-backdrop-filter: blur(5px) saturate(160%) !important;
          backdrop-filter: blur(5px) saturate(160%) !important;
}
.lcard__fav {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--pm-r-sm) !important;
  -webkit-backdrop-filter: blur(5px) saturate(160%) !important;
          backdrop-filter: blur(5px) saturate(160%) !important;
}

/* ============================================================================
   COMPLEX CARDS (.ccard) — ЖК cards
   ============================================================================ */
.ccard {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ccard:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.ccard__hero {
  background-image: none !important;
  position: relative;
  overflow: hidden;
}
.ccard__hero .lcard__hero-img,
.fcard__media .lcard__hero-img { z-index: 0; }
.ccard__hero > *:not(.lcard__hero-img),
.fcard__media > *:not(.lcard__hero-img) { position: relative; z-index: 2; }
.ccard__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

/* Construction progress overlay — компактная pill, не загораживает рендер.
   Узкая, в углу, без явной заливки — только text-shadow + тонкий blur подложка. */
.ccard__hero .ccard__progress {
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  z-index: 3 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.ccard__hero .progress-cap {
  display: none !important;             /* убираем подпись "Корпус 1 · готовность" — не критичная */
}
.ccard__hero .progress-bar {
  width: 64px !important;
  height: 3px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
}
.ccard__hero .progress-bar i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #6EE7B7 0%, #34A36A 100%) !important;
}
.ccard__hero .progress-val {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.45) !important;
  white-space: nowrap !important;
}
.ccard__hero--c1 {
  background: linear-gradient(135deg, rgba(200,182,226,0.35) 0%, rgba(168,155,196,0.40) 100%),
              radial-gradient(circle at 25% 35%, rgba(200,182,226,0.60), transparent 60%) !important;
}
.ccard__hero--c2 {
  background: linear-gradient(135deg, rgba(230,168,184,0.36) 0%, rgba(255,174,133,0.30) 100%),
              radial-gradient(circle at 70% 30%, rgba(230,168,184,0.55), transparent 60%) !important;
}
.ccard__hero--c3 {
  background: linear-gradient(135deg, rgba(201,207,214,0.40) 0%, rgba(168,176,185,0.40) 100%),
              radial-gradient(circle at 60% 65%, rgba(201,207,214,0.55), transparent 60%) !important;
}

/* ============================================================================
   FEATURED CARDS (.fcard)
   ============================================================================ */
.fcard {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.fcard:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.fcard__media {
  background-image: none !important;
  position: relative;
  overflow: hidden;
}
.fcard__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
  z-index: 1;
}
/* Featured palette — нейтрально-тёплая: lavender, sage, rose, stone, peach */
.fcard__media--c1 {
  background: linear-gradient(135deg, rgba(200,182,226,0.32) 0%, rgba(168,155,196,0.38) 100%),
              radial-gradient(circle at 30% 30%, rgba(200,182,226,0.55), transparent 60%) !important;
}
.fcard__media--c2 {
  background: linear-gradient(135deg, rgba(191,233,206,0.32) 0%, rgba(110,231,183,0.22) 100%),
              radial-gradient(circle at 60% 50%, rgba(191,233,206,0.45), transparent 60%) !important;
}
.fcard__media--c3 {
  background: linear-gradient(135deg, rgba(230,168,184,0.36) 0%, rgba(200,182,226,0.30) 100%),
              radial-gradient(circle at 70% 30%, rgba(230,168,184,0.55), transparent 60%) !important;
}
.fcard__media--c4 {
  background: linear-gradient(135deg, rgba(201,207,214,0.40) 0%, rgba(168,176,185,0.40) 100%),
              radial-gradient(circle at 40% 60%, rgba(201,207,214,0.55), transparent 60%) !important;
}
.fcard__media--c5 {
  background: linear-gradient(135deg, rgba(255,174,133,0.32) 0%, rgba(230,168,184,0.36) 100%),
              radial-gradient(circle at 30% 60%, rgba(255,174,133,0.50), transparent 60%) !important;
}
.fcard__count {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--pm-r-sm) !important;
  -webkit-backdrop-filter: blur(5px) saturate(160%) !important;
          backdrop-filter: blur(5px) saturate(160%) !important;
}

/* ============================================================================
   COLLECTIONS (.col tiles) — premium matte gradient panels
   ============================================================================ */
.col {
  border-radius: var(--pm-r-lg) !important;
  border: var(--pm-glass-border) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  position: relative !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.col:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.col::before {
  content: '' !important;
  position: absolute !important;
  inset: -50% -22% auto -22% !important;
  width: 144% !important;
  height: 130% !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0.70 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
/* Collections — нейтрально-тёплая ротация (1 sage, остальные lavender/stone/rose/peach) */
.col--c1 { background: var(--pm-glass-bg) !important; }
.col--c1::before { background: radial-gradient(circle, var(--pm-lavender) 0%, transparent 70%) !important; }
.col--c2 { background: var(--pm-glass-bg) !important; }
.col--c2::before { background: radial-gradient(circle, var(--pm-sage)     0%, transparent 70%) !important; }
.col--c3 { background: var(--pm-glass-bg) !important; }
.col--c3::before { background: radial-gradient(circle, var(--pm-stone)    0%, transparent 70%) !important; }
.col--c4 { background: var(--pm-glass-bg) !important; }
.col--c4::before { background: radial-gradient(circle, var(--pm-rose)     0%, transparent 70%) !important; }
.col--c5 { background: var(--pm-glass-bg) !important; }
.col--c5::before { background: radial-gradient(circle, var(--pm-peach)    0%, transparent 70%) !important; }

/* Hero image inside .col — заполняет всю карточку, текст поверх */
.col .lcard__hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.col:has(.lcard__hero-img)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(15,17,22,0.78) 0%, rgba(15,17,22,0.30) 38%, transparent 60%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.col:has(.lcard__hero-img) .col__cap,
.col:has(.lcard__hero-img) .col__num {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.col:has(.lcard__hero-img) .col__num {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================================
   DISTRICT CARDS (.dcard)
   ============================================================================ */
.dcard {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.dcard:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.dcard__bars i {
  background: linear-gradient(180deg, var(--pm-emerald), var(--pm-emerald-deep)) !important;
  border-radius: 2px 2px 0 0 !important;
}

/* ============================================================================
   TOOL CARDS (.tool)
   ============================================================================ */
.tool {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  padding: 22px 24px !important;
  isolation: isolate !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tool::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  width: 140%;
  height: 80%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}
.toolrow .tool:nth-child(1)::before { background: radial-gradient(circle, var(--pm-emerald)  0%, transparent 70%); }
.toolrow .tool:nth-child(2)::before { background: radial-gradient(circle, var(--pm-lavender) 0%, transparent 70%); }
.toolrow .tool:nth-child(3)::before { background: radial-gradient(circle, var(--pm-rose)     0%, transparent 70%); }
.tool:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.sl__bar i {
  background: linear-gradient(90deg, var(--pm-emerald), var(--pm-emerald-deep)) !important;
}

/* ============================================================================
   JOURNAL CARDS (.jcard) — media-зоны цветные
   ============================================================================ */
.jcard__media {
  background-image: none !important;
  border-radius: var(--pm-r-lg) !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset-soft);
}
.jcard__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
/* Journal — нейтрально-тёплая ротация */
.jcard__media--c1 {
  background: linear-gradient(135deg, rgba(200,182,226,0.36) 0%, rgba(168,155,196,0.40) 100%),
              radial-gradient(circle at 30% 30%, rgba(200,182,226,0.55), transparent 60%) !important;
}
.jcard__media--c2 {
  background: linear-gradient(135deg, rgba(201,207,214,0.40) 0%, rgba(168,176,185,0.40) 100%),
              radial-gradient(circle at 60% 50%, rgba(201,207,214,0.55), transparent 60%) !important;
}
.jcard__media--c3 {
  background: linear-gradient(135deg, rgba(230,168,184,0.40) 0%, rgba(200,182,226,0.32) 100%),
              radial-gradient(circle at 70% 30%, rgba(230,168,184,0.55), transparent 60%) !important;
}
.jcard__media--c4 {
  background: linear-gradient(135deg, rgba(255,174,133,0.32) 0%, rgba(230,168,184,0.36) 100%),
              radial-gradient(circle at 40% 65%, rgba(255,174,133,0.55), transparent 60%) !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.foot {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  padding: 28px 32px !important;
}

/* ============================================================================
   AFTERSTRIP (pagination) — premium frost
   ============================================================================ */
.afterstrip {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-xl) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
}

/* ============================================================================
   DRAWER (booking) — premium frosted panel
   ============================================================================ */
.drawer__panel {
  background: var(--pm-glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur-lg) !important;
          backdrop-filter: var(--pm-glass-blur-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--pm-r-2xl) !important;
  box-shadow: var(--pm-glass-shadow-lg), var(--pm-glass-inset) !important;
}
.drawer__panel::before {
  background: radial-gradient(circle, var(--pm-emerald), transparent 70%) !important;
  opacity: 0.45 !important;
}
.drawer__cell {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-inset-soft) !important;
}
.drawer__price {
  background: linear-gradient(135deg, var(--pm-action), var(--pm-action-deep)) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: 0 10px 30px rgba(42, 111, 78, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
.slot {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--pm-r-md) !important;
}
.slot--active {
  background: var(--pm-action) !important;
  border-color: var(--pm-action) !important;
  box-shadow: 0 4px 14px rgba(42, 111, 78, 0.30) !important;
}

/* ============================================================================
   SEGMENTS / TABS — premium pill
   ============================================================================ */
.resultstrip__seg,
.sec__tabs {
  background: var(--pm-glass-bg-strong) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-md) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  box-shadow: var(--pm-glass-inset-soft) !important;
}

/* ============================================================================
   BUTTONS — primary emerald glow
   ============================================================================ */
.btn--primary {
  background: var(--pm-action) !important;
  box-shadow: 0 4px 14px rgba(42, 111, 78, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.btn--primary:hover {
  background: var(--pm-action-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(42, 111, 78, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
.btn--ghost {
  background: var(--pm-glass-bg-strong) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(5px) saturate(150%) !important;
          backdrop-filter: blur(5px) saturate(150%) !important;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ============================================================================
   GRAIN — мягкий, на верхнем слое
   ============================================================================ */
body::before {
  opacity: 0.6 !important;
}

/* ============================================================================
   SECTION TITLES — крупнее, premium, чуть тоньше weight
   ============================================================================ */
.sec__title {
  font-size: clamp(20px, 1.6vw + 8px, 28px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.05 !important;
}

/* ============================================================================
   TIGHT RADII OVERRIDE — pill'ы становятся прямоугольниками (8px)
   ============================================================================
   Бьём по любому --radius-pill / radius:9999px. Сам шкал tokens.css не
   трогаем, чтобы откатить было одним переключателем. */
:root {
  --radius-pill:  var(--pm-r-pill) !important;
  --radius-full:  var(--pm-r-pill) !important;
  --radius-large: var(--pm-r-lg) !important;
  --radius-xl:    var(--pm-r-xl) !important;
  --radius-base:  var(--pm-r-base) !important;
  --radius-small: var(--pm-r-sm) !important;
  --radius-xs:    var(--pm-r-xs) !important;
}

/* Force tighter radii on все компоненты с pill-видом */
.btn, .chip, .icon-btn,
.topnav__link,
.facet, .facet--save,
.fbtn, .fbtn-more, .fbtn-clear,
.seg, .tab,
.mstyle, .mdraw, .mapctl--here button,
.sort,
.lchip, .ltag,
.lcard__class, .lcard__pic,
.legend-bar,
.kbd,
.icon-btn__badge,
.fbtn-more__count,
.pricepin, .pricepin--cluster {
  border-radius: var(--pm-r-pill) !important;
}

/* Контейнеры — на 1-2 ступени мельче чем было */
.topbar { border-radius: 0 !important; }       /* full-width = без углов */
.filters { border-radius: var(--pm-r-lg) !important; }
.searchzone__rail,
.searchzone__map { border-radius: var(--pm-r-lg) !important; }
.resultstrip__seg,
.sec__tabs { border-radius: var(--pm-r-md) !important; padding: 3px !important; }
.afterstrip { border-radius: var(--pm-r-lg) !important; }

/* Карточки — общая шкала */
.lcard,
.fcard,
.ccard,
.dcard,
.tool,
.col,
.jcard__media {
  border-radius: var(--pm-r-base) !important;
}

/* Footer full-width, no rounded corners */
.foot { border-radius: 0 !important; }

/* Drawer чуть подтянуть */
.drawer__panel { border-radius: var(--pm-r-xl) !important; }
.drawer__cell,
.slot,
.drawer__price { border-radius: var(--pm-r-sm) !important; }

/* Pricepin — больше не капсула */
.pricepin { border-radius: var(--pm-r-pill) !important; }

/* Pics dots in lcard остаются микро-радиусом */
.lcard__pic { border-radius: 2px !important; }

/* ============================================================================
   FULL-WIDTH HEADER + FOOTER
   ============================================================================ */

/* Override compact.css max-width: var(--content-max) constraint */
.topbar {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 0 !important;
  /* Same border config as carded — но только bottom видимо (full-width) */
  border: 0 !important;
  border-bottom: var(--pm-glass-border) !important;
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  /* Идентичные карточкам: bg + blur + box-shadow + inset */
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  z-index: 100 !important;
}

.foot {
  max-width: none !important;
  margin: 56px 0 0 !important;
  padding: 32px 48px !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur-lg) !important;
          backdrop-filter: var(--pm-glass-blur-lg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Чтобы footer контент не размазывался — центрируем внутренние ряды */
.foot__top,
.foot__bot {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ============================================================================
   CARD POLISH — выравнивание/высота для "загляденья"
   ============================================================================ */

/* Все карточки grid'а — равная высота, body растягивается */
.fcard,
.ccard,
.jcard,
.dcard,
.tool {
  display: flex !important;
  flex-direction: column !important;
}
.fcard__body,
.ccard__body,
.jcard,
.dcard,
.tool {
  flex: 1 !important;
}

/* Унифицированные aspect ratios */
.fcard__media { aspect-ratio: 16 / 10 !important; }
.ccard__hero  { aspect-ratio: 16 / 8.5 !important; }
.jcard__media { aspect-ratio: 16 / 10 !important; }

/* Collections — квадратнее, без сильного aspect-ratio crop */
.col { aspect-ratio: 1 / 1 !important; }

/* Grid gaps — единые 12px */
.grid { gap: 14px !important; }
.collections { gap: 12px !important; }
.districts { gap: 12px !important; }
.toolrow { gap: 14px !important; }

/* Sec — центрирование с тем же max-width что у topbar/filters/searchzone.
   compact.css ставит margin: auto через важный селектор — НЕ переопределяем. */
.sec {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
  box-sizing: border-box !important;
}

/* Section header — больше воздуха */
.sec__head {
  margin-bottom: 16px !important;
  align-items: end !important;
}

/* fcard body — фиксированная нижняя выравнивающая высота */
.fcard__body { padding: 12px 14px 14px !important; gap: 6px !important; }
.fcard__price { margin-bottom: 2px !important; }
.fcard__chips { margin-top: auto !important; padding-top: 6px !important; }

/* ccard footer-stats — sticky bottom */
.ccard__body { gap: 10px !important; }
.ccard__stats { margin-top: auto !important; }

/* jcard — единый text-padding слева/справа */
.jcard__cat,
.jcard__title,
.jcard__meta { padding: 0 2px !important; }
.jcard__title { margin-top: 4px !important; }

/* dcard — компакт + bars выравнены снизу */
.dcard { padding: 14px 16px !important; min-height: 138px !important; }
.dcard__bars { margin-top: auto !important; }

/* Tool — outer padding consistent */
.tool { padding: 20px 22px !important; }

/* Searchzone — внутренние отступы rail чуть аккуратнее */
.searchzone__rail { padding: 12px 12px 0 !important; }
.rail__list { gap: 10px !important; padding-right: 6px !important; }

/* ============================================================================
   BODY — нижний vignette чуть нежнее, чтобы footer-area не темнела
   ============================================================================ */
body::after {
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(15, 17, 22, 0.04) 100%) !important;
}

/* ============================================================================
   FULL-BLEED MAP CANVAS + FLOATING FILTERS/RAIL OVERLAY
   ============================================================================
   Map становится canvas во всю ширину viewport. Filters и rail floating
   glass overlays поверх него. После map'а нормальный flow (.sec/.foot)
   возвращается с прежним max-width центрированием. */

/* Searchzone — резервирует место в потоке для карты, но сама карта будет FIXED */
.searchzone {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: calc(-1 * var(--header-h)) !important;
  padding: 0 !important;
  height: calc(72vh + var(--header-h)) !important;
  min-height: calc(560px + var(--header-h)) !important;
  max-height: calc(820px + var(--header-h)) !important;
  position: relative !important;
  display: block !important;
  z-index: auto !important;  /* НЕ создаём stacking context — карта должна
                                быть видна сквозь топбар */
}

/* Topbar — высокий z-index чтобы быть НАД картой, но glass blur показывает её */
.topbar {
  z-index: 100 !important;
}

/* Map — FIXED-positioned под топбаром, чтобы реально просвечивал.
   Body должен быть прозрачным, иначе body fill перекрывает карту. */
html, body {
  background: transparent !important;
}
html {
  background: #F4F6F8 !important;
}

.searchzone__map {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#basemap-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.mapboxgl-map { background: transparent !important; }

/* Mapbox-canvas сам по себе — без артефактов */
.mapboxgl-canvas { outline: none !important; }
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-top-right { display: none !important; }

/* Map overlays (pins, controls) — поверх mapbox */
.map-overlays { z-index: 2 !important; }
.pins { z-index: 2 !important; }

/* Filters — absolute overlay поверх карты. Containing block = body.
   Filters становится floating glass panel поверх первого экрана с картой. */
.filters {
  position: absolute !important;
  top: calc(var(--header-h) + 12px) !important;
  left: calc(var(--pad-x) + 360px + 12px) !important;
  right: calc(var(--pad-x) + 360px + 12px) !important;
  margin: 0 !important;
  max-width: none !important;
  z-index: 5 !important;
  background: rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur-lg) !important;
          backdrop-filter: var(--pm-glass-blur-lg) !important;
  box-shadow: 0 14px 40px rgba(15, 17, 22, 0.10), 0 2px 6px rgba(15, 17, 22, 0.05), var(--pm-glass-inset) !important;
}

/* Apartments rail — теперь СПРАВА, прижат к правому краю viewport */
.searchzone__rail {
  position: absolute !important;
  top: calc(var(--header-h) + 12px) !important;
  right: var(--pad-x) !important;
  left: auto !important;
  bottom: 0 !important;
  width: 360px !important;
  z-index: 4 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  padding: 0 !important;
}

/* Сдвигаем rail-top вниз через JS-renderTime padding. Но для безопасности —
   создаём верхний spacer внутри rail чтобы rail не уехал под filters.
   Используем CSS-only: top отступ rail компенсирует filters. */
.searchzone__rail::before {
  /* Невидимый spacer чтобы первые карточки не упирались в верх */
  content: '';
  display: block;
  height: 0;
}

/* Result strip — тоже floating, справа сверху над картой */
.resultstrip {
  position: absolute !important;
  top: calc(var(--header-h) + 24px) !important;
  right: calc(var(--pad-x) + 16px) !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  max-width: none !important;
}

/* Searchzone стоит у верха flow — занимает 100vh - header */
/* Sections (sec) ниже карты — нормальный flow, отступ от searchzone */
.sec:first-of-type {
  margin-top: 40px !important;
}

/* Footer не трогаем — он уже full-width */

/* Hide secondary search controls that were edge-aligned in grid layout */
.searchzone__rail .rail__head,
.searchzone__rail .rail__sub {
  /* Делаем встроенные таб-сегменты компактнее в плавающем rail'е */
}

/* Pricepins — премиум матовое стекло (не сплошное белое) */
.pricepin {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: var(--pm-r-pill) !important;
  -webkit-backdrop-filter: blur(5px) saturate(160%) !important;
          backdrop-filter: blur(5px) saturate(160%) !important;
  box-shadow: 0 6px 18px rgba(15, 17, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.pricepin::after {
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(5px) !important;
          backdrop-filter: blur(5px) !important;
}

/* Map controls — компактные, КОРНЕРНЫЕ, матовое стекло */
.map-overlays { z-index: 3 !important; }
.map-overlays > * { position: absolute !important; }

.mapctl {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--pm-r-md) !important;
  -webkit-backdrop-filter: blur(4px) saturate(150%) !important;
          backdrop-filter: blur(4px) saturate(150%) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  width: auto !important;
  display: inline-flex !important;
}

/* === Map controls clustered в правом верхнем углу, не разнесены === */

/* Style toggle (Светлая/Спутник/Гибрид) — TOP-RIGHT слева от zoom,
   с учётом сдвига searchzone вверх под топбар */
.mapctl--styles {
  top: calc(var(--header-h) + 12px) !important;
  right: 60px !important;
  left: auto !important;
  padding: 3px !important;
  gap: 2px !important;
  width: auto !important;
}
.mstyle {
  padding: 0 12px !important;
  height: 28px !important;
  font-size: 11.5px !important;
  border-radius: var(--pm-r-sm) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}
.mstyle--active {
  background: var(--pm-action) !important;
  color: #fff !important;
}

/* Zoom controls — top-right */
.mapctl--zoom {
  top: calc(var(--header-h) + 12px) !important;
  right: 12px !important;
  width: 36px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  padding: 2px !important;
}
.mapctl--zoom button {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  border-radius: var(--pm-r-sm) !important;
  background: transparent !important;
  border: 0 !important;
}
.mapctl--zoom button:hover {
  background: rgba(42, 111, 78, 0.10) !important;
  color: var(--pm-action-deep) !important;
}

/* "Нарисовать область / Радиус" — TOP-CENTER (где раньше был filters, но
   filters absolute уже занимает центр-верх). Делаем чуть НИЖЕ — top: 16px поверх filters'a). */
.mapctl--draw {
  /* Поскольку filters заняли весь верх-центр — прячем drawing-инструмент,
     или ставим под filters'ами по центру (top после filters'а ~180px). */
  top: auto !important;
  bottom: 60px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 3px !important;
  gap: 2px !important;
  width: auto !important;
  display: inline-flex !important;
}
.mdraw {
  padding: 0 12px !important;
  height: 28px !important;
  font-size: 11.5px !important;
  border-radius: var(--pm-r-sm) !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
}

/* "Искать в этой области" — bottom center */
.mapctl--here {
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 2px !important;
}
.mapctl--here button {
  padding: 0 16px !important;
  height: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--pm-r-sm) !important;
  white-space: nowrap !important;
}

/* Легенда цена/м² — bottom-right */
.mapctl--legend {
  bottom: 16px !important;
  right: 12px !important;
  width: 180px !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Map area: убрать veil */
.basemap__veil { display: none !important; }

/* ============================================================================
   ОБЩИЙ MATTE FROST — все мелкие "white" блоки в pricepin, badges и пр.
   ============================================================================ */
.lcard__overlay,
.lcard__fav,
.fcard__count,
.icon-btn__badge,
.fbtn-more__count,
.lcard__class,
.lchip,
.ltag,
.kbd {
  background-color: var(--pm-glass-bg) !important;
  border: var(--pm-glass-border) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
}
/* Бренд-акценты ОСТАЮТСЯ контрастными — emerald на белом */
.lchip--ai,
.ltag--accent,
.facet--ai,
.lcard__class--premium,
.fbtn-more,
.icon-btn__badge {
  background-color: var(--pm-action) !important;
  color: #fff !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Searchzone-rail inner head/sub — тоже матовые поверхности */
.rail__head .rail__count-num,
.rail__head .rail__count-cap {
  color: var(--color-fg) !important;
}
.resultstrip__seg {
  background: var(--pm-glass-bg) !important;
  border: var(--pm-glass-border) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
}

/* ============================================================================
   RAIL LCARDS — premium dense layout
   ============================================================================
   Horizontal: 88px square thumbnail слева + info справа (price/title/addr/chips).
   Все pill'ы → rounded rectangles (4-6px). Density: ~110px высота карточки. */
.searchzone__rail .lcard {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 132px 1fr !important;
  grid-template-rows: auto !important;
  gap: 12px !important;
  padding: 12px !important;
  min-height: 124px !important;
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  isolation: isolate !important;
  cursor: pointer !important;
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out) !important;
}
.searchzone__rail .lcard:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: var(--pm-glass-shadow-hover), var(--pm-glass-inset) !important;
}
.searchzone__rail .lcard--active {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(42, 111, 78, 0.55) !important;
  box-shadow: var(--pm-glass-shadow-hover), var(--pm-glass-inset),
              0 0 0 2px rgba(42, 111, 78, 0.15) !important;
}

/* Media → landscape thumbnail слева (4:3). Реальные фото не будут квадратными. */
.searchzone__rail .lcard__media {
  width: 132px !important;
  height: 100px !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: var(--pm-r-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: var(--pm-glass-inset-soft) !important;
}
.searchzone__rail .lcard__media::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 22px) !important;
  pointer-events: none !important;
  font-size: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Внутри media — pics/tags/fav компактно, поверх градиента */
.searchzone__rail .lcard__pics {
  bottom: 4px !important;
  left: 4px !important;
  right: 4px !important;
  gap: 2px !important;
}
.searchzone__rail .lcard__pic { height: 2px !important; border-radius: 1px !important; }
.searchzone__rail .lcard__tags { display: none !important; }
.searchzone__rail .lcard__fav {
  top: 4px !important;
  right: 4px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: var(--pm-r-xs) !important;
}
.searchzone__rail .lcard__fav svg { width: 11px !important; height: 11px !important; }
.searchzone__rail .lcard__overlay { display: none !important; }

/* Body — главная информационная колонка */
.searchzone__rail .lcard__body {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  justify-content: space-between !important;
}

/* Row 1: price + class */
.searchzone__rail .lcard__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.searchzone__rail .lcard__price {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.searchzone__rail .lcard__permeter {
  font-size: 9.5px !important;
  color: var(--color-fg-mute) !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Class badge — rounded rectangle, не pill */
.searchzone__rail .lcard__class {
  flex-shrink: 0 !important;
  height: 17px !important;
  padding: 0 6px !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--pm-r-xs) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Title */
.searchzone__rail .lcard__title {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-fg) !important;
  letter-spacing: -0.005em !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Address — 1 line, ellipsis */
.searchzone__rail .lcard__addr {
  font-size: 11px !important;
  color: var(--color-fg-soft) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Metro — одна строка max, скрываем 2-ю станцию метро если не помещается */
.searchzone__rail .lcard__metro {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  color: var(--color-fg-mute) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 14px !important;
}
.searchzone__rail .metro-dot {
  width: 5px !important;
  height: 5px !important;
  flex-shrink: 0 !important;
}
.searchzone__rail .metro-sep,
.searchzone__rail .lcard__metro > .metro-sep ~ * { display: none !important; }

/* Chips — показать 2-3 первых, rounded rectangles */
.searchzone__rail .lcard__chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}
.searchzone__rail .lchip {
  font-size: 9px !important;
  font-weight: 500 !important;
  padding: 2px 5px !important;
  border-radius: var(--pm-r-xs) !important;
  height: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.searchzone__rail .lchip--ai {
  background: var(--pm-action) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}
/* Скрываем chips после 3-ей */
.searchzone__rail .lcard__chips .lchip:nth-child(n+4) { display: none !important; }

/* Foot скрыт в rail (не помещается в плотный режим) */
.searchzone__rail .lcard__foot { display: none !important; }

/* rail__head ("2 814 квартир") — единый glass-стандарт */
.searchzone__rail .rail__head {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
}
.searchzone__rail .rail__sub {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-sm) !important;
  padding: 6px 10px !important;
  margin-bottom: 10px !important;
}

/* Lcard__media тоже должна "просвечивать" — матовый фон, не сплошной */
.searchzone__rail .lcard__media {
  background-blend-mode: normal !important;
  opacity: 0.92 !important;
}

/* ============================================================================
   ZHK-RAIL — LEFT floating panel с Топ ЖК, прижат к левому краю viewport
   ============================================================================ */
.zhk-rail {
  position: absolute !important;
  top: calc(var(--header-h) + 12px) !important;
  left: var(--pad-x) !important;
  bottom: 0 !important;
  width: 360px !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* ЖК-rail head — floating glass pill (как rail__head у квартир) */
.zhk-rail__head {
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  padding: 8px 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.zhk-rail__count {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}
.zhk-rail__num {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-fg) !important;
}
.zhk-rail__cap {
  font-size: 10.5px !important;
  color: var(--color-fg-mute) !important;
}
.zhk-rail__filter {
  font-size: 10.5px !important;
  color: var(--color-fg-soft) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: var(--pm-r-xs) !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
}
.zhk-rail__filter:hover { color: var(--pm-action-deep) !important; }

/* ЖК-rail list — scrollable column */
.zhk-rail__list {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
}
.zhk-rail__list { scrollbar-width: none !important; }
.zhk-rail__list::-webkit-scrollbar { width: 0 !important; display: none !important; }

/* ZHK tile — отдельная matte glass плитка ЖК */
.zhk-tile {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  gap: 12px !important;
  padding: 12px !important;
  min-height: 124px !important;
  background: var(--pm-glass-bg) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
          backdrop-filter: var(--pm-glass-blur) !important;
  border: var(--pm-glass-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset) !important;
  isolation: isolate !important;
  cursor: pointer !important;
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out) !important;
}
.zhk-tile:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: var(--pm-glass-shadow-hover), var(--pm-glass-inset) !important;
}
.zhk-tile--active {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(42, 111, 78, 0.55) !important;
  box-shadow: var(--pm-glass-shadow-hover), var(--pm-glass-inset),
              0 0 0 2px rgba(42, 111, 78, 0.15) !important;
}

/* Thumbnail с цветным placeholder */
.zhk-tile__thumb {
  width: 100px !important;
  height: 100px !important;
  border-radius: var(--pm-r-sm) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: var(--pm-glass-inset-soft) !important;
}
.zhk-tile__thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 22px) !important;
  pointer-events: none !important;
}
.zhk-tile__thumb--c1 {
  background: linear-gradient(135deg, rgba(200,182,226,0.40), rgba(168,155,196,0.45)),
              radial-gradient(circle at 30% 30%, rgba(200,182,226,0.60), transparent 60%) !important;
}
.zhk-tile__thumb--c2 {
  background: linear-gradient(135deg, rgba(191,233,206,0.40), rgba(110,231,183,0.30)),
              radial-gradient(circle at 60% 50%, rgba(191,233,206,0.55), transparent 60%) !important;
}
.zhk-tile__thumb--c3 {
  background: linear-gradient(135deg, rgba(255,174,133,0.35), rgba(230,168,184,0.42)),
              radial-gradient(circle at 70% 30%, rgba(255,174,133,0.55), transparent 60%) !important;
}
.zhk-tile__thumb--c4 {
  background: linear-gradient(135deg, rgba(201,207,214,0.40), rgba(168,176,185,0.45)),
              radial-gradient(circle at 30% 60%, rgba(201,207,214,0.55), transparent 60%) !important;
}
.zhk-tile__thumb--c5 {
  background: linear-gradient(135deg, rgba(230,168,184,0.40), rgba(200,182,226,0.32)),
              radial-gradient(circle at 70% 30%, rgba(230,168,184,0.55), transparent 60%) !important;
}

/* Body — info справа от thumb */
.zhk-tile__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  justify-content: space-between !important;
}
.zhk-tile__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.zhk-tile__name {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-fg) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.zhk-tile__class {
  flex-shrink: 0 !important;
  height: 17px !important;
  padding: 0 6px !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--pm-r-xs) !important;
  background: var(--pm-glass-bg) !important;
  border: var(--pm-glass-border) !important;
  color: var(--color-fg-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
}
.zhk-tile__class--premium {
  background: var(--pm-action) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.zhk-tile__class--comfort {
  background: rgba(110, 231, 183, 0.30) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}
.zhk-tile__loc {
  font-size: 10.5px !important;
  color: var(--color-fg-soft) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.zhk-tile__stats {
  display: flex !important;
  gap: 8px !important;
  font-size: 9.5px !important;
  color: var(--color-fg-mute) !important;
  font-variant-numeric: tabular-nums !important;
}
.zhk-tile__stats b {
  color: var(--color-fg) !important;
  font-weight: 600 !important;
  margin-right: 2px !important;
}
.zhk-tile__price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pm-action-deep) !important;
  letter-spacing: -0.01em !important;
  margin-top: 2px !important;
}

/* ============================================================================
   RESPONSIVE — premium layer breakpoints
   Стратегия: оба floating rail'а появились в premium-overlay (zhk-rail слева,
   searchzone__rail справа) и позиционированы absolute. На узких экранах они
   перекрывают карту, поэтому начиная с 1280px их скрываем — каталог ЖК/квартир
   всё равно показывается ниже карты обычными секциями.
   ============================================================================ */
@media (max-width: 1280px) {
  /* Оба floating rail'а уходят — карта расширяется на всю searchzone */
  .zhk-rail,
  .searchzone__rail { display: none !important; }
  .searchzone__map { width: 100% !important; }
  /* Map controls сдвигаются к краю viewport (rail'а больше нет) */
  .mapctl--styles { right: calc(var(--pad-x) + 12px) !important; }
  .mapctl--zoom   { right: calc(var(--pad-x) + 12px) !important; }
}

@media (max-width: 1180px) {
  /* На средних экранах прячем второстепенные контролы карты */
  .mapctl--draw,
  .mapctl--layers { display: none !important; }
  /* Топбар уплотняется (link padding уже снят в platform.css) */
  .topbar { padding: 0 12px !important; }
}

@media (max-width: 980px) {
  /* Карта ниже, mapctl сжимаются */
  .searchzone__map { height: 52vh !important; min-height: 380px !important; }
  .mapctl--styles { top: calc(var(--header-h) + 12px) !important; }
  .mapctl--zoom { top: calc(var(--header-h) + 60px) !important; }
  /* Filters wrap чтобы помещались */
  .filters__bar { flex-wrap: wrap !important; gap: 8px !important; }
}

@media (max-width: 820px) {
  /* Мобильная карта */
  .searchzone__map { height: 46vh !important; min-height: 320px !important; }
  /* "Здесь я" контрол убираем — на мобиле геолокация всё равно через браузерный prompt */
  .mapctl--here { display: none !important; }
  /* Топбар: дополнительное уплотнение */
  .topbar { padding: 0 10px !important; height: calc(var(--header-h) - 4px) !important; }
  /* Pad-x уменьшаем для mobile edge */
  .filters,
  .sec { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 480px) {
  /* Самый узкий — карта компактнее, footer/links в столбик */
  .searchzone__map { height: 42vh !important; min-height: 280px !important; }
  .foot__cols { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ============================================================================
   PINS — frame-perfect custom overlay on Mapbox basemap
   ARCHITECTURE (zoom-safe, pricing-safe):
   .pins        — absolute overlay div, covers map canvas exactly (inset:0).
                  pointer-events:none so map panning works through it.
   .upin        — absolute, top:0/left:0. JS sets style.transform=translate(x,y)
                  every map render frame via map.project(lngLat). NO CSS anims here.
   .upin__card  — inner visual card. CSS individual `translate`/`scale`/`opacity`
                  animations are safe here — they never touch `transform`, so they
                  compose with JS positioning without any conflict.
   .upin__tail  — absolute bottom:0 on .upin, tail tip = coordinate point.
   ============================================================================ */

/* Overlay container */
.pins {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 4 !important;
}

/* Blob aura tokens */
.upin[data-blob="violet"] { --upin-aura: rgba(200,182,226,0.75); }
.upin[data-blob="lime"]   { --upin-aura: rgba(191,233,206,0.75); }
.upin[data-blob="peach"]  { --upin-aura: rgba(255,174,133,0.75); }
.upin[data-blob="cyan"]   { --upin-aura: rgba(185,214,229,0.75); }

/* Outer wrapper — JS sets ONLY transform:translate(x,y) here. Nothing else. */
.upin {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  /* NO transitions, NO scale, NO opacity here — JS owns transform only */
  z-index: 2;
}
.upin--active { z-index: 10 !important; }
.upin:hover   { z-index: 8 !important; }

/* ── Shell — merge/split animation layer ──────────────────────────────────
   Sits between .upin (geo position) and .upin__card (visual).
   JS animates scale + opacity + filter here via CSS transitions.
   transform-origin: 50% 100% → bottom-center = tail tip = geo coordinate.
   When scale shrinks to 0, the pin collapses INTO the map point. No drift.
   Cluster pill uses 50% 50% (center anchor) instead.                       */
.upin__shell {
  display: inline-block;
  position: relative;            /* containing block for .upin__tail */
  transform-origin: 50% 100%;   /* pin anchor: bottom-center = tail tip */
  /* scale, opacity, filter set by JS — no base values needed */
}
.upin--cluster .upin__shell {
  transform-origin: 50% 50%;    /* cluster anchor: centroid */
}

/* Inner visual card — фирменное матовое стекло (как .lcard/.ccard/.fcard) */
.upin__card {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: var(--pm-glass-border);
  border-radius: var(--pm-r-base);
  /* Поднятая прозрачность (0.24 вместо 0.12) — страховка от случаев,
     когда backdrop-filter ломается (например, родитель имеет filter:blur,
     создающий stacking context). Текст всегда остаётся читаемым. */
  background: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: var(--pm-glass-blur);
          backdrop-filter: var(--pm-glass-blur);
  box-shadow: var(--pm-glass-shadow), var(--pm-glass-inset);
  isolation: isolate;
  color: #1A1F26;
  overflow: visible;
  opacity: 0;
  translate: 0 12px;
  scale: 0.78;
  animation: upin-in 560ms cubic-bezier(0.18,0.9,0.32,1.2) forwards,
             upin-bob 4.4s ease-in-out infinite;
  animation-delay: var(--upin-delay, 0ms), calc(var(--upin-delay, 0ms) + 620ms);
  transition:
    translate  260ms cubic-bezier(0.2,0.8,0.2,1.05),
    scale      260ms cubic-bezier(0.2,0.8,0.2,1.05),
    box-shadow 260ms ease,
    background 200ms ease,
    border-color 200ms ease;
  will-change: translate, scale, opacity;
}

@keyframes upin-in {
  0%   { opacity: 0; translate: 0 16px; scale: 0.70; }
  55%  { opacity: 1; translate: 0 -3px; scale: 1.05; }
  100% { opacity: 1; translate: 0 0;    scale: 1;    }
}
@keyframes upin-bob {
  0%, 100% { translate: 0 0;    }
  50%      { translate: 0 -2px; }
}

/* Thumbnail image panel — replaces accent strip */
.upin__thumb {
  display: block;
  width: 100px;
  min-height: 76px;             /* гарантия высоты, если body короткий */
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 7px 0 0 7px;   /* matches --pm-r-base minus border */
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, #c8e4d0 0%, #b0cebc 100%);
}
.upin--premium .upin__thumb {
  background: linear-gradient(150deg, #e8d9a8 0%, #c8b070 50%, #a8905a 100%);
}
.upin__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Golden shimmer for premium pins when image is present */
.upin--premium .upin__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,210,90,0.18) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* Card body */
.upin__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 14px 9px 10px;
  min-width: 196px;
}

/* Stats row — compact chips */
.upin__stats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin-top: 1px;
}
.upin__stat {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 500;
  color: #5A6470;
  background: rgba(15, 17, 22, 0.055);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
  line-height: 1.35;
}
.upin__stat b {
  font-weight: 700;
  color: #1F4A30;
}
.upin__stat--date {
  color: #2A6F4E;
  background: rgba(42, 111, 78, 0.08);
}
.upin__top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.upin__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0F1116;
  white-space: nowrap;
  line-height: 1.2;
}
.upin__meta {
  font-size: 10px;
  font-weight: 500;
  color: #7A8490;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.upin__prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 1px;
}
.upin__price {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pm-action-deep, #1F5238);
  line-height: 1;
}
.upin__price em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #5A6470;
}
.upin__pm2 {
  font-size: 10.5px;
  font-weight: 500;
  color: #8A9099;
  white-space: nowrap;
}

/* Class badges */
.upin__badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.4;
  flex-shrink: 0;
}
.upin__badge--gold  { background: rgba(255,210,80,.18);  border: 1px solid rgba(180,140,0,.28);  color: #8B6B00; }
.upin__badge--plum  { background: rgba(220,200,240,.22); border: 1px solid rgba(140,100,200,.28); color: #6B3FA0; }
.upin__badge--blue  { background: rgba(200,220,255,.22); border: 1px solid rgba(80,120,200,.28);  color: #2A5FA0; }
.upin__badge--green { background: rgba(200,240,210,.22); border: 1px solid rgba(60,140,80,.28);   color: #2A6F4E; }

/* Tail — фирменное стекло, тот же фон и бордер что у .upin__card */
.upin__tail {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--pm-glass-bg);
  -webkit-backdrop-filter: var(--pm-glass-blur);
          backdrop-filter: var(--pm-glass-blur);
  border-right:  var(--pm-glass-border);
  border-bottom: var(--pm-glass-border);
  box-shadow: 2px 2px 5px rgba(15,17,22,0.06);
  pointer-events: none;
  transition: background 200ms ease, border-color 200ms ease;
}

/* Halo */
.upin__halo {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--upin-aura, rgba(191,233,206,.7)) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
  transition: opacity 300ms ease, inset 300ms ease;
}

/* Premium pulse ring */
.upin__pulse {
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--pm-r-base) + 2px);
  border: 1.5px solid #2A6F4E;
  opacity: 0;
  pointer-events: none;
  animation: upin-pulse 2.8s ease-out infinite;
  animation-delay: calc(var(--upin-delay, 0ms) + 900ms);
}
@keyframes upin-pulse {
  0%   { opacity: 0.5; scale: 1;   }
  65%  { opacity: 0;   scale: 1.4; }
  100% { opacity: 0;   scale: 1.4; }
}

/* HOVER */
.upin:hover .upin__card {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: var(--pm-glass-shadow-hover), var(--pm-glass-inset);
  translate: 0 -4px;
  scale: 1.04;
  animation-play-state: paused, paused;
}
.upin:hover .upin__halo { opacity: 0.9; inset: -32px; }
.upin:hover .upin__tail {
  background: rgba(255, 255, 255, 0.20);
  border-right-color: rgba(255, 255, 255, 0.48);
  border-bottom-color: rgba(255, 255, 255, 0.48);
}

/* ACTIVE — стекло плотнее + emerald-ring */
.upin--active .upin__card {
  background: rgba(255, 255, 255, 0.28);
  border-color: var(--pm-action, #2A6F4E);
  box-shadow:
    var(--pm-glass-shadow-lg),
    var(--pm-glass-inset),
    0 0 0 2px rgba(42,111,78,0.22);
  translate: 0 -5px;
  scale: 1.07;
  animation-play-state: paused, paused;
  z-index: 10;
}
.upin--active .upin__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,111,78,0.22) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.upin--active .upin__price    { color: var(--pm-action-deep, #1F5238); }
.upin--active .upin__halo     { opacity: 1; inset: -40px; }
.upin--active .upin__tail {
  background: rgba(255, 255, 255, 0.28);
  border-right-color:  var(--pm-action, #2A6F4E);
  border-bottom-color: var(--pm-action, #2A6F4E);
}

/* CLUSTER — тот же glass-recipe, только pill-радиус */
.upin--cluster .upin__card {
  border-radius: var(--pm-r-pill);
  overflow: hidden;
}
.upin--cluster .upin__body {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  min-width: unset;
}
.upin--cluster .upin__count {
  font-size: 15px;
  font-weight: 800;
  color: var(--pm-action-deep, #1F5238);
  letter-spacing: -0.02em;
}
.upin--cluster .upin__count em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pm-action, #2A6F4E);
  margin-left: 1px;
}
.upin--cluster .upin__clabel {
  font-size: 10.5px;
  font-weight: 500;
  color: #7A8490;
  border-left: 1px solid rgba(15,17,22,0.08);
  padding-left: 7px;
  white-space: nowrap;
}
/* Sweep (glossy highlight) disabled — matte pins/clusters */
.upin__sweep { display: none; }


/* ── Ultra-light iOS-style scrollbars ──────────────────────────────────────── */
.zhk-rail__list,
.rail__list {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.55) transparent !important;
}
.zhk-rail__list::-webkit-scrollbar,
.rail__list::-webkit-scrollbar {
  width: 3px !important;
}
.zhk-rail__list::-webkit-scrollbar-track,
.rail__list::-webkit-scrollbar-track {
  background: transparent !important;
}
.zhk-rail__list::-webkit-scrollbar-thumb,
.rail__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 3px !important;
}
.zhk-rail__list::-webkit-scrollbar-thumb:hover,
.rail__list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.80) !important;
}