/* ===========================================================================
   PGG — shared Figma chrome: design tokens, header, hamburger menu, footer
   ---------------------------------------------------------------------------
   Moved verbatim out of home-figma.css so the redesigned inner pages can use
   the same header and footer as the homepage — one implementation, not two.
   Every selector is :is(.home-figma, .inner-figma), which has exactly the
   specificity of the old .home-figma, so the homepage cascade is unchanged.
   Load order: after styles.css / home-redesign.css, before the page layer
   (home-figma.css or inner-figma.css).
   =========================================================================== */

:is(.home-figma, .inner-figma) {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --fg-green-deep: #0c2519;   /* [measured] marble base, for flat fallbacks   */
  --fg-green-solid: #0e211b;  /* [measured] solid buttons                     */
  --fg-green-panel: #0b2015;  /* [measured] card bodies (used at ~80% alpha)  */
  --fg-ink: #0f231a;          /* [figma t-6] body text on light sections      */
  --fg-veil: #b3bcb9;         /* [measured] the light-section overlay         */
  --fg-gold: #c2a06a;         /* [figma t-1,2,3] primary gold                 */
  --fg-gold-deep: #bf915d;    /* [figma t-1,4] stat numbers, deeper gold      */
  --fg-white: #ffffff;        /* [figma t-2,3,5]                              */
  --fg-footer: #35342e;       /* [figma footer-color] not used yet            */

  --fg-hairline: rgba(255, 251, 227, 0.55); /* [measured] panel + button edge */

  /* ── Type ───────────────────────────────────────────────────────────── */
  --fg-display: 'Cormorant Garamond', 'Sofia Sans', Georgia, serif;
  --fg-body: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --fg-stat: 'Sofia Sans', 'Montserrat', system-ui, sans-serif;
  /* The valuation panel is the one place Figma specifies Inter rather than
     Montserrat — confirmed in the inspector for the panel's paragraph. */
  --fg-form: 'Inter', 'Montserrat', system-ui, sans-serif;
  /* Every word inside the valuation panel is pure black, not the near-black
     green used elsewhere on the page. */
  --fg-form-ink: #000000;

  /* Sizes are anchored so that at a 1920px viewport they equal the Figma
     value exactly (px / 1920 * 100 = vw), then clamped for smaller screens. */
  --fg-h1: clamp(2rem, 2.865vw, 55px);        /* [figma t-2] 55px            */
  --fg-h1-lh: 0.956;                          /* [figma t-2] 52.58 / 55      */
  --fg-lead: clamp(1rem, 1.042vw, 20px);      /* [figma t-3] 20px            */
  --fg-lead-lh: 1.197;                        /* [figma t-3] 23.94 / 20      */
  --fg-stat-size: clamp(1.5rem, 1.875vw, 36px); /* [figma t-4] 36px          */
  /* Floor raised from 0.875rem to 1rem. Below 1366px the bar is a hamburger,
     so this floor only ever applies between 1366 and 1616px, where 14px read
     as a shrunken desktop. 1920 still resolves to the measured 19px. */
  --fg-nav: clamp(1rem, 0.99vw, 19px);        /* [measured] 19 at 1920       */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --fg-container: 1610px;
  /* The About section is inset further than the hero: 223px left, 222px right
     at 1920, measured off 02-about. Its own token rather than a shared one. */
  --fg-about-container: 1475px;     /* [measured] content 155 → 1765 at 1920       */
  --fg-gutter: clamp(16px, 2vw, 40px);
  --fg-nav-pad: clamp(14px, 1.35vw, 26px);  /* [measured] logo sits at ~25px */
  --fg-btn-h: 52px;           /* [measured] button-1.png / button-2.png      */
  --fg-form-w: 410px;         /* [measured] panel 1357 → ~1767               */
}

/* ===========================================================================
   HEADER / NAVIGATION
   ---------------------------------------------------------------------------
   Transparent bar over the hero photo: logo left, links and actions right.
   The old navbar is an opaque white fixed bar with a blur, so every one of
   these needs to beat a `.market-page .navbar.navbar-home` !important rule —
   hence the four-class prefix rather than extra !important of my own.
   =========================================================================== */
:is(.home-figma, .inner-figma).market-page .navbar,
:is(.home-figma, .inner-figma).market-page .navbar.navbar-home {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  min-height: auto !important;
  padding: clamp(10px, 1vw, 18px) var(--fg-nav-pad) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, 0.9vw, 18px) !important;
  overflow: visible !important;
  z-index: 30 !important;
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-brand {
  order: -2;
  margin-right: auto;
  padding: 0 !important;
  background: transparent !important;
  /* `isolation` keeps the halo below in this element's own stacking context,
     so `z-index: -1` puts it behind the logo but still ON TOP of the hero
     photograph rather than disappearing underneath it. */
  position: relative;
  isolation: isolate;
}

/* ── Logo halo ────────────────────────────────────────────────────────────
   Figma sets the mark on a soft, diffused bloom of pale greenish white that
   melts into the dark marble. It is NOT a plate: no edge, no radius, no card.
   A radial gradient that runs all the way to zero alpha, plus a blur to kill
   any banding in the stops, is what gives it the diffused falloff. The logo
   itself stays transparent — nothing is painted over it.

   `.hero-banner` carries `overflow: hidden` (styles.css:2804) and the logo
   sits only ~18px below the top of the band, so the bloom is cropped there.
   That is fine, and it is why the halo can afford to be this bright: the top
   of the hero IS the top of the page, so the crop lands on the screen edge,
   where it reads as framing rather than as a cut. The Figma reference is
   cropped the same way — the glow runs off the top of its tile. Keep the clip,
   though: the halo overhangs the left gutter, and `overflow: visible` would
   turn that overhang into a horizontal scrollbar.

   The stops carry the brightness, not the core alone. Two earlier passes were
   too faint because the falloff was front-loaded: a bright centre that was
   already down to a tenth by the halfway mark, which the eye reads as a small
   dim glow rather than a large bright one. Holding the mid-range high (0.88 at
   20%, 0.66 at 38%, 0.42 at 54%) is what makes it bloom.                     */
:is(.home-figma, .inner-figma).market-page .navbar .nav-brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -85% -110%;
  pointer-events: none;
  background: radial-gradient(
    ellipse farthest-side at 50% 50%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.88) 20%,
    rgba(255, 255, 255, 0.66) 38%,
    rgba(253, 255, 253, 0.42) 54%,
    rgba(250, 255, 251, 0.22) 70%,
    rgba(248, 255, 250, 0.08) 85%,
    rgba(248, 255, 250, 0) 100%
  );
  filter: blur(18px);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.home-figma, .inner-figma).market-page .navbar .nav-brand::before {
    transition: opacity 0.3s ease;
  }
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-brand-logo {
  height: clamp(52px, 4.6vw, 88px);
  width: auto;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  mix-blend-mode: normal;
}

:is(.home-figma, .inner-figma).market-page .navbar a:not(.nav-brand) {
  color: var(--fg-white) !important;
  font-family: var(--fg-body);
  font-weight: 600 !important;
  font-size: var(--fg-nav) !important;
  letter-spacing: 0 !important;
  padding: 6px 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

:is(.home-figma, .inner-figma).market-page .navbar a:not(.nav-brand):hover,
:is(.home-figma, .inner-figma).market-page .navbar a:not(.nav-brand).active {
  color: var(--fg-gold) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Favourites: a gold-bordered square whose subject is the HEART. The counter
   used to sit beside the icon at the same weight, so the control read as the
   digit "0" with a shape next to it. It is now a small badge pinned to the
   corner, secondary to the icon — and it still hides itself at zero, which is
   existing behaviour in global-ui.js. */
:is(.home-figma, .inner-figma) .navbar .nav-favorites-button {
  position: relative;
  margin-left: clamp(6px, 0.8vw, 16px) !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  color: var(--fg-gold) !important;
  background: rgba(12, 37, 25, 0.35) !important;
}

:is(.home-figma, .inner-figma) .navbar .nav-favorites-button svg {
  width: 23px !important;
  height: 23px !important;
}

:is(.home-figma, .inner-figma) .navbar .nav-favorites-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fg-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  background: var(--fg-gold) !important;
  color: var(--fg-green-deep) !important;
}

/* Language pill keeps its rounded shape — it reads as a control, and Figma
   draws it that way. */
:is(.home-figma, .inner-figma) .navbar .lang-current {
  border: 1px solid var(--fg-gold) !important;
  background: rgba(12, 37, 25, 0.35) !important;
  color: var(--fg-white) !important;
  height: 44px;
}

/* ===========================================================================
   HEADER — HAMBURGER LAYOUT (<= 1365px)
   ---------------------------------------------------------------------------
   WHY 1365. The hamburger used to start at 760px, site-wide, in styles.css
   and in global-ui.js. Above that the desktop bar always showed, and because
   --fg-nav shrank with 0.99vw it bottomed out at 14px from 1414px down — the
   "shrunken desktop" at 1110 and 1334. Measured headless, the bar is NOT short
   of room: with a 16px floor it fits even at 1280 with 269px clear between the
   logo and the first link. So the problem was never space, it was scale, and
   the client asked for the hamburger at those widths rather than a desktop bar
   squeezed to fit. 1366 is the first common laptop width above 1334, and the
   bar at 16px there keeps 342px clear with a 33px right margin. The JS side of
   the same breakpoint is in ensureMobileNavToggle().

   STRUCTURE is the inner pages' mobile header — logo left, toggle right, an
   open panel of stacked links with favourites and language on the last row —
   in the homepage's own colours: dark green, white type, gold hairlines. The
   rules here override styles.css's <=760px menu layers, which were built for a
   white bar and hide the logo when the menu opens.

   Every navbar child is placed with `order` rather than explicit rows, so the
   grid auto-places them regardless of the order global-ui.js inserts them in:
   logo and toggle share row 1, each link takes a full row, favourites and
   language share the last row.
   =========================================================================== */
@media (max-width: 1365px) {
  :is(.home-figma, .inner-figma).market-page .navbar,
  :is(.home-figma, .inner-figma).market-page .navbar.navbar-home {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    align-content: start !important;
    justify-content: stretch !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    padding: 10px clamp(16px, 3vw, 32px) !important;
    /* Near-opaque, and no backdrop blur. The blur fed the blurred logo halo
       into the bar's backdrop pass and smeared it into a grey band ~280px
       wide; without it, anything below ~98% lets white hero type ghost
       through the bar as it scrolls under. */
    background: rgba(12, 37, 25, 0.985) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(194, 160, 106, 0.55) !important;
    overflow: visible !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar > .nav-brand {
    order: -3;
    grid-column: 1;
    justify-self: start;
    width: auto !important;               /* styles.css stretches it when open */
    margin: 0 !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-brand-logo {
    height: 48px;
  }

  /* The halo is sized for an 88px desktop mark hanging over a photograph. In a
     68px bar the same bloom would spill well past it, so it is pulled in to
     sit around the logo — same gradient, same colour, smaller reach. In px,
     not %, so it cannot grow with the brand box. */
  :is(.home-figma, .inner-figma).market-page .navbar .nav-brand::before {
    inset: -14px -22px;
    filter: blur(12px);
    opacity: 0.8;
  }

  /* ── Toggle: 44x44, gold hairline, white bars that cross into an X ───── */
  :is(.home-figma, .inner-figma).market-page .navbar > .navbar-mobile-toggle {
    order: -2;
    grid-column: 2;
    justify-self: end;
    position: static !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid var(--fg-gold) !important;
    border-radius: 0 !important;
    background: rgba(12, 37, 25, 0.35) !important;
    color: var(--fg-white) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
  }

  :is(.home-figma, .inner-figma).market-page .navbar > .navbar-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    transition: transform 0.24s ease, opacity 0.2s ease;
  }

  :is(.home-figma, .inner-figma).market-page .navbar > .navbar-mobile-toggle:hover,
  :is(.home-figma, .inner-figma).market-page .navbar > .navbar-mobile-toggle:focus-visible {
    background: rgba(194, 160, 106, 0.18) !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar > .navbar-mobile-toggle:focus-visible {
    outline: 2px solid var(--fg-gold);
    outline-offset: 2px;
  }

  /* 2px bars 5px apart sit 7px from the centre, so +/-7px lands them on it. */
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .navbar-mobile-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .navbar-mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .navbar-mobile-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Closed: logo and toggle only ───────────────────────────────────────
     styles.css keeps the active link visible in the closed bar; the client's
     layout is logo and hamburger alone. The <select> picker is hidden in both
     states — the flag switcher is the language control, as on inner pages. */
  :is(.home-figma, .inner-figma).market-page .navbar:not(.is-open) > a:not(.nav-brand),
  :is(.home-figma, .inner-figma).market-page .navbar:not(.is-open) > .nav-favorites-button,
  :is(.home-figma, .inner-figma).market-page .navbar:not(.is-open) > .lang-switch,
  :is(.home-figma, .inner-figma).market-page .navbar > .nav-lang-picker {
    display: none !important;
  }

  /* ── Open: a vertical panel under the same header row ──────────────────*/
  :is(.home-figma, .inner-figma).market-page .navbar.is-open {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: 22px !important;
    background: #091b12 !important;       /* opaque: text must not ghost through */
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-brand {
    display: flex !important;              /* styles.css hides it when open */
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > a:not(.nav-brand) {
    order: 0;
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 12px 2px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(194, 160, 106, 0.18);
    font-size: clamp(16px, 2.2vw, 19px) !important;
    white-space: normal !important;
    text-shadow: none;
  }

  /* Room between the header row and the first link. */
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-brand {
    margin-bottom: 10px !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-favorites-button {
    order: 20;
    grid-column: 1;
    justify-self: start;
    display: inline-flex !important;
    /* styles.css (<=760) sets flex-start !important for its full-width row,
       which pushed the heart 9px left in this 44px square. The badge is
       absolute, so it never takes part in the centring. */
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 20px 0 0 !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .lang-switch {
    order: 21;
    grid-column: 2;
    justify-self: end;
    display: inline-flex !important;
    margin: 20px 0 0 !important;
  }

  /* The page under an open menu stays put. The body class is toggled by the
     shared setOpen() on every page; only the homepage acts on it. */
  body:is(.home-figma, .inner-figma).nav-menu-open {
    overflow: hidden !important;
  }
}

@media (max-width: 1365px) and (prefers-reduced-motion: no-preference) {
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > a:not(.nav-brand),
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-favorites-button,
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .lang-switch {
    animation: mobileNavSlideDown 0.24s ease both;
  }
}

/* ===========================================================================
   HEADER — НАЕМ / ПРОДАЖБА CITY SUBMENUS
   ---------------------------------------------------------------------------
   global-ui.js wraps each of the two links in .nav-group with a .nav-submenu:
   all listings, Варна, Бургас. Desktop: a square deep-green panel with a gold
   hairline, opened on hover or keyboard focus. Hamburger: the main link keeps
   its row and the two cities follow it as indented sub-rows; "all" is the main
   link itself there, so it is not repeated.
   =========================================================================== */
:is(.home-figma, .inner-figma).market-page .navbar > .nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 6px 0;
  background: #091b12;                    /* opaque: hero type must not ghost through */
  border: 1px solid var(--fg-gold);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Bridges the 10px gap so the pointer can travel from the link to the panel. */
:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu::before {
  content: '';
  position: absolute;
  inset: -11px 0 auto;
  height: 11px;
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-group:is(:hover, :focus-within) > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-link {
  display: block;
  padding: 11px 20px !important;
  color: var(--fg-white) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left;
  text-shadow: none;
  background: transparent !important;
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-all {
  border-bottom: 1px solid rgba(194, 160, 106, 0.28);
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-link:is(:hover, :focus-visible, .is-current) {
  color: var(--fg-gold) !important;
  background: rgba(194, 160, 106, 0.12) !important;
}

:is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-link:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: -2px;
}

@media (max-width: 1365px) {
  :is(.home-figma, .inner-figma).market-page .navbar:not(.is-open) > .nav-group {
    display: none !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-group {
    order: 0;
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* The main link: the same row as every other link in the open panel. */
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-group > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 12px 2px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(194, 160, 106, 0.18);
    font-size: clamp(16px, 2.2vw, 19px) !important;
    white-space: normal !important;
    text-shadow: none;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-submenu {
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-submenu::before,
  :is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-all {
    display: none !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 2px 10px 22px !important;
    border-bottom: 1px solid rgba(194, 160, 106, 0.12);
    font-size: clamp(15px, 2vw, 17px) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.86) !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-submenu a.nav-submenu-link:is(:hover, :focus-visible, .is-current) {
    background: transparent !important;
  }
}

@media (max-width: 1365px) and (prefers-reduced-motion: no-preference) {
  :is(.home-figma, .inner-figma).market-page .navbar.is-open > .nav-group {
    animation: mobileNavSlideDown 0.24s ease both;
  }
}

/* ===========================================================================
   FOOTER  (10-footer)
   ---------------------------------------------------------------------------
   The one place on this page that is NOT marble. footer-color carries the
   Figma inspector panel for the node: Footer, 1924 x 276, Top 6163, #35342E —
   and 6163 + 276 = 6439, exactly BACKGROUND.jpg's height, so the footer is
   where the canvas ends and the marble genuinely stops. 10-footer.jpg samples
   rgb(53,52,47) on its ground, confirming the value.

   EVERY SELECTOR BELOW STARTS AT .site-footer. Nothing here reaches header,
   nav, .market-shell, .hero, .top-offers, body or a universal child — the
   previous attempt broke the header through a JS ordering fault, not CSS, but
   the scoping rule stands either way.

   Measured off 10-footer.jpg, a 1:1 1920x279 crop:

     column starts     39 logo | 155 contacts | 565 phones | 749 info
                       1069 other | brand centred on 1561
     headings          cap 14px -> 20px Montserrat bold, white
     brand title       cap 12px -> 17px uppercase, tracked
     "Последвайте ни"  cap 11px -> 14px
     social row        x 1386..1735, 46px tall -> seven 44px marks ~6px apart
     logo tile         x 39..135, 97 square, white
     content band      y 74 (heading tops) .. 227 (PGG label bottom)
     padding           ~70 top, ~52 bottom, which brings 276 back
   =========================================================================== */
:is(.home-figma, .inner-figma) .site-footer.site-footer-figma {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(34px, 3.65vw, 70px) 0 clamp(28px, 2.7vw, 52px);
  background: #35342e !important;           /* [figma] footer-color          */
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff;
}

:is(.home-figma, .inner-figma) .site-footer-figma .site-footer-inner {
  width: min(1840px, 100% - (var(--fg-gutter) * 2));
  margin-inline: auto;
  padding: 0;
  display: grid;
  /* Logo | contacts | the three navigation columns (.footer-nav, split evenly
     inside) | brand. The brand column never drops below its content width, so
     the social row stays on one line. */
  grid-template-columns:
    max-content
    minmax(0, 2fr)
    minmax(0, 2.6fr)
    minmax(max-content, 1.19fr);
  gap: clamp(18px, 1.56vw, 30px);
  align-items: start;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ── Logo ─────────────────────────────────────────────────────────────────
   The real brand asset on a white tile, as the reference shows — the mark is
   dark ink and needs the light ground to read. Compact: 97px square. */
:is(.home-figma, .inner-figma) .site-footer-figma .footer-col-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.78vw, 15px);
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(66px, 5.05vw, 97px);         /* [measured] 97 square          */
  height: clamp(66px, 5.05vw, 97px);
  padding: clamp(6px, 0.52vw, 10px);
  background: #ffffff;
  border-radius: 2px;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-logo-label {
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: clamp(0.875rem, 0.885vw, 17px);
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* ── Column headings and lists ────────────────────────────────────────────*/
:is(.home-figma, .inner-figma) .site-footer-figma .footer-col-title {
  margin: 0 0 clamp(14px, 1.25vw, 24px);
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.042vw, 20px);    /* [measured] cap 14 -> 20       */
  line-height: 1.2;
  color: #ffffff;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-contacts-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(16px, 1.5vw, 28px);
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-contact-list,
:is(.home-figma, .inner-figma) .site-footer-figma .footer-link-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.73vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fg-body);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.833vw, 16px);
  line-height: 1.3;
  color: #ffffff;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-contact-list svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #ffffff;
}

/* Links are underlined in the reference. Colour needs !important because
   styles.css:5587 chains fourteen :not()s to about (0,15,2) and would repaint
   every one of these — the override stays inside the footer. */
:is(.home-figma, .inner-figma) .site-footer-figma a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:is(.home-figma, .inner-figma) .site-footer-figma a:hover,
:is(.home-figma, .inner-figma) .site-footer-figma a:focus-visible {
  color: var(--fg-gold) !important;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-contact-list-phones li {
  font-variant-numeric: tabular-nums;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-link-list li {
  font-family: var(--fg-body);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.833vw, 16px);
  line-height: 1.3;
  color: #ffffff;
}

/* Имоти / Компания / Полезно: three equal columns in one grid cell. */
:is(.home-figma, .inner-figma) .site-footer-figma .footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 26px);
  align-items: start;
}

/* ── Brand and socials ────────────────────────────────────────────────────*/
:is(.home-figma, .inner-figma) .site-footer-figma .footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.25vw, 24px);
  text-align: center;
}

:is(.home-figma, .inner-figma) .site-footer-figma .footer-brand-title {
  margin: 0;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.885vw, 17px); /* [measured] cap 12 -> 17     */
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

:is(.home-figma, .inner-figma) .site-footer-figma .site-footer-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.68vw, 13px);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

:is(.home-figma, .inner-figma) .site-footer-figma .site-footer-socials-label {
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.729vw, 14px); /* [measured] cap 11 -> 14       */
  line-height: 1.2;
  color: #ffffff;
}

/* The marks keep the platform colours they already ship with — that is what
   both the reference and the current implementation do. Only size and spacing
   come from the measurement. */
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(5px, 0.42vw, 8px);             /* [measured] 350px for seven    */
  margin: 0;
}

:is(.home-figma, .inner-figma) .site-footer-figma .social-icon {
  width: clamp(34px, 2.29vw, 44px);         /* [measured] row 46 tall        */
  height: clamp(34px, 2.29vw, 44px);
  border-radius: 50%;
  box-shadow: none !important;
  transform: none !important;
}

:is(.home-figma, .inner-figma) .site-footer-figma .social-icon svg {
  width: 60%;
  height: 60%;
}

/* Platform colours are the resting state (footer-color.jpg): solid brand
   circles with a white mark, Google as a white disc with its four-colour G.
   Hover only lifts and brightens. */
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon {
  color: #ffffff;
  transition: transform 0.2s ease, filter 0.2s ease;
}
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-facebook { background: #1877f2; border-color: #1877f2; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-instagram { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); border-color: transparent; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-tiktok { background: #000000; border-color: #000000; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-tiktok svg { filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55); }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-youtube { background: #ff0000; border-color: #ff0000; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-google { background: #ffffff; border-color: #ffffff; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-google path:nth-of-type(1) { fill: #4285f4; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-google path:nth-of-type(2) { fill: #34a853; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-google path:nth-of-type(3) { fill: #fbbc05; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-google path:nth-of-type(4) { fill: #ea4335; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-viber { background: #7360f2; border-color: #7360f2; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-whatsapp { background: #25d366; border-color: #25d366; }
:is(.home-figma, .inner-figma) .site-footer-figma .social-icon-messenger { background: radial-gradient(circle at 20% 100%, #0099ff, #a033ff 60%, #ff5280 90%); border-color: transparent; }

:is(.home-figma, .inner-figma) .site-footer-figma .social-icon:is(:hover, :focus-visible) {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.08);
}

@media (max-width: 1180px) {
  /* [inferred] No mobile frame for the footer. Tablet is 2 x 2, with the logo
     beside the contacts — that pairing keeps the address block wide enough for
     each line to stay unbroken. */
  :is(.home-figma, .inner-figma) .site-footer-figma .site-footer-inner {
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: clamp(26px, 3.2vw, 40px);
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-col-brand {
    grid-column: 1 / -1;
  }

  /* The three navigation columns get their own full row under the contacts. */
  :is(.home-figma, .inner-figma) .site-footer-figma .footer-nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  /* [inferred] Mobile: one column, left-aligned so addresses and numbers stay
     easy to hit. The contacts sub-grid collapses too, otherwise the phone
     column squeezes to a couple of digits. Social marks wrap, not shrink. */
  :is(.home-figma, .inner-figma) .site-footer-figma .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-col-logo {
    align-items: flex-start;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-contacts-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-col-brand {
    align-items: flex-start;
    text-align: left;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .site-footer-socials {
    align-items: flex-start;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .social-icon-row {
    justify-content: flex-start;
  }

  /* Navigation columns stack; each link gets a taller tap row instead of a
     wider gap, so the list stays compact but easy to hit. */
  :is(.home-figma, .inner-figma) .site-footer-figma .footer-nav {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-nav .footer-col-title {
    margin-bottom: 6px;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-nav .footer-link-list {
    gap: 0;
  }

  :is(.home-figma, .inner-figma) .site-footer-figma .footer-nav .footer-link-list a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}

/* ===========================================================================
   SHARED OVERLAYS — favourites drawer, language menu, page preloader
   ---------------------------------------------------------------------------
   All three are appended to <body> by global-ui.js on every page, and
   styles.css still drew them white with blue accents. On the redesigned pages
   (homepage and inner pages) they take the site's language: deep green,
   gold hairlines, white type, square corners. Only styling — the markup, the
   favourites storage and the loading lifecycle are untouched.
   =========================================================================== */

/* ── Favourites drawer ────────────────────────────────────────────────────*/
/* Above the property page's sticky contact bar (220) and the chat button
   (9000) while it is open; the language menu (9500) never shows with it. */
body:is(.home-figma, .inner-figma) .favorites-drawer {
  z-index: 9100;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-backdrop {
  background: rgba(4, 12, 8, 0.55);
}

body:is(.home-figma, .inner-figma) .favorites-drawer-panel {
  top: 16px;
  right: 16px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--fg-gold);
  border-radius: 0;
  background: rgba(9, 27, 18, 0.97);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
  color: var(--fg-white);
  font-family: var(--fg-body);
}

body:is(.home-figma, .inner-figma) .favorites-drawer-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(194, 160, 106, 0.35);
}

body:is(.home-figma, .inner-figma) .favorites-drawer-kicker {
  margin: 0 0 6px;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-gold);
}

body:is(.home-figma, .inner-figma) .favorites-drawer-head h2 {
  margin: 0;
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  color: var(--fg-white);
}

body:is(.home-figma, .inner-figma) .favorites-drawer-close,
body:is(.home-figma, .inner-figma) .favorite-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(194, 160, 106, 0.7) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-white) !important;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-close:hover,
body:is(.home-figma, .inner-figma) .favorites-drawer-close:focus-visible {
  background: rgba(194, 160, 106, 0.2) !important;
  color: var(--fg-gold) !important;
}

body:is(.home-figma, .inner-figma) .favorite-remove-button:hover,
body:is(.home-figma, .inner-figma) .favorite-remove-button:focus-visible {
  border-color: #ffb4a8 !important;
  background: rgba(255, 180, 168, 0.12) !important;
  color: #ffb4a8 !important;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-close:focus-visible,
body:is(.home-figma, .inner-figma) .favorite-remove-button:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

body:is(.home-figma, .inner-figma) .favorite-remove-button svg {
  width: 20px;
  height: 20px;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-body {
  gap: 10px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 160, 106, 0.6) transparent;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-body::-webkit-scrollbar {
  width: 6px;
}

body:is(.home-figma, .inner-figma) .favorites-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(194, 160, 106, 0.6);
}

body:is(.home-figma, .inner-figma) .favorites-empty {
  margin: 0;
  padding: 18px 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

body:is(.home-figma, .inner-figma) .favorite-item {
  padding: 10px;
  border: 1px solid rgba(194, 160, 106, 0.35);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

body:is(.home-figma, .inner-figma) .favorite-item:hover,
body:is(.home-figma, .inner-figma) .favorite-item:focus-within {
  border-color: var(--fg-gold);
  background: rgba(255, 255, 255, 0.08);
}

body:is(.home-figma, .inner-figma) .favorite-item-link {
  grid-template-columns: 84px minmax(0, 1fr);
  color: var(--fg-white) !important;
  text-decoration: none !important;
}

body:is(.home-figma, .inner-figma) .favorite-item-image {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
}

body:is(.home-figma, .inner-figma) .favorite-item-image-fallback {
  color: var(--fg-gold);
}

body:is(.home-figma, .inner-figma) .favorite-item-copy {
  min-width: 0;
  gap: 4px;
}

body:is(.home-figma, .inner-figma) .favorite-item-location {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

body:is(.home-figma, .inner-figma) .favorite-item-copy h3 {
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg-white);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:is(.home-figma, .inner-figma) .favorite-item-copy strong {
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-gold);
}

/* ── Language menu ────────────────────────────────────────────────────────*/
body:is(.home-figma, .inner-figma) .lang-menu {
  min-width: 170px;
  max-width: calc(100vw - 32px);
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--fg-gold);
  border-radius: 0;
  background: rgba(9, 27, 18, 0.97);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

body:is(.home-figma, .inner-figma) .lang-option {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 0;
  color: var(--fg-white);
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 14px;
}

body:is(.home-figma, .inner-figma) .lang-option:hover,
body:is(.home-figma, .inner-figma) .lang-option:focus-visible {
  background: rgba(194, 160, 106, 0.18);
  color: var(--fg-gold);
}

body:is(.home-figma, .inner-figma) .lang-option:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: -2px;
  border-radius: 0;
}

/* ── Page preloader ───────────────────────────────────────────────────────
   styles.css paints the overlay near-white with !important and the loader
   blue. Deep green over the page and gold squares; timing, the reveal
   classes and the loader animation are the existing ones. */
body:is(.home-figma, .inner-figma) .page-reveal {
  background-image: none !important;
  background-color: rgba(9, 27, 18, 0.96) !important;
}

body:is(.home-figma, .inner-figma) .page-reveal-spinner {
  color: var(--fg-gold);
}

body:is(.home-figma, .inner-figma) .page-reveal .loader {
  --c: no-repeat linear-gradient(#c2a06a 0 0);
}

/* Phones and small tablets: the drawer is a bottom sheet (styles.css), so the
   desktop top/width above must not stretch it to full height. */
@media (max-width: 900px) {
  body:is(.home-figma, .inner-figma) .favorites-drawer-panel {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: min(75vh, calc(100vh - 24px));
    max-height: min(75dvh, calc(100dvh - 24px));
    padding: 18px;
  }

  body:is(.home-figma, .inner-figma) .favorites-drawer-head h2 {
    font-size: 28px;
  }
}

/* ===========================================================================
   SHARED CAROUSEL  (carousel.js)
   ---------------------------------------------------------------------------
   One layout for the card carousels: an arrow each side, the track between
   them, dots underneath. The track is a native horizontal scroller (touch,
   trackpad and wheel stay native) with its scrollbar hidden and snap on card
   starts. carousel.js sets --pgg-per-view to the number of WHOLE cards that
   fit at the section's --pgg-carousel-min, and every card takes exactly its
   share, so a page never ends in half a card. Sections set only their own
   --pgg-carousel-min, gap and colour tokens.
   Arrows hide at <= 767px: phones swipe, and the dots show there is more.
   =========================================================================== */
:is(.home-figma, .inner-figma) .pgg-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  column-gap: clamp(10px, 0.83vw, 16px);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

:is(.home-figma, .inner-figma) .pgg-carousel-track {
  position: relative;
  display: flex !important;
  grid-auto-flow: unset !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

:is(.home-figma, .inner-figma) .pgg-carousel-track::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-track > * {
  flex: 0 0 calc((100% - (var(--pgg-per-view, 1) - 1) * var(--pgg-carousel-gap, 18px)) / var(--pgg-per-view, 1)) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  scroll-snap-align: start;
}

:is(.home-figma, .inner-figma) .pgg-carousel-track {
  column-gap: var(--pgg-carousel-gap, 18px) !important;
  gap: var(--pgg-carousel-gap, 18px) !important;
}

/* Fewer cards than a page: centred, since nothing scrolls. */
:is(.home-figma, .inner-figma) .pgg-carousel-track.is-underfilled {
  justify-content: center;
}

:is(.home-figma, .inner-figma) .pgg-carousel-track.is-dragging {
  scroll-snap-type: none !important;
  cursor: grabbing;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  :is(.home-figma, .inner-figma) .pgg-carousel:not(.is-static) .pgg-carousel-track {
    cursor: grab;
  }
}

/* Arrows: square, thin gold edge, the band's ink on a clear ground. */
:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-arrow {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pgg-carousel-ink, var(--fg-ink)) !important;
  font-family: var(--fg-body);
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-arrow:is(:hover, :focus-visible):not(:disabled) {
  background: rgba(194, 160, 106, 0.18) !important;
  color: var(--pgg-carousel-ink, var(--fg-ink)) !important;
  border-color: var(--fg-gold) !important;
}

:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-arrow:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Nothing to scroll: keep the columns (so the cards do not jump between
   cities) but take the arrows out of sight. */
:is(.home-figma, .inner-figma) .pgg-carousel.is-static .pgg-carousel-arrow {
  visibility: hidden;
}

:is(.home-figma, .inner-figma) .pgg-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(14px, 1.15vw, 22px) 0 0 !important;
}

:is(.home-figma, .inner-figma) .pgg-carousel-dots[hidden] {
  display: none !important;
}

:is(.home-figma, .inner-figma) .pgg-carousel-dots .pgg-carousel-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--pgg-carousel-dot, rgba(15, 35, 26, 0.24)) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

:is(.home-figma, .inner-figma) .pgg-carousel-dots .pgg-carousel-dot:is(:hover, :focus-visible):not(.is-active) {
  background: rgba(194, 160, 106, 0.6) !important;
}

:is(.home-figma, .inner-figma) .pgg-carousel-dots .pgg-carousel-dot.is-active {
  background: var(--fg-gold) !important;
}

@media (max-width: 767px) {
  :is(.home-figma, .inner-figma) .pgg-carousel {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-arrow {
    display: none !important;
  }

  /* One card per swipe, however hard the flick. */
  :is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-track > * {
    scroll-snap-stop: always;
  }
}

/* ===========================================================================
   PROPERTY CARD HOVER  (listings, city pages, broker pages, top offers,
   detail offers)
   ---------------------------------------------------------------------------
   One quiet response for every property card: a 4px lift, a slightly brighter
   gold edge, a faint shadow and a small photo zoom inside its frame. Only on
   real pointers; a touch gets a light press instead. No size change, so no
   layout shift. `body:` outranks the per-section `transform: none !important`.
   =========================================================================== */
body:is(.home-figma, .inner-figma) :is(.results .card, .top-offer-card) {
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

body:is(.home-figma, .inner-figma) :is(.results .card-media, .top-offer-image-wrap) {
  overflow: hidden;
}

body:is(.home-figma, .inner-figma) :is(.results .card .cover-image, .top-offer-card .top-offer-image) {
  transition: transform 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.home-figma, .inner-figma) :is(.results .card, .top-offer-card):is(:hover, :focus-visible) {
    transform: translateY(-4px) !important;
    border-color: #e2c894 !important;
    box-shadow: 0 12px 26px rgba(4, 16, 10, 0.32), 0 0 0 1px rgba(226, 200, 148, 0.18) !important;
  }

  body:is(.home-figma, .inner-figma) :is(.results .card:hover .cover-image, .results .card:focus-visible .cover-image, .top-offer-card:hover .top-offer-image, .top-offer-card:focus-visible .top-offer-image) {
    transform: scale(1.03) !important;
  }
}

@media (hover: none) {
  body:is(.home-figma, .inner-figma) :is(.results .card, .top-offer-card):active {
    transform: scale(0.99) !important;
    border-color: #e2c894 !important;
  }
}

/* Carousel tracks clip vertically, so give the lift and shadow room without
   moving anything: padding in, the same margin back out. */
:is(.home-figma, .inner-figma) .pgg-carousel .pgg-carousel-track {
  padding-block: 8px 14px !important;
  margin-block: -8px -14px !important;
}

/* ===========================================================================
   OFFICE CARDS -> GOOGLE MAPS  (homepage, /contacts, /careers)
   ---------------------------------------------------------------------------
   One link covers each office photo (a[data-office-map], URL from site-data.js
   OFFICE_MAPS). A small "Google Maps" cue stays visible, so the hover is not
   the only sign it opens; on hover the photo eases in, the scrim deepens a
   touch and a gold hairline frames the card.
   =========================================================================== */
:is(.home-figma, .inner-figma) :is(.office-card, .careers-office) {
  position: relative;
}

:is(.home-figma, .inner-figma) .office-map-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  color: #ffffff !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 0 rgba(194, 160, 106, 0);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

:is(.home-figma, .inner-figma) .office-map-cue {
  position: absolute;
  top: clamp(10px, 0.83vw, 16px);
  right: clamp(10px, 0.83vw, 16px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(194, 160, 106, 0.75);
  background: rgba(9, 25, 17, 0.62);
  color: #ffffff;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

:is(.home-figma, .inner-figma) .office-map-cue svg {
  flex: 0 0 auto;
  color: var(--fg-gold);
}

body:is(.home-figma, .inner-figma) :is(.office-card, .careers-office) :is(.office-photo, img) {
  transition: transform 0.35s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body:is(.home-figma, .inner-figma) :is(.office-card, .careers-office):has(.office-map-link:is(:hover, :focus-visible)) :is(.office-photo, img) {
    transform: scale(1.035) !important;
  }

  :is(.home-figma, .inner-figma) .office-map-link:is(:hover, :focus-visible) {
    background: rgba(9, 25, 17, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(226, 200, 148, 0.85);
  }

  :is(.home-figma, .inner-figma) .office-map-link:is(:hover, :focus-visible) .office-map-cue {
    background: rgba(9, 25, 17, 0.85);
    border-color: #e2c894;
  }
}

:is(.home-figma, .inner-figma) .office-map-link:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

/* ===========================================================================
   FLOATING CONTACT BUTTON  (global-ui.js ensureChatWidget)
   ---------------------------------------------------------------------------
   Deep green with a gold hairline and a gold mark, a slow gold ring instead of
   the blue pulse, and the opened menu in the same dark language. On phones it
   sits clear of the home indicator, and it rises above the listing page's
   sticky contact card whenever that card is showing.
   =========================================================================== */
body:is(.home-figma, .inner-figma) .pgg-chat-fab {
  right: clamp(14px, 1.2vw, 24px);
  bottom: calc(max(20px, calc(env(safe-area-inset-bottom) + 14px)) + var(--pgg-chat-lift, 0px));
  transition: bottom 0.2s ease;
}

body:is(.home-figma, .inner-figma) .pgg-chat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 50%;
  background: #0c2519 !important;
  color: var(--fg-gold) !important;
  box-shadow: 0 10px 24px rgba(4, 16, 10, 0.35);
  animation: pggChatPulseGold 2.8s ease-out infinite;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body:is(.home-figma, .inner-figma) .pgg-chat-toggle svg {
  width: 26px;
  height: 26px;
}

@keyframes pggChatPulseGold {
  0% { box-shadow: 0 10px 24px rgba(4, 16, 10, 0.35), 0 0 0 0 rgba(194, 160, 106, 0.45); }
  70% { box-shadow: 0 10px 24px rgba(4, 16, 10, 0.35), 0 0 0 12px rgba(194, 160, 106, 0); }
  100% { box-shadow: 0 10px 24px rgba(4, 16, 10, 0.35), 0 0 0 0 rgba(194, 160, 106, 0); }
}

body:is(.home-figma, .inner-figma) .pgg-chat-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: #16382a !important;
  border-color: #e2c894 !important;
  color: #e2c894 !important;
  transform: none;
  animation: none;
}

body:is(.home-figma, .inner-figma) .pgg-chat-toggle:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body:is(.home-figma, .inner-figma) .pgg-chat-toggle {
    animation: none;
  }
}

body:is(.home-figma, .inner-figma) .pgg-chat-link {
  border: 1px solid rgba(194, 160, 106, 0.7) !important;
  border-radius: 0 !important;
  background: #0c2519 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(4, 16, 10, 0.3) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body:is(.home-figma, .inner-figma) .pgg-chat-link:is(:hover, :focus-visible) {
  background: #16382a !important;
  border-color: #e2c894 !important;
}

@media (max-width: 767px) {
  body:is(.home-figma, .inner-figma) .pgg-chat-fab {
    right: 14px;
    bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 12px)) + var(--pgg-chat-lift, 0px));
  }

  body:is(.home-figma, .inner-figma) .pgg-chat-toggle {
    width: 50px;
    height: 50px;
  }

  body:is(.home-figma, .inner-figma) .pgg-chat-toggle svg {
    width: 23px;
    height: 23px;
  }
}

/* While the hamburger menu is open the launcher is gone entirely (no box, no
   hit area), so the language picker and every menu row stay clickable. */
body:is(.home-figma, .inner-figma).nav-menu-open .pgg-chat-fab {
  display: none !important;
}

/* The listing page's sticky contact card (fixed, bottom-centred, ~70px tall)
   owns the bottom edge while it shows: the button moves up above it. */
body:is(.home-figma, .inner-figma):has(.detail-contact-glass-card.is-visible) .pgg-chat-fab {
  bottom: calc(max(106px, calc(env(safe-area-inset-bottom) + 100px)) + var(--pgg-chat-lift, 0px));
}

/* ===========================================================================
   MOBILE HEADER LOGO  (<= 1365px)
   ---------------------------------------------------------------------------
   48px -> 54px for legibility. The bar's vertical padding drops 10 -> 8px, so
   the bar grows by 2px only (68 -> 70); the halo keeps a px inset, scaled with
   the mark, so it stays a glow around the logo and never becomes a band.
   =========================================================================== */
@media (max-width: 1365px) {
  :is(.home-figma, .inner-figma).market-page .navbar,
  :is(.home-figma, .inner-figma).market-page .navbar.navbar-home {
    padding-block: 8px !important;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-brand-logo {
    height: 54px;
  }

  :is(.home-figma, .inner-figma).market-page .navbar .nav-brand::before {
    inset: -15px -24px;
  }
}

/* Phones: dot rows keep clear of the floating contact button's column (50px
   + 14px), so a long row wraps instead of running under it. */
@media (max-width: 767px) {
  :is(.home-figma, .inner-figma) .pgg-carousel-dots {
    padding-inline: 68px;
    column-gap: 9px;
    row-gap: 9px;
  }
}