/* ==============================================================
   BUY PAGE - WHITE THEME (SCREENSHOT ACCURATE)
============================================================== */

:root {
    --buy-bg: #FFFFFF;
    --buy-text: #1a1a1a;
    --buy-border: #e0e0e0; /* Thin separators */
    --buy-font-head: 'Felidae', 'Cormorant Garamond', serif;
    --buy-font-text: 'Inter', sans-serif;
}

body.page-buy--white-theme {
    background-color: var(--buy-bg);
    color: var(--buy-text);
    font-family: var(--buy-font-text);
}

/* Global Grid Utilities */
.buy-sec {
    border-bottom: 1px solid var(--buy-border);
}
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.text-center { text-align: center; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--buy-font-head);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 0;
}

.buy-section-heading {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
}
.buy-section-sub {
    font-size: 18px;
    font-family: var(--buy-font-text);
    color: #666;
    margin-bottom: 40px;
    text-transform: none;
}

/* Buttons */
.buy-filter__btn {
    background-color: #3b4244;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--buy-font-text);
    text-transform: uppercase;
    transition: background 0.3s ease;
}
.buy-filter__btn:hover { background-color: #222; }

.buy-btn-dark-full {
    display: inline-block;
    background-color: var(--buy-text);
    color: #fff;
    padding: 16px 40px;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--buy-text);
    transition: all 0.3s ease;
}
.buy-btn-dark-full:hover {
    background-color: transparent;
    color: var(--buy-text);
}

.buy-btn-outline-wide {
    display: inline-block;
    background-color: transparent;
    color: var(--buy-text);
    border: 1px solid var(--buy-text);
    padding: 16px 60px;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}
.buy-btn-outline-wide:hover {
    background-color: var(--buy-text);
    color: #fff;
}


/* =========================================
   1. HERO
========================================= */
.buy-hero__inner {
    display: flex;
    min-height: 80vh;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-hero__text-col {
    flex: 1;
    padding: 80px 20px 80px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--buy-border);
}
.buy-breadcrumbs {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.buy-hero__title {
    font-size: 56px;
    line-height: 1.05;
    margin-bottom: 30px;
}
.buy-hero__subtitle {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 50px;
}
.buy-hero__link {
    font-size: 13px;
    color: var(--buy-text);
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.buy-hero__img-col {
    flex: 1;
    position: relative;
    padding: 40px;
}
.buy-hero__img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media(max-width: 991px) {
    .buy-hero__inner { flex-direction: column; }
    .buy-hero__text-col { border-right: none; border-bottom: 1px solid var(--buy-border); padding: 40px 20px; }
    .buy-hero__img-col { height: 400px; padding: 20px; }
    .buy-hero__title { font-size: 40px; }
}

/* =========================================
   2. STATS
========================================= */
.buy-stats__inner {
    display: flex;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-stats__item {
    flex: 1;
    padding: 40px 20px;
    text-align: left;
    padding-left: 40px;
    border-right: 1px solid var(--buy-border);
}
.buy-stats__item:last-child {
    border-right: none;
}
.buy-stats__val {
    font-family: var(--buy-font-head);
    font-size: 48px;
    line-height: 1;
    margin-bottom: 10px;
}
.buy-stats__lbl {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media(max-width: 768px) {
    .buy-stats__inner { flex-direction: column; }
    .buy-stats__item { border-right: none; border-bottom: 1px solid var(--buy-border); }
    .buy-stats__item:last-child { border-bottom: none; }
}

/* =========================================
   3. CATALOG & FILTERS
========================================= */
.buy-catalog-sec {
    padding: 80px 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-cat__header { margin-bottom: -30px; position: relative; z-index: 10;}
.buy-cat__title {
    font-size: 42px;
    margin-bottom: 15px;
}
.buy-cat__subtitle { color: #666; }

.buy-cat__filters {
    margin: 60px auto 80px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 20;
}
.buy-filter__wrap {
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Matches floating overlap */
    border: 1px solid var(--buy-border);
}
.buy-filter__item {
    padding: 20px 25px;
    border-right: 1px solid var(--buy-border);
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.buy-filter__item:hover { background: #f9f9f9; }
.buy-filter__action {
    padding: 20px 25px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
}
.buy-filter__btn { align-self: stretch; }

@media(max-width: 1200px) {
    .buy-filter__wrap { flex-wrap: wrap; justify-content: center; }
    .buy-filter__item { border-bottom: 1px solid var(--buy-border); }
}

/* Catalog List */
.buy-cat__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--buy-border);
}
.buy-prop {
    display: flex;
    border-bottom: 1px solid var(--buy-border);
}
.buy-prop:last-child { border-bottom: none; }

.buy-prop__info {
    flex: 0 0 40%;
    padding: 60px 40px;
    border-right: 1px solid var(--buy-border);
    display: flex;
    flex-direction: column;
}
.buy-prop__title { font-size: 32px; margin-bottom: 10px; }
.buy-prop__ref { font-size: 13px; color: #888; margin-bottom: 20px; }
.buy-prop__desc { font-size: 15px; color: #444; margin-bottom: 30px; }

.buy-prop__specs {
    list-style: none;
    padding: 0; margin: 0 0 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 14px; color: #555;
}
.buy-prop__price {
    font-family: var(--buy-font-head);
    font-size: 36px;
    margin-top: auto;
    margin-bottom: 30px;
}

.buy-prop__img {
    flex: 1;
    position: relative;
}
.buy-prop__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.buy-prop__nav {
    position: absolute;
    bottom: 30px; right: 30px;
    background: rgba(255,255,255,0.8);
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 0.1em;
}

@media(max-width: 991px) {
    .buy-prop { flex-direction: column; }
    .buy-prop__info { border-right: none; padding: 40px 20px; }
    .buy-prop__img { height: 350px; }
}

/* =========================================
   4. 5 STEPS
========================================= */
.buy-steps-sec {
    padding: 80px 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-steps__header { margin-bottom: 60px; }

.buy-steps__grid {
    display: flex;
    border-top: 1px solid var(--buy-border);
    border-bottom: 1px solid var(--buy-border);
    margin-bottom: 60px;
}
.buy-steps__card {
    flex: 0 0 50%;
    padding: 60px;
    border-right: 1px solid var(--buy-border);
    text-align: center;
}
.buy-steps__card img {
    max-width: 200px;
    margin: 0 auto 40px;
    display: block;
    border: 1px solid #eee;
}
.buy-steps__card-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 20px;
    font-family: var(--buy-font-text);
}
.buy-steps__card-desc {
    font-size: 15px;
    color: #666;
}

.buy-steps__accordion {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.buy-steps__acc-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    border-bottom: 1px solid var(--buy-border);
    cursor: pointer;
    transition: background 0.3s;
}
.buy-steps__acc-item:last-child { border-bottom: none; }
.buy-steps__acc-item:hover, .buy-steps__acc-item.active { background: #fcfcfc; }
.buy-steps__acc-num {
    font-size: 16px;
    font-family: var(--buy-font-head);
}
.buy-steps__acc-icon {
    font-size: 24px;
    color: #aaa;
}

@media(max-width: 991px) {
    .buy-steps__grid { flex-direction: column; }
    .buy-steps__card { border-right: none; border-bottom: 1px solid var(--buy-border); padding: 40px 20px; }
    .buy-steps__acc-item { padding: 30px 20px; }
}

/* =========================================
   5. LIFESTYLE
========================================= */
.buy-lifestyle-sec {
    padding: 100px 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-lifestyle__photos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 60px 0;
}
.buy-lifestyle__photo img {
    height: 350px;
    width: auto;
    object-fit: cover;
}
.buy-lifestyle__photo--center img {
    height: 450px;
}
.buy-lifestyle__desc h4 {
    font-family: var(--buy-font-text);
    font-size: 18px; line-height: 1.5;
    margin-bottom: 15px;
}
.buy-lifestyle__desc p { font-size: 15px; color: #666; }

@media(max-width: 991px) {
    .buy-lifestyle__photos { flex-direction: column; gap: 20px; }
    .buy-lifestyle__photo img, .buy-lifestyle__photo--center img { height: auto; width: 100%; max-width: 400px; }
}


/* =========================================
   6. DISTRICTS
========================================= */
.buy-districts-sec {
    padding: 80px 0 0 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-dist__tabs {
    text-align: center;
    margin: 40px 0 60px;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
}
.buy-dist__tabs span { margin: 0 10px; cursor: pointer; }
.buy-dist__tabs span.active { color: var(--buy-text); }
.buy-dist__tabs span.sep { cursor: default; color: var(--buy-border); }

.buy-dist__info-row {
    border-top: 1px solid var(--buy-border);
    border-bottom: 1px solid var(--buy-border);
    padding: 40px;
}
.buy-dist__title-left {
    font-size: 20px; margin-bottom: 20px;
}
.buy-dist__features {
    font-size: 14px; color: #555;
    padding-left: 20px; margin: 0;
}

.buy-dist__gallery {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.buy-dist__gall-main { width: 100%; height: 500px; object-fit: cover; }
.buy-dist__gall-bottom { display: flex; gap: 20px; }
.buy-dist__gall-bottom img { flex: 1; height: 300px; object-fit: cover;}

/* =========================================
   7. TESTIMONIALS
========================================= */
.buy-testimonials-sec {
    padding: 80px 0;
    background: #fdfdfd;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-testim__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 40px;
    margin-top: 60px;
}
.buy-testim__card {
    background: #fff;
    border: 1px solid var(--buy-border);
    padding: 40px;
}
.buy-testim__head {
    display: flex; align-items: center; gap: 15px; margin-bottom: 25px;
}
.buy-testim__head img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.buy-testim__name { font-family: var(--buy-font-head); font-size: 22px; line-height: 1.2; }
.buy-testim__name span { font-family: var(--buy-font-text); font-size: 13px; color: #888; }
.buy-testim__card-title {
    font-family: var(--buy-font-text); font-size: 15px; margin-bottom: 15px;
}
.buy-testim__card-text { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 30px; }
.buy-testim__date { font-size: 12px; color: #aaa; border-top: 1px solid var(--buy-border); padding-top: 15px; }

@media(max-width: 991px) {
    .buy-testim__grid { grid-template-columns: 1fr; padding: 0 20px; }
}


/* =========================================
   8. AFTERSALE GRID
========================================= */
.buy-aftersale-grid-sec {
    padding: 80px 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-aftersale-p { color: #666; font-size: 16px; margin-bottom: 60px; }

.buy-as__masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--buy-border);
    border-bottom: 1px solid var(--buy-border);
}
.buy-as__masonry > img { width: 100%; height: 100%; object-fit: cover; }
.buy-as__img1 { grid-column: 1/2; grid-row: 1/3; }
.buy-as__img2 { grid-column: 2/3; grid-row: 2/4; }

.buy-as__box {
    padding: 40px;
    border-right: 1px solid var(--buy-border);
    border-bottom: 1px solid var(--buy-border);
    display: flex; flex-direction: column; justify-content: center;
}
/* Ensure rightmost items don't have border-right, etc. just for aesthetics */
.buy-as__masonry > div, .buy-as__masonry > img {
    border-right: 1px solid var(--buy-border);
    border-bottom: 1px solid var(--buy-border);
}

.buy-as__box h4 { font-family: var(--buy-font-text); font-size: 16px; margin-bottom: 15px; }
.buy-as__box p { font-size: 14px; color: #555; margin: 0; }

@media(max-width: 991px) {
    .buy-as__masonry { grid-template-columns: 1fr; }
    .buy-as__img1, .buy-as__img2 { grid-column: 1; grid-row: auto; height: 300px; }
}

/* =========================================
   9. FAQ
========================================= */
.buy-faq-sec {
    padding: 80px 0;
    border-left: 1px solid var(--buy-border);
    border-right: 1px solid var(--buy-border);
}
.buy-faq__acc {
    border-top: 1px solid var(--buy-border);
}
.buy-faq__item {
    border-bottom: 1px solid var(--buy-border);
}
.buy-faq__head {
    padding: 30px 40px;
    font-size: 16px;
    font-family: var(--buy-font-text);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}
.buy-faq__head:hover { background: #fcfcfc; }
.buy-faq__toggle { font-size: 24px; color: #aaa; }

.buy-faq__body {
    padding: 0 40px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    font-size: 15px; color: #555;
}
.buy-faq__item.active .buy-faq__body {
    padding: 0 40px 30px;
    max-height: 300px;
}


/* =========================================
   10. FINAL CTA
========================================= */
.buy-cta-sec {
    padding: 80px 0;
}
.buy-cta__bg {
    background-size: cover;
    background-position: center;
    padding: 150px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buy-cta__box {
    background: #fff;
    padding: 60px;
    max-width: 800px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.buy-cta__sub { font-size: 18px; color: #555; margin-top: 15px; }
.buy-cta__btm { font-size: 12px; color: #888; margin-top: 20px; text-transform: uppercase;}


/* ==============================================================
   BUY PAGE - TEASER LISTINGS
   4th catalog-style card is partially faded out so the
   "Смотреть больше объектов" CTA overlaps it, creating the
   illusion that clicking the button reveals the property.
   ============================================================== */
.buy_listings.buy_listings--teaser .cat_listings__cards {
  position: relative;
}
.buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
  max-height: 320px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0.15) 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0.15) 85%, transparent 100%);
  pointer-events: none;
  margin-bottom: 0;
  border-bottom: 0 !important;
}
.buy_listings.buy_listings--teaser .buy_listings__more {
  position: relative;
  z-index: 5;
  margin-top: -180px;
}
/* Tighten the space before the next section (5 ШАГОВ ...) */
.buy_listings.buy_listings--teaser + .buy_steps {
  padding-top: 80px;
}

@media (max-width: 1199px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 260px;
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -140px;
  }
  .buy_listings.buy_listings--teaser + .buy_steps {
    padding-top: 60px;
  }
}

@media (max-width: 767px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 200px;
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -110px;
  }
  .buy_listings.buy_listings--teaser + .buy_steps {
    padding-top: 40px;
  }
}


/* ==============================================================
   BUY PAGE - DISTRICTS GALLERY (refined design)
   Reduce vertical dominance of the photos + add polish:
   rounded corners, soft shadow, subtle bottom-gradient and
   gentle zoom-on-hover. Layout itself is preserved so the
   tab-driven image swap JS keeps working.
   Only applies inside this template (buy-page.css is scoped).
   ============================================================== */
.buy_districts__big,
.buy_districts__small,
.buy_districts__wide {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 22px 50px -22px rgba(15, 23, 30, 0.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.buy_districts__big::after,
.buy_districts__small::after,
.buy_districts__wide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(15, 23, 30, 0.18) 100%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.buy_districts__big img,
.buy_districts__small img,
.buy_districts__wide img {
  transition: transform .6s ease;
  will-change: transform;
}
.buy_districts__big:hover img,
.buy_districts__small:hover img,
.buy_districts__wide:hover img {
  transform: scale(1.04);
}

/* ----- Mobile (<=767px): drastically shorter, keep nice corners ----- */
@media (max-width: 767px) {
  .buy_districts__gallery {
    padding: 0 18px;
    gap: 14px;
    margin: 24px auto 0;
  }
  .buy_districts__big {
    aspect-ratio: 16 / 10;
    max-height: 240px;
  }
  .buy_districts__small,
  .buy_districts__wide {
    aspect-ratio: 16 / 11;
    max-height: 200px;
  }
  .buy_districts__big,
  .buy_districts__small,
  .buy_districts__wide {
    border-radius: 12px;
    box-shadow: 0 12px 28px -14px rgba(15, 23, 30, 0.25);
  }
}

/* ----- Tablet (768-1199): refine spacing + lower big image ----- */
@media (min-width: 768px) and (max-width: 1199px) {
  .buy_districts__gallery {
    gap: 20px;
    padding: 0 60px;
  }
  .buy_districts__big {
    aspect-ratio: 24 / 9;
    max-height: 460px;
  }
}

/* ----- Desktop (>=1200): wider+shorter big image, more breathing room ----- */
@media (min-width: 1200px) {
  .buy_districts__gallery {
    gap: 28px;
  }
  .buy_districts__big {
    aspect-ratio: 5 / 2;
    max-height: 560px;
  }
}


/* =================================================================
   BUY PAGE - LARGE-SCREEN CONTAINMENT (>= 1500px)
   The template's fixed-pixel grids and typography were designed
   around a ~1440px desktop. On wider viewports columns inflate,
   buttons extend past the card edges and 3-column grids overflow
   their container. Here we:
     - Cap content to ~1500-1700px so it stops "blowing up"
     - Re-balance the 5-steps grid + shrink the photo column
     - Make the stories grid fluid so 3 cards always fit
     - Allow district tabs to wrap
     - Align the listings CTA to the card width
   ================================================================= */

@media (min-width: 1500px) {
  /* ---- Section content caps (grows slowly via clamp) ---- */
  .buy_search.buy_search--no-filters .container,
  .buy_listings.cat_listings .container,
  .buy_listings.cat_listings .cat_listings__cards,
  .buy_steps .container,
  .buy_districts__header,
  .buy_districts__info,
  .buy_districts__gallery,
  .buy_stories__title,
  .buy_aftersale .container,
  .buy_inquiry .container {
    max-width: clamp(1500px, 80vw, 1700px) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Listings CTA: align with the card visible content ---- */
  .buy_listings.cat_listings .buy_listings__more {
    width: calc(clamp(1500px, 80vw, 1700px) - 192px - 90px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- 5-STEPS: rebalance the 832px+1fr grid ---- */
  .buy_steps__grid {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    min-height: auto;
    gap: 24px;
  }
  .buy_steps__left {
    padding: 80px 40px 60px;
  }
  .buy_steps__photo {
    width: clamp(260px, 18vw, 340px);
    height: clamp(260px, 18vw, 340px);
    margin-bottom: 40px;
  }
  .buy_steps__desc1 {
    font-size: clamp(22px, 1.2vw + 8px, 28px);
  }
  .buy_steps__desc2 {
    font-size: clamp(16px, 0.5vw + 12px, 20px);
  }
  .buy_step {
    min-height: 86px;
    padding: 12px 16px;
  }
  .buy_step.is-active { min-height: 128px; }
  .buy_step__num,
  .buy_step__title {
    font-size: clamp(28px, 1.4vw + 12px, 38px);
  }
  .buy_steps__cta {
    max-width: clamp(1500px, 80vw, 1700px);
  }

  /* ---- DISTRICTS: tabs stay on a single centered row.
     (Auto-shrink + nowrap is enforced in the >=1200px block below.) ---- */
  .buy_districts__title {
    font-size: clamp(48px, 3vw + 16px, 64px);
  }
  .buy_districts__summary {
    font-size: clamp(22px, 1vw + 10px, 28px);
  }
  .buy_districts__desc {
    font-size: clamp(18px, 0.6vw + 10px, 22px);
  }
  .buy_districts__features li {
    font-size: clamp(16px, 0.5vw + 10px, 20px);
  }

  /* ---- STORIES: switch fixed 554px columns to fluid ---- */
  .buy_stories {
    padding-top: clamp(140px, 8vw, 180px);
  }
  .buy_stories__title {
    font-size: clamp(56px, 3vw + 16px, 72px);
    margin-bottom: 56px;
  }
  .buy_stories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: clamp(1500px, 80vw, 1700px);
    padding: 19px 60px;
    gap: 24px;
  }
  .buy_story {
    height: auto;
    min-height: 580px;
    padding: 28px;
  }
  .buy_story__name {
    font-size: clamp(28px, 1.2vw + 10px, 38px);
  }
  .buy_story__req {
    font-size: clamp(20px, 0.6vw + 12px, 26px);
  }
  .buy_story__text,
  .buy_story__age {
    font-size: clamp(16px, 0.5vw + 10px, 20px);
  }
  .buy_story__date {
    font-size: clamp(20px, 0.6vw + 12px, 26px);
  }
  .buy_stories__more {
    max-width: clamp(1500px, 80vw, 1700px);
  }

  /* ---- HERO / STATS / LIFESTYLE: gentle typography clamp ---- */
  .buy_hero h1 {
    font-size: clamp(64px, 4vw + 16px, 88px);
  }
  .buy_hero p {
    font-size: clamp(20px, 0.6vw + 12px, 26px);
  }
  .buy_steps__title {
    font-size: clamp(56px, 3vw + 16px, 72px);
  }
  .buy_lifestyle__header h2 {
    font-size: clamp(56px, 3vw + 16px, 72px);
  }
}

/* Hard cap from 1900px onwards — nothing keeps growing */
@media (min-width: 1900px) {
  .buy_search.buy_search--no-filters .container,
  .buy_listings.cat_listings .container,
  .buy_listings.cat_listings .cat_listings__cards,
  .buy_steps .container,
  .buy_districts__header,
  .buy_districts__info,
  .buy_districts__gallery,
  .buy_stories__title,
  .buy_stories__grid,
  .buy_aftersale .container,
  .buy_inquiry .container,
  .buy_steps__cta,
  .buy_stories__more {
    max-width: 1700px !important;
  }
  .buy_listings.cat_listings .buy_listings__more {
    width: calc(1700px - 192px - 90px);
  }
}


/* =================================================================
   BUY PAGE - LARGE-SCREEN PROPORTIONAL SCALING (>= 1500px)
   Companion to the typography clamps above. Targets all the
   fixed-pixel images, paddings and grid tracks that were ignoring
   viewport width — so the whole page scales proportionally
   instead of just the headlines.
   ================================================================= */

@media (min-width: 1500px) {
  /* ---- HERO photo ---- */
  .buy_hero__photo {
    width: clamp(440px, 30vw, 573px);
    height: clamp(520px, 36vw, 685px);
    top: clamp(-72px, -3vw, -48px);
  }

  /* ---- STATS: huge 80px numbers + 193px vertical gap ---- */
  .buy_stats {
    margin-top: clamp(56px, 4vw, 80px);
  }
  .buy_stats__grid {
    padding: clamp(28px, 2vw, 41px) 0 clamp(24px, 2vw, 35px);
  }
  .buy_stat {
    padding: 0 clamp(20px, 1.8vw, 36px);
  }
  .buy_stat:first-child {
    padding-left: clamp(20px, 1.8vw, 36px);
  }
  .buy_stat b,
  .buy_stat b em {
    font-size: clamp(54px, 3.5vw + 12px, 72px);
  }
  .buy_stat b {
    margin-bottom: clamp(96px, 8vw, 160px);
  }
  .buy_stat span {
    font-size: clamp(17px, 0.6vw + 11px, 22px);
    max-width: clamp(320px, 24vw, 460px);
  }

  /* ---- BIG CTA below stats ---- */
  .buy_bigcta {
    padding: clamp(20px, 1.8vw, 32px) 0 0;
  }
  .buy_bigcta__btn {
    max-width: clamp(1500px, 80vw, 1700px);
    height: clamp(72px, 5vw, 96px);
    font-size: clamp(18px, 0.6vw + 14px, 25px);
  }

  /* ---- LIFESTYLE photos (3 staggered photos) ---- */
  .buy_lifestyle__photos {
    width: clamp(880px, 60vw, 1114px);
    height: clamp(390px, 28vw, 499px);
  }
  /* The absolute children use pixel offsets; scale them to keep the staggered composition */
  .buy_lifestyle__photo--left {
    width: clamp(230px, 16vw, 293px);
    height: clamp(245px, 17vw, 313px);
    top: clamp(72px, 5vw, 93px);
  }
  .buy_lifestyle__photo--center {
    left: clamp(255px, 18vw, 325px);
    width: clamp(365px, 25vw, 464px);
    height: clamp(390px, 28vw, 499px);
  }
  .buy_lifestyle__photo--right {
    left: clamp(645px, 44vw, 821px);
    width: clamp(230px, 16vw, 293px);
    height: clamp(245px, 17vw, 313px);
    top: clamp(72px, 5vw, 93px);
  }
  .buy_lifestyle__intro1 {
    font-size: clamp(22px, 1vw + 12px, 28px);
  }
  .buy_lifestyle__intro2 {
    font-size: clamp(18px, 0.7vw + 10px, 22px);
  }

  /* ---- STORIES avatars (117x120 fixed) ---- */
  .buy_story__avatar {
    width: clamp(80px, 5vw, 110px);
    height: clamp(82px, 5vw, 112px);
  }
  .buy_story {
    padding: clamp(20px, 1.5vw, 28px);
  }
  .buy_story__head {
    gap: clamp(16px, 1.2vw, 22px);
    margin-bottom: clamp(20px, 1.6vw, 28px);
  }

  /* ---- AFTERSALE: grid 668px + 585px + 1fr with 415-417px rows ---- */
  .buy_after__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, clamp(310px, 22vw, 400px));
    max-width: clamp(1500px, 80vw, 1700px);
  }
  .buy_after__cell {
    padding: clamp(24px, 2vw, 35px) clamp(24px, 2vw, 35px) clamp(24px, 2vw, 35px) clamp(48px, 5vw, 94px);
  }
  .buy_after__photo-sm img {
    width: 100%;
    height: 100%;
    margin-left: clamp(48px, 5vw, 94px);
    margin-right: 0;
    max-width: calc(100% - clamp(48px, 5vw, 94px));
  }
  .buy_after__photo-lg img {
    width: 100%;
    height: 100%;
    max-width: 100%;
  }
  .buy_after__svc--care,
  .buy_after__svc--events {
    padding-left: clamp(24px, 2vw, 35px);
  }
  .buy_after__cell h4 {
    font-size: clamp(28px, 1.5vw + 10px, 38px);
    margin-bottom: clamp(24px, 2vw, 36px);
  }
  .buy_after__svc--own h4 {
    margin-bottom: clamp(40px, 4vw, 64px);
  }
  .buy_after__cell p {
    font-size: clamp(16px, 0.6vw + 10px, 22px);
    max-width: clamp(340px, 26vw, 480px);
  }
  .buy_after__title {
    font-size: clamp(48px, 3vw + 14px, 64px);
  }
  .buy_after__lead {
    font-size: clamp(22px, 1vw + 12px, 28px);
  }
  .buy_after__desc {
    font-size: clamp(16px, 0.6vw + 10px, 22px);
  }

  /* ---- DISTRICTS gallery: tighten max heights at large widths ---- */
  .buy_districts__gallery {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  }
}

/* ---- Hard cap >= 1900px ---- */
@media (min-width: 1900px) {
  .buy_hero__photo {
    width: 573px;
    height: 685px;
    top: -48px;
  }
  .buy_stat b,
  .buy_stat b em {
    font-size: 72px;
  }
  .buy_stat b {
    margin-bottom: 160px;
  }
  .buy_lifestyle__photos {
    width: 1114px;
    height: 499px;
  }
  .buy_lifestyle__photo--left { width: 293px; height: 313px; top: 93px; }
  .buy_lifestyle__photo--center { left: 325px; width: 464px; height: 499px; }
  .buy_lifestyle__photo--right { left: 821px; width: 293px; height: 313px; top: 93px; }
  .buy_after__grid {
    grid-template-rows: repeat(4, 380px);
    max-width: 1700px;
  }
  .buy_story__avatar {
    width: 110px;
    height: 112px;
  }
}


/* =================================================================
   BUY PAGE - "FIND YOUR DREAM VILLA" HEADER (no-filters variant)
   Title + subtitle are too big and have too much vertical air now
   that the filter form is gone. Shrink typography and tighten the
   gaps top/bottom. Scoped to .buy_search--no-filters so it does
   not affect any other page that still has a real filter form.
   ================================================================= */
.buy_search.buy_search--no-filters {
  padding: 80px 0 40px;
}
.buy_search.buy_search--no-filters .buy_search__header {
  margin: 0 auto 32px;
}
.buy_search.buy_search--no-filters .buy_search__header h2 {
  font-size: 48px;
  margin-bottom: 16px;
}
.buy_search.buy_search--no-filters .buy_search__header p {
  font-size: 24px;
}

/* >=1500px: keep the smaller header but use proportional clamps */
@media (min-width: 1500px) {
  .buy_search.buy_search--no-filters {
    padding: clamp(60px, 5vw, 96px) 0 clamp(28px, 2.5vw, 48px);
  }
  .buy_search.buy_search--no-filters .buy_search__header {
    margin: 0 auto clamp(24px, 2vw, 40px);
  }
  .buy_search.buy_search--no-filters .buy_search__header h2 {
    font-size: clamp(40px, 2.2vw + 12px, 56px);
    margin-bottom: clamp(12px, 1vw, 20px);
  }
  .buy_search.buy_search--no-filters .buy_search__header p {
    font-size: clamp(20px, 0.8vw + 10px, 28px);
  }
}

/* Tablet / mobile: shrink further */
@media (max-width: 1199px) {
  .buy_search.buy_search--no-filters {
    padding: 56px 0 28px;
  }
  .buy_search.buy_search--no-filters .buy_search__header h2 {
    font-size: 36px;
  }
  .buy_search.buy_search--no-filters .buy_search__header p {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .buy_search.buy_search--no-filters {
    padding: 36px 0 20px;
  }
  .buy_search.buy_search--no-filters .buy_search__header {
    margin: 0 auto 20px;
  }
  .buy_search.buy_search--no-filters .buy_search__header h2 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .buy_search.buy_search--no-filters .buy_search__header p {
    font-size: 14px;
  }
}


/* =================================================================
   BUY PAGE - TIGHTEN SEARCH-HEADER -> LISTINGS GAP
   Also re-anchor the teaser CTA to the *bottom edge* of the
   visible part of the 4th card so it covers the specs/price row
   (e.g. "1372 m²") instead of floating in the middle.
   ================================================================= */

/* 1) Less space between subtitle and first property card */
.buy_search.buy_search--no-filters {
  padding-bottom: 12px;
}
.buy_search.buy_search--no-filters + .buy_listings.cat_listings .container,
.buy_listings.cat_listings.buy_listings--teaser .container {
  margin-top: 0;
}

/* 2) 4th card: show only the photo + title strip, then the button
       sits flush at the bottom edge covering specs/price/foot. */
.buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
  max-height: 260px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
  pointer-events: none;
  margin-bottom: 0;
  border-bottom: 0 !important;
  position: relative;
}
.buy_listings.buy_listings--teaser .buy_listings__more {
  position: relative;
  z-index: 5;
  margin-top: -80px;
}

/* Responsive: keep the same "button at the bottom edge" effect at smaller widths */
@media (max-width: 1199px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 220px;
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -64px;
  }
}
@media (max-width: 767px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 180px;
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -56px;
  }
}

/* Even tighter top-margin override at >=1500px so the cap rules don't
   re-introduce extra spacing via clamp() recalculations. */
@media (min-width: 1500px) {
  .buy_search.buy_search--no-filters {
    padding-bottom: clamp(8px, 0.6vw, 16px);
  }
  .buy_listings.cat_listings.buy_listings--teaser .container {
    margin-top: 0;
  }
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: clamp(240px, 16vw, 300px);
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: clamp(-90px, -5vw, -70px);
  }
}


/* =================================================================
   BUY PAGE - "5 STEPS" SECTION: smaller text on large screens
   The right-side step titles + left-side description were still
   reading huge on >=1500px viewports. Tighten the clamps so they
   feel proportional to the rest of the page.
   ================================================================= */
@media (min-width: 1500px) {
  /* Section H2 "5 ШАГОВ ПОКУПКИ..." */
  .buy_steps__title {
    font-size: clamp(40px, 2.4vw + 8px, 56px);
  }
  /* Description above the steps list (left column) */
  .buy_steps__desc1 {
    font-size: clamp(16px, 0.6vw + 8px, 20px);
    margin-bottom: 12px;
  }
  .buy_steps__desc2 {
    font-size: clamp(14px, 0.4vw + 8px, 16px);
  }
  /* Each step item on the right column */
  .buy_step__num,
  .buy_step__title {
    font-size: clamp(20px, 0.8vw + 10px, 26px);
  }
  .buy_step {
    min-height: 64px;
    padding: 10px 14px;
  }
  .buy_step.is-active { min-height: 92px; }
  .buy_step__ico {
    width: 28px;
    height: 28px;
    background-size: 14px 14px;
  }
  /* Outro paragraph + CTA below the grid */
  .buy_steps__outro {
    font-size: clamp(14px, 0.4vw + 10px, 18px);
    margin: 40px 0 24px;
  }
  .buy_steps__cta {
    height: clamp(60px, 4vw, 80px);
    font-size: clamp(16px, 0.5vw + 12px, 22px);
  }
}

/* Hard cap at >=1900px */
@media (min-width: 1900px) {
  .buy_steps__title { font-size: 56px; }
  .buy_steps__desc1 { font-size: 20px; }
  .buy_steps__desc2 { font-size: 16px; }
  .buy_step__num,
  .buy_step__title { font-size: 26px; }
}


/* =================================================================
   BUY PAGE - REFINE TEASER OVERLAP + TIGHTEN GAP TO 5-STEPS
   Applies from 768px upwards (tablet + desktop). Phone (<=767)
   is intentionally left untouched.
   Button is positioned LOWER (less negative margin) so it sits
   over the "half-invisible" zone of the fade, not at the start.
   Gap to "5 ШАГОВ" is further reduced.
   ================================================================= */
@media (min-width: 768px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 400px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -110px;
  }
  .buy_listings.buy_listings--teaser + .buy_steps {
    padding-top: 8px !important;
  }
}

/* Tablet (768-1199): smaller card, button still on fade edge */
@media (min-width: 768px) and (max-width: 1199px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: 340px;
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: -90px;
  }
}

/* NOTE: smaller breakpoints (<1200) intentionally NOT overridden here —
   the previous rules for ≤1199 and ≤767 already place the button correctly
   on tablet/phone. Only desktop ≥1200 needed re-anchoring. */

@media (min-width: 1500px) {
  .buy_listings.buy_listings--teaser .cat_listings__cards > article:nth-child(4) {
    max-height: clamp(400px, 24vw, 480px);
  }
  .buy_listings.buy_listings--teaser .buy_listings__more {
    margin-top: clamp(-130px, -7vw, -100px);
  }
  .buy_listings.buy_listings--teaser + .buy_steps {
    padding-top: 8px !important;
  }
}


/* =================================================================
   BUY PAGE - BULLET-PROOF GAP REDUCTION (button -> "5 ШАГОВ")
   Earlier !important rules were not winning at every breakpoint
   because of source-order cascades from buy.css media queries.
   This block uses maximally specific selectors AND a translate
   on the title so the gap collapses no matter what padding rules
   are stacked above.
   ================================================================= */

/* Aggressive padding reset on the steps section when it follows
   the teaser listings — wins by source order being later AND by
   maximum specificity (4 classes + adjacent combinator + 1 type).
   ~20% tighter than the previous 8px attempt. */
section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
  padding-top: 0 !important;
}

/* Pull the title up: kill any leftover top margin AND apply
   a small negative translate so the visible gap shrinks ~20%
   beyond the padding reset (still leaves room to breathe). */
section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps > .container > .buy_steps__title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: translateY(-12px);
}

/* Same caps inside the >=1500 media query */
@media (min-width: 1500px) {
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
    padding-top: 0 !important;
  }
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps > .container > .buy_steps__title {
    transform: translateY(-16px);
  }
}

/* Same for ≤1199 */
@media (min-width: 768px) and (max-width: 1199px) {
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
    padding-top: 0 !important;
  }
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps > .container > .buy_steps__title {
    transform: translateY(-10px);
  }
}


/* =================================================================
   BUY PAGE - KILL THE 116px MARGIN-BOTTOM ON THE CTA
   `catalog.css` applies `margin-bottom: 116px` to
   `.cat_listings .buy_listings__more` (and 70/40 at smaller widths).
   That is the actual source of the persistent gap to "5 ШАГОВ".
   Strip it on the teaser variant only.
   ================================================================= */
.buy_listings.cat_listings.buy_listings--teaser .buy_listings__more {
  margin-bottom: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
}

@media (max-width: 767px) {
  .buy_listings.cat_listings.buy_listings--teaser .buy_listings__more {
    margin-bottom: 0 !important;
  }
}

/* =================================================================
   BUY PAGE - "Ver más propiedades" teaser button +10% on mobile.
   Only the buy-page teaser variant is bumped (this selector's
   specificity beats catalog.css's `.cat_listings .buy_listings__more`),
   so the catalog/invest "more" buttons keep their original sizes.
   ================================================================= */
@media (max-width: 768px) {
  .buy_listings.cat_listings.buy_listings--teaser .buy_listings__more {
    height: 48px;        /* 44px +10% */
    font-size: 12.1px;   /* 11px +10% */
  }
}
@media (max-width: 480px) {
  .buy_listings.cat_listings.buy_listings--teaser .buy_listings__more {
    height: 44px;        /* 40px +10% */
    font-size: 11px;     /* 10px +10% */
  }
}

/* Also wipe any vestigial top-of-section spacing on .buy_steps and
   the inner H2 — covers the .buy_steps__title font-size baseline gap. */
section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps > .container {
  padding-top: 0 !important;
}


/* =================================================================
   BUY PAGE - "5 STEPS" SECTION: start shrinking earlier (>=1200px)
   The buy.css defaults (80px H2, 44px step titles, 32px desc1)
   only kick in above 1199px, so the section went huge in the
   1200-1499 range until the >=1500 clamps used to take over.
   Now we apply controlled clamps from 1200px upward.
   ================================================================= */
@media (min-width: 1200px) {
  .buy_steps {
    padding-top: clamp(100px, 8vw, 160px);
  }
  .buy_steps__title {
    font-size: clamp(36px, 2vw + 8px, 52px) !important;
    margin: 0 auto clamp(32px, 3vw, 56px) !important;
  }
  .buy_steps__grid {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important;
    min-height: auto !important;
    gap: clamp(16px, 1.5vw, 28px);
  }
  .buy_steps__left {
    padding: clamp(48px, 4vw, 80px) clamp(24px, 2.5vw, 40px) clamp(40px, 3vw, 56px) !important;
  }
  .buy_steps__photo {
    width: clamp(220px, 16vw, 320px) !important;
    height: clamp(220px, 16vw, 320px) !important;
    margin-bottom: clamp(28px, 2.5vw, 44px) !important;
  }
  .buy_steps__desc1 {
    font-size: clamp(14px, 0.6vw + 8px, 20px) !important;
    margin-bottom: 12px !important;
  }
  .buy_steps__desc2 {
    font-size: clamp(13px, 0.4vw + 8px, 16px) !important;
  }
  .buy_step {
    min-height: clamp(56px, 4.5vw, 80px) !important;
    padding: 10px 14px !important;
  }
  .buy_step.is-active {
    min-height: clamp(80px, 6vw, 110px) !important;
  }
  .buy_step__num,
  .buy_step__title {
    font-size: clamp(18px, 0.9vw + 8px, 28px) !important;
  }
  .buy_step__ico {
    width: clamp(24px, 1.5vw, 32px) !important;
    height: clamp(24px, 1.5vw, 32px) !important;
    background-size: clamp(12px, 0.8vw, 16px) clamp(12px, 0.8vw, 16px) !important;
  }
  .buy_steps__outro {
    font-size: clamp(13px, 0.4vw + 9px, 18px) !important;
    margin: clamp(32px, 3vw, 56px) 0 clamp(20px, 2vw, 32px) !important;
  }
  .buy_steps__cta {
    height: clamp(56px, 4vw, 80px) !important;
    font-size: clamp(15px, 0.5vw + 11px, 22px) !important;
  }
}

/* Hard cap at >=1700px so it stops growing entirely */
@media (min-width: 1700px) {
  .buy_steps__title { font-size: 52px !important; }
  .buy_steps__desc1 { font-size: 20px !important; }
  .buy_steps__desc2 { font-size: 16px !important; }
  .buy_step__num,
  .buy_step__title { font-size: 28px !important; }
  .buy_steps__photo {
    width: 320px !important;
    height: 320px !important;
  }
}


/* =================================================================
   BUY PAGE - MOBILE STEPS: center photo + accordion reorder
   On mobile the flex grid stacks: step1 -> photo -> desc1 -> desc2
   -> step2..step5 (fixed orders from buy.css). For an accordion
   feel, the photo+desc must reposition under whichever step is
   active. We use a CSS var --active-step (set by main.js) to drive
   the order of photo/desc1/desc2 dynamically.
   ================================================================= */
@media (max-width: 767px) {
  /* Center the photo and the description blocks horizontally */
  .buy_steps__grid > .buy_steps__photo {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .buy_steps__grid > .buy_steps__desc1,
  .buy_steps__grid > .buy_steps__desc2 {
    text-align: center !important;
    align-self: center !important;
  }

  /* Accordion reorder: steps at fixed positions, photo/desc at a
     calculated position right after the active step. Buy.css uses
     order 1..8 — these !important rules supersede them. */
  .buy_steps__grid {
    --active-step: 1;
  }
  .buy_step:nth-child(1) { order: 10 !important; }
  .buy_step:nth-child(2) { order: 30 !important; }
  .buy_step:nth-child(3) { order: 50 !important; }
  .buy_step:nth-child(4) { order: 70 !important; }
  .buy_step:nth-child(5) { order: 90 !important; }
  .buy_steps__photo { order: calc(var(--active-step) * 20 - 8) !important; }
  .buy_steps__desc1 { order: calc(var(--active-step) * 20 - 7) !important; }
  .buy_steps__desc2 { order: calc(var(--active-step) * 20 - 6) !important; }
}


/* =================================================================
   BUY PAGE - MOBILE: ~20% more breathing room between the teaser
   "Смотреть больше объектов" button and the "5 ШАГОВ" title.
   Desktop stays at padding-top: 0 (per the bullet-proof override).
   ================================================================= */
@media (max-width: 767px) {
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
    padding-top: 24px !important;
  }
  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps > .container > .buy_steps__title {
    transform: none;
  }
}


/* =================================================================
   FIX: mobile photo not actually centering
   The previous selector used `>` direct child but the photo lives
   inside `.buy_steps__left` (even when that has display:contents,
   the DOM hierarchy keeps `.buy_steps__left` as the parent for
   CSS selector matching). Use a descendant selector instead.
   ================================================================= */
@media (max-width: 767px) {
  .buy_steps__grid .buy_steps__photo,
  .buy_steps__left .buy_steps__photo {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  .buy_steps__grid .buy_steps__desc1,
  .buy_steps__grid .buy_steps__desc2,
  .buy_steps__left .buy_steps__desc1,
  .buy_steps__left .buy_steps__desc2 {
    align-self: center !important;
    text-align: center !important;
  }
}


/* =================================================================
   BUY DISTRICTS — fully responsive from 1200px up to any viewport.
   Problem we are fixing: at >=1200px the right column was overflowing
   the page and the uppercase summary visually exceeded the H2 title.
   Strategy:
     - everything scales proportionally with clamp()
     - the overall section is centered with a real horizontal cap
       (max-width + symmetric padding) so it never bleeds off-screen
     - the right column has its own max-width so long words don't
       blow out the 1fr track on ultra-wide screens
     - growth is capped at the upper end of the clamps so we don't
       end up with 200px display fonts at 4K
   ================================================================= */
@media (min-width: 1200px) {
  /* Section container — symmetric horizontal cap. The previous
     padding-only constraint relied on the parent being centered,
     which it was not at >1700px viewports. */
  .buy_districts__header,
  .buy_districts__info,
  .buy_districts__gallery {
    max-width: min(1704px, calc(100% - 96px)) !important;
    box-sizing: border-box;
    padding-left: clamp(32px, 4vw, 72px) !important;
    padding-right: clamp(32px, 4vw, 72px) !important;
  }
  .buy_districts__info {
    /* Tighter, scalable column track. Right column is now capped
       so its content cannot push past the gallery boundary. */
    grid-template-columns: clamp(280px, 22vw, 410px) minmax(0, 1fr) !important;
    gap: clamp(48px, 6vw, 120px) !important;
  }

  /* Section text reduced by ~25% vs the base sizes per request. */

  /* Title (h2) — was fixed 80px; now scales 36→60. */
  .buy_districts__title {
    font-size: clamp(36px, 3.45vw, 60px) !important;
    margin-bottom: clamp(28px, 2.8vw, 48px) !important;
  }

  /* Tabs row — ALWAYS on a single, centered line. The min of the
     clamp is small enough (and we allow further shrink via flex-basis)
     that the row never wraps even when the active language is Russian
     and "Другой район" is the longest label. */
  .buy_districts__tabs {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: clamp(10px, 1.2vw, 22px) !important;
    width: 100%;
    min-width: 0;
  }
  .buy_tab {
    font-size: clamp(13px, 1.45vw, 33px) !important;
    padding-left: clamp(14px, 1.35vw, 24px) !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .buy_tab__sep { width: clamp(10px, 0.8vw, 22px); }

  /* Left column h3 + tagline */
  .buy_districts__left h3   { font-size: clamp(22px, 1.95vw, 33px) !important; }
  .buy_districts__tagline   { font-size: clamp(12px, 1.05vw, 19px) !important; max-width: 100% !important; }

  /* Right column — capped widths so the uppercase summary never
     overflows the gallery edge. */
  .buy_districts__right     { min-width: 0; max-width: 100%; }
  .buy_districts__summary   { font-size: clamp(14px, 1.2vw, 21px) !important; max-width: 100% !important; line-height: 125% !important; }
  .buy_districts__desc      { font-size: clamp(12px, 1.0vw, 17px) !important; max-width: 100% !important; margin-bottom: clamp(16px, 1.5vw, 28px) !important; }
  .buy_districts__features  {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.1vw, 18px) clamp(18px, 2vw, 40px) !important;
  }
  .buy_districts__features li {
    font-size: clamp(12px, 1.0vw, 17px) !important;
    margin-bottom: clamp(6px, 0.9vw, 16px) !important;
    padding-left: clamp(14px, 1.0vw, 18px) !important;
  }

  /* Gallery — keep aspect ratios, just bound the container. */
  .buy_districts__gallery {
    grid-template-columns: clamp(360px, 28vw, 538px) minmax(0, 1fr) !important;
    gap: clamp(16px, 1.6vw, 32px) !important;
    margin-top: clamp(32px, 3.2vw, 64px) !important;
  }
}

/* At very large viewports (>=1920px) hold the line: stop the clamps
   from continuing to grow, and lock the section to a sane outer width
   so it stays centered with breathing room on either side. */
@media (min-width: 1920px) {
  .buy_districts__header,
  .buy_districts__info,
  .buy_districts__gallery {
    max-width: 1760px !important;
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
}

/* Tablet range — keep the district tabs on a single centered row
   here too. Falls between the mobile scroll-row (<=767px) and the
   desktop block above. */
@media (min-width: 768px) and (max-width: 1199px) {
  .buy_districts__tabs {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: clamp(8px, 1.4vw, 14px) !important;
    width: 100%;
    min-width: 0;
  }
  .buy_tab {
    font-size: clamp(12px, 1.8vw, 22px) !important;
    padding-left: clamp(12px, 1.6vw, 20px) !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .buy_tab__sep { width: clamp(8px, 1vw, 14px) !important; }
}


/* =================================================================
   BUY STATS — fix the floating "%" sign, center every cell, and
   gently scale fonts down by ~25% from 1200px upward.
   Why: the previous "<b>99<em>%</em></b>" relied on flex baseline,
   but the Inter "%" sits high in its em box vs the Felidae digits,
   so it visually appeared as a superscript. We anchor both children
   to flex-end (bottom-align) with line-height:1 so the bottoms of
   the "99" and "%" glyphs sit on the same line.
   ================================================================= */
.buy_stat {
  align-items: center !important;
  text-align: center;
}
.buy_stat b {
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 2px;
}
.buy_stat b em {
  line-height: 1 !important;
  align-self: flex-end !important;
  font-style: normal;
}
.buy_stat span {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  /* 25% smaller vs base (80 -> 60, 25 -> 19) with gentle scaling so the
     numbers don't keep growing exponentially on ultra-wide screens. */
  .buy_stat b,
  .buy_stat b em {
    font-size: clamp(40px, 2.6vw + 14px, 60px) !important;
  }
  .buy_stat b {
    margin-bottom: clamp(64px, 6vw, 120px) !important;
  }
  .buy_stat span {
    font-size: clamp(14px, 0.55vw + 8px, 19px) !important;
    max-width: clamp(260px, 22vw, 380px) !important;
  }
}
@media (min-width: 1920px) {
  /* Hard cap so growth stops cleanly at the upper end. */
  .buy_stat b,
  .buy_stat b em { font-size: 60px !important; }
  .buy_stat span { font-size: 19px !important; }
}


/* =================================================================
   HERO at every tablet/laptop width below 1500px:
   the previous layout absolutely-positioned the 573px image on the
   right while the H1/P kept default max-widths, which meant the
   paragraph kept overlapping the image once the viewport dropped
   below ~1500px (and the EN/RU headline could slide under the photo
   in the 770-960 range). Replace that absolute layout with a real
   2-column grid so the image lives in its own track and the text
   can NEVER overflow into it. Sizes scale with the viewport.
   ================================================================= */
@media (min-width: 768px) and (max-width: 1499px) {
  .buy_hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 440px);
    gap: clamp(20px, 3vw, 48px);
    align-items: start;
    position: relative;
  }
  .buy_hero__text { padding-top: 0; min-width: 0; }
  .buy_hero__text h1 {
    font-size: clamp(28px, 4.4vw, 60px) !important;
    line-height: 110% !important;
    max-width: 100% !important;
    margin-bottom: clamp(16px, 1.6vw, 28px) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .buy_hero__text p {
    font-size: clamp(14px, 1.6vw, 22px) !important;
    line-height: 130% !important;
    max-width: 100% !important;
    margin-bottom: clamp(20px, 2vw, 32px) !important;
  }
  /* Pull the photo out of absolute flow and into its grid track. */
  .buy_hero__photo {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: clamp(260px, 32vw, 520px) !important;
    align-self: stretch;
  }
  /* CTA stays full-width below */
  .buy_hero__cta {
    grid-column: 1 / -1;
  }
}


/* =================================================================
   STORIES at 1200-1499 viewport:
   The base CSS hard-codes `grid-template-columns: repeat(3, 554px)`,
   which is 3 × 554 + gaps + 96px padding = ~1462px — wider than the
   viewport itself between 1200 and 1499px, so the row overflows and
   the typography (44px name, 32px request) looks oversized.
   Switch the grid to fluid tracks and clamp every text size so the
   block scales smoothly. The >=1500 block above already handles the
   same elements with similar values.
   ================================================================= */
@media (min-width: 1200px) and (max-width: 1499px) {
  .buy_stories {
    padding-top: clamp(100px, 9vw, 160px) !important;
  }
  .buy_stories__title {
    font-size: clamp(40px, 3.6vw, 60px) !important;
    margin: 0 auto 40px !important;
    max-width: calc(100% - 96px) !important;
  }
  .buy_stories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: calc(100% - 48px) !important;
    padding: 16px clamp(20px, 2vw, 40px) !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
  }
  /* Let cards size themselves to their content (no forced min-height)
     so the request label + quote fills the card without a giant empty
     band at the bottom. The date sits right under the quote. */
  .buy_story {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(24px, 2vw, 32px) !important;
    gap: 0;
  }
  .buy_story__head {
    gap: clamp(16px, 1.3vw, 22px) !important;
    margin-bottom: clamp(20px, 1.8vw, 28px) !important;
  }
  .buy_story__avatar {
    width: clamp(84px, 6.8vw, 112px) !important;
    height: clamp(86px, 6.8vw, 114px) !important;
  }
  /* Bump every text size ~35-40% vs the previous clamp so the quote
     reads naturally and actually occupies the card. */
  .buy_story__name {
    font-size: clamp(26px, 2.1vw, 38px) !important;
    line-height: 110%;
  }
  .buy_story__age {
    font-size: clamp(15px, 1.05vw, 20px) !important;
  }
  .buy_story__req {
    font-size: clamp(20px, 1.5vw, 28px) !important;
    margin-bottom: clamp(12px, 1vw, 18px) !important;
    line-height: 120%;
  }
  .buy_story__text {
    font-size: clamp(16px, 1.2vw, 22px) !important;
    line-height: 135%;
  }
  /* Date stays at the bottom but with a sane gap, not 200px of air. */
  .buy_story__date {
    font-size: clamp(18px, 1.3vw, 24px) !important;
    margin-top: clamp(20px, 2vw, 36px) !important;
  }
  .buy_stories__more {
    max-width: calc(100% - 48px) !important;
    height: clamp(64px, 5vw, 80px) !important;
    font-size: clamp(14px, 1vw, 18px) !important;
  }
}


/* =================================================================
   AFTERSALE — make the top-left photo fill its grid cell.
   The base CSS (and the >=1500 block earlier in this file) pushes the
   image 94px in from the left of its cell (margin-left + fixed 573px
   width and `max-width: calc(100% - 94px)`), leaving an empty strip
   on the left of the cell. Override with high specificity + double
   selectors so it wins against the existing rules at every viewport.
   Targets both the plain `<img>` and the `.parallax-img > img` that
   adds a scale(1.18) transform on top.
   ================================================================= */
section.buy_after .buy_after__cell.buy_after__photo-sm,
section.buy_after .buy_after__cell.buy_after__photo-lg,
section.buy_after .buy_after__photo-sm,
section.buy_after .buy_after__photo-lg,
.buy_after__photo-sm.parallax-img,
.buy_after__photo-lg.parallax-img {
  padding: 0 !important;
  overflow: hidden !important;
}
section.buy_after .buy_after__cell.buy_after__photo-sm img,
section.buy_after .buy_after__cell.buy_after__photo-lg img,
section.buy_after .buy_after__photo-sm img,
section.buy_after .buy_after__photo-lg img,
.buy_after__photo-sm.parallax-img img,
.buy_after__photo-lg.parallax-img img,
.buy_after__photo-sm img,
.buy_after__photo-lg img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}


/* =================================================================
   AFTERSALE at 1200-1499:
   The base CSS hard-codes `grid-template-columns: 668px 585px 1fr`
   (total ~1253px minimum) with 44px h4 + 25px p, which overflows and
   looks "huge" between 1200 and 1500. Mirror the >=1500 fluid grid
   here so the whole block scales smoothly without a discontinuity.
   ================================================================= */
@media (min-width: 1200px) and (max-width: 1499px) {
  section.buy_after .buy_after__header {
    padding: 0 clamp(24px, 2.5vw, 48px) !important;
  }
  section.buy_after .buy_after__title {
    font-size: clamp(34px, 2.8vw, 50px) !important;
  }
  section.buy_after .buy_after__lead {
    font-size: clamp(17px, 1.35vw, 24px) !important;
  }
  section.buy_after .buy_after__desc {
    font-size: clamp(13px, 1vw, 18px) !important;
  }
  section.buy_after .buy_after__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, clamp(220px, 22vw, 340px)) !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 auto !important;
  }
  section.buy_after .buy_after__cell {
    padding: clamp(18px, 1.6vw, 28px) clamp(18px, 1.6vw, 28px) clamp(18px, 1.6vw, 28px) clamp(24px, 2.5vw, 48px) !important;
  }
  section.buy_after .buy_after__cell.buy_after__photo-sm,
  section.buy_after .buy_after__cell.buy_after__photo-lg {
    padding: 0 !important;
  }
  section.buy_after .buy_after__svc--care,
  section.buy_after .buy_after__svc--events {
    padding-left: clamp(18px, 1.6vw, 28px) !important;
  }
  section.buy_after .buy_after__cell h4 {
    font-size: clamp(18px, 1.6vw, 28px) !important;
    margin-bottom: clamp(14px, 1.4vw, 22px) !important;
    line-height: 110% !important;
  }
  section.buy_after .buy_after__svc--own h4 {
    margin-bottom: clamp(20px, 2vw, 32px) !important;
  }
  section.buy_after .buy_after__cell p {
    font-size: clamp(13px, 1vw, 17px) !important;
    max-width: 100% !important;
    line-height: 130% !important;
  }
}


/* =================================================================
   AFTERSALE at >=1500: tighten typography vs the base 44/25/80px
   sizes so a 1500-2000px viewport doesn't look cramped or oversized.
   These mirror the existing 1500+ clamps but use higher specificity
   + !important so they always win over the base 44/25/80 rules.
   ================================================================= */
@media (min-width: 1500px) {
  section.buy_after .buy_after__title {
    font-size: clamp(44px, 2.6vw + 8px, 60px) !important;
    margin-bottom: clamp(20px, 1.6vw, 32px) !important;
  }
  section.buy_after .buy_after__lead {
    font-size: clamp(20px, 1.3vw, 28px) !important;
    margin: 0 auto clamp(12px, 1vw, 18px) !important;
  }
  section.buy_after .buy_after__desc {
    font-size: clamp(14px, 1vw, 20px) !important;
  }
  section.buy_after .buy_after__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, clamp(280px, 20vw, 380px)) !important;
    max-width: clamp(1500px, 80vw, 1700px) !important;
  }
  section.buy_after .buy_after__cell {
    padding: clamp(20px, 1.6vw, 32px) clamp(20px, 1.6vw, 32px) clamp(20px, 1.6vw, 32px) clamp(32px, 3vw, 56px) !important;
  }
  section.buy_after .buy_after__cell.buy_after__photo-sm,
  section.buy_after .buy_after__cell.buy_after__photo-lg {
    padding: 0 !important;
  }
  section.buy_after .buy_after__svc--care,
  section.buy_after .buy_after__svc--events {
    padding-left: clamp(20px, 1.6vw, 32px) !important;
  }
  section.buy_after .buy_after__cell h4 {
    font-size: clamp(22px, 1.7vw, 34px) !important;
    margin-bottom: clamp(18px, 1.6vw, 28px) !important;
    line-height: 110% !important;
  }
  section.buy_after .buy_after__svc--own h4 {
    margin-bottom: clamp(24px, 2.4vw, 44px) !important;
  }
  section.buy_after .buy_after__cell p {
    font-size: clamp(14px, 1vw, 19px) !important;
    max-width: 100% !important;
    line-height: 130% !important;
  }
}
/* 781–1199px: KEEP the large-screen 3-column mosaic (base buy.css stacks
   it into a single column from 769px up). Re-assert the desktop layout
   so the block only collapses at <=780px. Mirrors the inline <style> in
   page-buy.php (which wins under LiteSpeed); kept here for parity. */
@media (min-width: 781px) and (max-width: 1199px) {
  section.buy_after .buy_after__header {
    padding: 0 clamp(24px, 2.5vw, 48px) !important;
    margin: 0 auto clamp(28px, 3vw, 48px) !important;
  }
  section.buy_after .buy_after__title { font-size: clamp(30px, 4vw, 50px) !important; }
  section.buy_after .buy_after__lead  { font-size: clamp(16px, 2vw, 24px) !important; }
  section.buy_after .buy_after__desc  { font-size: clamp(13px, 1.4vw, 18px) !important; }
  section.buy_after .buy_after__grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr) minmax(0, 1.14fr) !important;
    grid-template-rows: repeat(4, clamp(200px, 22vw, 340px)) !important;
    grid-template-areas:
      "photoSM   care     repair"
      "cleaning  photoLG  photoLG"
      "logistics photoLG  photoLG"
      "moving    events   own" !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
  }
  section.buy_after .buy_after__cell {
    padding: clamp(16px, 1.8vw, 28px) clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 28px) clamp(18px, 2.2vw, 36px) !important;
    border-right: 1.6px solid #E1E1E1 !important;
    border-bottom: 0 !important;
    aspect-ratio: auto !important;
  }
  section.buy_after .buy_after__cell:nth-child(3n) { border-right: 0 !important; }
  section.buy_after .buy_after__cell.buy_after__photo-sm,
  section.buy_after .buy_after__cell.buy_after__photo-lg {
    padding: 0 !important;
    border-bottom: 0 !important;
    aspect-ratio: auto !important;
  }
  section.buy_after .buy_after__cell.buy_after__photo-sm { border-right: 1.6px solid #E1E1E1 !important; }
  section.buy_after .buy_after__cell.buy_after__photo-lg { border-right: 0 !important; }
  section.buy_after .buy_after__svc--care,
  section.buy_after .buy_after__svc--events { padding-left: clamp(18px, 2.2vw, 36px) !important; }
  section.buy_after .buy_after__svc--logistics,
  section.buy_after .buy_after__svc--moving { border-top: 1.6px solid #E1E1E1 !important; }
  section.buy_after .buy_after__cell h4 {
    font-size: clamp(15px, 1.9vw, 24px) !important;
    margin-bottom: clamp(10px, 1.4vw, 18px) !important;
    line-height: 110% !important;
  }
  section.buy_after .buy_after__svc--own h4 { margin-bottom: clamp(16px, 2vw, 28px) !important; }
  section.buy_after .buy_after__cell p {
    font-size: clamp(12px, 1.3vw, 16px) !important;
    max-width: 100% !important;
    line-height: 130% !important;
  }
}


/* =================================================================
   DISTRICTS: vertically center the tagline (and the Golden Mile / etc
   h3) in the left column so the small label group sits opposite the
   middle of the right column body text instead of being pinned to
   the bottom of the column.
   ================================================================= */
.buy_districts__left {
  justify-content: center !important;
}
.buy_districts__tagline {
  margin-top: clamp(12px, 1.2vw, 24px) !important;
}


/* =================================================================
   DESKTOP: vertically center the steps list in the right column
   The grid has a tall min-height (from buy.css) — the list ends up
   anchored to the top. We want the 5 steps centered on Y axis so
   they line up visually with the left-column photo + description.
   ================================================================= */
@media (min-width: 768px) {
  .buy_steps__list {
    justify-content: center !important;
  }
  .buy_steps__left {
    justify-content: center !important;
  }
}


/* =================================================================
   BUY PAGE - LIFESTYLE SECTION: reduce vertical breathing room
   The cream-background section had too much top/bottom padding:
   - >=770px: reduce 40%
   - <770px:  reduce 20%
   Plus add top spacing on the next section so the
   "МЫ ПОМОГАЕМ ВЫБРАТЬ РАЙОН" title doesn't touch the cream block.
   ================================================================= */

/* >= 770px: 40% less */
@media (min-width: 770px) {
  .buy_lifestyle {
    padding-top: 125px !important;    /* was 208 */
    padding-bottom: 134px !important; /* was 223 */
  }
}

/* The buy.css responsive blocks fire at <=1200 and <=991 with 100px each.
   We override those too for consistency at 770-1199. */
@media (min-width: 770px) and (max-width: 1200px) {
  .buy_lifestyle {
    padding-top: 60px !important;    /* was 100 */
    padding-bottom: 60px !important; /* was 100 */
  }
}

/* < 770px: 20% less */
@media (max-width: 769px) {
  .buy_lifestyle {
    padding-top: 48px !important;    /* was 60 */
    padding-bottom: 48px !important; /* was 60 */
  }
}

/* very small screens (<=360px): 20% less of the 40px there */
@media (max-width: 360px) {
  .buy_lifestyle {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Margin between the cream lifestyle block and the next section
   so its title gets visual breathing room from the beige edge. */
.buy_lifestyle + .buy_districts {
  padding-top: 80px !important;
}
@media (max-width: 1200px) {
  .buy_lifestyle + .buy_districts {
    padding-top: 56px !important;
  }
}
@media (max-width: 767px) {
  .buy_lifestyle + .buy_districts {
    padding-top: 32px !important;
  }
}


/* =================================================================
   BUY PAGE - LIFESTYLE (>=1200px): further compaction
   - Padding outer: another 40% less than the previous 125/134
   - All typography: 30% smaller
   - All internal margins: 30% smaller
   ================================================================= */
@media (min-width: 1200px) {
  /* Outer padding: 125 -> 75, 134 -> 80 (~40% less) */
  .buy_lifestyle {
    padding-top: 75px !important;
    padding-bottom: 80px !important;
  }

  /* Internal margins: -30% */
  .buy_lifestyle__header {
    margin: 0 auto 56px !important;       /* was 80 */
  }
  .buy_lifestyle__photos {
    margin: 0 auto 56px !important;       /* was 80 */
  }
  .buy_lifestyle__header h2 {
    margin-bottom: 22px !important;       /* was 32 */
  }
  .buy_lifestyle__intro1 {
    margin: 0 auto 11px !important;       /* was 16 */
  }

  /* Typography: -30% */
  .buy_lifestyle__header h2 {
    font-size: 56px !important;           /* was 80 */
  }
  .buy_lifestyle__sub {
    font-size: 31px !important;           /* was 44 */
  }
  .buy_lifestyle__intro1 {
    font-size: 22px !important;           /* was 32 */
  }
  .buy_lifestyle__intro2 {
    font-size: 17px !important;           /* was 25 */
  }

  /* Tighter separation to the next section so the white space
     doesn't undo the compaction. */
  .buy_lifestyle + .buy_districts {
    padding-top: 56px !important;
  }
}


/* =================================================================
   BUY STEPS - mobile card carousel
   ================================================================= */
.buy_step__body {
  display: none;
}

@media (max-width: 900px) {
  .buy_steps {
    padding: 32px 0 0 !important;
    overflow: hidden;
    background: #FFFFFF !important;
  }

  .buy_steps .container {
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
    background: #FFFFFF !important;
  }

  section.buy_listings.cat_listings.buy_listings--teaser + section.buy_steps {
    padding-top: 28px !important;
  }

  .buy_steps__title {
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 18px !important;
    font-size: clamp(33px, 9.6vw, 46px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
  }

  .buy_steps__grid {
    display: block !important;
    min-height: 0 !important;
  }

  .buy_steps__left {
    display: none !important;
  }

  .buy_steps__list {
    display: flex !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 18px 8px !important;
    border: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .buy_steps__list::-webkit-scrollbar {
    display: none;
  }

  .buy_step,
  .buy_step.is-active {
    flex: 0 0 calc(100vw - 54px) !important;
    width: calc(100vw - 54px) !important;
    min-width: calc(100vw - 54px) !important;
    max-width: calc(100vw - 54px) !important;
    min-height: clamp(690px, 82svh, 840px) !important;
    display: grid !important;
    grid-template-columns: clamp(78px, 18vw, 108px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid #41545C !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #010101 !important;
    box-shadow: 0 18px 38px rgba(16, 24, 40, 0.08) !important;
    overflow: hidden !important;
    scroll-snap-align: center;
    cursor: grab;
  }

  .buy_step:active {
    cursor: grabbing;
  }

  .buy_step.is-active {
    border-color: #010101 !important;
  }

  .buy_step__num {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-right: 1px solid #41545C !important;
    border-bottom: 1px solid #D7D3CA !important;
    background: #41545C !important;
    font-size: clamp(23px, 6.5vw, 32px) !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
  }

  .buy_step__title {
    min-width: 0 !important;
    min-height: clamp(112px, 24vw, 150px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 22px 22px 22px 20px !important;
    border-bottom: 1px solid #D7D3CA !important;
    background: #FFFFFF !important;
    font-size: clamp(24px, 6.3vw, 36px) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #010101 !important;
    text-align: left !important;
  }

  .buy_step__title br {
    display: none;
  }

  .buy_step__ico {
    display: none !important;
  }

  .buy_step__body {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-top: 0;
    background: #FFFFFF;
  }

  .buy_step__mobile-photo {
    width: 100%;
    height: clamp(330px, 43vh, 460px);
    flex: 0 0 auto;
    margin: auto 0 0;
    border-top: 1px solid #41545C;
    border-radius: 0 !important;
    overflow: hidden;
    background: #EDEDEA;
  }

  .buy_step__mobile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
  }

  .buy_step__copy {
    order: -1;
    display: block;
    padding: 24px 22px 22px;
    background: #FFFFFF;
    box-shadow: none;
  }

  .buy_step__desc-main,
  .buy_step__desc-sub {
    margin: 0;
    padding: 0;
    text-align: left !important;
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-weight: 300;
    letter-spacing: 0;
  }

  .buy_step__desc-main {
    margin-bottom: 14px;
    color: #010101;
    font-size: clamp(14px, 3.9vw, 18px);
    line-height: 1.26;
    text-transform: none;
  }

  .buy_step__desc-sub {
    color: #3C3C3B;
    font-size: clamp(12px, 3.2vw, 14.5px);
    line-height: 1.35;
  }

  .buy_step__desc-main br,
  .buy_step__desc-sub br {
    display: none;
  }

  .buy_steps__outro {
    margin: 26px 18px 16px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .buy_steps__cta {
    display: flex !important;
    width: calc(100% - 36px) !important;
    max-width: none !important;
    min-height: 62px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .buy_step__mobile-photo {
    height: clamp(280px, 45vh, 390px);
  }

  .buy_step__copy {
    padding-top: 18px;
  }
}


/* =================================================================
   BUY DISTRICTS - mobile selector and single hero image
   ================================================================= */
.buy_districts__mobile-select {
  display: none;
}

.buy_districts .is-district-leaving {
  opacity: 0.58;
  transform: translate3d(0, 4px, 0);
  transition:
    opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.buy_districts .is-district-entering {
  animation: buyDistrictEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

.buy_districts__big.is-district-image-shift img,
.buy_districts__small.is-district-image-shift img,
.buy_districts__wide.is-district-image-shift img {
  animation: buyDistrictImageShift 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes buyDistrictEnter {
  from {
    opacity: 0.58;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes buyDistrictImageShift {
  from {
    transform: scale(1.012);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy_districts .is-district-leaving,
  .buy_districts .is-district-entering,
  .buy_districts__big.is-district-image-shift img,
  .buy_districts__small.is-district-image-shift img,
  .buy_districts__wide.is-district-image-shift img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .buy_districts__header {
    overflow: visible !important;
  }

  .buy_districts__tabs {
    display: block !important;
    width: calc(100% - 54px) !important;
    max-width: none !important;
    margin: 24px auto 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .buy_districts__mobile-select {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 66px;
    position: relative;
    border: 1px solid rgba(65, 84, 92, 0.72);
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: 0 20px 52px rgba(65, 84, 92, 0.08);
    overflow: hidden;
  }

  .buy_districts__mobile-select::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 74px;
    height: 2px;
    background: #41545C;
    transform: translateX(-50%);
  }

  .buy_districts__mobile-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 100%;
    min-height: 66px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    color: #41545C;
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
  }

  .buy_districts__mobile-arrow--prev {
    border-right: 1px solid rgba(65, 84, 92, 0.22);
  }

  .buy_districts__mobile-arrow--next {
    border-left: 1px solid rgba(65, 84, 92, 0.22);
  }

  .buy_districts__mobile-current {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 13px 14px 12px;
    background: #FFFFFF;
  }

  .buy_districts__mobile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #41545C;
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  .buy_districts__mobile-meta span + span {
    position: relative;
  }

  .buy_districts__mobile-meta span + span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 1px;
    height: 9px;
    background: rgba(65, 84, 92, 0.36);
    transform: translateY(-50%);
  }

  .buy_districts__mobile-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: #17262B;
    font-family: "Inter", "Inter Metric Fallback", sans-serif;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  .buy_districts__tabs > .buy_tab__cursor,
  .buy_districts__tabs > .buy_tab {
    display: none !important;
  }

  .buy_districts {
    background: #FFFFFF !important;
  }

  #districtTitle {
    display: none !important;
  }

  .buy_districts__tagline {
    width: calc(100% - 54px) !important;
    max-width: none !important;
    margin: 0 auto 18px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(65, 84, 92, 0.18);
    color: #41545C !important;
    font-family: "Inter", "Inter Metric Fallback", sans-serif !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .buy_districts__summary,
  .buy_districts__desc,
  .buy_districts__features {
    width: calc(100% - 54px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .buy_districts__summary {
    margin-top: 22px !important;
    color: #17262B !important;
    font-family: "Inter", "Inter Metric Fallback", sans-serif !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    font-weight: 300 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .buy_districts__desc {
    margin-top: 10px !important;
    color: #3C3C3B !important;
    font-family: "Inter", "Inter Metric Fallback", sans-serif !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    font-weight: 300 !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
  }

  .buy_districts__features {
    padding-top: 12px !important;
    border-top: 1px solid rgba(65, 84, 92, 0.14);
  }

  .buy_districts__features li {
    color: #3C3C3B !important;
    font-family: "Inter", "Inter Metric Fallback", sans-serif !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    font-weight: 300 !important;
    line-height: 1.42 !important;
  }

  .buy_districts__gallery .buy_districts__small,
  .buy_districts__gallery .buy_districts__wide,
  .buy_districts__small,
  .buy_districts__wide {
    display: none !important;
  }

  .buy_districts__big {
    width: calc(100% - 54px) !important;
    margin: 8px auto 0 !important;
    aspect-ratio: 16 / 11 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .buy_districts__big::after {
    display: none !important;
  }

  .buy_districts__big img {
    border-radius: 0 !important;
  }
}