/* Stays archive — split-view sections with slide-in map. */

.ww-stays-shell,
.ww-stays-map-toggle {
  --ww-stays-bg: var(--color-charcoal-brown, #283022);
  --ww-stays-ink: var(--color-cream, #f0efe8);
  --ww-stays-accent: #e9dbc6;
  --ww-stays-ink-dim: rgba(240, 239, 232, 0.62);
  /* Derived so the keylines follow the accent instead of being pinned to
     the old cream. */
  --ww-stays-keyline: color-mix(in srgb, var(--ww-stays-accent) 28%, transparent);
  --ww-stays-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ww-stays-dur: 700ms;
}

.ww-stays-shell {
  display: flex;
  width: 100%;
  background: var(--ww-stays-bg);
  color: var(--ww-stays-ink);
  overflow-x: clip;
}

.ww-stays {
  width: 100%;
  min-width: 0;
  transition: width var(--ww-stays-dur) var(--ww-stays-ease);
}

.ww-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- hero ---------- */
.ww-stays-hero {
  --ww-page-hero-ink: var(--ww-stays-ink);
  --ww-page-hero-ink-dim: var(--ww-stays-ink-dim);
  --ww-page-hero-keyline: var(--ww-stays-keyline);
  background-image: url("/wp-content/uploads/2026/07/wardle-sq-n8-trevor-mein-web-scaled.jpg");
  background-size: cover;
  background-position: center;
  transition: height var(--ww-stays-dur) var(--ww-stays-ease),
    padding var(--ww-stays-dur) var(--ww-stays-ease);
}

/* Takes its size, family and weight from the global h1. Only the things
   this page owns are set here; the compact map-open size below overrides
   the size when the map opens. */
.ww-stays .ww-stays-hero__title {
  transition: font-size var(--ww-stays-dur) var(--ww-stays-ease);
}

.ww-stays-hero__foot {
  transition: opacity 300ms var(--ww-stays-ease);
}

/* ---------- property sections ---------- */
/* Explicit heights on both states so the shrink/grow is one clean
   height animation (auto <-> fixed does not transition). */
.ww-stay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Pin the row to the section height. Left auto, the row is sized by the
     text column, so opening a tall accordion panel grew the row and the
     media column stretched with it - and because the image is inset by
     percentages, it visibly resized and drifted before being clipped.
     minmax(0, 1fr) resolves against the container's own height, so it still
     follows the map open/close height animation. */
  grid-template-rows: minmax(0, 1fr);
  height: max(74vh, 44rem);
  border-bottom: 1px solid var(--ww-stays-keyline);
  overflow: hidden;
  transition: height var(--ww-stays-dur) var(--ww-stays-ease);
}

.ww-stay:nth-of-type(even) .ww-stay__media {
  order: -1;
}

.ww-stay__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.2vw 3.4vw clamp(2.75rem, 4vw, 4rem);
  min-width: 0;
  /* min-height lets the column shrink under its content instead of pushing
     the row open; overflow keeps any excess inside this column. */
  min-height: 0;
  overflow: hidden;
}

.ww-stay__kicker {
  font-family: var(--font-sans);
  font-size: var(--lbl);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ww-stays-ink-dim);
  margin: 0;
}

.ww-stays .ww-stay__title {
  color: var(--ww-stays-ink);
  margin: 1rem 0 1.2rem;
}

.ww-stays .ww-stay__title a {
  color: var(--ww-stays-ink);
}

.ww-stay__blurb {
  font-family: var(--font-sans);
  font-size: var(--txt);
  line-height: 1.7;
  color: var(--ww-stays-ink-dim);
  max-width: 46ch;
  margin: 0;
}

.ww-stay__blurb > * {
  margin: 0;
}

.ww-stay__blurb > * + * {
  margin-top: 0.75em;
}

/* Keyline accordion lives in the section's negative space, so opening it
   never changes the fixed row height. */
.ww-stay__accordion {
  margin-top: 1.6rem;
  max-width: 46ch;
  border-top: 1px solid var(--ww-stays-keyline);
}

.ww-stay__acc {
  border-bottom: 1px solid var(--ww-stays-keyline);
}

.ww-stay__acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.1rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--lbl);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ww-stays-ink);
}

.ww-stay__acc summary::-webkit-details-marker {
  display: none;
}

.ww-stay__acc summary::after {
  content: "( + )";
  font-weight: 300;
  letter-spacing: 0;
  color: var(--ww-stays-ink-dim);
  transition: color 200ms var(--ww-stays-ease);
}

.ww-stay__acc.is-open summary::after,
body:not(.ww-acc-js) .ww-stay__acc[open] summary::after {
  content: "( \2212 )";
  color: var(--ww-stays-ink);
  animation: ww-acc-indicator 320ms var(--ww-stays-ease);
}

@keyframes ww-acc-indicator {
  from {
    transform: rotate(90deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.ww-stay__acc summary:hover::after {
  color: var(--ww-stays-ink);
}

.ww-stay__acc ul {
  list-style: none;
  margin: 0;
  padding: 0.1rem 0.1rem 0.85rem;
  max-height: 9.5rem;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: var(--txt-sm);
  line-height: 1.75;
  color: var(--ww-stays-ink-dim);
}

/* Sugar: the body glides open on animatable grid rows, and the lines
   drift in one after another. Scoped to the JS hook so no-JS falls
   back to plain native details. */
body.ww-acc-js .ww-stay__acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ww-stays-ease);
}

body.ww-acc-js .ww-stay__acc-body > ul {
  min-height: 0;
  overflow: hidden;
}

body.ww-acc-js .ww-stay__acc.is-open .ww-stay__acc-body {
  grid-template-rows: 1fr;
}

body.ww-acc-js .ww-stay__acc.is-open .ww-stay__acc-body > ul {
  overflow-y: auto;
}

body.ww-acc-js .ww-stay__acc li {
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity 320ms ease, transform 320ms var(--ww-stays-ease);
}

body.ww-acc-js .ww-stay__acc.is-open li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 90ms);
}

/* With GSAP present the body animates on height instead of grid rows, and
   the lines are staggered from the timeline rather than by --i delays.
   Same specificity as the rules above, so these must stay after them.
   grid-template-rows only interpolates between 0fr and 1fr, which cannot
   ease properly and jumps if a panel is reopened mid-collapse. */
body.ww-acc-gsap .ww-stay__acc-body {
  display: block;
  grid-template-rows: none;
  overflow: hidden;
  transition: none;
}

body.ww-acc-gsap .ww-stay__acc-body > ul {
  overflow-y: auto;
}

body.ww-acc-gsap .ww-stay__acc li,
body.ww-acc-gsap .ww-stay__acc.is-open li {
  transition: none;
  transition-delay: 0s;
}

.ww-stay__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--txt-sm);
  letter-spacing: 0.06em;
  color: var(--ww-stays-ink-dim);
}

.ww-stays .ww-stay__price {
  color: var(--ww-stays-ink);
}

.ww-stay__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 3.35rem;
  margin-top: 1.65rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--color-tobacco);
  background: var(--color-tobacco);
  color: var(--ww-stays-ink);
  font-family: var(--font-sans);
  font-size: var(--lbl);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  line-height: var(--leading-label);
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.ww-stay__cta:hover,
.ww-stay__cta:focus-visible {
  border-color: var(--ww-stays-ink);
  background: var(--ww-stays-ink);
  color: var(--ww-stays-bg);
  text-decoration: none;
}

.ww-stay__media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 340px;
  transition: min-height var(--ww-stays-dur) var(--ww-stays-ease);
}

.ww-stay__media img {
  position: absolute;
  inset: 4.5%;
  width: 91%;
  height: 91%;
  object-fit: cover;
}

/* ---------- tail ---------- */
.ww-stays-tail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 4vw;
  font-family: var(--font-sans);
  font-size: var(--txt-sm);
  letter-spacing: 0.08em;
  color: var(--ww-stays-ink-dim);
}

.ww-stays-tail p {
  margin: 0;
}

.ww-stays-tail a {
  color: var(--ww-stays-ink);
}

.ww-stays-empty {
  padding: 18vh 4vw;
  text-align: center;
}

/* ---------- map panel ---------- */
.ww-stays-map {
  width: 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--ww-stays-bg);
  transition: width var(--ww-stays-dur) var(--ww-stays-ease);
}

.ww-stays-map .wwt-map-stage,
.ww-stays-map .wwt-map-shell,
.ww-stays-map #map-container {
  position: absolute;
  inset: 0;
  width: 58vw;
  left: auto;
  right: 0;
  height: 100%;
}

/* map.js appends its own List/Map experience toggle and location card
   into the stage; the archive's card list already covers both. */
.ww-stays-map .wwt-experience-toggle,
.ww-stays-map #wwt-location-panel {
  display: none;
}

/* ---------- loading state: centred, bigger island, dark backdrop ----
   The stock loader offsets the island by half the old browse-panel
   width and sits on cream; here the panel is its own column, so the
   island centres, scales closer to the booted map, and the backdrop
   matches the page green so the slide-in reads as one surface. */
.ww-stays-map .wwt-map-loading {
  background: var(--ww-stays-bg);
}

.ww-stays-map .wwt-map-loading::before {
  display: none;
}

.ww-stays-map .wwt-map-loading__island {
  transform: none;
  width: min(56%, 30rem);
  background: rgba(240, 239, 232, 0.16);
}

.ww-stays-map .wwt-map-loading__island::after {
  background: linear-gradient(100deg, transparent 0%, rgba(240, 239, 232, 0.38) 46%, transparent 76%);
}

/* ---------- markers: active pin instead of the sleeps pill ----------
   (.ww-stays-map prefix outranks map.css, which loads after this file) */

/* The archive never shows the icon/number inside a marker — the list
   and hover card carry the info. !important outranks map.css's
   hover/active reveal rules, which load after this file. */
.ww-stays-map .wwt-map-shell .wwt-marker .wwt-marker__icon,
.ww-stays-map .wwt-map-shell .wwt-marker .wwt-marker__text {
  display: none !important;
}

/* Only animate what can't squish: color, shadow, and transform between
   like shapes. Width/padding/gap/border-radius swap instantly so the
   dot never smears into the pin mid-morph. */
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark) {
  transition: background-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

/* The marker button is inline-flex, so the wrapper picked up ~4px of baseline
   leading and its box (32x36) no longer centred on the button. MapLibre centres
   the wrapper on the coordinate, so that leading pushed every pin off its point.
   Zeroing the line box makes wrapper centre == coordinate == pin reference. */
.ww-stays-map .wwt-map-shell .wwt-marker-wrapper {
  line-height: 0;
}

/* The point the pin stands on. Sits at the wrapper's centre — the exact
   coordinate — and stays put while the pin lifts off it. Same circle language
   as the resting marker: dark fill, cream ring so it holds up over imagery. */
.ww-stays-map .wwt-map-shell .wwt-marker-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 0.35rem;
  margin: -0.175rem 0 0 -0.175rem;
  border-radius: 50%;
  background: #283022;
  box-shadow: 0 0 0 1.5px #fffef5;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  /* Behind the pin, so the tip reads as planted in it rather than beside it.
     The wrapper's will-change:transform keeps this inside its stacking
     context, so it can't slip behind the map canvas. */
  z-index: -1;
}

/* Only while the pin is up — at rest the marker dot already marks the spot. */
.ww-stays-map .wwt-map-shell .wwt-marker-wrapper:has(.wwt-marker.is-active)::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 120ms;
}

/* Hover keeps the dot, just larger — the hover card carries the info. */
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-hover:not(.is-active),
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark):hover:not(.is-active),
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark):focus-visible:not(.is-active) {
  width: 0.86rem;
  height: 0.86rem;
  min-width: 0.86rem;
  min-height: 0.86rem;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border-color: #fffef5;
  background: #283022;
  transform: scale(1.35);
}

/* Active: a classic pin, no number, dropping in rather than morphing. */
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-active,
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-active.is-hover,
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-active:hover,
.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-active:focus-visible {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  gap: 0;
  border: 2px solid #fffef5;
  border-radius: 50% 50% 50% 0;
  background: var(--color-copper, #b2742e);
  box-shadow: 0 8px 18px rgba(24, 15, 7, 0.24);
  /* The tip is the un-rounded corner, which after rotate(-45deg) sits
     (height/2)*sqrt(2) below the pin's centre — 70.71% of its height. Lifting
     by exactly that lands the tip on the coordinate instead of 5px past it. */
  transform: translateY(-70.71%) rotate(-45deg);
  transition: none;
  animation: ww-pin-drop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ww-pin-drop {
  from {
    transform: translateY(-115%) rotate(-45deg);
    opacity: 0;
  }
  to {
    transform: translateY(-70.71%) rotate(-45deg);
    opacity: 1;
  }
}

.ww-stays-map .wwt-map-shell .wwt-marker:not(.is-landmark).is-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  background: #fffef5;
}

/* ---------- open state (desktop split view only — on mobile the map
   is an overlay sheet and the list underneath stays untouched, so the
   pre-scroll geometry behind the sheet holds) ---------- */
@media (min-width: 821px) {
body.ww-map-open .ww-stays {
  width: 42%;
}

body.ww-map-open .ww-stays-map {
  width: 58%;
}

/* Small hero: the full hero compresses rather than vanishing, keeping
   the top of the list anchored and giving the cards a header. */
body.ww-map-open .ww-stays-hero {
  height: calc(var(--wwt-fixed-menu-offset, 66px) + 6.2rem);
  padding: calc(var(--wwt-fixed-menu-offset, 66px) + 1.1rem) 1.8rem 1.1rem;
}

body.ww-map-open .ww-stays-hero__eyebrow {
  margin: 0 0 0.55rem;
}

/* Closed, the hero h1 takes the global --ds-1 like every other page. Open,
   the list is only 42% of the viewport, so the title has to squish to fit
   the narrower column. vw tracks that column directly (42% of vw less the
   1.8rem gutters), which keeps this fluid instead of the old flat 1.55rem —
   and the font-size transition on .ww-stays-hero__title animates the
   compression as the map expands. */
body.ww-map-open .ww-stays .ww-stays-hero__title,
body.ww-map-open .ww-stays-hero__title {
  font-size: clamp(1.45rem, 3vw, 3rem);
  white-space: nowrap;
}

body.ww-map-open .ww-stays-hero__foot {
  opacity: 0;
}

body.ww-map-open .ww-stays-tail {
  display: none;
}

/* Cards: ~2.2 visible per viewport, scroll-synced to the map pins. */
body.ww-map-open .ww-stay {
  height: max(45vh, 19rem);
  grid-template-columns: 1fr 45%;
  cursor: pointer;
  transition: height var(--ww-stays-dur) var(--ww-stays-ease),
    background-color 350ms var(--ww-stays-ease),
    box-shadow 350ms var(--ww-stays-ease);
}

/* Mirror the alternation in the card strip so each image stays on its
   side through the open/close transition. */
body.ww-map-open .ww-stay:nth-of-type(even) {
  grid-template-columns: 45% 1fr;
}

body.ww-map-open .ww-stay.is-active {
  background: rgba(240, 239, 232, 0.05);
  box-shadow: inset 3px 0 0 var(--color-tobacco, #966022);
}

body.ww-map-open .ww-stay__text {
  padding: 1.6rem 1.8rem;
  justify-content: center;
  gap: 0.4rem;
}

body.ww-map-open .ww-stay__kicker {
  font-size: var(--lbl-sm);
  letter-spacing: var(--track-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same deal for the card titles: global h2 when the list is full width,
   squishing on the same vw curve once the cards are in the 42% column. */
body.ww-map-open .ww-stay__title {
  font-size: clamp(1.25rem, 1.9vw, 2.1rem);
  margin: 0.5rem 0 0.6rem;
}

body.ww-map-open .ww-stay__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--txt-sm);
  line-height: var(--leading-body);
  max-width: none;
}

body.ww-map-open .ww-stay__cta,
body.ww-map-open .ww-stay__accordion {
  display: none;
}

/* Same ✦ the packages includes list uses, as a separator rather than a
   marker: on the first item there is nothing to separate. */
.ww-stay__meta li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ww-stay__meta li + li::before {
  content: "\2726";
  color: var(--ww-stays-accent);
  font-size: 8px;
  line-height: 1;
  opacity: 0.75;
}

body.ww-map-open .ww-stay__meta {
  margin-top: 1rem;
  font-size: var(--txt-sm);
  flex-wrap: wrap;
  gap: 0.45rem 1.4rem;
}

/* Price takes its own line in the card strip. */
body.ww-map-open .ww-stay__price {
  flex-basis: 100%;
}

body.ww-map-open .ww-stay__media {
  min-height: 0;
}

body.ww-map-open .ww-stay__media img {
  inset: 7%;
  width: 86%;
  height: 86%;
}
}

/* ---------- toggle ---------- */
.ww-stays-map-toggle {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 60;
  background: var(--ww-stays-ink);
  color: var(--ww-stays-bg);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--lbl-lg);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 300ms var(--ww-stays-ease);
}

.ww-stays-map-toggle:hover {
  transform: translateY(-2px);
}

.ww-stays-map-toggle__close {
  display: none;
}

body.ww-map-open .ww-stays-map-toggle__open {
  display: none;
}

body.ww-map-open .ww-stays-map-toggle__close {
  display: inline;
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  .ww-stay {
    grid-template-columns: 1fr;
    /* Stacked and auto-height here, so the pinned row track from the desktop
       rule must be released - text and media each take their own row. */
    grid-template-rows: auto;
    height: auto;
  }

  .ww-stay + .ww-stay {
    margin-top: clamp(1rem, 4vw, 1.5rem);
  }

  .ww-stay__text {
    padding: 1.45rem 4.5% 2rem;
  }

  /* Image on top for every stay on mobile. */
  .ww-stay .ww-stay__media {
    order: -1;
  }

  .ww-stay__media {
    min-height: 46vh;
  }

  .ww-stay__accordion {
    display: none;
  }

  /* The map rises over the list as a fixed sheet from the bottom —
     transforms don't reflow, so the content underneath never squishes,
     and the preview card at its foot leads the same motion. */
  .ww-stays-map {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 50;
    transform: translateY(100%);
    transition: transform var(--ww-stays-dur) var(--ww-stays-ease);
  }

  body.ww-map-open .ww-stays-map {
    width: 100%;
    transform: translateY(0);
  }

  body.ww-map-open .ww-stays {
    width: 100%;
  }

  .ww-stays-map .wwt-map-stage,
  .ww-stays-map .wwt-map-shell,
  .ww-stays-map #map-container {
    width: 100vw;
  }
}

/* ---------- mobile pin preview card ---------- */
.ww-stays-map-preview {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 5.2rem;
  z-index: 40;
  display: none;
  grid-template-columns: 96px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  background: var(--color-charcoal-brown, #283022);
  color: var(--color-cream, #f0efe8);
  cursor: pointer;
  transform: translateY(calc(100% + 6.5rem));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ww-stays-map-preview.is-visible {
  transform: none;
}

.ww-stays-map-preview img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.ww-stays-map-preview__kicker {
  font-family: var(--font-sans);
  font-size: var(--lbl-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(240, 239, 232, 0.62);
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Map chrome, not page type: a compact strip beside a 96px thumbnail. The
   global h3 would dwarf it, so it stays on its own small fluid step. */
.ww-stays-map-preview__title {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  margin: 0 0 0.3rem;
}

.ww-stays-map-preview__meta {
  font-family: var(--font-sans);
  font-size: var(--txt-sm);
  color: rgba(240, 239, 232, 0.62);
  margin: 0;
}

.ww-stays-map-preview__hint {
  font-family: var(--font-sans);
  font-size: var(--lbl);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-cream, #f0efe8);
  margin: 0.45rem 0 0;
}

.ww-stays-map-preview__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: rgba(240, 239, 232, 0.62);
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem;
  cursor: pointer;
}

@media (max-width: 820px) {
  .ww-stays-map-preview {
    display: grid;
  }
}