/* ==========================================================================
   Property listing — marketplace layout

   The reference is Estatik's Major template: a wide search bar over a results
   toolbar over a three-up card grid, with the card reading price first, then
   the room count, then the address. Estatik already renders that structure on
   this site, because Major is the same plugin. What was missing was the finish:
   the page ran at 1040px inside Elementor's content width, the cards carried
   the plugin's flat default shadow, the price sat in the body face, and the
   pagination was unstyled.

   Everything below is presentation. Estatik keeps the query, the search, the
   filters, the sort, the view switcher and the pagination. No markup of its is
   replaced, so nothing here can break the listing behaviour.
   ========================================================================== */

body.w2e-listing {
  --w2e-list-max: 1320px;
  --w2e-card-gap: clamp(1.25rem, 2.2vw, 1.875rem);
}

/* --------------------------------------------------------------------------
   Width

   Elementor holds this page at 1040px, which gives 317px cards and a page that
   reads as a brochure rather than a portal. The listing block alone is allowed
   the full measure; every other section on the page keeps its own width.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-properties,
body.w2e-listing .es-search-nav-wrap,
body.w2e-listing .es-properties__list,
body.w2e-listing .es-pagination {
  max-width: var(--w2e-list-max);
  margin-inline: auto;
  width: 100%;
}

/* Elementor caps this page's containers at 1140px, which is what held the grid
   to 317px cards. The section that carries the listings widget is allowed a
   wider measure; every other section on the page keeps the page's own width. */
body.w2e-listing .elementor-section:has(.elementor-widget-es-listings-widget) > .elementor-container,
body.w2e-listing .e-con:has(.elementor-widget-es-listings-widget) {
  max-width: min(var(--w2e-list-max), 100%) !important;
  width: 100%;
}

body.w2e-listing .elementor-widget-es-listings-widget {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Hero

   The page opened on a pale band with a heading in it and the search a screen
   further down. The reference opens on a photograph with the search inside it,
   which is also the more useful arrangement: the first thing on a listing page
   should be the way into the listings.
   -------------------------------------------------------------------------- */

body.w2e-listing .w2e-rp-hero {
  position: relative;
  background-color: var(--w2e-ink);
  background-size: cover;
  background-position: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.15rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem) !important;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.w2e-listing .w2e-rp-hero h1 {
  color: #FFFFFF !important;
  margin-bottom: .35em;
}

body.w2e-listing .w2e-rp-hero p,
body.w2e-listing .w2e-rp-hero h2,
body.w2e-listing .w2e-rp-hero .elementor-widget-html * {
  color: rgba(255, 255, 255, .88) !important;
}

body.w2e-listing .w2e-hero-search {
  max-width: var(--w2e-list-max);
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}

body.w2e-listing .w2e-rp-hero .es-search > form {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 18px 44px rgba(6, 14, 22, .28);
}

/* --------------------------------------------------------------------------
   Browse by emirate
   -------------------------------------------------------------------------- */

body.w2e-listing .w2e-locations {
  max-width: var(--w2e-list-max);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

body.w2e-listing .w2e-locations__title {
  font-family: var(--w2e-serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--w2e-text);
  text-align: center;
  margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
}

/* Portrait tiles, as in the reference: the picture stands up rather than
   lying down, and the name sits in the bottom corner. */
/* The emirates that actually have listings — three today, more as the book
   grows. The tiles keep their size whatever the number and sit in the middle
   of the measure rather than stretching to fill it. */
body.w2e-listing .w2e-locations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  justify-content: center;
  gap: var(--w2e-card-gap);
}

body.w2e-listing .w2e-place {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  min-height: 0;
  padding: 1.1rem 1.15rem;
  border-radius: var(--w2e-r);
  border: 1px solid var(--w2e-hairline);
  background: var(--w2e-navy);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  text-decoration: none;
  overflow: hidden;
  transition: transform .32s var(--w2e-ease), box-shadow .32s var(--w2e-ease);
}

body.w2e-listing .w2e-place:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 26, 34, .18);
}

body.w2e-listing .w2e-place__name {
  font-family: var(--w2e-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.w2e-listing .w2e-place__count {
  font-family: var(--w2e-sans);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w2e-gold-soft);
  margin-top: .2rem;
}

@media (max-width: 900px) {
  body.w2e-listing .w2e-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.w2e-listing .w2e-locations__grid { justify-content: stretch; }
}

/* The tiles stay upright on a phone: two to a row rather than one wide, so
   the portrait proportion of the reference survives the narrow screen. */
@media (max-width: 460px) {
  body.w2e-listing .w2e-locations__grid { gap: .75rem; }
  body.w2e-listing .w2e-place { padding: .85rem .9rem; }
  body.w2e-listing .w2e-place__name { font-size: 1.05rem; }
  body.w2e-listing .w2e-place__count { font-size: .6875rem; }
}

/* --------------------------------------------------------------------------
   Search bar

   Major puts the address field, the filter dropdowns and the submit on one
   line, on a surface that separates them from the results. Same arrangement,
   in the brand's own materials.
   -------------------------------------------------------------------------- */

/* Estatik puts the address field and the filter row in one form: the surface
   belongs to the form, so the two halves read as a single control. */
body.w2e-listing .es-search {
  max-width: var(--w2e-list-max);
  margin-inline: auto;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}

body.w2e-listing .es-search > form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  background: var(--w2e-paper);
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  padding: clamp(.75rem, 1.4vw, 1rem);
  box-shadow: 0 1px 2px rgba(15, 26, 34, .04);
}

body.w2e-listing .es-search-nav-wrap {
  flex: 1 1 420px;
  min-width: 0;
}

/* The emirate: first in the row of filter controls, cut from the same cloth
   as the plugin's own dropdowns beside it. */
body.w2e-listing li.w2e-emirate {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.w2e-listing .w2e-emirate__select {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  background: #fff;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding: 0 2.1rem 0 .95rem;
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  color: var(--w2e-text);
  cursor: pointer;
}

body.w2e-listing .w2e-emirate__select:hover {
  border-color: rgba(15, 26, 34, .28);
}

/* --------------------------------------------------------------------------
   Typed figures

   A number field is a box to write a figure in, not a stepper: nobody sets a
   price by clicking an arrow four hundred times. The browser's spinner is
   removed from every number field in the search, and the unit is written on
   the field instead — AED before the price, sq ft after the size — so the
   figure still says what it is once the placeholder has gone.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-search input[type="number"]::-webkit-outer-spin-button,
body.w2e-listing .es-search input[type="number"]::-webkit-inner-spin-button,
body.w2e-listing .es-search-nav__content input[type="number"]::-webkit-outer-spin-button,
body.w2e-listing .es-search-nav__content input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

body.w2e-listing .es-search input[type="number"],
body.w2e-listing .es-search-nav__content input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

body.w2e-listing .w2e-affix {
  position: relative;
  display: block;
}

body.w2e-listing .w2e-affix::before,
body.w2e-listing .w2e-affix::after {
  content: attr(data-affix);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--w2e-sans);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--w2e-muted, #5b6873);
  pointer-events: none;
}

body.w2e-listing .w2e-affix--pre::before { left: .95rem; }
body.w2e-listing .w2e-affix--pre::after { content: none; }
body.w2e-listing .w2e-affix--post::after { right: .95rem; }
body.w2e-listing .w2e-affix--post::before { content: none; }

body.w2e-listing .w2e-affix--pre input { padding-left: 3.1rem !important; }
body.w2e-listing .w2e-affix--post input { padding-right: 3.2rem !important; }

/* The typed size box, in the same materials as the controls beside it. */
body.w2e-listing .w2e-size-input {
  width: 8.5rem;
  min-height: 44px;
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  background: #fff;
  padding: 0 .95rem;
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  color: var(--w2e-text);
}

body.w2e-listing .w2e-size-input:focus-visible {
  outline: 2px solid var(--w2e-navy);
  outline-offset: 1px;
}

body.w2e-listing .w2e-hidden-field {
  display: none !important;
}

/* The opportunity switch: the one coloured control on the form, because it is
   the one the page most wants read. */
body.w2e-listing .w2e-deals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  width: 100%;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--w2e-hairline);
}

body.w2e-listing .w2e-deals__label {
  font-family: var(--w2e-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w2e-muted, #5b6873);
}

body.w2e-listing .w2e-deals__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .25rem;
  border: 1px solid var(--w2e-hairline);
  border-radius: 999px;
  background: rgba(15, 26, 34, .035);
}

body.w2e-listing .w2e-deals__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-family: var(--w2e-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w2e-muted, #5b6873);
  background: transparent;
  transition: background .18s ease, color .18s ease;
}

body.w2e-listing .w2e-deals__btn:hover {
  color: var(--w2e-text);
  background: rgba(15, 26, 34, .06);
}

body.w2e-listing .w2e-deals__btn.is-on {
  color: #fff;
  background: var(--w2e-navy);
}

body.w2e-listing .w2e-deals__btn.is-on:nth-child(n + 2) {
  color: #2a1e05;
  background: var(--w2e-gold, #bf953f);
}

/* Estatik's own control for the same field is kept — it carries the value
   into the query — but the switch above is what the visitor uses, so it is not
   asked for twice. */
body.w2e-listing .es-search .es-field__es_label,
body.w2e-listing .es-search .js-es-field__es_label,
body.w2e-listing .es-search [data-field="es_label"],
body.w2e-listing .es-search-nav__content .w2e-hidden-field {
  display: none !important;
}

/* --------------------------------------------------------------------------
   A dropdown must be able to leave the hero

   The search sits inside the film hero, and the hero clips what it contains so
   the video cannot spill. That also cut every filter panel off at the bottom
   edge of the picture. The hero stops clipping on this page; the video is
   inset to the hero's own box and so cannot overflow it anyway.

   Estatik also sets overflow-x: hidden on the body, which makes the body a
   scrolling box of its own and leaves an open panel behaving oddly as the page
   moves. Clip does the same job — nothing may scroll sideways — without
   creating that second scroller.
   -------------------------------------------------------------------------- */

body.w2e-listing {
  overflow-x: clip;
}

body.w2e-listing.w2e-page-hero .w2e-hero--page,
body.w2e-listing.w2e-page-hero .w2e-hero--page .w2e-hero-content,
body.w2e-listing.w2e-page-hero .w2e-hero--page .w2e-hero-inner,
body.w2e-listing.w2e-page-hero .w2e-hero-search {
  overflow: visible;
}

body.w2e-listing .w2e-hero--page > video,
body.w2e-listing .w2e-hero--page > .w2e-hero-overlay {
  clip-path: inset(0);
}

/* --------------------------------------------------------------------------
   One typeface across the search

   Estatik's own stylesheet sets Open Sans on its panels, so the heading inside
   a dropdown was in a different face from every other word on the page. The
   brand's sans is set on the form and everything the plugin puts inside it.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-search,
body.w2e-listing .es-search *:not([class*="es-icon"]),
body.w2e-listing .es-search-nav__content,
body.w2e-listing .es-search-nav__content *:not([class*="es-icon"]),
body.w2e-listing .select2-container,
body.w2e-listing .select2-container *:not([class*="es-icon"]) {
  font-family: var(--w2e-sans) !important;
}

/* The plugin's chevrons and its magnifier are glyphs in its own icon face,
   named es-icon. That is not a typeface choice and must keep its font, or the
   arrows come out as empty boxes. */
body.w2e-listing [class*="es-icon"],
body.w2e-listing [class*="es-icon"]::before,
body.w2e-listing [class*="es-icon"]::after {
  font-family: es-icon !important;
}

/* The search surface sits above the results while a dropdown is open. */
body.w2e-listing .es-search {
  position: relative;
  z-index: 40;
}

/* The plugin marks an open or focused control in its own teal. On this site
   that is the only green on the page; it takes the brand's navy instead. */
body.w2e-listing .es-search-nav > li > a,
body.w2e-listing .es-search-nav > li > a:focus,
body.w2e-listing .es-search-nav > li.is-active > a,
body.w2e-listing .es-search-nav > li > a:focus-visible {
  outline: none;
  box-shadow: none;
}

/* An open control is marked in the plugin's pale green. On this site it takes
   the brand's navy, which is the only colour the search uses. */
body.w2e-listing .es-search-nav > li.active,
body.w2e-listing .es-search-nav > li.is-active,
body.w2e-listing .es-search-nav > li:hover {
  border-color: var(--w2e-navy) !important;
}

body.w2e-listing .es-search-nav > li.active > a,
body.w2e-listing .es-search-nav > li.is-active > a,
body.w2e-listing .es-search-nav > li > a:focus-visible {
  color: var(--w2e-navy) !important;
}

body.w2e-listing .w2e-emirate__select:focus-visible {
  outline: 2px solid var(--w2e-navy);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  body.w2e-listing .w2e-emirate { flex: 1 1 100%; }
  body.w2e-listing .w2e-deals__group { width: 100%; justify-content: space-between; }
  body.w2e-listing .w2e-deals__btn { flex: 1 1 auto; padding: .55rem .6rem; font-size: .6875rem; letter-spacing: .06em; }
}

body.w2e-listing .es-search-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.w2e-listing .es-search__address {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  flex: 1 1 320px;
  min-width: 0;
}

body.w2e-listing .es-field__address {
  flex: 1 1 auto;
  min-width: 0;
}

body.w2e-listing .es-search-nav input[type="text"],
body.w2e-listing .es-search-nav input[type="search"] {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--w2e-hairline) !important;
  border-radius: var(--w2e-r) !important;
  font-family: var(--w2e-sans) !important;
  font-size: .9375rem;
  color: var(--w2e-text) !important;
  background: var(--w2e-paper);
}

body.w2e-listing .es-search-nav input:focus-visible {
  outline: 2px solid var(--w2e-navy);
  outline-offset: 1px;
}

body.w2e-listing .es-dropdown__toggle,
body.w2e-listing .es-search-nav .es-btn--bordered {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-inline: 1rem;
  border: 1px solid var(--w2e-hairline) !important;
  border-radius: var(--w2e-r) !important;
  background: var(--w2e-paper) !important;
  font-family: var(--w2e-sans) !important;
  font-size: .875rem !important;
  font-weight: 500;
  color: var(--w2e-text) !important;
  white-space: nowrap;
  transition: border-color .24s var(--w2e-ease), background .24s var(--w2e-ease);
}

body.w2e-listing .es-dropdown__toggle:hover,
body.w2e-listing .es-search-nav .es-btn--bordered:hover {
  border-color: var(--w2e-navy) !important;
  background: var(--w2e-bone) !important;
}

body.w2e-listing .es-dropdown--opened .es-dropdown__toggle {
  border-color: var(--w2e-navy) !important;
}

body.w2e-listing .es-search__submit,
body.w2e-listing .es-search__address .es-btn--primary,
body.w2e-listing button.es-search-submit {
  min-height: 50px;
  min-width: 54px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--w2e-r) !important;
  background: var(--w2e-navy) !important;
  border-color: var(--w2e-navy) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Results toolbar

   Count on the left, sort and the grid / list / map switcher on the right,
   over a hairline that separates the controls from the results themselves.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-listings-filter,
body.w2e-listing .es-properties__header,
body.w2e-listing .es-entities__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--w2e-hairline);
}

body.w2e-listing .es-total,
body.w2e-listing .es-properties__header .es-count,
body.w2e-listing .js-es-count,
body.w2e-listing .es-entities__count {
  font-family: var(--w2e-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w2e-navy);
}

body.w2e-listing .es-field__label,
body.w2e-listing .es-sort__label {
  font-family: var(--w2e-sans);
  font-size: .8125rem;
  color: var(--w2e-text-mute);
}

body.w2e-listing .js-es-sort,
body.w2e-listing .es-properties__header select {
  min-height: 44px;
  border: 1px solid var(--w2e-hairline) !important;
  border-radius: var(--w2e-r) !important;
  font-family: var(--w2e-sans) !important;
  font-size: .875rem !important;
  color: var(--w2e-text) !important;
  background-color: var(--w2e-paper) !important;
}

body.w2e-listing .es-control--layouts .es-control__item a,
body.w2e-listing .es-control--layouts .es-btn--icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--w2e-hairline) !important;
  border-radius: var(--w2e-r) !important;
  background: var(--w2e-paper) !important;
  color: var(--w2e-text-mute) !important;
  transition: border-color .24s var(--w2e-ease), color .24s var(--w2e-ease), background .24s var(--w2e-ease);
}

body.w2e-listing .es-control--layouts .es-control__item a:hover {
  border-color: var(--w2e-navy) !important;
  color: var(--w2e-navy) !important;
}

body.w2e-listing .es-control--layouts .es-control__item.es-active a,
body.w2e-listing .es-control--layouts .es-control__item a.es-active {
  background: var(--w2e-navy) !important;
  border-color: var(--w2e-navy) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */

body.w2e-listing .es-listings--grid-3,
body.w2e-listing .es-listings--grid-2,
body.w2e-listing .es-listings--grid-4 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--w2e-card-gap) !important;
  align-items: stretch;
}

body.w2e-listing .es-listings > div,
body.w2e-listing .es-listings > article {
  min-width: 0;
  display: flex;
}

/* --------------------------------------------------------------------------
   The card

   White, hairline, square corners, and weightless until the pointer arrives.
   Estatik's default is a permanent grey shadow on every card at rest, which
   makes twelve of them read as noise.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-listing {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--w2e-paper);
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color .32s var(--w2e-ease), box-shadow .32s var(--w2e-ease), transform .32s var(--w2e-ease);
}

body.w2e-listing .es-listing:hover {
  border-color: #C7CED6;
  box-shadow: 0 2px 6px rgba(15, 26, 34, .07), 0 14px 34px rgba(15, 26, 34, .10);
  transform: translateY(-3px);
}

body.w2e-listing .es-listing__image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--w2e-bone);
}

body.w2e-listing .es-listing__image__background {
  background-size: cover !important;
  background-position: center !important;
  transition: transform .8s var(--w2e-ease);
}

body.w2e-listing .es-listing:hover .es-listing__image__background {
  transform: scale(1.045);
}

body.w2e-listing .es-listings__image__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Emirate, taken from the address the listing already carries. Nothing is
   invented: a card with no address gets no chip. */
body.w2e-listing .w2e-chip {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 4;
  padding: .35rem .6rem;
  border-radius: var(--w2e-r);
  background: rgba(0, 51, 90, .92);
  color: #FFFFFF;
  font-family: var(--w2e-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

body.w2e-listing .es-listing__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.15rem 1.25rem 1.25rem !important;
}

body.w2e-listing .es-listing__content__inner,
body.w2e-listing .es-listing__content__left {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  gap: .55rem;
}

body.w2e-listing .es-listing__title {
  margin: 0 !important;
  font-family: var(--w2e-serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

body.w2e-listing .es-listing__title a {
  color: var(--w2e-text) !important;
  text-decoration: none !important;
  transition: color .24s var(--w2e-ease);
}

body.w2e-listing .es-listing:hover .es-listing__title a {
  color: var(--w2e-navy) !important;
}

/* Price first, currency as a quiet chip beside it. */
body.w2e-listing .es-badges {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 !important;
}

body.w2e-listing .es-price {
  font-family: var(--w2e-serif) !important;
  font-size: 1.375rem !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  color: var(--w2e-navy) !important;
  letter-spacing: -.015em;
}

body.w2e-listing .es-badge--normal {
  background: var(--w2e-bone) !important;
  color: var(--w2e-text-mute) !important;
  border: 1px solid var(--w2e-hairline) !important;
  border-radius: var(--w2e-r) !important;
  padding: .2rem .45rem !important;
  font-family: var(--w2e-sans) !important;
  font-size: .6875rem !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Listings with no published price say so, in the price's own position. */
body.w2e-listing .es-badge--normal.w2e-on-application {
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 0 !important;
  font-family: var(--w2e-sans) !important;
  font-size: .9375rem !important;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--w2e-navy) !important;
}

/* Room counts, on a rule, the way the reference separates them from the copy. */
body.w2e-listing .es-listing__meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.15rem;
  margin: .15rem 0 0 !important;
  padding-top: .8rem;
  border-top: 1px solid var(--w2e-hairline);
  font-family: var(--w2e-sans);
  font-size: .875rem;
  color: var(--w2e-text-mute);
}

body.w2e-listing .es-listing__meta > div {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

body.w2e-listing .es-listing__meta b {
  color: var(--w2e-text);
  font-weight: 600;
}

body.w2e-listing .es-listing__meta svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .65;
}

body.w2e-listing .w2e-meta-size {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

body.w2e-listing .w2e-meta-size svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .65;
}

body.w2e-listing .w2e-meta-size b {
  color: var(--w2e-text);
  font-weight: 600;
}

/* Type, under the room counts, in the reference's position. */
body.w2e-listing .w2e-type {
  font-family: var(--w2e-sans);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--w2e-text-mute);
}

body.w2e-listing .es-address {
  font-family: var(--w2e-sans) !important;
  font-size: .8125rem !important;
  line-height: 1.45;
  color: var(--w2e-text-faint) !important;
  margin: 0 !important;
}

body.w2e-listing .es-excerpt {
  font-family: var(--w2e-sans) !important;
  font-size: .875rem !important;
  line-height: 1.6;
  color: var(--w2e-text-mute) !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   List view

   Estatik's second layout. Image left, content right, same materials.
   -------------------------------------------------------------------------- */

body.w2e-listing .es-listings--list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--w2e-card-gap) !important;
}

body.w2e-listing .es-listings--list .es-listing {
  flex-direction: row;
  align-items: stretch;
}

body.w2e-listing .es-listings--list .es-listing__image {
  flex: 0 0 34%;
  max-width: 34%;
  aspect-ratio: auto;
  min-height: 240px;
}

body.w2e-listing .es-listings--list .es-listing__content {
  flex: 1 1 auto;
  padding: 1.4rem 1.5rem !important;
}

/* Estatik shows a right-hand price column in this layout and hides the badge
   block that carries the price in the grid. Those hide classes are its own;
   they have to keep working through the rules above. */
body.w2e-listing .es-listings--list .es-listing--hide-on-list,
body.w2e-listing .es-listings--grid-2 .es-listing--hide-on-grid,
body.w2e-listing .es-listings--grid-3 .es-listing--hide-on-grid,
body.w2e-listing .es-listings--grid-4 .es-listing--hide-on-grid {
  display: none !important;
}

body.w2e-listing .es-listings--list .es-listing__content__inner {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

body.w2e-listing .es-listings--list .es-listing__content__left {
  flex: 1 1 auto;
  min-width: 0;
}

body.w2e-listing .es-listings--list .es-listing__content__right {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}

@media (max-width: 720px) {
  body.w2e-listing .es-listings--list .es-listing { flex-direction: column; }
  body.w2e-listing .es-listings--list .es-listing__image {
    flex: none;
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   The scrolling row, and the feature blocks

   Both sit under the results, as in the reference. The row scrolls with the
   pointer, the wheel or the two buttons; the feature blocks give a photograph
   the space a card cannot.
   -------------------------------------------------------------------------- */

/* These two sit after Elementor's content, inside its 1140px column, so they
   step out to the same measure the results use rather than overflowing it. */
body.w2e-listing .w2e-strip,
body.w2e-listing .w2e-features,
body.w2e-listing .w2e-houses {
  margin: clamp(2.5rem, 5vw, 4rem) calc(50% - 50vw + (var(--w2e-sbw, 0px) / 2)) 0;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
  max-width: none;
}

body.w2e-listing .w2e-strip > *,
body.w2e-listing .w2e-features > *,
body.w2e-listing .w2e-houses > * {
  max-width: var(--w2e-list-max);
  margin-inline: auto;
}

/* The line under each section heading: what the section is, and on what
   basis a listing is in it. */
body.w2e-listing .w2e-strip__standfirst {
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--w2e-muted, #5b6873);
  text-align: center;
  max-width: 62ch;
  margin: -.6rem auto clamp(1.5rem, 3vw, 2.25rem);
}

/* The incentive, above the name, in the one place on the page that carries
   the gold. Nothing else on a card is coloured, so it reads as the reason the
   listing is in this section. */
body.w2e-listing .w2e-offer {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .4rem;
  font-family: var(--w2e-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7a5a15;
  background: rgba(191, 149, 63, .14);
  border: 1px solid rgba(191, 149, 63, .38);
  border-radius: 999px;
  padding: .32rem .7rem;
  margin-bottom: .15rem;
  line-height: 1.35;
  text-align: left;
}

/* The leading claim rides on the photograph, opposite the community label, so
   it is read before anything else and the rows under it stay aligned across
   the row of cards. */
body.w2e-listing .w2e-offer--flag {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  max-width: calc(100% - 1.5rem);
  color: #2a1e05;
  background: var(--w2e-gold, #bf953f);
  border-color: transparent;
  letter-spacing: .08em;
  box-shadow: 0 6px 18px rgba(15, 26, 34, .28);
  margin: 0;
}

/* A distress deal is the stronger of the two claims, so it is the darker
   ribbon; a discount keeps the gold. */
body.w2e-listing .w2e-offer--distress {
  color: #fff;
  background: var(--w2e-navy);
}

/* One line or two, every card's name starts at the same height. */
body.w2e-listing .w2e-mini__body > .w2e-offer {
  min-height: 2.9em;
  align-items: center;
}

body.w2e-listing .w2e-strip h2,
body.w2e-listing .w2e-features h2,
body.w2e-listing .w2e-houses h2 {
  font-family: var(--w2e-serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--w2e-text);
  text-align: center;
  margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
}

/* The arrows sit outside the cards, one each side, as in the reference. */
body.w2e-listing .w2e-strip__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
}

body.w2e-listing .w2e-strip__btn {
  flex: none;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  background: var(--w2e-paper);
  color: var(--w2e-text);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 26, 34, .08);
  transition: border-color .24s var(--w2e-ease), color .24s var(--w2e-ease), background .24s var(--w2e-ease);
}

body.w2e-listing .w2e-strip__btn:hover {
  border-color: var(--w2e-navy);
  background: var(--w2e-navy);
  color: #FFFFFF;
}

@media (max-width: 620px) {
  body.w2e-listing .w2e-strip__btn { display: none; }
}

/* The row keeps the card at the size the grid uses; it scrolls rather than
   squeezing eight cards into the width, which is what the reference does. */
body.w2e-listing .w2e-strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(288px, 25vw, 352px);
  gap: var(--w2e-card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
  /* The row is driven by the two arrows, so the browser's own bar is not
     drawn under it; the reference carries none either. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* The buttons are laid out with flex, which would otherwise outrank the
   hidden attribute the script sets when there is nothing to scroll. */
body.w2e-listing .w2e-strip__btn[hidden] {
  display: none !important;
}

body.w2e-listing .w2e-strip__track.is-static {
  justify-content: center;
  overflow-x: visible;
}

body.w2e-listing .w2e-strip__track::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.w2e-listing .w2e-mini {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--w2e-paper);
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color .32s var(--w2e-ease), box-shadow .32s var(--w2e-ease), transform .32s var(--w2e-ease);
}

body.w2e-listing .w2e-mini:hover {
  border-color: #C7CED6;
  box-shadow: 0 2px 6px rgba(15, 26, 34, .07), 0 14px 34px rgba(15, 26, 34, .10);
  transform: translateY(-3px);
}

body.w2e-listing .w2e-mini__media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--w2e-navy);
  background-size: cover;
  background-position: center;
}

body.w2e-listing .w2e-mini__noimage,
body.w2e-listing .w2e-feature__noimage {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  font-family: var(--w2e-sans);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

body.w2e-listing .w2e-mini__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem 1.15rem;
}

body.w2e-listing .w2e-mini__title {
  font-family: var(--w2e-serif);
  font-size: 1.0625rem;
  line-height: 1.34;
  font-weight: 600;
  color: var(--w2e-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

body.w2e-listing .w2e-mini__price {
  font-family: var(--w2e-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--w2e-navy);
}

body.w2e-listing .w2e-mini__meta,
body.w2e-listing .w2e-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  font-family: var(--w2e-sans);
  font-size: .8125rem;
  color: var(--w2e-text-mute);
}

body.w2e-listing .w2e-mini__meta b,
body.w2e-listing .w2e-feature__meta b { color: var(--w2e-text); font-weight: 600; }

body.w2e-listing .w2e-mini__address,
body.w2e-listing .w2e-feature__address {
  font-family: var(--w2e-sans);
  font-size: .75rem;
  color: var(--w2e-text-faint);
}

body.w2e-listing .w2e-mini__type,
body.w2e-listing .w2e-feature__type {
  font-family: var(--w2e-sans);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w2e-text-mute);
}

body.w2e-listing .w2e-feature__type { color: rgba(255, 255, 255, .72); }

/* The house inventory: the same card as the results, in the same measure, so
   the section reads as part of the page rather than a device bolted to it. */
body.w2e-listing .w2e-houses__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--w2e-card-gap);
}

@media (max-width: 1100px) {
  body.w2e-listing .w2e-houses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.w2e-listing .w2e-houses__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Feature blocks: panel and photograph, side by side. */
body.w2e-listing .w2e-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--w2e-card-gap);
}

body.w2e-listing .w2e-feature {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  min-height: 380px;
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r);
  overflow: hidden;
  text-decoration: none !important;
  transition: box-shadow .32s var(--w2e-ease), transform .32s var(--w2e-ease);
}

body.w2e-listing .w2e-feature:hover {
  box-shadow: 0 2px 6px rgba(15, 26, 34, .07), 0 16px 38px rgba(15, 26, 34, .12);
  transform: translateY(-3px);
}

body.w2e-listing .w2e-feature__body {
  order: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: 1.6rem 1.5rem;
  background: var(--w2e-navy);
  color: #FFFFFF;
}

body.w2e-listing .w2e-feature__title {
  font-family: var(--w2e-serif);
  font-size: 1.375rem;
  line-height: 1.28;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.w2e-listing .w2e-feature__price {
  font-family: var(--w2e-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--w2e-gold-soft);
}

body.w2e-listing .w2e-feature__meta { color: rgba(255, 255, 255, .78); }
body.w2e-listing .w2e-feature__meta b { color: #FFFFFF; }
body.w2e-listing .w2e-feature__address { color: rgba(255, 255, 255, .6); }

body.w2e-listing .w2e-feature__media {
  position: relative;
  background: var(--w2e-ink);
  background-size: cover;
  background-position: center;
  min-height: 240px;
}

@media (max-width: 560px) {
  body.w2e-listing .w2e-features__grid { grid-template-columns: minmax(0, 1fr); }
  body.w2e-listing .w2e-feature { grid-template-columns: minmax(0, 1fr); }
  body.w2e-listing .w2e-feature__body { order: 1; }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

body.w2e-listing .es-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--w2e-hairline);
  font-family: var(--w2e-sans);
}

body.w2e-listing .es-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .6rem;
  border: 1px solid var(--w2e-hairline);
  border-radius: var(--w2e-r) !important;
  background: var(--w2e-paper) !important;
  color: var(--w2e-text) !important;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .24s var(--w2e-ease), color .24s var(--w2e-ease), background .24s var(--w2e-ease);
}

body.w2e-listing .es-pagination .page-numbers:hover {
  border-color: var(--w2e-navy);
  color: var(--w2e-navy) !important;
}

body.w2e-listing .es-pagination .page-numbers.current {
  background: var(--w2e-navy) !important;
  border-color: var(--w2e-navy);
  color: #FFFFFF !important;
}

body.w2e-listing .es-pagination .page-numbers__num { color: inherit !important; }

body.w2e-listing .es-pagination__info,
body.w2e-listing .es-pagination > span:last-child {
  font-size: .8125rem;
  color: var(--w2e-text-faint);
}

/* --------------------------------------------------------------------------
   Responsive

   Three up, two up, one up. Checked at 390, 430, 768 and 1440.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  body.w2e-listing .es-listings--grid-3,
  body.w2e-listing .es-listings--grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body.w2e-listing .es-listings--grid-3,
  body.w2e-listing .es-listings--grid-2,
  body.w2e-listing .es-listings--grid-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.w2e-listing .es-search-nav { gap: .5rem; }
  body.w2e-listing .es-search-nav__content,
  body.w2e-listing .es-search__address { flex: 1 1 100%; }

  body.w2e-listing .es-dropdown__toggle,
  body.w2e-listing .es-search-nav .es-btn--bordered {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 46px;
    font-size: .8125rem !important;
  }

  /* The count takes its own line; sort and the layout switcher share the next
     one, so the row never wraps into a staircase. */
  body.w2e-listing .es-listings-filter {
    gap: .6rem 1rem;
    align-items: center;
  }

  body.w2e-listing .es-total { flex: 1 1 100%; }

  body.w2e-listing .es-price { font-size: 1.25rem !important; }

  /* Estatik folds the filter pills into one toggle at this width. It arrives
     styled as an underlined link; here it matches the controls around it. */
  body.w2e-listing .es-search__collapse-link {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid var(--w2e-hairline);
    border-radius: var(--w2e-r);
    background: var(--w2e-paper);
    font-family: var(--w2e-sans);
    font-size: .875rem;
    font-weight: 500;
    color: var(--w2e-text) !important;
    text-decoration: none !important;
  }
}

/* Nothing on this page may scroll sideways. */
body.w2e-listing .es-properties,
body.w2e-listing .es-properties__list,
body.w2e-listing .es-listings { max-width: 100%; }

body.w2e-listing .es-listing__title,
body.w2e-listing .es-address { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  body.w2e-listing .es-listing,
  body.w2e-listing .es-listing__image__background { transition: none !important; }
  body.w2e-listing .es-listing:hover { transform: none; }
  body.w2e-listing .es-listing:hover .es-listing__image__background { transform: none; }
}