/* base tokens */
/* =====================================================================
 * tokens.css — global CSS custom properties (design tokens).
 * =====================================================================
 *
 * These are the variables every styled component reads via `var(...)`.
 * Defaults here are NEUTRAL — every hotel's specific palette comes
 * from its brand record, applied at runtime when the brand store
 * resolves.
 *
 * Future agents:
 *   · Add a new token here only if it's used across multiple
 *     components. Single-component values stay scoped to that
 *     component's <style scoped>.
 *   · Token names follow `--site-<group>-<role>` (e.g.
 *     `--site-color-fg`, `--site-radius-md`). Stable so brand-
 *     application logic can map onto them deterministically.
 *   · The brand store doesn't yet write into these — that wiring
 *     gets added when the first styled section lands.
 */
:root {
  /* The token NAMES match what services/theme.js writes. Defaults
     here are neutral — every hotel's actual palette comes from its
     brand record at runtime. */
  --site-color-bg:        #fbf9f5;
  --site-color-bg-rgb:    251, 249, 245;  /* used for translucent overlays */
  --site-color-fg:        #1a1815;
  --site-color-fg-muted:  #6b665e;
  --site-color-accent:    #1a1815;
  --site-color-accent-fg: #fbf9f5;
  --site-color-border:    #e3ddd2;

  --site-font-display: system-ui, -apple-system, sans-serif;
  --site-font-body:    system-ui, -apple-system, sans-serif;

  --site-radius-sm:    2px;
  --site-radius-md:    6px;
  --site-radius-lg:    14px;

  /* FOOTER tokens — the surface a GROUP's shared footer is drawn with
     (settings `shared_components`). One footer is written once and linked to
     every site of a group, so it may read nothing a theme invents for itself
     (`--hdt-*`, `--bab-*`, literal hex) — only these. Each falls back to the
     site's general palette and type, so a theme that sets none of them still
     gets a footer in its own colours; a theme that wants its footer ground or
     link colour exact sets the token in its own `tokens.css`. */
  --site-footer-bg:           var(--site-color-fg);
  --site-footer-fg:           var(--site-color-bg);
  --site-footer-muted:        color-mix(in srgb, var(--site-footer-fg) 68%, transparent);
  --site-footer-link:         var(--site-footer-fg);
  --site-footer-accent:       var(--site-color-accent);
  --site-footer-rule:         color-mix(in srgb, var(--site-footer-fg) 18%, transparent);
  --site-footer-font-display: var(--site-font-display);
  --site-footer-font-body:    var(--site-font-body);
  --site-footer-logo-h:       44px;
  /* A texture laid behind the footer (a shared footer's `ground` media): how
     strongly it shows, and the size one tile is drawn at. */
  --site-footer-texture-opacity: 0.18;
  --site-footer-texture-size:    480px;

  /* ⚠️ A SEED, NOT A MEASUREMENT. `App.vue` measures the real bar after mount
     and overwrites this on :root, along with `--site-header-reserve` — what
     the shell actually pads by, which is 0 for a bar in flow. Kept only so
     rules that read it before first measurement have a sane number. */
  --site-header-h:     76px;
  --site-header-reserve: 0px;

  /* ===================================================================
   * STRUCTURAL tokens — the theme's visual RHYTHM, not just its palette.
   * ===================================================================
   *
   * These extend the stable `--site-*` surface beyond colour/font/radius
   * so the LOCKED booking pages (BookView / CheckoutView / Confirmation)
   * can inherit a theme's FULL visual language — type scale, spacing,
   * elevation, and motion — instead of looking like a generic recolour.
   *
   * Defaults here are deliberately NEUTRAL (a clean, calm shell). Each
   * generated theme's `theme/tokens.css` MAPS its bespoke scale onto
   * these names (see the design-tokens skill) so the booking surface
   * picks up the same rhythm as the rest of the site. Setting these is
   * additive + backward-compatible: a theme that sets none of them still
   * renders correctly on the neutral defaults below.
   *
   * As with colours, the names are STABLE so theme-application logic can
   * map onto them deterministically.
   */

  /* --- Type scale ---------------------------------------------------
   * Display sizes for hero/section headings, body sizes for prose +
   * controls. Fluid `clamp()` so the neutral shell reads well at any
   * width; a theme overrides with its own step ladder. */
  --site-font-size-display-xl: clamp(2.25rem, 5vw, 3.5rem);
  --site-font-size-display-lg: clamp(1.75rem, 3.5vw, 2.5rem);
  --site-font-size-display-md: clamp(1.25rem, 2vw, 1.5rem);
  --site-font-size-body-lg:    1.0625rem;
  --site-font-size-body:       0.9375rem;
  --site-font-size-body-sm:    0.8125rem;

  --site-line-height-display:  1.1;
  --site-line-height-body:     1.55;

  --site-letter-spacing-tight:  -0.01em;
  --site-letter-spacing-normal: 0;

  /* --- Spacing ladder ----------------------------------------------
   * A geometric-ish step used for gaps, padding, and rhythm. Themes
   * remap to their own gutter/section scale. */
  --site-space-xs: 0.5rem;
  --site-space-sm: 0.75rem;
  --site-space-md: 1.25rem;
  --site-space-lg: 2rem;
  --site-space-xl: 3rem;

  /* --- Elevation ----------------------------------------------------
   * Soft, neutral shadows. Themes supply brand-tinted equivalents. */
  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --site-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* --- Motion -------------------------------------------------------
   * One easing + one base duration the locked pages reach for on
   * transitions. Themes set their committed curve/timing here so the
   * booking surface moves with the same feel as the rest of the site. */
  --site-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --site-duration: 240ms;

  /* --- Legacy / alternate token vocabulary (backward-compat) --------
   * Some generated themes' components were authored against an older
   * --site-* naming scheme — a NUMERIC spacing scale (--site-space-1..6)
   * and --site-text-*/--site-track-*/--site-leading-*/--site-dur-* names —
   * rather than the named scale above. When a component reaches for a name
   * not defined anywhere, that custom property resolves to NOTHING and the
   * declaration is dropped (e.g. `gap: clamp(var(--site-space-3),…)` becomes
   * `normal` → a nav with no spacing; `font-size: var(--site-text-h1)` falls
   * back to 16px → collapsed type). Aliasing the legacy names onto the canonical
   * tokens here — the always-loaded base — keeps EVERY component resolving
   * regardless of which vocabulary it was generated against. Purely additive;
   * themes built on the named scale are unaffected. */
  --site-space-1: var(--site-space-xs);
  --site-space-2: var(--site-space-sm);
  --site-space-3: var(--site-space-md);
  --site-space-4: var(--site-space-lg);
  --site-space-5: var(--site-space-xl);
  --site-space-6: var(--site-space-xl);

  --site-text-hero:    var(--site-font-size-display-xl);
  --site-text-display: var(--site-font-size-display-xl);
  --site-text-h1:      var(--site-font-size-display-lg);
  --site-text-h2:      var(--site-font-size-display-md);
  --site-text-h3:      var(--site-font-size-display-md);
  --site-text-lead:    var(--site-font-size-body-lg);
  --site-text-body:    var(--site-font-size-body);
  --site-text-strong:  var(--site-font-size-body);
  --site-text-muted:   var(--site-font-size-body);
  --site-text-sm:      var(--site-font-size-body-sm);
  --site-text-label:   var(--site-font-size-body-sm);
  --site-text-caption: var(--site-font-size-body-sm);
  --site-text-micro:   var(--site-font-size-body-sm);

  --site-leading-tight: var(--site-line-height-display);
  --site-leading-snug:  1.25;
  --site-leading-body:  var(--site-line-height-body);

  --site-track-tight: var(--site-letter-spacing-tight);
  --site-track-caps:  0.08em;
  --site-track-label: 0.12em;
  --site-track-cta:   0.04em;
  --site-track-wide:  0.16em;

  --site-dur-fast: 160ms;
  --site-dur-base: var(--site-duration);
  --site-dur-slow: 420ms;

  --site-radius-none: 0;
  --site-radius-xs:   3px;
  --site-bar-h:       var(--site-header-h);
  --site-max:         1200px;
  --site-hairline-w:  1px;
}

/* =====================================================================
 *  Base typography wiring.
 *
 *  Every visible character on the site reads its font through these
 *  cascaded rules — so flipping `--site-font-*` (which the brand
 *  store does at runtime) instantly changes the font everywhere
 *  without component-by-component overrides.
 *
 *    body, p, button, input, select, textarea  →  --site-font-body
 *    h1..h4                                    →  --site-font-display
 *
 *  Components that want to OPT INTO display type for non-heading
 *  text should add `font-family: var(--site-font-display)` on the
 *  relevant selector (e.g. drawer links). Components that want a
 *  different family for ONE element can override locally. The rule
 *  below establishes the right defaults so ad-hoc overrides are
 *  rare.
 * ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings always pull from the display family (Bebas Neue / Fraunces /
   etc., depending on the hotel). If a hotelier picks the same family
   for both display + body, the variable resolves the same way and
   nothing visually changes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-display);
  margin: 0;
}

/* Form controls don't inherit font-family by default — wire them
   explicitly so brand fonts apply to inputs, buttons, etc. */
button, input, select, textarea { font: inherit; }

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

/* Preserve author line breaks in CMS prose.
 *
 * Room / amenity / event descriptions, summaries, "the space", etc. are
 * entered in dashboard textareas where newlines are meaningful. HTML's
 * default `white-space: normal` collapses those newlines into spaces, so
 * paragraph breaks the hotelier typed vanished on the live site.
 *
 * `pre-line` behaves EXACTLY like `normal` (collapses runs of spaces,
 * wraps long lines) except it keeps newlines — so this is a no-op for
 * any text without literal line breaks (price rows, labels, button text)
 * and only restores breaks in author-entered prose. Vue's template
 * compiler condenses static whitespace, so the only newlines reaching a
 * text node come from interpolated data — exactly what we want to keep.
 *
 * Scoped to prose-bearing elements (paragraphs + the SDK/theme prose
 * class roles). Components that pin their own white-space (nowrap on
 * price chips, pre-wrap elsewhere) load after this and win. */
p,
[class*="__prose"],
[class*="__description"],
[class*="__lede"],
[class*="__summary"],
[class*="__highlight-body"] {
  white-space: pre-line;
}

a { color: inherit; text-decoration: none; }

/* Minimal global reset so the empty homepage doesn't show a blank
   white page with default browser margins. Section components are
   responsible for their own spacing and type — keep this lean. */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* theme tokens */
/* La Valise Tulum — token aggregate.
 *
 * The real source is tokens/*.css. This file is recomposed from those
 * parts at build time, so nothing hand-written here survives. The
 * imports below exist only so the dev preview, which does not run the
 * composer, loads the same parts in the same order the composer uses:
 * palette, then type, then the rest by name.
 */
@import "./tokens/palette.css";
@import "./tokens/type.css";
@import "./tokens/base.css";
@import "./tokens/grounds.css";
@import "./tokens/space.css";


/* brand */
/* themes/default/brand.css — baseline global finish layer.
 *
 * A few universal refinements that read as "finished" on any theme.
 * The v2 builder OVERWRITES this per-hotel with a richer, manifest-
 * derived layer (texture + editorial-fixture utilities). Exists so
 * `import '@theme/brand.css'` always resolves.
 */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection {
  background: var(--site-color-accent);
  color: var(--site-color-accent-fg);
}
:focus-visible {
  outline: 2px solid var(--site-color-accent);
  outline-offset: 3px;
}


/* chrome components */

.sdk-cta[data-v-6d008a43] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-6d008a43] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-6d008a43] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-6d008a43] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-6d008a43] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-6d008a43] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-6d008a43] { display: none;
}
.sdk-cta__item[data-v-6d008a43] { margin: 0;
}
.sdk-cta__link[data-v-6d008a43] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-6d008a43]:hover,
.sdk-cta__link[data-v-6d008a43]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-6d008a43] { transition: none;
}
}


/* ⚠️⚠️ TEXT COLOUR COMES FROM `inherit` + `opacity`, NEVER A COLOUR TOKEN.
   This is the SDK chrome convention (see RegionSwitcher / LanguageSwitcher)
   and it exists because a theme's colour ROLES are not what their names
   suggest. Townhouse defines:

       --site-color-muted: #F3E6D0   (sun-bleached SAND — a FILL)

   so `color: var(--site-color-muted)` rendered this control's text in
   near-white cream on a #FFFFFF page: invisible. The muted TEXT role there
   is `--site-color-fg-muted` (#7A6350), and other themes spell it
   differently again. Inheriting the page's own ink and dialling it back
   with opacity is the only thing that is true on every theme.

   SURFACES are different — a floating panel must be opaque or the list
   renders over the page behind it — so those do read tokens, in the order
   surface → bg → white, all of which are genuinely background roles.
   Borders read `--site-color-border` (Townhouse: #DCC5A2 tan), radius
   `--radius-sm` (8px there), and the control's type reads
   `--site-font-ui` (Karla) because this is chrome, not body copy. */
.currency-panel[data-v-395b19a7] {
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  font-family: var(--site-font-ui, inherit);
  color: inherit;
}
.currency-panel__search[data-v-395b19a7] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: var(--site-color-border, currentColor);
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
.currency-panel__search[data-v-395b19a7]::placeholder { color: inherit; opacity: 0.5;
}
.currency-panel__search[data-v-395b19a7]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: 1px;
}
.currency-panel__group + .currency-panel__group[data-v-395b19a7] { margin-top: 0.5rem;
}
.currency-panel__group-label[data-v-395b19a7] {
  margin: 0.4rem 0 0.2rem;
  padding: 0 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
.currency-panel__options[data-v-395b19a7] { list-style: none; margin: 0; padding: 0;
}
.currency-panel__option-btn[data-v-395b19a7] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
/* A wash of the page's OWN ink — works on a cream panel and a dark one
   alike, where a fixed grey would muddy one of them. */
.currency-panel__option-btn[data-v-395b19a7]:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.currency-panel__option-btn[data-v-395b19a7]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: -2px;
}
.currency-panel__option-flag[data-v-395b19a7] { font-size: 1em; line-height: 1; flex: 0 0 auto;
}

/* ⚠️ The ellipsis has to live on the NAME, the flex CHILD. `text-overflow`
   on a flex CONTAINER reaches nothing — the text is cut with no "…", so the
   panel shows a currency name that does not exist. `min-width: 0` because a
   flex item will not shrink below its content width without it. */
.currency-panel__option-name[data-v-395b19a7] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-panel__option-code[data-v-395b19a7] {
  flex: 0 0 auto;
  font-size: 0.74em;
  letter-spacing: 0.06em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.currency-panel__option-mark[data-v-395b19a7] { flex: 0 0 auto; opacity: 0.75;
}
.currency-panel__option--active .currency-panel__option-btn[data-v-395b19a7] { font-weight: 600;
}
.currency-panel__empty[data-v-395b19a7] {
  margin: 0;
  padding: 0.6rem 0.45rem;
  font-size: 0.82rem;
  opacity: 0.65;
}


/* UNSCOPED, like HeaderCta's `.sdk-cta-btn`: the trigger sits in a THEME's
   header, beside elements wearing the theme's scope id, and the panel is
   teleported to <body>. Every selector is under an `sdk-hdr-cur` class, so
   nothing here can reach anything else. */

/* ⚠️ THE TRIGGER IS TEXT, LIKE THE HEADER'S OWN LINKS. Colour is the header's
   ink (`inherit`) — the only value right on a dark bar and a cream one alike;
   the type comes from a nav link via `--hc-*` (see `adoptHeaderType`). */
.sdk-hdr-cur {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  background: none;
  color: var(--hc-color, inherit);
  font-family: var(--hc-font, inherit);
  font-size: var(--hc-size, inherit);
  font-weight: var(--hc-weight, inherit);
  letter-spacing: var(--hc-track, inherit);
  text-transform: var(--hc-case, none);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sdk-hdr-cur__code {
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 140ms ease;
}
.sdk-hdr-cur:hover .sdk-hdr-cur__code,
.sdk-hdr-cur--open .sdk-hdr-cur__code {
  text-decoration-color: currentColor;
}
.sdk-hdr-cur:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
/* The same chevron HeaderCta draws on its own caret button. */
.sdk-hdr-cur__caret {
  width: 0.38em;
  height: 0.38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 160ms ease;
  flex: none;
  opacity: 0.8;
}
.sdk-hdr-cur--open .sdk-hdr-cur__caret {
  transform: translateY(0.1em) rotate(-135deg);
}

/* The twin, at <body>: fixed in the header's bar, centred on its anchor. A
   transform on our OWN leaf anchors nothing else (H5). */
.sdk-hdr-cur--docked {
  position: fixed;
  transform: translateY(-50%);
}
/* On a see-through bar (a photograph behind it): a plate of the page's own
   ground under the words, so they read on sky and on shadow alike. */
.sdk-hdr-cur--plate {
  min-height: 36px;
  padding: 0 0.8em;
  background: color-mix(in srgb, var(--site-color-bg, #fff) 86%, transparent);
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

/* ⚠️ A HEADER THAT CARRIES IT HOLDS STILL. Blue Apple Beach and Bleecker
   slide their header away on scroll-down (`translateY(-100%)` on the header
   itself). The hotelier turned this on so the guest can change currency
   whenever they look up; a control that scrolls off with the bar is not that.
   Only a header holding the control is touched, which only happens on /book
   with the switch on — every other page keeps the theme's behaviour. */
header:has(.sdk-hdr-cur),
[data-site-header]:has(.sdk-hdr-cur) {
  transform: none !important;
}

/* ── The panel, at <body> ───────────────────────────────────────────────
   Above the stay rail (900), the stay sheet (1000) and the concierge (999);
   under the room quick-view (12000), which is a modal over everything. */
.sdk-hdr-cur-pop {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--site-font-ui, var(--site-font-body, inherit));
  background: var(--site-color-surface, var(--site-color-bg, #fff));
  color: var(--site-color-fg, #111);
  border: 1px solid;
  border-color: var(--site-color-border, color-mix(in srgb, currentColor 18%, transparent));
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 18px 44px var(--site-color-shadow-strong, var(--site-color-shadow, rgba(0, 0, 0, 0.18)));
  animation: sdk-hdr-cur-in 160ms ease both;
}
/* The list scrolls; the charge line and the heading stay put above it. */
.sdk-hdr-cur-pop > :last-child { min-height: 0; overflow-y: auto;
}
.sdk-hdr-cur-pop__charge {
  margin: 0;
  padding: 0.75rem 0.85rem 0.65rem;
  border-bottom: 1px solid;
  border-bottom-color: var(--site-color-border, color-mix(in srgb, currentColor 14%, transparent));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.sdk-hdr-cur-pop__charge-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.65;
}
.sdk-hdr-cur-pop__head {
  margin: 0;
  padding: 0.6rem 0.85rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
@keyframes sdk-hdr-cur-in {
from { opacity: 0; transform: translateY(-4px);
}
to   { opacity: 1; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.sdk-hdr-cur-pop { animation: none;
}
.sdk-hdr-cur__caret, .sdk-hdr-cur__code { transition: none;
}
}


.sdk-cta[data-v-de91feec] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-de91feec] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-de91feec] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-de91feec] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-de91feec] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-de91feec] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-de91feec] { display: none;
}
.sdk-cta__item[data-v-de91feec] { margin: 0;
}
.sdk-cta__link[data-v-de91feec] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-de91feec]:hover,
.sdk-cta__link[data-v-de91feec]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* The multi-button row. Only ever wraps 2+ buttons — one button keeps its
   own element as the root so the theme's scoped CSS lands unaided. */
.sdk-cta-group[data-v-de91feec] {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-sm, 0.6rem);
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-de91feec] { transition: none;
}
}


/* ⚠️ THE BUTTON NEVER WRAPS, AND THE THEME CANNOT REACH IT TO SAY SO.
   `link-class` lands ON the anchor itself, so a theme's `:deep(.my-cta)`
   descendant selector matches nothing — which is how "BOOK NOW" ended up on
   two lines in a one-line bar on hotel after hotel. One unscoped rule here,
   on a class the SDK stamps on every top-bar branch, is the only place that
   can hold it. */
.sdk-cta-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.sdk-cta-group .sdk-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.2em;
  border: 1px solid currentColor;
  border-radius: var(--site-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.sdk-cta-group .sdk-cta__btn--secondary:hover,
.sdk-cta-group .sdk-cta__btn--secondary:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.sdk-cta-group .sdk-cta__btn--link {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 0.2em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.sdk-cta-group .sdk-cta__btn--link:hover,
.sdk-cta-group .sdk-cta__btn--link:focus-visible {
  text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta-group .sdk-cta__btn--secondary { transition: none;
}
}


/* =====================================================================
 *  THE STAY, IN THE SITE HEADER  (`booking_page.cart_placement: header`)
 *
 *  ⚠️ THIS LIVED IN `styles/mobile-funnel.css` FIRST AND DID NOT BELONG THERE.
 *  That file's whole safety argument is that every rule in it sits inside
 *  `@media (max-width: 720px)`, so a hotel's laptop page cannot move — and
 *  `viewport.css.test.mjs` enforces it. These rules are not phone rules: the
 *  control is rendered at every width, and a hotelier who moves the stay into
 *  the header means it there on a laptop too. Its VISIBILITY is decided in the
 *  script (the setting, a mounted sheet, a non-empty stay), never by a
 *  breakpoint — so there was nothing for a media query to gate, and putting it
 *  in the phone layer was a category error the test correctly refused.
 *
 *  ⚠️ UNSCOPED, like the `sdk-cta__btn--*` fallbacks this file already ships.
 *  The button wears the THEME's own `linkClass`, so the hotel's styling
 *  reaches it; these rules only supply what a button does not have — a glyph
 *  beside a count, and a thumb-sized box.
 * ===================================================================== */
.sdk-stay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  cursor: pointer;
}
.sdk-stay__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sdk-stay__count {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/cdn/01M2T4118EW16XKRW8T2P4PBX6/01M3HC2BG2WAKAZMZQRVENSG83.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Text';
  src: url('/cdn/01M2T4118EW16XKRW8T2P4PBX6/01M3HC2NZTA1ZRWNT2APC0WRKX.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KohinoorLatin';
  src: url('/cdn/01M2T4118EW16XKRW8T2P4PBX6/01M3HC2P042ZFY2EFM5JC5C66V.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Home, and any page whose top hero carries data-lv-hero, starts at y 0. */
.lvh.lvh--hero ~ main.app-shell__main {
  padding-top: 0 !important;
}

/* The source /faqs page is built without the fluid root: 16px at every width. */
/* (Unscoped: the chrome's own fluid --r must lose on that route only.) */
.app-shell:has(.lvs-faq) > .lvh,
.app-shell:has(.lvs-faq) > .lvf {
  --r: 16px;
}


.lvh[data-v-a39e01ca] {
  --r: 16px;
  --pad: calc(1.25 * var(--r));
  --beige: #efeadd;
  --grey: #424142;
  --shade: #e6dfd4;
  --out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --bar-h: calc(3.25 * var(--r));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.lvh--solid[data-v-a39e01ca] {
  --bar-h: calc(2.125 * var(--r));
}
@media (min-width: 992px) and (max-width: 1440px) {
.lvh[data-v-a39e01ca] { --r: calc(11px + (100vw - 991px) * 0.011135857);
}
}
@media (min-width: 768px) and (max-width: 991px) {
.lvh[data-v-a39e01ca] { --r: calc(14px + (100vw - 767px) * 0.008928571);
}
}
@media (max-width: 767px) {
.lvh[data-v-a39e01ca] { --pad: 16px;
}
}
:where(.lvh[data-v-a39e01ca]) *,
:where(.lvh[data-v-a39e01ca]) *::before,
:where(.lvh[data-v-a39e01ca]) *::after {
  box-sizing: border-box;
}
:where(.lvh) a[data-v-a39e01ca] {
  color: inherit;
  text-decoration: none;
}
:where(.lvh) button[data-v-a39e01ca] {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
}
:where(.lvh) ul[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(.lvh) img[data-v-a39e01ca] {
  max-width: none;
  border: 0;
}

/* ---- Bar --------------------------------------------------------------- */
.lvh-bar[data-v-a39e01ca] {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: calc(3.25 * var(--r));
  padding: calc(0.625 * var(--r)) var(--pad);
  border-bottom: 1px solid var(--beige);
  background-color: rgba(239, 234, 221, 0);
  color: var(--beige);
  transition: height 0.3s var(--in), background-color 0.3s var(--in),
    border-color 0.3s var(--in), color 0.3s var(--in);
}
/* The grey-on-clear top state of a data-lv-solid page. With the menu open
 * the sheet behind the bar is grey, so the bar prints beige there. */
.lvh--ink:not(.lvh--solid):not(.lvh--open) .lvh-bar[data-v-a39e01ca] {
  border-bottom-color: var(--grey);
  color: var(--grey);
}
.lvh--solid .lvh-bar[data-v-a39e01ca] {
  height: calc(2.125 * var(--r));
  border-bottom-color: var(--grey);
  background-color: var(--beige);
  color: var(--grey);
  transition-timing-function: var(--out);
}
.lvh-bar__row[data-v-a39e01ca] {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: 'IBM Plex Sans', 'Trebuchet MS', sans-serif;
  font-size: var(--r);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.lvh-toggle[data-v-a39e01ca] {
  position: relative;
  display: block;
  min-width: calc(4 * var(--r));
  text-align: left;
  line-height: 1;
  transition: opacity 0.3s;
}
.lvh-toggle[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-toggle__clip[data-v-a39e01ca] {
  position: relative;
  display: block;
  overflow: clip;
}
.lvh-toggle__open[data-v-a39e01ca],
.lvh-toggle__close[data-v-a39e01ca] {
  display: block;
}
.lvh-toggle__open[data-v-a39e01ca] {
  transition: transform 0.5s var(--in), opacity 0.5s var(--in);
}
.lvh-toggle__close[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.5s var(--out), opacity 0.5s var(--out);
}
.lvh--open .lvh-toggle__open[data-v-a39e01ca] {
  opacity: 0;
  transform: translateY(100%);
  transition-timing-function: var(--out);
}
.lvh--open .lvh-toggle__close[data-v-a39e01ca] {
  opacity: 1;
  transform: none;
  transition-timing-function: var(--in);
}
.lvh-logo[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--r);
  aspect-ratio: 452 / 52;
  margin: auto;
  transition: opacity 0.3s;
}
.lvh-logo[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-logo__art[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.lvh-right[data-v-a39e01ca] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--r);
}
.lvh-icons[data-v-a39e01ca] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: var(--r);
}
.lvh-icons--bar[data-v-a39e01ca] {
  display: flex;
  justify-content: flex-end;
  /* .5rem on lavalisemazunte.com (Tulum 1rem). */
  gap: calc(0.5 * var(--r));
  margin-right: 0;
}
.lvh-icons--menu[data-v-a39e01ca] {
  display: none;
}
.lvh-icons__item[data-v-a39e01ca] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--r);
  height: var(--r);
  transition: opacity 0.3s;
}
.lvh-icons__item[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-icons__icon[data-v-a39e01ca] {
  display: block;
  max-width: 100%;
  height: var(--r);
}
.lvh-icons__icon--mail[data-v-a39e01ca] {
  opacity: 0.95;
}
.lvh-icons__icon[data-v-a39e01ca] svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lvh-icons__icon--gift[data-v-a39e01ca] { aspect-ratio: 549 / 569;
}
.lvh-icons__icon--mail[data-v-a39e01ca] { aspect-ratio: 1 / 1;
}
.lvh-icons__icon--phone[data-v-a39e01ca] { aspect-ratio: 1 / 1;
}
.lvh-icons__icon--pin[data-v-a39e01ca] { aspect-ratio: 397 / 550;
}
.lvh-right[data-v-a39e01ca] .lvh-book {
  display: block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}
.lvh-right[data-v-a39e01ca] .lvh-book:hover {
  opacity: 0.5;
}
.lvh-lang[data-v-a39e01ca] {
  position: relative;
  margin: calc(-0.625 * var(--r));
}
.lvh-lang__toggle[data-v-a39e01ca] {
  display: inline-block;
  padding: calc(0.625 * var(--r));
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.lvh-lang__toggle[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-lang__toggle.is-open[data-v-a39e01ca] {
  opacity: 1;
}
.lvh-lang__list[data-v-a39e01ca] {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background-color: var(--beige);
  color: var(--grey);
}
.lvh-lang__link[data-v-a39e01ca] {
  display: block;
  padding: calc(0.625 * var(--r));
  background-color: var(--beige);
  white-space: nowrap;
  transition: background-color 0.3s;
}
.lvh-lang__link[data-v-a39e01ca]:hover {
  background-color: var(--shade);
}

/* ---- Menu -------------------------------------------------------------- */
.lvh-menu[data-v-a39e01ca] {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100dvh;
  background-color: var(--grey);
  color: var(--beige);
  font-family: 'KohinoorLatin', Tahoma, sans-serif;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--in), visibility 0s linear 0.5s;
}
.lvh--open .lvh-menu[data-v-a39e01ca] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--out), visibility 0s;
}
.lvh-menu__spacer[data-v-a39e01ca] {
  flex: none;
  height: var(--bar-h);
}
.lvh-menu__grid[data-v-a39e01ca] {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto;
  gap: 0;
  width: 100%;
  min-height: 0;
}
.lvh-menu__left[data-v-a39e01ca] {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: calc(1.25 * var(--r)) calc(1.25 * var(--r)) 0;
}
.lvh-menu__links[data-v-a39e01ca] {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-height: calc(100dvh - 8 * var(--r));
  overflow: auto;
}
.lvh-menu__listwrap[data-v-a39e01ca] {
  margin-top: auto;
  margin-bottom: auto;
}
.lvh-menu__list[data-v-a39e01ca] {
  display: flex;
  flex-flow: column;
  gap: 0;
  margin-bottom: calc(0.5 * var(--r));
}
.lvh-menu__item[data-v-a39e01ca] {
  overflow: clip;
}
.lvh-menu__link[data-v-a39e01ca] {
  display: block;
  font-family: 'Crimson Text', 'Times New Roman', sans-serif;
  font-size: calc(2.25 * var(--r));
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.03em;
  transition: opacity 0.3s;
}
.lvh-menu__link[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-menu__gap[data-v-a39e01ca] {
  width: 100%;
  padding-top: var(--r);
}
.lvh-menu__bottom[data-v-a39e01ca] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(1.25 * var(--r));
  padding: calc(0.25 * var(--r)) 0;
}
.lvh-menu__social[data-v-a39e01ca] {
  font-family: 'KohinoorLatin', Tahoma, sans-serif;
  font-size: var(--r);
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: -0.05em;
  transition: opacity 0.3s;
}
.lvh-menu__social[data-v-a39e01ca]:hover {
  opacity: 0.5;
}
.lvh-menu__rule[data-v-a39e01ca] {
  width: 1px;
  height: 100%;
  background-color: var(--beige);
}
.lvh-menu__right[data-v-a39e01ca] {
  padding: calc(1.25 * var(--r));
}
.lvh-menu__stage[data-v-a39e01ca] {
  position: relative;
  width: 100%;
  height: 100%;
}
.lvh-menu__slides[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lvh-menu__default[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lvh-slide[data-v-a39e01ca] {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: transform 0s cubic-bezier(0.55, 0.055, 0.675, 0.19),
    clip-path 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.lvh-slide__img[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale3d(1.3, 1.3, 1.3);
  transition: transform 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.lvh-slide.is-active[data-v-a39e01ca] {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-duration: 0.8s;
  transition-delay: 0.1s;
}
.lvh-slide.is-active .lvh-slide__img[data-v-a39e01ca] {
  transform: scale3d(1, 1, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-duration: 0.8s;
  transition-delay: 0.1s;
}
.lvh-slide.is-leaving[data-v-a39e01ca] {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition-duration: 0.8s;
  transition-delay: 0.1s;
}
.lvh-slide.is-leaving .lvh-slide__img[data-v-a39e01ca] {
  transform: scale3d(1.3, 1.3, 1.3);
  transition-duration: 1s;
  transition-delay: 0.1s;
}
@media (max-width: 991px) {
.lvh-icons__item--wide[data-v-a39e01ca] {
    display: none;
}
.lvh-icons--menu[data-v-a39e01ca] {
    display: grid;
    grid-template-columns: auto auto auto auto;
}
}
@media (max-width: 767px) {
  /* Phones: the language toggle goes, the Reserve button stays (Tiger, 2026-10-28). */
.lvh-lang[data-v-a39e01ca] {
    display: none;
}
.lvh-menu__grid[data-v-a39e01ca] {
    display: flex;
}
.lvh-menu__rule[data-v-a39e01ca],
  .lvh-menu__right[data-v-a39e01ca] {
    display: none;
}
}
@media (max-width: 479px) {
.lvh-logo[data-v-a39e01ca] {
    max-width: 30vw;
}
  /* Menu · wordmark · Reserve only: the mail/phone glyphs live in the menu panel here. */
.lvh-icons--bar[data-v-a39e01ca] {
    display: none;
}
.lvh-menu__bottom[data-v-a39e01ca] {
    margin-top: auto;
    margin-bottom: calc(6 * var(--r));
}
}

/* Touch screens: an invisible 44px-tall tap area; nothing moves on screen. */
@media (pointer: coarse) {
.lvh-toggle[data-v-a39e01ca]::after,
  .lvh-icons__item[data-v-a39e01ca]::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}
.lvh-toggle[data-v-a39e01ca]::after {
    left: -12px;
    right: -12px;
}
.lvh-icons__item[data-v-a39e01ca] {
    position: relative;
}
  /* 24px wide: the glyph plus half the .5rem gap each side, so neighbours never overlap. */
.lvh-icons__item[data-v-a39e01ca]::after {
    left: 50%;
    width: 24px;
    transform: translate(-50%, -50%);
}
}
@media (prefers-reduced-motion: reduce) {
.lvh-bar[data-v-a39e01ca] {
    animation: none;
}
.lvh-bar[data-v-a39e01ca],
  .lvh-menu[data-v-a39e01ca],
  .lvh-toggle__open[data-v-a39e01ca],
  .lvh-toggle__close[data-v-a39e01ca],
  .lvh-slide[data-v-a39e01ca],
  .lvh-slide__img[data-v-a39e01ca] {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}
}


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-5c7ee371] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-5c7ee371] {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lang-switcher__trigger-glyph[data-v-5c7ee371] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-5c7ee371] {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 0.25s ease;
}
.lang-switcher--open .lang-switcher__caret[data-v-5c7ee371] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-5c7ee371] {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  min-width: 12rem;
  font: inherit;
}
.lang-switcher__option[data-v-5c7ee371] {
  cursor: pointer;
}
/* The row's layout lives on the <a> — it's the element that now wraps the
   label/code/mark, and it must fill the row so the whole option is
   clickable rather than just the text. */
.lang-switcher__option-link[data-v-5c7ee371] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-5c7ee371],
.lang-switcher-fade-leave-active[data-v-5c7ee371] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-5c7ee371],
.lang-switcher-fade-leave-to[data-v-5c7ee371] {
  opacity: 0;
  transform: translateY(0.25rem);
}


.footer-social-icon[data-v-42e147af] {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}


.gf[data-v-327d1592] {
  --fg: var(--site-footer-fg);
  --muted: var(--site-footer-muted, var(--site-footer-fg));
  --rule: var(--site-footer-rule, var(--site-footer-fg));
  --accent: var(--site-footer-accent, var(--site-footer-fg));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--site-footer-bg);
  color: var(--fg);
  font-family: var(--site-footer-font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.gf__ground[data-v-327d1592] {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: 50% 0%;
  opacity: var(--site-footer-texture-opacity, 1);
  pointer-events: none;
}
:where(.gf[data-v-327d1592]) *,
:where(.gf[data-v-327d1592]) *::before,
:where(.gf[data-v-327d1592]) *::after {
  box-sizing: border-box;
}
:where(.gf) h2[data-v-327d1592],
:where(.gf) h3[data-v-327d1592],
:where(.gf) p[data-v-327d1592],
:where(.gf) ul[data-v-327d1592] {
  margin: 0;
  padding: 0;
}
:where(.gf) ul[data-v-327d1592] {
  list-style: none;
}
.gf__inner[data-v-327d1592] {
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px 64px 0;
}

/* ---- 0. the house ---- */
.gf__house[data-v-327d1592] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px 72px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 32px;
}
.gf__brand[data-v-327d1592] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.gf__logo-link[data-v-327d1592] {
  display: inline-block;
  color: var(--fg);
  text-decoration: none;
}
.gf__logo[data-v-327d1592] {
  display: block;
  height: 104px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.gf__wordmark[data-v-327d1592] {
  font-family: var(--site-footer-font-display);
  font-size: 26px;
  line-height: 1.1;
}
.gf__tag[data-v-327d1592] {
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}
.gf__brand-row[data-v-327d1592] {
  display: flex;
  align-items: center;
  gap: 28px;
}
.gf__solo[data-v-327d1592] {
  flex: none;
}
.gf__solo .gf__mark-img[data-v-327d1592],
.gf__solo .gf__mark-mask[data-v-327d1592] {
  height: 104px;
  max-width: 260px;
  object-position: left center;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.gf__social[data-v-327d1592] {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px !important;
}
.gf__social-link[data-v-327d1592] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  transition: opacity 0.3s;
}
.gf__social-link[data-v-327d1592]:hover {
  opacity: 0.6;
}
.gf__social-link[data-v-327d1592] svg {
  width: 18px;
  height: 18px;
}
.gf__head--bare[data-v-327d1592] {
  padding-bottom: 0 !important;
  margin-bottom: 18px !important;
  border-bottom: 0;
}
.gf__address[data-v-327d1592] {
  margin-bottom: 14px !important;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}
.gf__reach-row .gf__reach + .gf__reach[data-v-327d1592] {
  margin-top: 0;
}
.gf__reach[data-v-327d1592] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.gf__reach-label[data-v-327d1592] {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}
.gf__text-link[data-v-327d1592] {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent);
  transition: opacity 0.3s;
}
.gf__text-link[data-v-327d1592]:hover {
  opacity: 0.65;
}
.gf__explore[data-v-327d1592] {
  columns: 2;
  column-gap: 40px;
}
.gf__explore > li[data-v-327d1592] {
  break-inside: avoid;
}

/* ---- contact row ---- */
.gf__reach-row[data-v-327d1592] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 40px;
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 24px 0 28px !important;
  border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
}

/* ---- 1. the marks ---- */
.gf__marks[data-v-327d1592] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 48px;
  padding: 0 0 32px !important;
  margin-bottom: 36px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.gf__mark-link[data-v-327d1592] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  transition: opacity 0.3s;
}
a.gf__mark-link[data-v-327d1592]:hover {
  opacity: 0.65;
}
.gf__mark-img[data-v-327d1592],
.gf__mark-mask[data-v-327d1592] {
  display: block;
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.gf__mark-mask[data-v-327d1592] {
  aspect-ratio: 3 / 1;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.gf__operator[data-v-327d1592] {
  display: flex;
  justify-content: center;
  padding: 36px 0 8px !important;
  border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.gf__operator .gf__operator-mark[data-v-327d1592] {
  height: 58px;
  max-width: 290px;
  aspect-ratio: 190 / 39;
}
@media (max-width: 599px) {
.gf__mark-img[data-v-327d1592],
  .gf__mark-mask[data-v-327d1592] {
    height: 52px;
}
.gf__operator .gf__operator-mark[data-v-327d1592] {
    height: 44px;
}
}

/* ---- 2. the collection ---- */
.gf__grid[data-v-327d1592] {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 0 72px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0 36px;
}
.gf__head[data-v-327d1592],
.gf__acc-label[data-v-327d1592],
.gf__legal-link[data-v-327d1592] {
  font-family: var(--site-footer-font-body);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gf__head[data-v-327d1592] {
  padding-bottom: 18px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
  color: var(--fg);
}
.gf__acc-btn[data-v-327d1592] {
  appearance: none;
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gf__mark[data-v-327d1592] {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
}
.gf__mark[data-v-327d1592]::before,
.gf__mark[data-v-327d1592]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.gf__mark[data-v-327d1592]::after {
  transform: rotate(90deg);
}
.gf__acc--open .gf__mark[data-v-327d1592]::after {
  transform: rotate(0deg);
}
.gf__panel[data-v-327d1592] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s linear 0.45s;
}
.gf__acc--open .gf__panel[data-v-327d1592] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s;
}
.gf__clip[data-v-327d1592] {
  min-height: 0;
  overflow: hidden;
}
.gf__list[data-v-327d1592] {
  display: grid;
  gap: 14px 40px;
  padding: 6px 2px 22px !important;
}
.gf__list--cols[data-v-327d1592] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gf__tile[data-v-327d1592] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.gf__name[data-v-327d1592] {
  font-family: var(--site-footer-font-display);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
  transition: opacity 0.3s;
}
a.gf__name[data-v-327d1592]:hover {
  opacity: 0.65;
}
.gf__name--plain[data-v-327d1592] {
  text-decoration: none;
}
.gf__name--here[data-v-327d1592] {
  text-decoration-color: currentColor;
}
.gf__line[data-v-327d1592] {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}
.gf__here[data-v-327d1592] {
  font-style: italic;
}

/* ---- 3. fine row ---- */
.gf__legal[data-v-327d1592] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 10px 0 14px;
  border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.gf__legal-links[data-v-327d1592] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
}
.gf__legal-link[data-v-327d1592] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--fg) 88%, transparent);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.gf__legal-link[data-v-327d1592]:hover {
  opacity: 0.6;
}
.gf__legal-end[data-v-327d1592] {
  display: flex;
  align-items: center;
  gap: 24px;
}
.gf__copy[data-v-327d1592] {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

/* ---- narrower ---- */
@media (max-width: 991px) {
.gf__inner[data-v-327d1592] {
    padding: 48px 24px 0;
}
.gf__house[data-v-327d1592] {
    grid-template-columns: 1fr 1fr;
}
.gf__brand[data-v-327d1592] {
    grid-column: 1 / -1;
}
.gf__grid[data-v-327d1592] {
    grid-template-columns: 1fr;
    gap: 40px;
}
}
@media (max-width: 599px) {
.gf__inner[data-v-327d1592] {
    padding: 40px 16px 0;
}
.gf__sign-img[data-v-327d1592] {
    width: 220px;
}
.gf__list--cols[data-v-327d1592] {
    grid-template-columns: 1fr;
}
.gf__house[data-v-327d1592] {
    grid-template-columns: 1fr;
    gap: 32px;
}
.gf__text-link[data-v-327d1592] {
    display: inline-block;
    padding-block: 10px;
    margin-block: -6px;
}
.gf__legal[data-v-327d1592],
  .gf__legal-end[data-v-327d1592] {
    flex-direction: column;
    align-items: flex-start;
}
.gf__legal-links[data-v-327d1592] {
    gap: 0 24px;
}
.gf__name[data-v-327d1592] {
    display: inline-block;
    min-width: 44px;
    padding-block: 13px;
    margin-block: -13px;
}
.gf__list[data-v-327d1592] {
    gap: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.gf__panel[data-v-327d1592],
  .gf__mark[data-v-327d1592]::before,
  .gf__mark[data-v-327d1592]::after {
    transition: none;
}
}

/* ---- legal modal ---- */
.gf-modal[data-v-327d1592] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--site-footer-bg) 92%, transparent);
}
.gf-modal__panel[data-v-327d1592] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 760px);
  max-height: 86vh;
  min-height: 0;
  padding: 48px 32px;
  background: var(--site-footer-bg);
  color: var(--site-footer-fg);
  border: 1px solid var(--site-footer-rule, currentColor);
}
.gf-modal__head[data-v-327d1592] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.gf-modal__title[data-v-327d1592] {
  margin: 0;
  font-family: var(--site-footer-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
}
.gf-modal__close[data-v-327d1592],
.gf-modal__tab[data-v-327d1592] {
  appearance: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--site-footer-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.gf-modal__close[data-v-327d1592] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.gf-modal__tabs[data-v-327d1592] {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  border-bottom: 1px solid var(--site-footer-rule, currentColor);
}
.gf-modal__tab[data-v-327d1592] {
  border-bottom: 2px solid transparent;
  opacity: 0.6;
}
.gf-modal__tab--on[data-v-327d1592] {
  opacity: 1;
  border-bottom-color: currentColor;
}
.gf-modal__body[data-v-327d1592] {
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.7;
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as
   part of it rather than as a second footer. Inherits the page's font
   and picks up the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the extras (see composables/useFooterExtras.js)
   embeds this inside its own footer, where standalone-band chrome would
   be wrong. Rather than have the component guess its context, the band
   values are knobs — set them on the element you put the class on:

     .site-footer__extras { --fx-pad: 0; --fx-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.fx[data-v-4cc3b550] {
  padding: var(--fx-pad, 1.5rem 1.25rem);
  background: var(--fx-bg, var(--site-footer-bg, var(--color-surface-alt, transparent)));
  color: var(--fx-ink, var(--site-footer-ink, var(--color-ink, inherit)));
  font-size: var(--fx-size, 0.85rem);
}
.fx__inner[data-v-4cc3b550] {
  max-width: var(--fx-max-w, var(--site-max-w, 1200px));
  margin: var(--fx-inner-margin, 0 auto);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
}
.fx__group[data-v-4cc3b550] { min-width: 0;
}
.fx__group--text[data-v-4cc3b550] { flex: 1 1 100%;
}
.fx__heading[data-v-4cc3b550] {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.6rem;
}
.fx__links[data-v-4cc3b550] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-4cc3b550] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-4cc3b550]:hover, .fx__link[data-v-4cc3b550]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-4cc3b550] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-4cc3b550] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-4cc3b550] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-4cc3b550] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-4cc3b550] { gap: 1.5rem;
}
.fx__group[data-v-4cc3b550] { flex: 1 1 100%;
}
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as part of
   it rather than as a second footer. Inherits the page's font and picks up
   the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the affiliations (composables/useAffiliations.js)
   embeds this inside its own footer, where standalone-band chrome would be
   wrong. Rather than have the component guess its context, the band values
   are knobs — set them on the element you put the class on:

     .site-footer__affiliations { --sa-pad: 0; --sa-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.sa[data-v-aaf444a2] {
  padding: var(--sa-pad, var(--site-space-4, 1.25rem));
  /* ⚠️ `--site-footer-bg` / `--site-footer-ink` DO NOT EXIST in the token
     set — the first version invented them, so every hotel silently got the
     raw fallback. Inherit the footer's own ground instead. */
  background: var(--sa-bg, transparent);
  color: var(--sa-ink, inherit);
}
.sa__inner[data-v-aaf444a2] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}