/* ===========================================================================
   PGG — inner pages, Figma design layer
   ---------------------------------------------------------------------------
   There is no Figma frame for the inner pages. The approved homepage is the
   design system: its tokens, header, menu and footer come from
   figma-chrome.css (loaded just before this file), and this layer adapts the
   homepage's visual language — the marble ground, flat light veils, Cormorant
   headings over Montserrat, gold hairlines, square corners — to pages that
   are content rather than a landing page.

   Scope: `body.inner-figma`. A page opts in by adding that class and loading
   figma-chrome.css + inner-figma.css; nothing here reaches the pages that are
   still on the old design. Page-specific parts are scoped one level further
   (`.team-page` below).

   Structure every redesigned inner page follows:

     body.market-page.inner-figma.<page>-page
       header.inner-hero      navbar (from global-ui.js) + compact page intro
       main.market-shell.inner-shell
         section.inner-band  [.inner-band-light]   one per content block
       footer                 injected by global-ui.js (shared Figma footer)
   =========================================================================== */

/* ── Page ground ─────────────────────────────────────────────────────────────
   The homepage marble, drawn once and scaled to the page, exactly as the
   homepage does (see home-figma.css, PAGE BACKGROUND, for why every longhand
   is !important: styles.css paints the city photo on body.market-page as an
   !important shorthand, and html gets a pale fill of its own). */
html:has(> body.inner-figma) {
  background: #0c2519 !important;
}

body.inner-figma.market-page,
body.inner-figma {
  background-image: url('/figma/homepage-background.jpg') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: var(--fg-green-deep) !important;
  background-blend-mode: normal !important;
  color: var(--fg-white);
  /* styles.css reserves 84px under the page for a sticky bar (<=760) that the
     redesigned pages do not have; the page ends at the footer. */
  padding-bottom: 0 !important;
}

body.inner-figma::before,
body.inner-figma::after {
  background-image: none !important;
}

/* The old shell is a capped, centred column pushed down to clear a fixed white
   navbar. Redesigned pages are full bleed and place their own containers. */
body.inner-figma .market-shell.inner-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block;
}

/* ── Header band + page intro ───────────────────────────────────────────────
   The navbar is the homepage's own (figma-chrome.css): absolutely placed over
   this band on desktop, a fixed hamburger bar at <=1365px. The intro is
   deliberately compact — about 360-400px tall at desktop including the bar —
   because this is a page header, not a hero. */
.inner-figma .inner-hero {
  position: relative;          /* containing block for the absolute navbar */
  isolation: isolate;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* An open Наем / Продажба submenu can reach past a short intro; lift the band
   over the content below only while it is open. */
.inner-figma .inner-hero:has(.nav-group:is(:hover, :focus-within)) {
  z-index: 70;
}

.inner-figma .inner-hero-content {
  width: min(1100px, 100% - (var(--fg-gutter) * 2));
  margin-inline: auto;
  /* Top clears the desktop bar (124px at 1920, 90px at 1366). */
  padding-block: clamp(118px, 7.5vw, 150px) clamp(40px, 3.1vw, 60px);
  text-align: center;
}

.inner-figma .inner-eyebrow {
  margin: 0 0 clamp(12px, 1.04vw, 20px);
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.6875rem, 0.729vw, 14px);   /* homepage section kicker */
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-gold);
}

.inner-figma .inner-title {
  margin: 0 0 clamp(14px, 1.25vw, 24px);
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 3.65vw, 70px);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--fg-white);
  text-wrap: balance;
}

/* A short gold rule under the title — the one ornament, echoing the gold
   hairlines of the homepage buttons and cards. */
.inner-figma .inner-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: clamp(14px, 1.25vw, 24px) auto 0;
  background: var(--fg-gold);
}

.inner-figma .inner-lead {
  max-width: 62ch;
  margin: 0 auto;
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.042vw, 20px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

@media (max-width: 1365px) {
  /* Same reason as the homepage hero band: the bar becomes fixed inside this
     isolated band and must stay above the content that scrolls under it. */
  .inner-figma .inner-hero {
    z-index: 60;
  }

  .inner-figma .inner-hero-content {
    /* 69px fixed bar + air. */
    padding-top: calc(69px + clamp(36px, 6vw, 72px));
  }
}

/* ── Content bands ──────────────────────────────────────────────────────────
   Dark bands are the marble itself (no fill). Light bands lay the homepage's
   flat veil over it — white at 68%, clipped to the band, no ramp, no blur —
   so the texture still reads through, exactly like Benefits and Brokers. */
.inner-figma .inner-band {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding-block: clamp(48px, 4.17vw, 80px) clamp(56px, 4.69vw, 90px);
  background: transparent;
}

.inner-figma .inner-band-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.68);
}

.inner-figma .inner-band > * {
  position: relative;
  z-index: 1;
}

.inner-figma .inner-container {
  width: min(1382px, 100% - (var(--fg-gutter) * 2));
  margin-inline: auto;
}

.inner-figma .inner-band-head {
  margin: 0 0 clamp(28px, 2.6vw, 50px);
  text-align: center;
}

.inner-figma .inner-band-title {
  margin: 0;
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.448vw, 47px);     /* homepage section heading */
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fg-white);
  text-wrap: balance;
}

.inner-figma .inner-band-light .inner-band-title {
  color: var(--fg-ink);
}

/* ── Buttons ────────────────────────────────────────────────────────────────
   The homepage outline button: gold hairline, square, Montserrat bold, a gold
   tint on hover. Colours carry !important because styles.css:5587 repaints
   links on .market-page with a (0,15,2) selector. */
.inner-figma .inner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(12, 37, 25, 0.35) !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.78vw, 15px);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.25s ease;
}

.inner-figma .inner-btn:hover,
.inner-figma .inner-btn:focus-visible {
  background: rgba(194, 160, 106, 0.2) !important;
  color: var(--fg-white) !important;
}

.inner-figma .inner-btn:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

/* ===========================================================================
   /team — "Нашият екип"
   ---------------------------------------------------------------------------
   One band per roster group (from /api/team, grouping untouched), alternating
   light and dark. Each person is ONE component: portrait on top, then name,
   role, contacts and the listings button on a dark green panel — the same
   card language as the homepage's Top Offers (dark body, gold edge), sized
   for a person rather than a property.

   The grid is flex-wrap with a fixed column fraction and centred rows, so a
   group of three reads as a deliberate row instead of a 4-column grid with a
   hole. Cards in a row stretch to the tallest; the button is pushed to the
   bottom, so buttons line up across a row.
   =========================================================================== */
/* In-page nav under the hero: quiet chips, not tabs — every section stays on
   the page and a chip only scrolls to it. Horizontally scrollable on phones so
   the row never forces the body to scroll sideways. */
.team-page .team-jump {
  /* Positioned, so the next band's white veil (::before, z-index 0) cannot
     paint over the chips; the bottom padding keeps them off the band edge. */
  position: relative;
  z-index: 1;
  padding: clamp(18px, 1.6vw, 28px) var(--fg-gutter);
}

.team-page .team-jump-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: min(1382px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.team-page .team-jump-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 clamp(14px, 1.04vw, 20px);
  border: 1px solid rgba(194, 160, 106, 0.55);
  border-radius: 0;
  background: rgba(12, 37, 25, 0.35);
  color: var(--fg-white) !important;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.68vw, 13px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.team-page .team-jump-link:hover,
.team-page .team-jump-link:focus-visible {
  border-color: var(--fg-gold);
  background: rgba(194, 160, 106, 0.22);
  color: var(--fg-white) !important;
}

.team-page .team-jump-link:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

/* The navbar is fixed below 1366px (figma-chrome.css), so an anchor must stop
   clear of it. */
.team-page .team-section {
  scroll-margin-top: 16px;
}

@media (max-width: 1365px) {
  .team-page .team-section {
    scroll-margin-top: 85px;
  }
}

/* Phones: the four chips wrap onto two centred rows rather than scrolling, so
   no label is ever cut off. Labels may break inside a chip, which keeps the
   longest one ("Маркетинг и администрация") inside the screen. */
@media (max-width: 700px) {
  .team-page .team-jump-list {
    gap: 10px;
  }

  .team-page .team-jump-link {
    max-width: 100%;
    padding-block: 8px;
    white-space: normal;
    text-align: center;
  }
}

/* Narrow phones: two per row on a grid instead of guessing at flex wrapping —
   four equal, full-width targets over two rows, long labels wrapping inside
   their own chip, so nothing is cut off and the text keeps its size. */
@media (max-width: 560px) {
  .team-page .team-jump-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-page .team-jump-list > li {
    display: flex;
  }

  .team-page .team-jump-link {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
    letter-spacing: 0.06em;
  }
}

/* Two bands of the same tone in a row (Ръководен екип above Нашите брокери):
   a gold hairline keeps them from reading as one block. */
.team-page .inner-band:not(.inner-band-light) + .inner-band:not(.inner-band-light),
.team-page .inner-band-light + .inner-band-light {
  border-top: 1px solid rgba(194, 160, 106, 0.22);
}

/* City tabs under "Нашите брокери" — the homepage broker tabs, on the dark
   band: square, gold accent, white text; active is the deep green chip. The
   selectors outrank styles.css's blue `.market-page … button:hover` rule. */
.team-page .team-city-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 1.8vw, 34px);
}

.team-page .team-city-tabs .team-city-tab {
  min-width: clamp(104px, 7.3vw, 140px);
  min-height: 44px;
  margin: 0;
  padding: 0 clamp(16px, 1.25vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.73vw, 14px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.team-page .team-city-tabs .team-city-tab:is(:hover, :focus-visible):not(.is-active) {
  border-color: var(--fg-gold) !important;
  background: rgba(194, 160, 106, 0.18) !important;
  color: var(--fg-white) !important;
}

.team-page .team-city-tabs .team-city-tab.is-active,
.team-page .team-city-tabs .team-city-tab.is-active:is(:hover, :focus-visible, :active) {
  border-color: var(--fg-gold) !important;
  background: #0f231a !important;
  color: #ffffff !important;
}

.team-page .team-city-tabs .team-city-tab:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

/* An office with nobody in it: a clean line, not an empty band. */
.team-page .team-city-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: clamp(24px, 2vw, 40px);
  border: 1px solid rgba(194, 160, 106, 0.45);
  background: rgba(7, 30, 17, 0.55);
}

.team-page .team-city-empty p {
  margin: 0;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: clamp(0.875rem, 0.83vw, 16px);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

/* Several support groups (if the admin ever splits marketing from
   registration): each keeps its own heading inside the one section. */
.team-page .team-subgroup + .team-subgroup {
  margin-top: clamp(28px, 2.4vw, 46px);
}

.team-page .team-subgroup-title {
  margin: 0 0 clamp(16px, 1.25vw, 24px);
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.73vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-ink);
  text-align: center;
}

.team-page .team-grid {
  --team-cols: 4;
  --team-gap: clamp(16px, 1.5vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--team-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-page .team-member {
  flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: rgba(7, 30, 17, 0.92);
  border: 1px solid rgba(194, 160, 106, 0.75);
  border-radius: 0;
  overflow: hidden;
}

/* Portraits are studio shots of different crops; 4:5 with the focus kept high
   keeps every face in frame without stretching anyone. */
.team-page .team-member-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: #d9dcd9;
}

.team-page .team-member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* When an avatar fails, the brand mark stands in — contained, never cropped. */
.team-page .team-member-photo img.is-fallback {
  object-fit: contain;
  padding: 18%;
  background: #f1f2ef;
}

.team-page .team-member-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(16px, 1.25vw, 24px) clamp(16px, 1.25vw, 22px) clamp(18px, 1.35vw, 24px);
}

.team-page .team-member-name {
  margin: 0;
  font-family: var(--fg-body);
  font-weight: 700;
  font-size: clamp(1rem, 0.99vw, 19px);
  line-height: 1.25;
  color: var(--fg-white);
  overflow-wrap: anywhere;
}

.team-page .team-member-role {
  margin: 6px 0 0;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: clamp(0.6875rem, 0.625vw, 12px);
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-gold);
}

/* The office the admin assigned, shown for brokers (the city tabs read the
   same value). */
.team-page .team-member-office {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.68vw, 13px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}

.team-page .team-member-office svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--fg-gold);
}

/* Photo and name are the same link as "Обяви на брокера" — the canonical
   /broker/:slug URL. */
.team-page .team-member-photo a {
  display: block;
  width: 100%;
  height: 100%;
}

.team-page .team-member-name-link {
  color: var(--fg-white) !important;
  text-decoration: none !important;
}

.team-page .team-member:hover .team-member-name-link,
.team-page .team-member-name-link:hover,
.team-page .team-member-name-link:focus-visible {
  color: var(--fg-gold) !important;
}

.team-page .team-member-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: clamp(14px, 1.04vw, 20px) 0 0;
  padding: clamp(14px, 1.04vw, 20px) 0 0;
  border-top: 1px solid rgba(194, 160, 106, 0.28);
  list-style: none;
}

.team-page .team-member-contacts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: clamp(0.8125rem, 0.729vw, 14px);
  line-height: 1.35;
}

.team-page .team-member-contacts svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--fg-gold);
}

.team-page .team-member-contacts a {
  min-width: 0;
  color: var(--fg-white) !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.team-page .team-member-contacts a:hover,
.team-page .team-member-contacts a:focus-visible {
  color: var(--fg-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Pushed to the bottom of the card, so buttons line up across a row. */
.team-page .team-member-cta-wrap {
  margin-top: auto;
  padding-top: clamp(16px, 1.25vw, 22px);
}

.team-page .team-member-cta {
  width: 100%;
}

@media (max-width: 1279px) {
  .team-page .team-grid { --team-cols: 3; }
}

@media (max-width: 1023px) {
  .team-page .team-grid { --team-cols: 2; }
}

/* Phones: still one person per row, but compact. A full-width 4:5 portrait
   made every card ~650px tall and the page ~23,000px long. Here the portrait
   sits beside the name and role, and the contacts and button run full width
   beneath, so long e-mail addresses keep the whole card width. */
@media (max-width: 560px) {
  .team-page .team-grid { --team-cols: 1; }

  .team-page .team-member {
    flex-basis: 100%;
    max-width: 460px;
    display: grid;
    grid-template-columns: clamp(96px, 30vw, 124px) minmax(0, 1fr);
    column-gap: 16px;
    padding: 14px;
  }

  .team-page .team-member-photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    aspect-ratio: 4 / 5;
  }

  .team-page .team-member-body {
    display: contents;
  }

  .team-page .team-member-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .team-page .team-member-role {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .team-page .team-member-office {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  .team-page .team-member-contacts,
  .team-page .team-member-cta-wrap {
    grid-column: 1 / -1;
  }

  .team-page .team-member-contacts {
    margin-top: 14px;
    padding-top: 14px;
  }

  .team-page .team-member-cta-wrap {
    padding-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-figma .inner-btn {
    transition: none;
  }
}

/* ===========================================================================
   SHARED: property search form (.search-shell)
   ---------------------------------------------------------------------------
   The listings filter form (app.js binds every control by id; nothing here
   changes markup). A light panel on the marble — the homepage valuation
   panel's language: pale ground, gold hairline, square corners, ink type,
   the dark green CTA with a gold edge. styles.css paints it as a white glass
   card with a 14px backdrop blur and blue controls; all of that is cancelled.
   =========================================================================== */
.inner-figma .search-panel {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.inner-figma .search-shell {
  padding: clamp(16px, 1.35vw, 26px) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(194, 160, 106, 0.7) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body);
}

.inner-figma .search-shell-head {
  align-items: center;
}

/* Sale / Rent: a square segmented control. */
.inner-figma .mode-switch {
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(15, 35, 26, 0.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inner-figma .mode-chip {
  min-height: 42px !important;
  padding: 8px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.inner-figma .search-shell .mode-switch .mode-chip.active,
.inner-figma .mode-chip.active {
  background: #26382a !important;
  color: var(--fg-white) !important;
}

.inner-figma .search-advanced-toggle {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(15, 35, 26, 0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.inner-figma .search-advanced-toggle:hover,
.inner-figma .search-advanced-toggle.is-active,
.inner-figma .search-advanced-toggle[aria-expanded="true"] {
  border-color: var(--fg-gold) !important;
  background: rgba(194, 160, 106, 0.16) !important;
}

.inner-figma .search-shell .filter-field > span {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--fg-ink) !important;
}

.inner-figma .search-shell select,
.inner-figma .search-shell input[type="number"],
.inner-figma .search-shell input[type="search"],
.inner-figma .search-shell input[type="text"],
.inner-figma .search-shell .multi-select-trigger {
  min-height: 48px !important;
  border: 1px solid rgba(15, 35, 26, 0.28) !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.inner-figma .search-shell select:focus-visible,
.inner-figma .search-shell input:focus-visible,
.inner-figma .search-shell .multi-select-trigger:focus-visible {
  outline: 2px solid var(--fg-gold) !important;
  outline-offset: 1px;
  border-color: var(--fg-gold) !important;
}

.inner-figma .search-shell .clear-filter {
  color: rgba(15, 35, 26, 0.6) !important;
  border-radius: 0 !important;
}

.inner-figma .search-shell .multi-select-menu {
  border: 1px solid rgba(194, 160, 106, 0.7) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--fg-ink) !important;
  box-shadow: 0 14px 30px rgba(7, 30, 17, 0.22) !important;
}

.inner-figma .search-shell .multi-option {
  color: var(--fg-ink) !important;
  border-radius: 0 !important;
}

.inner-figma .search-shell .multi-option input {
  accent-color: #26382a;
}

.inner-figma .search-shell .search-submit {
  min-height: 48px !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: #26382a !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transform: none !important;
}

.inner-figma .search-shell .search-submit:hover,
.inner-figma .search-shell .search-submit:focus-visible {
  background: #14301f !important;
}

/* ===========================================================================
   SHARED: property cards
   ---------------------------------------------------------------------------
   Two card templates exist and both keep their markup and handlers:
     .results .card    the catalogue grid (app.js / broker.js), with the
                       thumbnail strip that swaps the cover image
     .top-offer-card   the carousel card (same template as the homepage)
   Both take the homepage Top Offers card: 2px gold edge, square, dark green
   body, white pill badges over the photo, white type.
   =========================================================================== */
.inner-figma .results {
  gap: clamp(16px, 1.5vw, 28px) !important;
  padding: 0 !important;
}

.inner-figma .results .card {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.25s ease;
}

.inner-figma .results .card:hover,
.inner-figma .results .card:focus-visible {
  border-color: #d8bb86 !important;
  box-shadow: none !important;
  transform: none !important;
}

.inner-figma .results .card:focus-visible {
  outline: 2px solid var(--fg-gold);
  outline-offset: 2px;
}

.inner-figma .results .card-media {
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.9);
}

.inner-figma .results .cover-image {
  width: 100%;
  aspect-ratio: 355 / 270 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.inner-figma .results .card-badge,
.inner-figma .top-offer-badges > * {
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #22302a !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
}

.inner-figma .results .thumb,
.inner-figma .results .thumb img {
  border-radius: 0 !important;
}

.inner-figma .results .card-body {
  flex: 1 1 auto;
  padding: clamp(12px, 0.99vw, 19px) clamp(12px, 0.99vw, 19px) clamp(14px, 1.15vw, 22px) !important;
  background: transparent !important;
}

/* Location and title stacked, the price under them: catalogue titles run
   long, and a price column beside them squeezed the title to a few words. */
.inner-figma .results .card-head {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  height: 100%;
}

.inner-figma .results .card-head > div {
  display: block !important;
  min-width: 0;
}

.inner-figma .results .location {
  margin: 0 0 6px !important;
  font-family: var(--fg-body) !important;
  font-weight: 400 !important;
  font-size: clamp(0.75rem, 0.73vw, 14px) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

.inner-figma .results .title {
  margin: 0 !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 0.83vw, 16px) !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
}

.inner-figma .results .price {
  flex: 0 0 auto;
  margin: auto 0 0 !important;
  text-align: left !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 0.78vw, 15px) !important;
  white-space: nowrap;
  color: var(--fg-gold) !important;
}

.inner-figma .status,
.inner-figma .empty-state {
  font-family: var(--fg-body);
  color: rgba(255, 255, 255, 0.86) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inner-figma .status:empty {
  display: none;
}

/* ── Carousel card (Top Offers) ──────────────────────────────────────────── */
.inner-figma .top-offers-section {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inner-figma .top-offers-section .section-head {
  position: relative;
  display: block !important;
  margin: 0 0 clamp(22px, 1.77vw, 34px) !important;
  text-align: center;
}

.inner-figma .top-offers-section .section-kicker {
  margin: 0 0 clamp(8px, 0.63vw, 12px) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6875rem, 0.677vw, 13px) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--fg-white) !important;
}

.inner-figma .top-offers-section .section-head h2 {
  margin: 0 !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 2.344vw, 45px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
}

.inner-figma .inner-band-light .top-offers-section .section-kicker,
.inner-figma .inner-band-light .top-offers-section .section-head h2 {
  color: var(--fg-ink) !important;
}

.inner-figma .top-offers-section .slider-controls {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.inner-figma .slider-button {
  width: 44px !important;
  height: 44px !important;
  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;
}

.inner-figma .inner-band-light .slider-button {
  border-color: rgba(15, 35, 26, 0.35) !important;
  background: transparent !important;
  color: var(--fg-ink) !important;
}

.inner-figma .top-offers-track {
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 0 6px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 160, 106, 0.7) transparent;
}

.inner-figma .top-offer-card {
  flex: 0 0 clamp(250px, 18.65vw, 358px) !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  box-shadow: none !important;
  transform: none !important;
}

.inner-figma .top-offer-card:hover,
.inner-figma .top-offer-card:focus-visible {
  border-color: #d8bb86 !important;
  box-shadow: none !important;
  transform: none !important;
}

.inner-figma .top-offer-image-wrap {
  aspect-ratio: 355 / 270 !important;
  overflow: hidden;
  border-radius: 0 !important;
}

.inner-figma .top-offer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

.inner-figma .top-offer-body {
  display: block !important;
  flex: 1 1 auto;
  padding: clamp(12px, 0.99vw, 19px) clamp(12px, 0.99vw, 19px) clamp(14px, 1.15vw, 22px) !important;
  background: transparent !important;
}

.inner-figma .top-offer-head {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.inner-figma .top-offer-location {
  margin: 0 0 6px !important;
  font-family: var(--fg-body) !important;
  font-size: clamp(0.75rem, 0.73vw, 14px) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

.inner-figma .top-offer-title {
  margin: 0 !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 0.83vw, 16px) !important;
  line-height: 1.32 !important;
  color: #ffffff !important;
}

.inner-figma .top-offer-price {
  flex: 0 0 auto;
  height: auto !important;
  margin: 0 !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 0.78vw, 15px) !important;
  white-space: nowrap;
  color: var(--fg-gold) !important;
}

/* ===========================================================================
   /sale, /rent, /new-construction — the catalogue
   ---------------------------------------------------------------------------
   Intro → search panel (tight under the intro, same dark ground) → results
   grid on the marble → "Избрани предложения" on a light band → footer.
   =========================================================================== */
.listings-page .listings-search-band {
  padding-block: 0 clamp(20px, 1.8vw, 34px);
  /* Every band is its own stacking context (transform + `> * { z-index:1 }`),
     so the results band, later in the DOM, painted over open filter menus.
     Lift the search band above the bands that follow it. */
  z-index: 2;
}

.listings-page .listings-results-band {
  padding-top: clamp(8px, 0.8vw, 16px);
}

/* City pages (/sale/varna …) drop the Location field: two fields and the
   submit share the desktop row instead of leaving an empty column. At
   <=1180px styles.css already lays the row out as 2 + full-width submit. */
@media (min-width: 1181px) {
  .listings-page.listings-city-page .search-primary-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 148px;
  }
}

/* No results: the shared empty panel spans the whole grid. */
.listings-page .results > .listings-empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

body.listings-page .listings-results-shell .listings-empty-state .listings-empty-clear {
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}

body.listings-page .listings-results-shell .listings-empty-state .listings-empty-clear:is(:hover, :focus-visible):not(:disabled) {
  color: var(--fg-white) !important;
  background: rgba(194, 160, 106, 0.2) !important;
  border-color: var(--fg-gold) !important;
}

.listings-page .listings-results-shell {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.listings-page .listings-map-panel {
  margin-top: 18px;
  border: 1px solid rgba(194, 160, 106, 0.7);
  overflow: hidden;
}

.listings-page .listings-map-iframe {
  display: block;
  border-radius: 0 !important;
}

.listings-page .infinite-scroll-loader {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* ===========================================================================
   /map — search by map
   ---------------------------------------------------------------------------
   Intro → search panel → the map discovery block on a light band → Top Offers
   on the marble. home.js drives everything by id/class; only styling here.
   The map widget keeps its own layout from styles.css — the white glass card
   around it, the blue buttons and the rounded chips are what change.
   =========================================================================== */
.map-page .map-search-band {
  padding-block: 0 clamp(28px, 2.4vw, 46px);
}

.map-page .search-shell .clear-filter {
  align-self: center;
}

.inner-figma .geo-search-card {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-ink);
}

.inner-figma .geo-search-head {
  align-items: flex-end;
  margin-bottom: clamp(18px, 1.6vw, 30px);
}

.inner-figma .geo-search-head .section-kicker {
  margin: 0 0 clamp(8px, 0.63vw, 12px) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6875rem, 0.677vw, 13px) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--fg-ink) !important;
}

.inner-figma .geo-search-head h2 {
  margin: 0 !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 2.344vw, 45px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-ink) !important;
}

.inner-figma .geo-scope-switch {
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid rgba(15, 35, 26, 0.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.inner-figma .scope-chip {
  min-height: 42px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.inner-figma .scope-chip.active {
  background: #26382a !important;
  color: var(--fg-white) !important;
}

.inner-figma .bulgaria-map-card,
.inner-figma .map-stage,
.inner-figma .bulgaria-svg-host {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inner-figma .bulgaria-map-card {
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Selected area: the dark card with a gold edge, white type. */
.inner-figma .geo-selection-card {
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--fg-white) !important;
}

.inner-figma .geo-selection-card .geo-selection-label {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--fg-gold) !important;
}

.inner-figma .geo-selection-card strong,
.inner-figma .geo-selection-card .geo-selection-copy {
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
}

.inner-figma .geo-selection-submit,
.inner-figma .map-subregion-count {
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: #26382a !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.inner-figma .geo-selection-submit:hover,
.inner-figma .geo-selection-submit:focus-visible {
  background: #14301f !important;
}

.inner-figma .map-subregion-panel {
  border-radius: 0 !important;
  border-color: rgba(194, 160, 106, 0.7) !important;
  box-shadow: none !important;
}

.inner-figma .map-subregion-nav,
.inner-figma .map-subregion-close,
.inner-figma .map-subregion-search {
  border-radius: 0 !important;
}

.inner-figma .homepage-results-section {
  margin: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.inner-figma .homepage-results-section .section-kicker,
.inner-figma .homepage-results-section h2,
.inner-figma .homepage-results-section .summary-bar,
.inner-figma .homepage-results-section .summary-bar * {
  color: var(--fg-ink) !important;
  background: none !important;
  box-shadow: none !important;
}

.inner-figma .homepage-results-section h2 {
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
}

/* Embedded in the listings map panel (?embed=1): no page chrome, and a plain
   light ground rather than the marble, so the widget reads as one panel. */
body.inner-figma.ea-map-embed.market-page {
  background-image: none !important;
  background-color: #f3f4f1 !important;
}

body.ea-map-embed.market-page .inner-hero {
  display: none !important;
}

body.inner-figma.ea-map-embed .inner-band {
  padding: 0 !important;
}

body.inner-figma.ea-map-embed .inner-band-light::before {
  display: none;
}

body.inner-figma.ea-map-embed .inner-container {
  width: 100%;
}

body.inner-figma.ea-map-embed.market-page .market-shell.inner-shell {
  padding: 12px !important;
}

/* ===========================================================================
   SHARED: slim header band
   ---------------------------------------------------------------------------
   For pages whose real heading comes from data (a property, a broker): the
   navbar and one quiet line under it, no intro block. */
.inner-figma .inner-hero-slim .inner-hero-content {
  width: min(1382px, 100% - (var(--fg-gutter) * 2));
  padding-block: clamp(104px, 6.6vw, 132px) 0;
  text-align: left;
}

@media (max-width: 1365px) {
  .inner-figma .inner-hero-slim .inner-hero-content {
    padding-top: calc(69px + 22px);
  }
}

.inner-figma .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  color: var(--fg-gold) !important;
  text-decoration: none !important;
}

.inner-figma .back-link:hover,
.inner-figma .back-link:focus-visible {
  color: #d8bb86 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.inner-figma .detail-page-topbar {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===========================================================================
   /listing/:id — property presentation
   ---------------------------------------------------------------------------
   detail.js renders one <article> from #detail-template and wires the
   gallery, lightbox, action icons, share/save, broker card and the viewing
   form by class. The grid it sits in (gallery left, sidebar right, features
   and description under the gallery) is the existing one; this is styling:

     heading     code as a gold eyebrow, Cormorant title, location
     gallery     square frame, gold hairline, square arrows and thumbnails
     price card  dark green panel, gold edge, gold price, square icon buttons
     broker card light panel with the homepage valuation-form treatment
     features    square gold-outline chips on the marble
     description a light reading panel with ink type
     more offers the shared Top Offers card
   =========================================================================== */
.detail-page .detail-band {
  padding-top: clamp(18px, 1.6vw, 30px);
}

.detail-page .detail-card,
.detail-page .detail-card-page {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-white);
}

.detail-page .detail-header {
  margin: 0 0 clamp(20px, 1.8vw, 34px) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.detail-page .detail-header > div {
  display: flex;
  flex-direction: column;
}

.detail-page .detail-code {
  order: -1;
  margin: 0 0 10px !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6875rem, 0.729vw, 14px) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--fg-gold) !important;
}

.detail-page .detail-title {
  margin: 0 0 10px !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 2.34vw, 45px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.detail-page .detail-location {
  margin: 0 !important;
  font-family: var(--fg-body) !important;
  font-weight: 500 !important;
  font-size: clamp(0.9375rem, 0.94vw, 18px) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ── Gallery ──────────────────────────────────────────────────────────────*/
.detail-page .detail-gallery {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.detail-page .detail-main-stage {
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.detail-page .detail-main-image {
  border-radius: 0 !important;
}

.detail-page .detail-gallery-arrow {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.72) !important;
  color: var(--fg-white) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.detail-page .detail-gallery-arrow:hover,
.detail-page .detail-gallery-arrow:focus-visible {
  background: rgba(7, 30, 17, 0.92) !important;
}

.detail-page .detail-thumbs-shell,
.detail-page .detail-thumbs {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detail-page .detail-thumb {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0.8;
  overflow: hidden;
}

.detail-page .detail-thumb img {
  border-radius: 0 !important;
}

.detail-page .detail-thumb.is-active,
.detail-page .detail-thumb:hover,
.detail-page .detail-thumb:focus-visible {
  border: 2px solid var(--fg-gold) !important;
  opacity: 1;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────*/
.detail-page .detail-sidebar {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.detail-page .price-card {
  margin: 0 0 16px !important;
  padding: clamp(18px, 1.35vw, 26px) !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  box-shadow: none !important;
}

.detail-page .detail-price {
  margin: 0 !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(1.625rem, 1.77vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-gold) !important;
}

.detail-page .detail-price-per-meter {
  margin: 6px 0 0 !important;
  font-family: var(--fg-body) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.detail-page .detail-action-icons {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(194, 160, 106, 0.3) !important;
  justify-content: space-between;
}

.detail-page .price-card .detail-icon-button {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-white) !important;
  box-shadow: none !important;
}

.detail-page .price-card .detail-icon-button:hover,
.detail-page .price-card .detail-icon-button:focus-visible,
.detail-page .price-card .detail-icon-button.is-active,
.detail-page .price-card .detail-icon-button[aria-pressed="true"] {
  background: rgba(194, 160, 106, 0.2) !important;
  color: var(--fg-gold) !important;
}

.detail-page .price-card .detail-icon-button svg {
  color: currentColor !important;
  stroke: currentColor;
}

/* Viber: the filled Viber mark (detail.js getActionIcon) in white on the same
   gold-edged square as the other actions, so it reads as Viber without a
   purple CTA; hover tints only the mark with a soft Viber violet. The label
   ("Viber — …") is the aria-label and the tooltip. */
.detail-page :is(.price-card, .detail-contact-glass-card) .detail-icon-button .viber-mark {
  width: 23px;
  height: 23px;
  stroke: none !important;
  transition: color 0.2s ease;
}

.detail-page :is(.price-card, .detail-contact-glass-card) :is(.detail-viber-action, .detail-contact-viber):is(:hover, :focus-visible):not(:disabled) .viber-mark {
  color: #b3a8ff !important;
}

/* styles.css paints every hovered button in .market-shell pale with blue text
   (`.market-page .market-shell button:hover`), which outranked the gold hover
   above — the action row turned blue. body. puts the gold state back on top. */
body.detail-page :is(.price-card, .detail-contact-glass-card) .detail-icon-button:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--fg-gold) !important;
  background: rgba(194, 160, 106, 0.2) !important;
  color: var(--fg-gold) !important;
  box-shadow: none !important;
}

.detail-page .broker-card {
  padding: clamp(18px, 1.35vw, 26px) !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--fg-ink) !important;
}

.detail-page .broker-avatar-wrap {
  border: 2px solid var(--fg-gold) !important;
  box-shadow: none !important;
}

.detail-page .broker-name,
.detail-page .broker-name a,
.detail-page .broker-link {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  color: var(--fg-ink) !important;
}

.detail-page .broker-phone,
.detail-page .broker-phone a,
.detail-page .broker-email,
.detail-page .broker-email a {
  font-family: var(--fg-body) !important;
  color: var(--fg-ink) !important;
  overflow-wrap: anywhere;
}

.detail-page .inspection-form-title {
  font-family: var(--fg-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 1.3vw, 25px) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fg-ink) !important;
}

.detail-page .inspection-input {
  min-height: 46px !important;
  border: 1px solid rgba(15, 35, 26, 0.28) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.detail-page .inspection-input:focus-visible {
  outline: 2px solid var(--fg-gold) !important;
  border-color: var(--fg-gold) !important;
}

.detail-page .inspection-consent,
.detail-page .inspection-consent *,
.detail-page .inspection-help {
  font-family: var(--fg-body) !important;
  color: var(--fg-ink) !important;
}

.detail-page .inspection-consent-input {
  accent-color: #26382a;
}

.detail-page .inspection-submit {
  min-height: 52px !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: #26382a !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
}

.detail-page .inspection-submit:hover,
.detail-page .inspection-submit:focus-visible {
  background: #14301f !important;
}

/* ── Features and description ─────────────────────────────────────────────*/
.detail-page .detail-features-wrap,
.detail-page .detail-description-wrap {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.detail-page .detail-features-wrap h2,
.detail-page .detail-description-wrap h2,
.detail-page .detail-broker-top-offers-head h2 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 1.67vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
}

.detail-page .detail-features .feature-chip,
.detail-page .detail-features > * {
  border: 1px solid rgba(194, 160, 106, 0.75) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.6) !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.detail-page .detail-description-wrap {
  padding: clamp(20px, 1.67vw, 32px) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
}

.detail-page .detail-description-wrap h2 {
  color: var(--fg-ink) !important;
}

.detail-page .detail-description-scroll {
  padding: 0 !important;
  background: none !important;
}

.detail-page .detail-description {
  max-width: 78ch;
  font-family: var(--fg-body) !important;
  font-weight: 400 !important;
  font-size: clamp(0.9375rem, 0.83vw, 16px) !important;
  line-height: 1.7 !important;
  color: var(--fg-ink) !important;
}

.detail-page .detail-broker-top-offers {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detail-page .detail-broker-top-offers-status {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Offers carousel (shared: figma-chrome.css + carousel.js): whole cards of at
   least 220px, an arrow each side, dots underneath, no scrollbar. */
.detail-page .detail-broker-top-offers {
  --pgg-carousel-min: 220px;
  --pgg-carousel-gap: 18px;
  --pgg-carousel-ink: #ffffff;
  --pgg-carousel-dot: rgba(255, 255, 255, 0.34);
}

/* The lightbox is fixed and full-screen: square controls to match. */
.inner-figma .detail-lightbox-close,
.inner-figma .detail-lightbox-arrow-prev,
.inner-figma .detail-lightbox-arrow-next {
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.72) !important;
  color: var(--fg-white) !important;
  box-shadow: none !important;
}

/* Similar offers sit in the narrower gallery column: price under the title. */
.detail-page .detail-broker-top-offers .top-offer-head {
  flex-direction: column;
  gap: 8px;
}

.detail-page .detail-broker-top-offers .top-offer-price {
  text-align: left;
}

/* Phones and tablets show the compact contact card (code + call/mail/viber). */
.detail-page .detail-contact-glass-card {
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: rgba(7, 30, 17, 0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--fg-white) !important;
}

.detail-page .detail-contact-code {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  color: var(--fg-white) !important;
}

.detail-page .detail-contact-glass-card .detail-icon-button {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-white) !important;
  box-shadow: none !important;
}

.detail-page .detail-thumb img {
  border: 0 !important;
}

/* ===========================================================================
   /broker/:slug — broker profile and listings
   ---------------------------------------------------------------------------
   broker.js fills the profile by id, renders the catalogue cards from
   #listing-template, the pagination, and inserts "Топ имоти" before #status.
   Profile on the marble as one dark panel with a gold edge (the /team card
   language at page scale); the broker's listings on a light band with the
   shared property card. Pagination buttons become the outline button.
   =========================================================================== */
.broker-page .broker-profile-band {
  padding-top: clamp(18px, 1.6vw, 30px);
}

.broker-page .broker-profile-hero {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.broker-page .broker-profile-hero .hero-overlay {
  display: none !important;
}

.broker-page .broker-profile {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(20px, 2.1vw, 40px) !important;
  display: grid !important;
  grid-template-columns: clamp(160px, 14vw, 240px) minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(20px, 2.6vw, 50px) !important;
  background: rgba(7, 30, 17, 0.92) !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.broker-page .broker-avatar-wrap-large {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  margin: 0 !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  background: #d9dcd9;
}

.broker-page .broker-avatar-wrap-large .broker-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 18%;
  border-radius: 0 !important;
}

.broker-page .broker-profile-info {
  min-width: 0;
  color: var(--fg-white) !important;
}

.broker-page .broker-profile-info .eyebrow {
  margin: 0 0 10px !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6875rem, 0.729vw, 14px) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--fg-gold) !important;
}

.broker-page .broker-profile-name {
  display: block;
  margin: 0 0 10px !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3.1vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
}

.broker-page .broker-profile-role,
.broker-page .broker-profile-bio,
.broker-page .broker-profile-meta,
.broker-page .broker-profile-meta *,
.broker-page .broker-profile-contact,
.broker-page .broker-profile-contact * {
  font-family: var(--fg-body) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  overflow-wrap: anywhere;
}

.broker-page .broker-profile-role {
  font-weight: 600 !important;
}

.broker-page .broker-profile-role > *:not(:first-child) {
  border-radius: 0 !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  background: transparent !important;
  color: var(--fg-gold) !important;
}

.broker-page .broker-profile-bio {
  max-width: 70ch;
  font-size: clamp(0.9375rem, 0.9vw, 17px) !important;
  line-height: 1.6 !important;
}

.broker-page .broker-profile-contact a {
  color: var(--fg-white) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.broker-page .broker-profile-contact a:hover,
.broker-page .broker-profile-contact a:focus-visible {
  color: var(--fg-gold) !important;
  text-decoration: underline !important;
}

/* ── Listings ─────────────────────────────────────────────────────────────*/
.broker-page .broker-listings-band .summary-bar {
  margin: 0 0 clamp(20px, 1.8vw, 34px) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center;
  color: var(--fg-ink) !important;
}

.broker-page .broker-listings-heading {
  margin: 0 0 6px !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 2.448vw, 47px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-ink) !important;
}

.broker-page #summary,
.broker-page #summary * {
  font-family: var(--fg-body) !important;
  color: var(--fg-ink) !important;
}

.broker-page .broker-listings-band .status {
  color: var(--fg-ink) !important;
}

.inner-figma .pagination {
  gap: 12px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inner-figma .pagination button,
.inner-figma .pagination-button {
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(15, 35, 26, 0.45) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.inner-figma .pagination button:not(:disabled):hover,
.inner-figma .pagination button:focus-visible {
  border-color: var(--fg-gold) !important;
  background: rgba(194, 160, 106, 0.18) !important;
}

.inner-figma .pagination button:disabled {
  opacity: 0.45;
}

.inner-figma .pagination-indicator,
.inner-figma .pagination span {
  font-family: var(--fg-body) !important;
  color: var(--fg-ink) !important;
}

.broker-page .broker-top-offers-section {
  margin-bottom: clamp(28px, 2.6vw, 50px) !important;
}

@media (max-width: 700px) {
  .broker-page .broker-profile {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start;
  }

  .broker-page .broker-avatar-wrap-large {
    width: min(220px, 60%) !important;
  }
}

/* ===========================================================================
   SHARED: form pages — /contacts, /estate-evaluation
   ---------------------------------------------------------------------------
   Both pages use one component set: .eval-hero (copy + .eval-form-card) and
   a content section under it. inquiry-forms.js finds forms by
   [data-inquiry-form], renders reCAPTCHA into the form, validates and posts —
   none of that markup changes.

   The hero is the homepage hero composition on the marble: copy on the left
   (gold eyebrow, Cormorant title, lead), the form on the right as the
   homepage valuation panel — pale translucent ground, fine hairline, ink
   type, the dark green submit with a gold edge. styles.css drew it as a
   photo band with a blue gradient and a white rounded card.
   =========================================================================== */
.inner-figma .inner-hero-split {
  width: min(1382px, 100% - (var(--fg-gutter) * 2));
  /* A form is taller than an intro: more room under the desktop bar. */
  padding-block: clamp(132px, 8.6vw, 172px) clamp(48px, 4.17vw, 80px);
  text-align: left;
}

.inner-figma .eval-landing {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

.inner-figma .eval-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--fg-form-page-w, 520px)) !important;
  align-items: center !important;
  gap: clamp(28px, 4.2vw, 80px) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.inner-figma .eval-hero::before,
.inner-figma .eval-hero::after {
  display: none !important;
}

.inner-figma .eval-hero-copy {
  width: auto !important;
  max-width: 640px;
  color: var(--fg-white) !important;
}

.inner-figma .eval-eyebrow {
  margin: 0 0 clamp(12px, 1.04vw, 20px) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.6875rem, 0.729vw, 14px) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--fg-gold) !important;
}

.inner-figma .eval-hero h1 {
  margin: 0 0 clamp(14px, 1.25vw, 24px) !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(2.5rem, 3.65vw, 70px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
  text-wrap: balance;
}

.inner-figma .eval-hero h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin-top: clamp(14px, 1.25vw, 24px);
  background: var(--fg-gold);
}

.inner-figma .eval-lead {
  max-width: 56ch !important;
  margin: 0 0 clamp(18px, 1.56vw, 30px) !important;
  font-family: var(--fg-body) !important;
  font-weight: 500 !important;
  font-size: clamp(0.9375rem, 1.042vw, 20px) !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.inner-figma .eval-trust {
  font-family: var(--fg-body) !important;
  font-size: clamp(0.8125rem, 0.78vw, 15px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.inner-figma .eval-range {
  font-family: var(--fg-body) !important;
  color: var(--fg-gold) !important;
}

.inner-figma .eval-range-track {
  border-radius: 0 !important;
  background: rgba(194, 160, 106, 0.35) !important;
}

.inner-figma .eval-range-knob {
  background: var(--fg-gold) !important;
  box-shadow: none !important;
}

/* Contact chips under the lead: phones and e-mail, square gold hairlines. */
.inner-figma .eval-hero-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inner-figma .eval-hero-contact {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 16px !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  background: rgba(12, 37, 25, 0.35) !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  font-size: clamp(0.875rem, 0.83vw, 16px) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.inner-figma .eval-hero-contact:hover,
.inner-figma .eval-hero-contact:focus-visible {
  background: rgba(194, 160, 106, 0.2) !important;
}

/* ── The form panel ───────────────────────────────────────────────────────*/
.inner-figma .eval-form-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(18px, 1.67vw, 32px) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-ink) !important;
}

.inner-figma .eval-form-card h2 {
  margin: 0 0 clamp(8px, 0.73vw, 14px) !important;
  font-family: var(--fg-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 1.67vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--fg-ink) !important;
}

.inner-figma .eval-form-sub {
  margin: 0 0 clamp(14px, 1.15vw, 22px) !important;
  font-family: var(--fg-body) !important;
  font-size: clamp(0.8125rem, 0.78vw, 15px) !important;
  line-height: 1.55 !important;
  color: var(--fg-ink) !important;
}

.inner-figma .eval-form {
  gap: 12px !important;
}

.inner-figma .eval-form-row {
  gap: 12px !important;
}

.inner-figma .eval-form input[type="text"],
.inner-figma .eval-form input[type="tel"],
.inner-figma .eval-form input[type="email"],
.inner-figma .eval-form textarea {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 35, 26, 0.28) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.inner-figma .eval-form input::placeholder,
.inner-figma .eval-form textarea::placeholder {
  color: rgba(15, 35, 26, 0.55);
}

.inner-figma .eval-form input:focus-visible,
.inner-figma .eval-form textarea:focus-visible {
  outline: 2px solid var(--fg-gold) !important;
  outline-offset: 1px;
  border-color: var(--fg-gold) !important;
}

.inner-figma .eval-consent,
.inner-figma .eval-consent * {
  font-family: var(--fg-body) !important;
  color: var(--fg-ink) !important;
}

.inner-figma .eval-consent a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.inner-figma .eval-consent input {
  accent-color: #26382a;
}

.inner-figma .eval-submit {
  min-height: var(--fg-btn-h) !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  background: #26382a !important;
  background-image: none !important;
  color: var(--fg-white) !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.875rem, 0.83vw, 16px) !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transform: none !important;
}

.inner-figma .eval-submit:hover,
.inner-figma .eval-submit:focus-visible {
  background: #14301f !important;
}

/* inquiry-forms.js reports back here; success and error keep their colours. */
.inner-figma .form-status {
  font-family: var(--fg-body) !important;
  font-weight: 600;
  border-radius: 0 !important;
}

.inner-figma .form-status.is-error,
.inner-figma .form-status[data-state="error"] {
  color: #9e2b2b !important;
}

.inner-figma .form-status.is-success,
.inner-figma .form-status[data-state="success"] {
  color: #1c5c37 !important;
}

/* ── /estate-evaluation: "what we need" / "what you get" ─────────────────── */
.inner-figma .eval-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 28px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.inner-figma .eval-card {
  padding: clamp(22px, 2.1vw, 40px) !important;
  background: rgba(7, 30, 17, 0.92) !important;
  border: 1px solid var(--fg-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-white) !important;
}

.inner-figma .eval-card h2 {
  margin: 0 0 clamp(16px, 1.35vw, 26px) !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.625rem, 1.93vw, 37px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: var(--fg-white) !important;
}

.inner-figma .eval-ticks {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inner-figma .eval-ticks li {
  color: var(--fg-white) !important;
}

.inner-figma .eval-ticks li::before {
  color: var(--fg-gold) !important;
  border-color: var(--fg-gold) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.inner-figma .eval-ticks strong {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.9375rem, 0.94vw, 18px) !important;
  color: var(--fg-white) !important;
}

.inner-figma .eval-ticks span {
  font-family: var(--fg-body) !important;
  font-size: clamp(0.875rem, 0.83vw, 16px) !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84) !important;
}

/* ── /contacts: the offices, as the homepage Offices band ────────────────── */
.form-page .offices {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.form-page .offices-head {
  margin: 0 0 clamp(28px, 2.6vw, 50px) !important;
  text-align: center;
}

.form-page .offices-head h2 {
  margin: 0 0 clamp(10px, 0.94vw, 18px) !important;
  font-family: var(--fg-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 2.344vw, 45px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--fg-ink) !important;
}

.form-page .offices-head p {
  margin: 0 auto !important;
  max-width: 900px;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  font-size: clamp(0.875rem, 0.885vw, 17px) !important;
  line-height: 1.4 !important;
  color: var(--fg-ink) !important;
}

.form-page .offices-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 21px !important;
}

.form-page .office-card {
  position: relative;
  aspect-ratio: 613 / 460;
  overflow: hidden;
  border: 1px solid rgba(194, 160, 106, 0.8) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.form-page .office-photo {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  transform: none !important;
}

.form-page .office-card::after {
  background: linear-gradient(to top, rgba(9, 25, 17, 0.82) 0%, rgba(9, 25, 17, 0.34) 34%, rgba(9, 25, 17, 0) 60%) !important;
}

.form-page .office-info .office-city {
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(1rem, 1.042vw, 20px) !important;
  color: var(--fg-white) !important;
}

.form-page .office-info .office-addr {
  font-family: var(--fg-body) !important;
  font-size: clamp(0.8125rem, 0.73vw, 14px) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}

@media (max-width: 1023px) {
  .inner-figma .eval-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inner-figma .eval-form-card {
    max-width: 640px !important;
  }
}

@media (max-width: 760px) {
  .inner-figma .eval-details,
  .form-page .offices-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inner-figma .eval-form-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Offices on a dark band (careers) read white; on a light band (contacts) ink. */
.form-page .inner-band:not(.inner-band-light) .offices-head h2,
.form-page .inner-band:not(.inner-band-light) .offices-head p {
  color: var(--fg-white) !important;
}

.inner-figma .eval-select {
  width: 100% !important;
  min-height: 48px;
  padding: 10px 38px 10px 14px !important;
  border: 1px solid rgba(15, 35, 26, 0.28) !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

.inner-figma .eval-select:focus-visible {
  outline: 2px solid var(--fg-gold) !important;
  border-color: var(--fg-gold) !important;
}


/* styles.css caps the section head at a narrow width on the left edge. */
.form-page .offices-head {
  width: 100%;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* ===========================================================================
   SHARED: empty state (/news until articles exist)
   ---------------------------------------------------------------------------
   A dark panel with a gold edge on a light band: the notice the page already
   carried, and the two ways on. Nothing is invented to fill the space. */
.inner-figma .inner-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.35vw, 26px);
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(36px, 3.65vw, 70px) clamp(20px, 2.6vw, 50px);
  background: rgba(7, 30, 17, 0.92);
  border: 1px solid var(--fg-gold);
  text-align: center;
}

.inner-figma .inner-empty-mark {
  width: 64px;
  height: 1px;
  background: var(--fg-gold);
}

.inner-figma .inner-empty-text {
  margin: 0;
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 2.08vw, 40px);
  line-height: 1.15;
  color: var(--fg-white);
  text-wrap: balance;
}

.inner-figma .inner-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.inner-figma .inner-empty-actions .inner-btn {
  min-width: 200px;
}

.news-page .inner-band {
  padding-block: clamp(56px, 5.2vw, 100px);
}

/* Short pages on tall screens: the content grows so the footer still ends
   the page instead of floating above a strip of empty marble. */
body.inner-figma {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.inner-figma > .inner-shell {
  flex: 1 0 auto;
}

body.inner-figma > .inner-hero,
body.inner-figma > .site-footer {
  flex: 0 0 auto;
}

/* ===========================================================================
   SHARED: editorial reading column (legal and other long-form text)
   ---------------------------------------------------------------------------
   Ink type on the light band, a narrow measure, no card around it. Section
   headings are small tracked caps: the source mixes Title Case and ALL CAPS
   headings, and caps render both the same. */
.inner-figma .editorial-content {
  max-width: 820px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--fg-ink) !important;
  font-family: var(--fg-body);
}

.inner-figma .editorial-content section {
  margin: 0 !important;
  padding: clamp(22px, 1.8vw, 34px) 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(15, 35, 26, 0.18) !important;
  background: none !important;
}

.inner-figma .editorial-content section:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.inner-figma .editorial-content h2 {
  margin: 0 0 14px !important;
  font-family: var(--fg-body) !important;
  font-weight: 700 !important;
  font-size: clamp(0.8125rem, 0.78vw, 15px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fg-ink) !important;
}

.inner-figma .editorial-content h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 12px;
  background: var(--fg-gold);
}

.inner-figma .editorial-content p,
.inner-figma .editorial-content li,
.inner-figma .editorial-content address {
  font-family: var(--fg-body) !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: clamp(0.9375rem, 0.88vw, 17px) !important;
  line-height: 1.75 !important;
  color: var(--fg-ink) !important;
}

.inner-figma .editorial-content p {
  margin: 0 0 12px !important;
}

.inner-figma .editorial-content ul {
  margin: 0 0 12px !important;
  padding-left: 1.2em !important;
}

.inner-figma .editorial-content li::marker {
  color: #8a6d3f;
}

.inner-figma .editorial-content address {
  margin: 0 0 12px;
  padding-left: 16px;
  border-left: 2px solid var(--fg-gold);
}

.inner-figma .editorial-content a {
  color: var(--fg-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.legal-page .inner-hero-content .inner-lead {
  max-width: 70ch;
}

/* /terms: marks the text as a working draft and lists what the final legal
   text still needs. A gold-edged note on the light band. */
.inner-figma .editorial-content .legal-draft-note {
  margin: 0 0 clamp(22px, 1.8vw, 34px);
  padding: clamp(14px, 1.2vw, 22px) clamp(16px, 1.4vw, 26px);
  border: 1px solid var(--fg-gold);
  border-left-width: 3px;
  background: rgba(194, 160, 106, 0.1);
}

.inner-figma .editorial-content .legal-draft-note p,
.inner-figma .editorial-content .legal-draft-note li {
  font-size: clamp(0.875rem, 0.8vw, 15px) !important;
  line-height: 1.6 !important;
}

.inner-figma .editorial-content .legal-draft-note ul {
  margin-bottom: 0 !important;
}

.inner-figma .editorial-content .legal-draft-note + section {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Form results (inquiry-forms.js, careers.js): a success or error is a clear
   panel in the site's colours — dark green, a gold (or muted red) edge, white
   type — announced to screen readers through aria-live. */
body.inner-figma form .form-status[data-form-status]:not([hidden]):is([data-state="success"], .is-success, [data-state="error"], .is-error) {
  display: block;
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--fg-gold) !important;
  border-left-width: 3px !important;
  background: rgba(9, 27, 18, 0.92) !important;
  color: #ffffff !important;
  font-family: var(--fg-body) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left;
}

body.inner-figma form .form-status[data-form-status]:not([hidden]):is([data-state="error"], .is-error) {
  border-color: #d98f84 !important;
  color: #ffd8d1 !important;
}

/* ===========================================================================
   /estate-evaluation, /contacts — translucent form panel
   ---------------------------------------------------------------------------
   Same treatment as the /careers form (careers-figma.css): pale green at 13%
   over the marble, a thin light edge, square, no blur. Light-panel ink turns
   white; fields stay white; the submit keeps the careers dark green + gold.
   Scoped to these two form pages. */
:is(.evaluation-page, .contacts-page) .eval-form-card {
  background: rgba(214, 236, 222, 0.13) !important;
  border: 1px solid rgba(236, 244, 238, 0.5) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--fg-white) !important;
}

:is(.evaluation-page, .contacts-page) .eval-form-card h2 {
  color: var(--fg-white) !important;
}

:is(.evaluation-page, .contacts-page) .eval-form-sub {
  color: rgba(255, 255, 255, 0.92) !important;
}

:is(.evaluation-page, .contacts-page) .eval-form input[type="text"],
:is(.evaluation-page, .contacts-page) .eval-form input[type="tel"],
:is(.evaluation-page, .contacts-page) .eval-form input[type="email"],
:is(.evaluation-page, .contacts-page) .eval-form textarea {
  border-color: transparent !important;
  background: #ffffff !important;
}

:is(.evaluation-page, .contacts-page) .eval-consent,
:is(.evaluation-page, .contacts-page) .eval-consent * {
  color: var(--fg-white) !important;
}

:is(.evaluation-page, .contacts-page) .eval-consent input {
  accent-color: var(--fg-gold);
}

:is(.evaluation-page, .contacts-page) .eval-submit {
  background: #1c3021 !important;
  border: 1px solid var(--fg-gold) !important;
}

:is(.evaluation-page, .contacts-page) .eval-submit:hover,
:is(.evaluation-page, .contacts-page) .eval-submit:focus-visible {
  background: #13261a !important;
}

/* Status messages on the dark ground, as on /careers. */
:is(.evaluation-page, .contacts-page) .eval-form .form-status[data-state="error"] { color: #ffb4a8 !important; }
:is(.evaluation-page, .contacts-page) .eval-form .form-status[data-state="success"] { color: #bfe8c9 !important; }
:is(.evaluation-page, .contacts-page) .eval-form .form-status[data-state="pending"] { color: rgba(255, 255, 255, 0.85) !important; }

/* ===========================================================================
   /listing/:id — refinements
   ---------------------------------------------------------------------------
   1. Broker + "Заяви оглед": the translucent form panel of /careers,
      /estate-evaluation and /contacts instead of a solid white box. Fields
      stay white; the reCAPTCHA widget and the form contract are untouched.
   2. Description: styles.css darkens the panel on :hover / :focus-within
      with a (0,3,0) !important rule, which on this light panel made the text
      vanish. Hover now changes nothing — the panel is not clickable.
   =========================================================================== */
.detail-page .broker-card {
  background: rgba(214, 236, 222, 0.13) !important;
  border: 1px solid rgba(194, 160, 106, 0.75) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--fg-white) !important;
}

.detail-page .broker-avatar-wrap {
  border: 2px solid var(--fg-gold) !important;
  background: rgba(9, 27, 18, 0.6) !important;
}

.detail-page .broker-name,
.detail-page .broker-name a,
.detail-page .broker-link {
  color: var(--fg-white) !important;
}

.detail-page .broker-link:hover,
.detail-page .broker-link:focus-visible {
  color: var(--fg-gold) !important;
}

.detail-page .broker-contact-list {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(194, 160, 106, 0.35) !important;
  border-bottom: 1px solid rgba(194, 160, 106, 0.35) !important;
}

.detail-page .broker-phone,
.detail-page .broker-phone a,
.detail-page .broker-email,
.detail-page .broker-email a {
  color: rgba(255, 255, 255, 0.92) !important;
}

.detail-page .broker-phone a:hover,
.detail-page .broker-email a:hover {
  color: var(--fg-gold) !important;
}

.detail-page .inspection-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.detail-page .inspection-form-title {
  color: var(--fg-white) !important;
}

.detail-page .inspection-input {
  border-color: transparent !important;
  background: #ffffff !important;
}

.detail-page .inspection-consent,
.detail-page .inspection-consent *,
.detail-page .inspection-help {
  color: rgba(255, 255, 255, 0.9) !important;
}

.detail-page .inspection-consent-link {
  color: var(--fg-white) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.detail-page .inspection-consent-input {
  accent-color: var(--fg-gold);
}

.detail-page .inspection-submit {
  background: #1c3021 !important;
  border: 1px solid var(--fg-gold) !important;
}

.detail-page .inspection-submit:hover,
.detail-page .inspection-submit:focus-visible {
  background: #13261a !important;
}

.detail-page .inspection-form .form-status[data-state="error"] { color: #ffb4a8 !important; }
.detail-page .inspection-form .form-status[data-state="success"] { color: #bfe8c9 !important; }
.detail-page .inspection-form .form-status[data-state="pending"] { color: rgba(255, 255, 255, 0.85) !important; }

/* 2 ── Description: no hover state. Same specificity as the styles.css rule,
   later in the cascade, restating the resting values. */
.detail-page .detail-description-wrap:hover,
.detail-page .detail-description-wrap:focus-within {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.detail-page .detail-description-wrap:hover .detail-description,
.detail-page .detail-description-wrap:focus-within .detail-description,
.detail-page .detail-description-wrap:hover h2 {
  color: var(--fg-ink) !important;
  opacity: 1 !important;
}

/* Sidebar sticky offset (desktop, where it is sticky; tablet/phone keep it
   static, where top has no effect). */
.market-page .detail-sidebar.info-panel {
  top: 5px;
}

/* "ЗАЯВИ" states: styles.css repaints every shell button on :hover with
   .market-page .market-shell button:hover:not(:disabled) (!important, 0,4,1)
   in pale green and blue text. Same states as the /careers submit, with a
   selector strong enough to win. */
body.detail-page .market-shell .inspection-form .inspection-submit {
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.detail-page .market-shell .inspection-form .inspection-submit:is(:hover, :focus-visible, :active):not(:disabled) {
  background: #13261a !important;
  background-color: #13261a !important;
  border-color: #d8bb86 !important;
  color: var(--fg-white) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.detail-page .market-shell .inspection-form .inspection-submit:focus-visible {
  outline: 2px solid var(--fg-gold) !important;
  outline-offset: 2px;
}