/* ================================================================
   DomVM — Страница проекта v3.0
   Переменные: catalog.css / :root
================================================================ */

/* Hero больше не breakout, overflow:hidden от Enfold не мешает */

/* ── Общий враппер ───────────────────────────────────────────── */

.domvm-project {
  --page-max: 1280px;
  --page-px:  48px;
}

.page-pad {
  max-width: var(--page-max);
  margin:    0 auto;
  padding:   0 var(--page-px);
}

/* ── Хлебные крошки ─────────────────────────────────────────── */

.prj-breadcrumbs {
  max-width:  var(--page-max);
  margin:     0 auto;
  padding:    14px var(--page-px) 8px;
}
.prj-bc-list {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         4px 0;
  list-style:  none;
  margin:      0;
  padding:     0;
  font-size:   13px;
  color:       #888;
}
.prj-bc-sep {
  padding: 0 6px;
  color:   #ccc;
}
.prj-bc-link {
  color:           #888;
  text-decoration: none;
  transition:      color .15s;
}
.prj-bc-link:hover { color: var(--c-ink); text-decoration: none; }
.prj-bc-item--current { color: #555; }

/* ── 1. Герой ────────────────────────────────────────────────── */

.prj-hero {
  position:   relative;
  max-width:  var(--page-max);
  margin:     0 auto;
  overflow:   hidden;
  background: var(--c-soft);
  border-bottom: 1px solid var(--c-border);
  user-select: none;
}

.prj-slide {
  position: relative;
  display:  none;
}
.prj-slide.is-active       { display: block; }
.prj-slide--ph.is-active   { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.prj-ph-ico                { display: flex; }

.prj-slide img {
  width:   100%;
  height:  auto;
  display: block;
}

/* Градиент-оверлей сверху */
.prj-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(17,17,17,.4) 0%, rgba(17,17,17,0) 38%);
  pointer-events: none;
  z-index:    1;
}

/* Верхняя панель: надзаголовок + H1 (слева), кнопки (справа) */
.prj-hero-top {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  display:    flex;
  align-items: flex-start;
  justify-content: space-between;
  padding:    32px 48px;
  z-index:    2;
}

.prj-supertitle {
  font-family:    var(--font-mono);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.75);
  margin:         0 0 6px;
}

.prj-h1 {
  font-family:    var(--font-main);
  font-size:      21px;
  font-weight:    700;
  letter-spacing: -.02em;
  color:          #fff;
  line-height:    1.15;
  margin:         0;
  max-width:      720px;
}

/* Кнопки лайк / сравнение */
.prj-hero-actions {
  display:    flex;
  gap:        8px;
  flex-shrink: 0;
  margin-top: 4px;
}

.prj-action-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  width:           40px;
  height:          40px;
  background:      rgba(255,255,255,.92);
  border:          1px solid rgba(255,255,255,.55);
  border-radius:   var(--radius);
  color:           var(--c-ink);
  cursor:          pointer;
  transition:      background .15s, border-color .15s, color .15s;
}
.prj-action-btn:hover {
  background:   rgba(255,255,255,1);
  border-color: rgba(255,255,255,.9);
}
.prj-action-btn.is-liked {
  background:   var(--c-accent-bg);
  border-color: var(--c-accent);
  color:        var(--c-accent);
}
.prj-like-count {
  font-family: var(--font-mono);
  font-size:   11px;
  font-weight: 500;
  color:       inherit;
}

/* Стрелки */
.prj-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  background:      rgba(255,255,255,.92);
  border:          1px solid rgba(255,255,255,.5);
  border-radius:   var(--radius);
  color:           var(--c-ink);
  cursor:          pointer;
  z-index:         2;
  transition:      background .15s;
}
.prj-arrow:hover          { background: #fff; }
.prj-arrow--prev          { left:  20px; }
.prj-arrow--next          { right: 20px; }

/* Точки-индикаторы */
.prj-dots {
  position:   absolute;
  bottom:     20px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  gap:        6px;
  z-index:    2;
}
.prj-dot {
  width:         8px;
  height:        3px;
  border-radius: 2px;
  background:    rgba(255,255,255,.45);
  transition:    width .2s ease, background .2s ease;
  cursor:        pointer;
}
.prj-dot.is-active {
  width:      24px;
  background: var(--c-accent);
}

/* ── 2. Инфоблок ─────────────────────────────────────────────── */

.prj-info-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             40px;
  padding:         36px 0;
  border-bottom:   1px solid var(--c-divider);
}

.prj-params {
  display:        flex;
  flex-direction: column;
  gap:            28px;
  flex:           1;
}

.prj-params-row {
  display: flex;
  gap:     44px;
  flex-wrap: wrap;
}

.prj-param {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.prj-param-label {
  font-family:    var(--font-mono);
  font-size:      12px;
  font-weight:    400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--c-ph);
}

.prj-param-val {
  font-family: var(--font-main);
  font-size:   19px;
  font-weight: 600;
  color:       var(--c-ink);
  line-height: 1.2;
}

/* Колонка с ценой */
.prj-price-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
  padding-left:   40px;
  flex-shrink:    0;
  min-width:      240px;
}

.prj-price-label {
  font-family:    var(--font-mono);
  font-size:      12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--c-ph);
  margin:         0;
}

.prj-price-val {
  font-family: var(--font-mono);
  font-size:   26px;
  font-weight: 500;
  color:       var(--c-accent);
  margin:      0;
}

.prj-calc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          52px;
  padding:         0 28px;
  background:      var(--c-accent);
  color:           #fff;
  border:          none;
  border-radius:   var(--radius);
  font-family:     var(--font-main);
  font-size:       17px;
  font-weight:     500;
  cursor:          pointer;
  transition:      box-shadow .2s, transform .1s;
  white-space:     nowrap;
}
.prj-calc-btn:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.prj-calc-btn:active {
  transform: translateY(1px);
}

/* ── 3. Вкладки ──────────────────────────────────────────────── */

.prj-tabs-wrap {
  padding-top: 0;
}

.prj-tab-bar {
  display:       flex;
  gap:           4px;
  border-bottom: 1px solid var(--c-border);
  margin-top:    36px;
}

.prj-tab-btn {
  padding:        12px 22px;
  border-radius:  2px 2px 0 0;
  border:         1px solid transparent;
  background:     none;
  font-family:    var(--font-main);
  font-size:      16px;
  font-weight:    400;
  color:          var(--c-mid);
  cursor:         pointer;
  transition:     color .15s, border-color .15s;
  line-height:    1.3;
  margin-bottom:  -1px;
}
.prj-tab-btn.is-active {
  border-color:        var(--c-border);
  border-bottom-color: #fff;
  color:               var(--c-ink);
  font-weight:         600;
}
.prj-tab-btn:not(.is-active):hover {
  color: var(--c-ink);
}

.prj-tab-panel {
  display: none;
  padding: 28px 0 36px;
}
.prj-tab-panel.is-active {
  display: block;
}

.prj-tab-empty {
  color:       var(--c-ph);
  font-size:   16px;
  padding:     24px 0;
  margin:      0;
}

/* Планировки (2 колонки) */
.plans-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
}

.plans-card {
  background:    var(--c-bg);
  border:        1px solid var(--c-divider);
  border-radius: var(--radius);
  overflow:      hidden;
}
.plans-card.is-zoomable {
  cursor: zoom-in;
}
.plans-card.is-zoomable:hover .plans-card-img img {
  transform: scale(1.03);
}

.plans-card-head {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         14px 16px 10px;
  gap:             8px;
}

.plans-card-title {
  font-size:   16px;
  font-weight: 600;
  color:       var(--c-ink);
}

.plans-card-area {
  font-family: var(--font-mono);
  font-size:   13px;
  color:       var(--c-mid);
  flex-shrink: 0;
}

.plans-card-img {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   #fff;
}
.plans-card-img img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
  transition: transform .3s ease;
}

/* Фасады (2×2) */
.fasady-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

.fasady-card {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.fasady-card.is-zoomable { cursor: zoom-in; }
.fasady-card.is-zoomable:hover .fasady-card-img img {
  transform: scale(1.03);
}

.fasady-card-img {
  aspect-ratio:  1 / 1;
  overflow:      hidden;
  background:    #fff;
  border-radius: var(--radius);
  border:        1px solid var(--c-divider);
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       8px;
}
.fasady-card-img img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
  transition: transform .3s ease;
}

.fasady-card-cap {
  font-size:   13px;
  color:       var(--c-mid);
  margin:      0;
  line-height: 1.3;
}

/* Характеристики 2-колонки */
.char-grid-2col {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  column-gap:  40px;
  border-top:  1px solid var(--c-divider);
}

.char-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             20px;
  padding:         13px 0;
  border-bottom:   1px solid var(--c-divider);
}

.char-row.char-hidden { display: none; }
.char-grid-2col.is-expanded .char-row.char-hidden { display: flex; }

.char-label {
  font-size: 16px;
  color:     var(--c-mid);
}

.char-val {
  font-size:   16px;
  font-weight: 500;
  color:       var(--c-ink);
  text-align:  right;
  flex-shrink: 0;
}

/* Кнопка «Подробнее» */
.char-more-btn {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  20px;
  padding:     0;
  background:  none;
  border:      none;
  font-family: var(--font-main);
  font-size:   16px;
  font-weight: 500;
  color:       var(--c-accent);
  cursor:      pointer;
  transition:  color .15s;
}
.char-more-btn:hover { color: var(--c-ink); }
.char-more-btn svg   { transition: transform .25s ease; }
.char-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── 4. Комплектация ─────────────────────────────────────────── */

.prj-kompl {
  border-top: 1px solid var(--c-divider);
  padding:    36px 0 0;
  margin-top: 0;
}

.prj-kompl-top {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             20px;
  margin-bottom:   24px;
}

.prj-kompl-price-box {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  flex-shrink:    0;
}

.prj-kompl-price-lbl {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--c-ph);
}

.prj-kompl-price-val {
  font-family: var(--font-mono);
  font-size:   20px;
  font-weight: 500;
  color:       var(--c-accent);
}

/* Чипы выбора этапа */
.prj-stage-chips {
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  margin-bottom: 4px;
}

.prj-stage-chip {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  width:          124px;
  min-height:     100px;
  padding:        16px 12px 14px;
  background:     var(--c-soft);
  border:         1px solid var(--c-divider);
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     background .15s, border-color .15s;
  text-align:     center;
}
.prj-stage-chip:hover {
  background:   var(--c-accent-bg);
  border-color: rgba(178,138,88,.35);
}
.prj-stage-chip.is-active {
  background:   var(--c-accent-bg);
  border-color: var(--c-accent);
}

.prj-stage-num {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .06em;
  color:          var(--c-ph);
  line-height:    1;
}

.prj-stage-ico {
  color:      var(--c-mid);
  flex-shrink: 0;
}
.prj-stage-chip.is-active .prj-stage-ico {
  color: var(--c-accent);
}

.prj-stage-lbl {
  font-size:   12px;
  font-weight: 500;
  color:       var(--c-ink);
  line-height: 1.3;
}

/* Панели этапов */
.prj-stage-panel {
  display: none;
}
.prj-stage-panel.is-active {
  display: block;
}

.kompl-body {
  display:               grid;
  grid-template-columns: 5fr 7fr;
  gap:                   40px;
  padding:               28px 0 36px;
  border-top:            1px solid var(--c-divider);
  margin-top:            4px;
}

.kompl-img {
  border-radius: var(--radius);
  overflow:      hidden;
  background:    var(--c-soft);
}
.kompl-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  min-height: 260px;
}

.kompl-title {
  font-size:   20px;
  font-weight: 600;
  color:       var(--c-ink);
  margin:      0 0 12px;
}

.kompl-desc {
  font-size:   17px;
  color:       var(--c-mid);
  line-height: 1.7;
  margin:      0 0 16px;
}

.kompl-list {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  flex-direction: column;
  gap:         8px;
}
.kompl-list li {
  font-size:   16px;
  color:       var(--c-mid);
  padding-left: 16px;
  position:    relative;
}
.kompl-list li::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        8px;
  width:      6px;
  height:     6px;
  background: var(--c-accent);
  border-radius: 50%;
}

/* ── 3. Секции (планы / фасады / характеристики) ─────────────── */

.prj-section {
  border-top: 1px solid var(--c-divider);
  padding:    36px 0;
}

.prj-section .prj-section-h2 {
  margin-bottom: 24px;
}

/* ── 5. Описание ─────────────────────────────────────────────── */

.prj-section-h2 {
  font-family:    var(--font-main);
  font-size:      28px;
  font-weight:    700;
  color:          var(--c-ink);
  letter-spacing: -.01em;
  margin:         0;
}

.prj-desc {
  border-top: 1px solid var(--c-divider);
  padding:    36px 0;
}

.prj-desc .prj-section-h2 {
  margin-bottom: 24px;
}

.prj-desc-body {
  font-size:   17px;
  line-height: 1.8;
  color:       var(--c-mid);
}
.prj-desc-body p  { margin: 0 0 1em; }
.prj-desc-body p:last-child { margin-bottom: 0; }

/* ── 6. Построенные дома ─────────────────────────────────────── */

.prj-built {
  border-top: 1px solid var(--c-divider);
  padding:    36px 0;
}

.prj-built-top {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 24px;
}

.prj-built-count {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--c-ph);
  letter-spacing: .05em;
}

.built-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}

.built-card { display: flex; flex-direction: column; gap: 8px; }

.built-card-img {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   var(--c-soft);
  border-radius: var(--radius);
}
.built-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.built-place {
  font-size:   16px;
  font-weight: 600;
  color:       var(--c-ink);
  margin:      0;
}

.built-year {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--c-mid);
}

/* ── 7. Похожие проекты ──────────────────────────────────────── */

.prj-similar {
  border-top: 1px solid var(--c-divider);
  padding:    36px 0 48px;
}

.prj-similar .prj-section-h2 {
  margin-bottom: 24px;
}

.similar-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px !important;
}

/* Подавляем Enfold image-overlay в похожих проектах */
.prj-similar .image-overlay { display: none !important; }

/* Показываем только площадь и габариты — как в каталоге */
.prj-similar .spec-floors,
.prj-similar .spec-beds { display: none; }

/* ── Card body: flex-колонка, цена внизу ─────────────────────── */
.prj-similar .card-body {
  display:        flex !important;
  flex-direction: column !important;
  gap:            8px;
  padding:        16px 18px 18px;
}
.prj-similar .card-price {
  margin-top:  auto;
  padding-top: 10px;
  text-align:  right;
}
.prj-similar .price-build { display: none !important; }

/* ── Шрифты крупнее (перекрываем Enfold h3 и пр.) ────────────── */
.prj-similar .card-title {
  font-size:      18px !important;
  font-weight:    600  !important;
  letter-spacing: normal !important;
  line-height:    1.3  !important;
  margin:         0    !important;
  padding:        0    !important;
}
.prj-similar .card-ext-id {
  font-size:      12px !important;
  letter-spacing: normal !important;
}
.prj-similar .card-specs li {
  font-size:      14px !important;
  letter-spacing: normal !important;
}
.prj-similar .price-project {
  font-size:      19px !important;
  font-weight:    700  !important;
  letter-spacing: normal !important;
}

.similar-card {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  border-radius:   var(--radius);
  overflow:        hidden;
  border:          1px solid var(--c-divider);
  transition:      box-shadow .2s;
}
.similar-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.similar-card:hover .similar-card-img img {
  transform: scale(1.04);
}

.similar-card-img {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   var(--c-soft);
}
.similar-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}

.similar-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.similar-card-name {
  font-size:   18px;
  font-weight: 600;
  color:       var(--c-ink);
  margin:      0;
  line-height: 1.3;
}

.similar-card-sub {
  font-size: 15px;
  color:     var(--c-mid);
  margin:    0;
}

.similar-card-price {
  font-family: var(--font-mono);
  font-size:   16px;
  font-weight: 500;
  color:       var(--c-accent);
  margin:      4px 0 0;
}

/* ── Модалка ─────────────────────────────────────────────────── */

.prj-modal {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    1000;
}
.prj-modal.is-open { display: block; }

.prj-modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(17,17,17,.55);
  cursor:     pointer;
}

.prj-modal-inner {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         min(560px, 94vw);
  background:    #fff;
  border-radius: var(--radius);
  padding:       40px;
  max-height:    90vh;
  overflow-y:    auto;
}

.prj-modal-close {
  position:   absolute;
  top:        16px;
  right:      16px;
  display:    flex;
  align-items: center;
  justify-content: center;
  width:      36px;
  height:     36px;
  background: var(--c-soft);
  border:     1px solid var(--c-divider);
  border-radius: var(--radius);
  color:      var(--c-ink);
  cursor:     pointer;
}
.prj-modal-close:hover { background: var(--c-divider); }

.prj-modal-title {
  font-size:   24px;
  font-weight: 700;
  color:       var(--c-ink);
  margin:      0 0 8px;
}

.prj-modal-sub {
  font-size: 16px;
  color:     var(--c-mid);
  margin:    0 0 24px;
}

/* ── Лайтбокс ───────────────────────────────────────────────── */

.prj-lightbox {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  1100;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
}
.prj-lightbox.is-open { display: flex; }

.prj-lb-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(17,17,17,.88);
  cursor:     pointer;
}

.prj-lb-prev,
.prj-lb-next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  background:      transparent;
  border:          none;
  border-radius:   var(--radius);
  color:           #fff;
  cursor:          pointer;
  z-index:         2;
  transition:      background .15s;
}
.prj-lb-prev { left:  20px; }
.prj-lb-next { right: 20px; }
.prj-lb-prev:hover,
.prj-lb-next:hover { background: rgba(255,255,255,.15); }
.prj-lb-prev[hidden],
.prj-lb-next[hidden] { display: none; }
.prj-lb-img { cursor: pointer; }

.prj-lb-close {
  position:   absolute;
  top:        20px;
  right:      20px;
  display:    flex;
  align-items: center;
  justify-content: center;
  width:      44px;
  height:     44px;
  background: rgba(255,255,255,.1);
  border:     1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  color:      #fff;
  cursor:     pointer;
  z-index:    2;
}
.prj-lb-close:hover { background: rgba(255,255,255,.2); }

.prj-lb-img {
  position:   relative;
  max-width:  90vw;
  max-height: 85vh;
  object-fit: contain;
  display:    block;
  border-radius: var(--radius);
  z-index:    1;
}

.prj-lb-cap {
  position:    relative;
  color:       rgba(255,255,255,.7);
  font-size:   15px;
  margin:      12px 0 0;
  text-align:  center;
  max-width:   80vw;
  z-index:     1;
}

/* ── Sticky CTA (mobile) ─────────────────────────────────────── */

.prj-sticky-cta {
  display:      none;
  position:     fixed;
  bottom:       0;
  left:         0;
  right:        0;
  padding:      12px 20px;
  background:   #fff;
  border-top:   1px solid var(--c-divider);
  box-shadow:   0 -4px 16px rgba(0,0,0,.08);
  z-index:      50;
  gap:          10px;
  align-items:  center;
}
.prj-sticky-cta.is-visible { display: none; }

.prj-sticky-phone {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            1;
  height:          52px;
  border:          1px solid var(--c-border);
  border-radius:   var(--radius);
  font-family:     var(--font-main);
  font-size:       17px;
  font-weight:     500;
  color:           var(--c-ink);
  text-decoration: none;
}

/* ── Заглушки ─────────────────────────────────────────────────── */

.prj-ph-block {
  width:      100%;
  height:     100%;
  min-height: 160px;
  background: var(--c-soft);
}

/* ── Адаптив ─────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  .similar-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --page-px: 20px; }
  .domvm-project { --page-px: 20px; }

  .prj-hero-top  { padding: 20px; }
  .prj-h1        { font-size: 16px; }
  .prj-supertitle { font-size: 11px; }

  .char-grid-2col { grid-template-columns: 1fr; column-gap: 0; }

  .prj-arrow--prev { left:  10px; }
  .prj-arrow--next { right: 10px; }

  .prj-info-row {
    flex-direction: column;
    align-items:    stretch;
    gap:     16px;
    padding: 20px 0;
  }

  .prj-price-col {
    align-items:  flex-end;
    text-align:   right;
    border-left:  none;
    padding-left: 0;
    border-top:   1px solid var(--c-divider);
    padding-top:  20px;
    min-width:    0;
    width:        100%;
  }

  .prj-calc-btn { width: 100%; }

  .prj-params { width: 100%; }
  .prj-params-row { gap: 24px; }
  .prj-param { flex: 1; }

  .plans-grid  { grid-template-columns: 1fr; }
  .fasady-grid { grid-template-columns: repeat(2, 1fr); }

  .prj-tab-btn { padding: 10px 17px; font-size: 14px; }

  .prj-lb-prev,
  .prj-lb-next { color: #111; }
  .prj-lb-prev:hover,
  .prj-lb-next:hover { background: rgba(0,0,0,.06); }

  .similar-grid { grid-template-columns: 1fr; }

  /* Похожие проекты — мобильный стиль как на kirpich-странице */
  .prj-similar .card-body {
    padding: 6px 12px 8px !important;
    gap: 1px !important;
  }
  .prj-similar .card-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .prj-similar .card-ext-id {
    font-size: 12px !important;
  }
  .prj-similar .card-specs li {
    font-size: 12px !important;
  }
  .prj-similar .card-price {
    text-align: right !important;
    padding-top: 2px !important;
  }
  .prj-similar .price-project {
    font-size: 16px !important;
  }

  .built-grid { grid-template-columns: repeat(2, 1fr); }

  .kompl-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .prj-stage-chips {
    gap: 6px;
  }

  .prj-stage-chip {
    width:      calc(50% - 3px);
    min-height: 80px;
    padding:    12px 8px;
  }
}

@media (min-width: 901px) {
  .prj-sticky-cta { display: none !important; }
}