/* Address Hotels–style property search: gold labels, white values, gold CTA.

   index.html links this for the hero bar AND the advanced-filters tray. The
   interior pages link it too, for the tray alone — the header's Search opens
   the same `.adv-filters--drawer` there, driven by site-search.js instead of
   app.js. So this file is the ONE stylesheet for the component; there is no
   interior copy to drift. The `.banner-search` and `.hero-search-dock` rules
   below are inert on those pages, which carry no such markup. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/lato-400-sub.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/source-sans-3.woff2") format("woff2");
}

.banner-search--address.banner-search--hero,
.banner-search--address.banner-search--panel {
  --addr-label: rgba(211, 201, 178, 0.92);
  --addr-value: var(--p-brand-white);
  --addr-muted-line: rgba(var(--em-rgb-white), 0.22);
  --addr-cta: #bfa164;
  --addr-shell: rgba(12, 12, 12, 0.32);
}

.banner-search--address.banner-search--hero {
  background: var(--addr-shell);
  border: 1px solid rgba(var(--em-rgb-white), 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 3px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.banner-search--address.banner-search--panel .banner-search__grid {
  background: var(--addr-shell);
  border: 1px solid rgba(var(--em-rgb-white), 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 9999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 0.35rem;
}

.banner-search--address .banner-search__label {
  color: var(--addr-label);
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.06rem;
}

.banner-search--address .banner-search__field select {
  color: var(--addr-value);
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  height: auto;
  padding: 0 1.15rem 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.62rem;
}

[dir="rtl"] .banner-search--address .banner-search__field select {
  padding: 0 0 0 1.15rem;
  background-position: left 0.1rem center;
}

.banner-search--address .banner-search__field select option {
  color: #1a1410;
  background: var(--em-text-on-inverse);
  text-transform: none;
}

.banner-search--address .banner-search__divider {
  background: var(--addr-muted-line);
  width: 1px;
  align-self: stretch;
  min-height: 1.55rem;
  opacity: 1;
}

.banner-search__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.35rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.banner-search__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  min-height: 2.4rem;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p-brand-white);
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.92;
}

.banner-search__filter:hover,
.banner-search__filter[aria-expanded="true"] {
  background: transparent;
  opacity: 1;
}

.banner-search__compact-go {
  display: none !important;
}

.banner-search--address .banner-search__submit {
  /* The action plate follows the reference bar's rule, in EMAAR's palette: a
     quiet pane of the same glass at rest, so the bar does not out-shout the
     film, and the brand's white primary once intent is shown (hover/focus).
     DS SS1 — the metal is the hairline here, never the fill. */
  background: rgba(var(--em-rgb-white, 255, 255, 255), 0.12);
  color: var(--p-brand-white, #fff);
  border: 1px solid var(--em-surface-gold-soft);  /* the gold button's own edge — a ground */
  border-radius: 999px;
  align-self: center;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 1.2rem;
  min-height: 0;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}

.banner-search--address .banner-search__submit:hover,
.banner-search--address .banner-search__submit:focus-visible {
  background: var(--p-brand-white, #fff);
  color: var(--p-ink-1000, #111112);
  border-color: var(--p-brand-white, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.banner-search--address .banner-search__submit:active {
  background: var(--p-paper-100, #f6f2ea);
  color: var(--p-ink-1000, #111112);
  border-color: var(--p-paper-100, #f6f2ea);
}

.banner-search--panel .banner-search__filter {
  display: none;
}

@media (max-width: 899px) {
  .banner-search--hero .banner-search__actions {
    display: none !important;
  }

  .banner-search--address.banner-search--hero .banner-search__grid {
    padding: 0.32rem 0.32rem 0.32rem 1.05rem !important;
  }

  .banner-search__compact {
    justify-content: space-between;
    gap: 0.85rem;
  }

  .banner-search__compact-icon {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.95;
  }

  .banner-search__compact-label {
    display: block;
  }

  .banner-search__compact-go {
    display: none !important;
  }
}

/* Hero grid: fields inset left, Search block flush with the bar's right edge */
.banner-search--address.banner-search--hero .banner-search__grid {
  padding: 0.22rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .banner-search--address.banner-search--hero .banner-search__field {
    display: grid;
    align-content: center;
    cursor: pointer;
  }

  .banner-search--address.banner-search--hero .banner-search__field select {
    pointer-events: none;
  }

  .banner-search--address.banner-search--hero .banner-search__divider {
    min-height: 100%;
  }
}

@media (max-width: 899px) {
  .banner-search--address.banner-search--hero,
  .banner-search--address.banner-search--panel .banner-search__grid {
    border-radius: 1.25rem;
  }

  .banner-search--address .banner-search__submit {
    width: 100%;
    align-self: auto;
    min-height: 2.65rem;
    border-radius: 999px;
  }
}

/* ————— Advanced filters tray: slides out from behind the search bar ————— */
.hero-search-dock__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(94vw, 66rem);
}

.search-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--em-surface-filled);
  opacity: 0;
  transform: translateY(0.7rem);
  pointer-events: none;
  transition:
    opacity 0.55s ease,
    transform 0.6s ease;
}

.search-cue.is-visible {
  opacity: 1;
  transform: none;
}

.search-cue span {
  flex: 0 0 auto;
}

.search-cue::before,
.search-cue::after {
  content: "";
  width: 2.75rem;
  height: 1px;
  background: rgba(var(--em-rgb-sand), 0.7);
}

.hero-search-dock.is-flying .search-cue,
.hero-search-dock.is-dock-stuck .search-cue,
.hero-search-dock.is-dock-morphing .search-cue {
  opacity: 0 !important;
  visibility: hidden;
}

/* The rules below are written against page.css's :root, which the interior
   pages do not load. site-search.js puts this class on the drawer it builds so
   the tray takes those pages' own typefaces; index.html never carries it, so
   its :root values are untouched. */
.adv-filters--em {
  --font-display: var(--em-display);
  --font-sans: var(--em-body);
  --font-nav: var(--em-body);
}

/* ——————————————— The filter panel's palette, in one place ———————————————
   Gold is this house's accent for eyebrows, rules and hairlines — never the
   ground of a filled control. A selected chip and the Show-results button are
   fills, so they take the cream. These values used to live only in page.css,
   which the home page loads and the twenty-seven interior pages do not; that
   is the whole reason the drawer arrived gold on the About pages while the
   home panel was cream. They belong to the component, so they live with it.

   Every colour, radius and rhythm below reads from these. Change the chip
   colour here and it changes on every page at once — which is the point. */
.adv-filters {
  /* Component tokens — layer 3, declared against assets/ds/01-tokens.css.
     The panel is a dark plate over film, so its ink and lines are the night
     world's; its SELECTED chip is the cream pair, never gold
     (DESIGN-STANDARDS.md §1). */
  --advf-ground: rgba(18, 16, 15, 0.94);
  --advf-ink: var(--em-text-inverse);
  --advf-ink-mute: rgba(248, 248, 248, 0.7);
  --advf-ink-faint: rgba(248, 248, 248, 0.6);
  --advf-line: rgba(248, 248, 248, 0.14);
  --advf-chip-line: rgba(248, 248, 248, 0.3);
  --advf-label: rgba(var(--em-rgb-sand), 0.7);
  --advf-sel: var(--em-surface-filled);
  --advf-sel-hover: var(--em-surface-filled-hover);
  --advf-sel-ink: var(--em-text-primary);
  /* 0, not --em-radius: the chips are joined into a track, and a 2px corner
     on each member of a joined track reads as a rendering fault. */
  --advf-radius: var(--p-radius-none);
  --advf-gap: var(--space-8);
  --advf-group-gap: var(--space-26);
}

.adv-filters {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.7rem);
  z-index: 3;
  background: rgba(18, 16, 15, 0.94);
  border: 1px solid rgba(var(--em-rgb-white), 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--p-brand-white);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  max-height: min(74vh, 42rem);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(1.75rem);
  pointer-events: none;
  transition:
    transform 0.5s var(--em-ease-exit),
    opacity 0.35s ease;
}

.adv-filters.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.adv-filters__intro {
  display: none;
}

.adv-filters__kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--em-rgb-white), 0.55);
}

.adv-filters__heading {
  margin: 0;
  font-family: var(--font-display), Candara, "Trebuchet MS", sans-serif;
  font-size: clamp(1.85rem, 7vw, 2.35rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--p-brand-white);
}

.adv-filters__apply {
  display: none;
}

.adv-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem 0.35rem;
}

.adv-filters__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--em-rgb-white), 0.85);
}

.adv-filters__dash {
  width: 1.4rem;
  height: 1px;
  background: rgba(var(--em-rgb-white), 0.55);
}

.adv-filters__close {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(var(--em-rgb-white), 0.28);
  /* a circle is 50%, never 999px — DESIGN-STANDARDS.md §8 */
  border-radius: var(--em-radius-circle);
  background: transparent;
  color: var(--p-brand-white);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.25s ease;
}

.adv-filters__close:hover {
  border-color: rgba(var(--em-rgb-white), 0.6);
}

.adv-filters__body {
  padding: 0.5rem 1.5rem 1.5rem;
}

.adv-filters__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
  align-items: start;
}

/* A <legend> sits in the fieldset's border, above its padding box, so
   padding-top only pushes the chips down and leaves the label crowding the
   group above. The space has to be margin. */
.adv-filters__group {
  border: 0;
  margin: var(--advf-group-gap) 0 0;
  padding: 0;
  min-width: 0;
}

.adv-filters__body > .adv-filters__group:first-child {
  margin-top: 0;
}

.adv-filters__cols .adv-filters__col > .adv-filters__group:first-child {
  margin-top: var(--advf-group-gap);
}

.adv-filters__legend {
  padding: 0;
  margin: 0 0 12px;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--advf-label);
}

.adv-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--advf-gap);
}

.adv-filters__chip {
  padding: 9px 15px;
  border: 1px solid var(--advf-chip-line);
  border-radius: var(--advf-radius);
  background: transparent;
  color: var(--advf-ink);
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.adv-filters__chip:hover {
  border-color: var(--advf-sel);
}

/* A chosen chip is a filled control, so it takes the cream fill and dark
   ink — the same pair the Show-results button uses. No gradient: a gradient
   on a 12px control reads as a button from another site. */
.adv-filters__chip[aria-pressed="true"] {
  background: var(--advf-sel);
  border-color: var(--advf-sel);
  color: var(--advf-sel-ink);
}

.adv-filters__chip[aria-pressed="true"]:hover {
  background: var(--advf-sel-hover);
  border-color: var(--advf-sel-hover);
}

.adv-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--advf-line);
  background: rgba(10, 9, 8, 0.4);
}

.adv-filters__count {
  margin: 0;
  font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--advf-ink-mute);
}

.adv-filters__reset {
  min-height: 44px;
  padding: 6px 2px;
  border: 0;
  border-radius: var(--advf-radius);
  background: transparent;
  color: var(--advf-ink-faint);
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  transition: color 0.3s ease;
}

.adv-filters__reset:hover {
  color: var(--advf-ink);
}

@media (prefers-reduced-motion: reduce) {
  .adv-filters {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-cue {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile: full-screen refine sheet that rises from the search bar. */
@media (max-width: 1023px) {
  .adv-filters__title--desk {
    display: none;
  }

  .adv-filters__intro {
    display: block;
  }

  .adv-filters__count {
    display: none;
  }

  .adv-filters__apply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.15rem;
    padding: 0.85rem 1.1rem;
    border: 0;
    border-radius: var(--advf-radius);
    background: var(--advf-sel);
    color: var(--advf-sel-ink);
    font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .adv-filters__reset {
    width: 100%;
    min-height: 2.4rem;
    letter-spacing: 0.2em;
  }

  .adv-filters.adv-filters--sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 calc(2.7rem + 1.15rem + env(safe-area-inset-bottom, 0px)) 0;
    left: 0;
    right: 0;
    bottom: calc(2.7rem + 1.15rem + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-overlay);
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(8, 8, 10, 0.78);
    box-shadow: none;
    opacity: 1;
    transform: translate3d(0, 100%, 0);
    transform-origin: bottom center;
    pointer-events: none;
    transition: transform 0.58s var(--em-ease-exit);
  }

  .adv-filters.adv-filters--sheet.is-open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .adv-filters--sheet .adv-filters__head {
    position: relative;
    display: block;
    padding: 5.1rem 1.25rem 0.35rem;
  }

  .adv-filters--sheet .adv-filters__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .adv-filters--sheet .adv-filters__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 1.25rem 1.1rem;
  }

  .adv-filters--sheet .adv-filters__cols,
  .adv-filters--sheet .adv-filters__col {
    display: contents;
  }

  .adv-filters--sheet .adv-filters__group:has([data-adv-group="community"]) {
    order: 1;
  }

  .adv-filters--sheet .adv-filters__group:has([data-adv-group="type"]) {
    order: 2;
  }

  .adv-filters--sheet .adv-filters__group:has([data-adv-group="bedrooms"]) {
    order: 3;
  }

  .adv-filters--sheet .adv-filters__group:has([data-adv-group="availability"]) {
    order: 4;
  }

  .adv-filters--sheet .adv-filters__group:has([data-adv-group="price"]) {
    order: 5;
  }

  .adv-filters--sheet .adv-filters__foot {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 0;
    background: linear-gradient(180deg, transparent, rgba(8, 8, 10, 0.55) 28%);
  }

  .adv-filters.adv-filters--sheet[hidden] {
    display: none !important;
  }
}

.hero-search-dock.is-flying .hero-search-dock__inner {
  width: min(94vw, 66rem);
}

/* Header search icon: refine tray slides in from the right. */
.adv-filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-top);
  background: rgba(8, 8, 12, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.adv-filters-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.adv-filters.adv-filters--drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(32rem, 100vw);
  height: 100%;
  max-height: none;
  z-index: var(--z-drawer-top);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(var(--em-rgb-white), 0.08);
  border-radius: 0;
  background: rgba(10, 10, 12, 0.93);
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.38);
  opacity: 1;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
  transition: transform 0.58s var(--em-ease-exit);
}

.adv-filters.adv-filters--drawer.is-open {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.adv-filters.adv-filters--drawer[hidden] {
  display: none !important;
}

.adv-filters--drawer .adv-filters__title--desk {
  display: none;
}

.adv-filters--drawer .adv-filters__intro {
  display: block;
}

.adv-filters--drawer .adv-filters__head {
  position: relative;
  display: block;
  padding: 1.35rem 1.4rem 0.2rem;
}

.adv-filters--drawer .adv-filters__close {
  position: absolute;
  /* the glyph stays where it was drawn; the box grows around it to the 44 a
     thumb needs, which is why the inset drops by the same amount it gained */
  top: 0.7rem;
  right: 0.7rem;
  width: 44px;
  height: 44px;
}

.adv-filters--drawer .adv-filters__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.15rem 1.4rem 1.1rem;
}

.adv-filters--drawer .adv-filters__cols,
.adv-filters--drawer .adv-filters__col {
  display: contents;
}

.adv-filters--drawer .adv-filters__group:has([data-adv-group="community"]) {
  order: 1;
}

.adv-filters--drawer .adv-filters__group:has([data-adv-group="type"]) {
  order: 2;
}

.adv-filters--drawer .adv-filters__group:has([data-adv-group="bedrooms"]) {
  order: 3;
}

.adv-filters--drawer .adv-filters__group:has([data-adv-group="availability"]) {
  order: 4;
}

.adv-filters--drawer .adv-filters__group:has([data-adv-group="price"]) {
  order: 5;
}

.adv-filters--drawer .adv-filters__count {
  display: block;
  grid-area: count;
}

.adv-filters--drawer .adv-filters__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  padding: 0.8rem 1.2rem;
  border: 0;
  border-radius: var(--advf-radius);
  background: var(--advf-sel);
  color: var(--advf-sel-ink);
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.adv-filters__apply:hover {
  background: var(--advf-sel-hover);
}

.adv-filters--drawer .adv-filters__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "count count"
    "reset apply";
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.95rem 1.4rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(var(--em-rgb-white), 0.12);
}

.adv-filters--drawer .adv-filters__reset {
  grid-area: reset;
  width: auto;
  justify-self: start;
  /* 2.4rem is 36px here and 38 on the home page — under the 44 every other
     control in this build reserves for a thumb. A literal, like places.css
     uses, so the box does not shrink with a page's root size. */
  min-height: 44px;
}

.adv-filters--drawer .adv-filters__apply {
  grid-area: apply;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .adv-filters-backdrop,
  .adv-filters.adv-filters--drawer {
    transition: none;
  }
}

.hero-search-dock__inner {
  overflow: visible;
}

/* Desktop field tray: sharp white list + black DONE, above the search bar */
.field-tray {
  position: absolute;
  z-index: var(--z-sticky);
  width: min(20.75rem, 92vw);
  background: var(--p-brand-white);
  color: #1a1814;
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.field-tray[hidden] {
  display: none !important;
}

.field-tray__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: min(22.5rem, calc(100vh - 12rem));
  overflow-y: auto;
}

.field-tray__list li {
  margin: 0;
}

.field-tray__opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.88rem 1.2rem;
  border: 0;
  background: transparent;
  color: #1a1814;
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: inherit;
  cursor: pointer;
}

.field-tray__opt:hover {
  background: var(--em-text-on-inverse);
}

.field-tray__opt.is-on {
  background: #f3eee6;
}

.field-tray__opt.is-on::after {
  content: "";
  flex: 0 0 auto;
  width: 0.52rem;
  height: 0.3rem;
  margin-inline-start: auto;
  border-inline-start: 1.55px solid var(--em-text-eyebrow-neutral);
  border-bottom: 1.55px solid var(--em-text-eyebrow-neutral);
  transform: rotate(-45deg) translateY(-1px);
}

.field-tray__done {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.05rem 1rem;
  border: 0;
  border-radius: 0;
  background: #111;
  color: var(--p-brand-white);
  font-family: var(--font-nav, "Source Sans 3"), "Segoe UI", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.field-tray__done:hover {
  background: #1c1c1c;
}

@media (max-width: 1023px) {
  .field-tray {
    display: none !important;
  }
}

/* The refine sheet takes the whole screen: the dock's search widget is gone
   while it is open, so there is nothing to reserve height for. */
@media (max-width: 1023px) {
  .adv-filters.adv-filters--sheet {
    inset: 0;
    bottom: 0;
    background: rgba(8, 8, 10, 0.94);
  }

  .adv-filters--sheet .adv-filters__foot {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}