/* es-recently-viewed */
/**
 * Endless Stays: Recently Viewed homes (section styles + card skin)
 *
 * Upload to: /wp-content/uploads/recently-viewed/es-recently-viewed.css
 * Enqueued by es-recently-viewed.php under the handle es-recently-viewed.
 *
 * TWO JOBS, AND WHY THE SECOND ONE EXISTS
 *   1. The section shell: heading, grid, the phone rail, the reveal, the
 *      hidden state, the optional foot link, the static photo fallback.
 *   2. The card skin. On this site the Explorer card look (20px radius, 230px
 *      photo, Dela title, "Enter dates for pricing") is NOT in explorer.css or
 *      the Customizer: it lives in a 40 KB WPCode CSS snippet ("GLOBAL LAYOUT
 *      OVERRIDES") that is printed on /search/ only. On the property page the
 *      same markup renders bare: square photo, Fraunces title in normal case,
 *      the nightly amount in plain view. So the skin ships here, re-scoped
 *      under .esrv, rebuilt from that snippet and from the values it computes
 *      to on the live /search/ card (measured 2026-09-29, 1440 and 390).
 *
 * WHAT WAS DELIBERATELY NOT CARRIED OVER FROM THAT SNIPPET
 *   - Its grid rules. They are global and !important
 *     (.property-item.hfse-property-container width calc(33.333% - 24px),
 *     margin 12px, .hfse-properties overflow hidden) and would fight any grid
 *     of our own. The section has its own grid and never uses .hfse-properties.
 *   - The lift on the card link (.hfse-property-card:hover translateY). The
 *     favourites drawer appends its heart as a SIBLING of the link inside the
 *     container, so a lift on the link would leave the heart behind. The lift
 *     is on the container here, and the link never gets a z-index.
 *   - Search form, filter tabs, map, favourites-button and rating rules.
 *   - The :has() test around the price. It only separates "dates chosen" from
 *     "no dates", and this section never carries a date query.
 *
 * SPECIFICITY
 *   Four rule sets reach these cards on the property page and must lose:
 *     .elementor-kit-7 h2 / h3 / a / a:hover      (0,1,1)  Dela 45px headings,
 *                                                 Fraunces 35px h3, links in
 *                                                 18px #FE9F29 going #1B93ED
 *     .uk-scope h2 / h3 / .hk-h5 / .hk-card-*     up to (0,4,0), and
 *                                                 .hk-margin-small-top with
 *                                                 !important
 *     explorer.css stock card rules and the       (0,1,0) to (0,2,0)
 *     guests / bed / bath sprite block
 *   Every card rule here starts .esrv .hfse-property-container (0,3,0) or
 *   deeper, and !important is used where the rule it beats has it too, or
 *   where the value is one the live card pins with !important. Every
 *   !important in this file is scoped under .esrv. None is global.
 *
 * FONTS
 *   Montserrat, Fraunces and Dela Gothic One load site wide from Elementor's
 *   local Google Fonts copy, so they are named here and never fetched. No
 *   import rule, no face declaration.
 */

/* ---------------------------------------------------------------------- */
/*  Tokens                                                                 */
/* ---------------------------------------------------------------------- */

/* Measured on the live pages, not taken from the brand canon. The property
   page's own section headings use #FE9F29 for the eyebrow (kit global
   8f23525) and an upright Fraunces 700 H2, and the /search/ card uses #e88d1a
   for its price hint and #181818 for its small text. Matching the page the
   section sits on wins over the canon's gold and italic accent. */
.esrv {
  --esrv-plum:    #622D7F;  /* H2, card title, dots                        */
  --esrv-eyebrow: #FE9F29;  /* PDP eyebrow (h6.elementor-heading-title)    */
  --esrv-body:    #5A5A6E;  /* PDP description text                        */
  --esrv-ink:     #181818;  /* card subtitle and meta line                 */
  --esrv-price:   #E88D1A;  /* "Enter dates for pricing"                   */
  --esrv-hair:    #E9E6E0;  /* card border and price hairline              */
  --esrv-rule:    #EAE7E0;  /* PDP section divider                         */
  --esrv-gap:     24px;     /* 12px + 12px, the Explorer's card margins    */
  /* How far the phone rail bleeds past the section, on each side. It MUST
     equal the Elementor container's mobile side padding (20px, see the
     README). More than that and the rail pokes past the screen edge; less
     and cards are cut off 20px inside it. */
  --esrv-bleed:   20px;
  --esrv-sans:    Montserrat, sans-serif;
  --esrv-serif:   "Fraunces", sans-serif;
  --esrv-display: "Dela Gothic One", sans-serif;
}

/* ---------------------------------------------------------------------- */
/*  Section shell                                                          */
/* ---------------------------------------------------------------------- */

/* The PHP prints the mount hidden and the script only unhides it once there
   are cards, so this rule is what keeps an empty history at zero height.
   !important because the rule below sets display on the same element. */
.esrv[hidden] {
  display: none !important;
}

/* No horizontal padding: the Elementor container (Boxed, 1260px, 30/30/20)
   puts the content edge exactly on the page's own H2 and booking card edge.
   The bottom padding is ours, because the section is the last thing on the
   page (the property template has no footer):
     - 96px on desktop clears the #es-help chat bubble (64px, 24px from the
       bottom) where it overlaps the last card between 1025 and about 1380px;
     - 120px below 960px clears the fixed booking bar (80px tall, z-index
       999999999, shown below 960px) with 40px to spare. */
.esrv,
section.esrv {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 96px;
  box-sizing: border-box;
  background: transparent !important;
  border: 0;
  font-family: var(--esrv-sans);
  text-align: left;
  white-space: normal;
}
@media (max-width: 959px) {
  .esrv,
  section.esrv {
    padding-bottom: 120px;
  }
}

/* Reveal. A CSS animation, so no delay-JS layer can hold it back. The end
   state is transform:none, so the section never becomes a containing block
   for the badges, the heart or the slideshow controls. */
.esrv.is-ready {
  animation: esrvFadeUp 0.55s ease both;
}
@keyframes esrvFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .esrv.is-ready { animation: none; }
}

/* ---------------------------------------------------------------------- */
/*  Heading (the property page's own pattern)                              */
/* ---------------------------------------------------------------------- */

/* Every section of the template opens with an eyebrow and an H2, and they are
   separated by a divider widget: 1px #EAE7E0 with 25px of padding and a 30px
   gap on each side, 55px from the rule to the next eyebrow. On desktop the
   template gives this row 50px above (be6ce3b's bottom padding), so the rule
   sits 50px under the form and 55px over our eyebrow, the same rhythm as
   every divider above it.
   At 1024px and below that padding is 140px, there to keep the form clear of
   the booking bar when this section is hidden. A rule 140px under the form
   and 55px over the eyebrow would read as belonging to nothing, so it is
   dropped there: 140px of air is already close to the page's 111px between
   sections. */
.esrv .esrv__head {
  margin: 0 0 20px;
  padding: 55px 0 0;
  border-top: 1px solid var(--esrv-rule);
  color: var(--esrv-plum);
}
@media (max-width: 1024px) {
  .esrv .esrv__head {
    padding-top: 0;
    border-top: 0;
  }
}

/* Eyebrow: h6.elementor-heading-title on the page, a paragraph here (see the
   JS). Montserrat 700 12px / 25px, 2px tracking, uppercase, #FE9F29, the
   same at every width. The H2 starts 20px below the eyebrow's top, so the
   25px line overlaps it by 5px, exactly as measured. Pinned with !important:
   inside uk-scope a paragraph gets margin 0 0 20px, and the kit restyles h6
   and body text. */
.esrv .esrv__eyebrow {
  font-family: var(--esrv-sans) !important;
  font-size: 12px !important;
  line-height: 25px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--esrv-eyebrow) !important;
  margin: 0 0 -5px !important;
  padding: 0 !important;
}

/* H2: Fraunces 700, upright, #622D7F, 28px / 50px, and 36px / 45px at 767px
   and below (bigger on phones, as on the page). The kit's own h2 rule is Dela
   Gothic One 45px and uk-scope has its own h2 step, so every typographic
   property is pinned. It wraps like the page's H2s do ("What Makes This
   Place Special" is two lines at 390); nothing here is drawn around the text,
   so a second line costs nothing. */
.esrv .esrv__title {
  font-family: var(--esrv-serif) !important;
  font-size: 28px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--esrv-plum) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .esrv .esrv__title {
    font-size: 36px !important;
    line-height: 45px !important;
  }
}

/* Optional line under the H2, in the page's description style: Montserrat
   16px / 24px, #5A5A6E. Off by default. */
.esrv .esrv__subtitle {
  font-family: var(--esrv-sans) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--esrv-body) !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  max-width: 62ch;
}

/* ---------------------------------------------------------------------- */
/*  Grid                                                                   */
/* ---------------------------------------------------------------------- */

/* Our own class. Never .hfse-properties: explorer.css gives that class a -8px
   track margin and child padding, and the /search/ snippet adds overflow
   hidden to it.

   Card widths, against the Explorer's own 373.5px (1440, map open), 383.5px
   (map closed) and 365px (phone), at the container's content width
   (viewport minus 60px, capped at 1260px, minus 40px on phones):

     1025px and up   3 across  305px at 1025, 364px at 1200, 404px at 1440+
     768 to 1024px   2 across  342px at 768, 470px at 1024
     767px and down  rail      the width minus 28px, 340px at most: 322px
                               at 390, 292px at 360, the next card peeking

   Why 2 across and not a rail on tablets: three across would be 220px at
   768px, which wraps the "Guests · Bedrooms · Baths" line (about 247px of
   text plus 40px of inset) and breaks the fixed 409px card rhythm; a rail on
   a 1024px iPad with a trackpad hides most of the row with no control to
   reach it. Two across keeps the Explorer's card width almost exactly. Row
   height is the same everywhere, because the photo is a fixed 230px and the
   text block below it is fixed too: 409px per card with a two line title. */
.esrv .esrv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esrv-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent !important;
}
@media (max-width: 1024px) {
  .esrv .esrv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: one horizontal scroll-snap rail, so a long history is not a tall
   stack at the end of the page. It scrolls itself (overflow-x: auto): body
   carries overflow-x: clip on this theme, so a rail that simply overflowed
   would be cut off with no page scrollbar to give it away.

   The rail bleeds exactly --esrv-bleed past the section on each side, so
   cards run to the screen edge while scrolling instead of being clipped
   20px inside it, and scroll-padding-inline matches the padding so mandatory
   snap parks the first card on the heading's left edge. 4px on top leaves
   room for the 2px hover lift. 24px below holds the thin scrollbar and the
   visible part of the card shadow: it is 2% plum with a 40px blur, so what
   the rail's clip edge cuts beyond 24px is under 1% and cannot be seen on
   #F7F6F2. The negative margins give the space back, so the layout does not
   move. */
@media (max-width: 767px) {
  .esrv .esrv__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 4px var(--esrv-bleed) 24px;
    margin: -4px calc(var(--esrv-bleed) * -1) -24px;
    scroll-padding-inline: var(--esrv-bleed);
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 45, 127, 0.25) transparent;
  }
  /* 28px narrower than the rail, so 32px of the next card always shows
     (28 + the 20px bleed - the 16px gap) and tells a thumb the row scrolls.
     At 360px that is a 292px card, which keeps "16 Guests · 5 Bedrooms ·
     3 Baths" on one line; 85% (272px) wrapped it on every card and made the
     whole rail 20px taller. The cap stops one wide card on a large phone. */
  .esrv .esrv__grid > .hfse-property-container {
    flex: 0 0 calc(100% - 28px);
    max-width: 340px;
    scroll-snap-align: start;
  }
  /* White Villas fix 3. uikit.css sets touch-action: pan-y on
     .hk-slideshow-items, which stops the browser handing a horizontal pan that
     starts on the photo to the rail: the slide moved and the rail did not.
     The JS pairs this with draggable:false at the same width. */
  .esrv .esrv__grid .hk-slideshow-items {
    touch-action: pan-x pan-y;
  }
}
.esrv .esrv__grid::-webkit-scrollbar {
  height: 6px;
}
.esrv .esrv__grid::-webkit-scrollbar-track {
  background: transparent;
}
.esrv .esrv__grid::-webkit-scrollbar-thumb {
  background-color: rgba(98, 45, 127, 0.25);
  border: 0;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------- */
/*  Card box                                                               */
/* ---------------------------------------------------------------------- */

/* The visible card is the CONTAINER, not the link (measured on /search/):
   20px radius, white, 1px #e9e6e0, a 2% plum shadow, 20px of padding at the
   bottom only so the photo sits flush with the top edge (the drawer's heart
   is placed 12px from that corner), overflow hidden to round the photo.
   width, min-width and margin are !important only so the /search/ snippet's
   global !important widths could not take the grid over if the section were
   ever placed there. */
.esrv .esrv__grid > .property-item.hfse-property-container {
  position: relative;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
  border: 1px solid var(--esrv-hair);
  border-radius: 20px;
  background: #fff;
  box-shadow: 12px 12px 40px 2px rgba(98, 45, 127, 0.02);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.5s ease, transform 0.3s ease-out;
}
/* The 2px lift the live card has, moved from the link to the container so
   the heart rises with it. */
.esrv .esrv__grid > .property-item.hfse-property-container:hover {
  transform: translateY(-2px);
}

/* The link fills the container as a flex column (the skin reorders its
   leaves). UIkit paints .hk-card-default white with a shadow and a bigger
   shadow on hover, at up to (0,4,0), so the chrome is removed with
   !important as the live snippet does. No transform and no z-index: the
   heart is a sibling after this link at z-index 2 and must stay on top. */
.esrv .hfse-property-container .hfse-property-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0;
  transform: none !important;
  will-change: auto;
}
/* Keyboard focus. The container's overflow would clip an outline drawn
   outside the link, so it is drawn inside. */
.esrv .hfse-property-container .hfse-property-card:focus-visible {
  outline: 2px solid var(--esrv-plum);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------- */
/*  Card skin: order                                                       */
/* ---------------------------------------------------------------------- */

/* The live skin dissolves the body and meta wrappers so every leaf becomes a
   flex item of the link, then orders them:
     photo 1, city 2, title 3, guests line 4, price 5. */
.esrv .hfse-property-container .hfse-property-body,
.esrv .hfse-property-container .hfse-property-meta {
  display: contents !important;
}
.esrv .hfse-property-container .hfse-property-media           { order: 1 !important; }
.esrv .hfse-property-container .hfse-property-subtitle        { order: 2 !important; }
.esrv .hfse-property-container .hfse-property-body > .hk-flex { order: 3 !important; }
.esrv .hfse-property-container .hfse-property-meta-secondary  { order: 4 !important; }
.esrv .hfse-property-container .hfse-property-price-container { order: 5 !important; }

/* ---------------------------------------------------------------------- */
/*  Card skin: photo                                                       */
/* ---------------------------------------------------------------------- */

/* The slideshow is asked for ratio 1:1 (the Explorer's setting) and UIkit
   writes aspect-ratio 1 / 1 inline on the list; the skin overrides it to a
   fixed 230px, which is the height every live card measures. */
.esrv .hfse-property-container .hk-card-media-top,
.esrv .hfse-property-container .hfse-property-media {
  margin: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.esrv .hfse-property-container .hk-slideshow-items {
  aspect-ratio: auto !important;
  height: 230px !important;
}
.esrv .hfse-property-container .hfse-property-slideshow-item {
  height: 230px !important;
}
.esrv .hfse-property-container .hfse-property-slideshow-image {
  height: 230px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: relative !important;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.esrv .hfse-property-container:hover .hfse-property-slideshow-image {
  transform: scale(1.06);
}

/* A home published with no picture at all (115674 today). The Explorer
   prints no media block for it; this block keeps the card at the height of
   its row and the heart on the photo corner. Neutral on purpose: it is not
   a photo and should not look like one. */
.esrv .hfse-property-container .esrv__noimg {
  display: block;
  width: 100%;
  height: 230px;
  background: #EFECE6;
}

/* Dots: 7px, white, 40% when inactive. The active one keeps UIkit's own
   light theme value (90% white), exactly as on /search/. */
.esrv .hfse-property-container .hk-slideshow-nav.hk-dotnav li a {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.esrv .hfse-property-container .hk-slideshow-nav.hk-dotnav li:not(.hk-active) a {
  border: none;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Group labels, top left over the photo: pills in Montserrat 800 9.6px, one
   colour per slug. Only the seven slugs that carry show_label today have a
   colour; any other keeps explorer.css's dark pill, as on /search/. */
.esrv .hfse-property-container .hfse-property-labels {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  width: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.esrv .hfse-property-container .hfse-property-group {
  display: inline-flex;
  align-self: flex-start;
  justify-content: center;
  width: fit-content;
  margin: 0 5px 5px 0;
  padding: 4px 10px;
  border: 0.5px solid rgba(98, 45, 127, 0.28);
  border-radius: 999px;
  font-family: var(--esrv-sans);
  font-size: 0.6rem;
  font-weight: 800 !important;
  line-height: 1.5;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 0 20px -13px rgba(0, 0, 0, 0.8) !important;
}
.esrv .hfse-property-container .hfse-property-group-karaoke-stage,
.esrv .hfse-property-container .hfse-property-group-bunk-bed-w-slide { background-color: #31b494 !important; }
.esrv .hfse-property-container .hfse-property-group-speakeasy        { background-color: #1b93ed !important; }
.esrv .hfse-property-container .hfse-property-group-basketball-court { background-color: #fe9f29 !important; }
.esrv .hfse-property-container .hfse-property-group-pickleball-court { background-color: #e14247 !important; }
.esrv .hfse-property-container .hfse-property-group-volleyball-court,
.esrv .hfse-property-container .hfse-property-group-golf-simulator   { background-color: #622d7f !important; }

/* ---------------------------------------------------------------------- */
/*  Card skin: text                                                        */
/* ---------------------------------------------------------------------- */

/* City, above the title: Montserrat 500 10px / 15px, 1.2px tracking,
   uppercase, #181818, 16px under the photo and 5px over the title. The
   20px inset lived on the dissolved body, so each leaf carries its own. */
.esrv .hfse-property-container .hfse-property-subtitle {
  display: block;
  font-family: var(--esrv-sans) !important;
  font-size: 10px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--esrv-ink) !important;
  margin: 16px 0 5px !important;
  padding: 0 20px !important;
}

/* Title row and title: Dela Gothic One 1.025rem (16.4px) / 1.4, uppercase,
   #622d7f, clamped to two lines. It has to beat .elementor-kit-7 h3 (Fraunces
   35px / 40px) and .uk-scope .hk-h5 (16px, line-height 1.4). Weight 500 is
   what the live card asks for; only the 400 face of Dela exists, and that is
   what renders on both pages. */
.esrv .hfse-property-container .hfse-property-body > .hk-flex {
  margin: 0 !important;
  padding: 0 20px !important;
}
.esrv .hfse-property-container .hfse-property-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  min-width: 0;
  font-family: var(--esrv-display) !important;
  font-size: 1.025rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  color: var(--esrv-plum) !important;
  margin: 1px 0 6px !important;
  padding: 0 !important;
}

/* Guests line: "14 Guests · 5 Bedrooms · 5 Baths" in Montserrat 400 .85rem
   (13.6px) / 1.5, #181818, with 3px plum dots. The words come from the
   skin, the numbers from the card. The sprite icons that explorer.css and
   HomeRunner's inline block put on these three cells are switched off, and
   so is the term row above them (empty on this site anyway). */
.esrv .hfse-property-container .hfse-property-meta-primary {
  display: none !important;
}
.esrv .hfse-property-container .hfse-property-meta-secondary {
  position: static;
  display: block !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: none !important;
  font-family: var(--esrv-sans) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  font-style: normal;
  color: var(--esrv-ink);
}
.esrv .hfse-property-container .hfse-property-meta-secondary > div {
  display: inline !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--esrv-ink);
}
.esrv .hfse-property-container .hfse-property-meta-secondary svg {
  display: none !important;
}
.esrv .hfse-property-container .hfse-property-guests::after    { content: " Guests";   white-space: pre; }
.esrv .hfse-property-container .hfse-property-bedrooms::after  { content: " Bedrooms"; white-space: pre; }
.esrv .hfse-property-container .hfse-property-bathrooms::after { content: " Baths";    white-space: pre; }
.esrv .hfse-property-container .hfse-property-bedrooms::before,
.esrv .hfse-property-container .hfse-property-bathrooms::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -1px;
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: var(--esrv-plum);
  vertical-align: middle;
}

/* Price: a hairline, then "Enter dates for pricing" in Montserrat 500 14px,
   #e88d1a. The amount the card carries ("$617 avg/night") is shrunk to
   font-size 0, which is what the live site does with it on purpose. Keep it
   hidden: showing it would contradict the site. !important on the box
   because uikit's .hk-margin-small-top carries margin-top 10px !important. */
.esrv .hfse-property-container .hfse-property-price-container {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 14px 20px 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--esrv-hair) !important;
  text-align: left !important;
  font-family: var(--esrv-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #141414;
  background: transparent;
}
.esrv .hfse-property-container .hfse-property-price {
  font-family: var(--esrv-sans);
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.5;
  color: var(--esrv-price);
}
.esrv .hfse-property-container .hfse-property-price strong {
  font-size: 0 !important;
}
.esrv .hfse-property-container .hfse-property-price::before {
  content: "Enter dates for pricing";
  font-family: var(--esrv-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--esrv-price);
}

/* ---------------------------------------------------------------------- */
/*  Foot link (optional, off by default)                                   */
/* ---------------------------------------------------------------------- */

/* A plain link styled as the site's outline pill ("VIEW ALL COLLECTIONS":
   Montserrat 800 12.8px uppercase, 10px 20px, 1px plum border, 35px tall).
   Every colour and the decoration are pinned: the kit paints links 18px
   #FE9F29 going #1B93ED, and inside uk-scope UIkit paints them #1e87f0 with
   an underline on hover. */
.esrv .esrv__foot {
  display: flex;
  margin: 28px 0 0;
}
.esrv .esrv__more {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid var(--esrv-plum);
  border-radius: 999px;
  background: transparent;
  font-family: var(--esrv-sans) !important;
  font-size: 12.8px !important;
  line-height: 13px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  color: var(--esrv-plum) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.esrv .esrv__more:hover,
.esrv .esrv__more:focus-visible {
  background: var(--esrv-plum);
  color: #fff !important;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------- */
/*  Static photo fallback (UIkit missing: first photo only)                */
/* ---------------------------------------------------------------------- */

/* The script marks the slideshow .is-static after about four seconds without
   hkUIkit and moves the first photo's data-src onto src. uikit.css still
   hides every slide without .hk-active, so the first one is shown here; the
   230px box comes from the skin above. */
.esrv .is-static .hk-slideshow-items {
  position: relative;
  overflow: hidden;
}
.esrv .is-static .hk-slideshow-items > li {
  position: absolute;
  inset: 0;
  display: none !important;
}
.esrv .is-static .hk-slideshow-items > li:first-child {
  display: block !important;
}
.esrv .is-static .hfse-property-slideshow-prev-btn,
.esrv .is-static .hfse-property-slideshow-next-btn,
.esrv .is-static .hfse-property-slideshow-dotnav {
  display: none !important;
}