@import url("https://fonts.googleapis.com/css2?family=wfont_b2babf_ebf0c578cede41149f523f8e31066f7c:wght@400;600;700&display=swap");


/* 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;

  /* COOKIE NOTICE tokens — what a GROUP's shared notice is drawn with. Follows
     the fallback chain of the SDK's own notice (components/consent/consent.css),
     so a shared notice and the settings panel it opens match on every hotel. */
  --site-notice-bg:           var(--consent-bg, var(--site-color-surface, var(--site-color-bg)));
  --site-notice-fg:           var(--consent-fg, var(--site-color-fg));
  --site-notice-muted:        color-mix(in srgb, var(--site-notice-fg) 68%, transparent);
  --site-notice-accent:       var(--consent-accent, var(--site-color-accent, var(--site-notice-fg)));
  --site-notice-on-accent:    var(--consent-on-accent, var(--site-color-on-accent, var(--site-notice-bg)));
  --site-notice-rule:         color-mix(in srgb, var(--site-notice-fg) 14%, transparent);
  --site-notice-radius:       var(--consent-radius, var(--site-radius, 14px));
  --site-notice-font-display: var(--site-font-display);
  --site-notice-font-body:    var(--site-font-body);

  /* 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%; }
html.seo-hub body { background: var(--site-color-bg); }
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 */
/* themes/default/tokens.css — baseline theme token layer.
 *
 * The DEFAULT (un-themed) theme styles entirely through the SDK base
 * tokens (`--site-color-*`, `--site-font-*`) defined in
 * src/styles/tokens.css, so it needs no overrides of its own. This file
 * exists so that `import '@theme/tokens.css'` in src/main.js always
 * resolves — the v2 builder OVERWRITES it per-hotel with a palette +
 * --<prefix>-* token set synthesized from the personality manifest, and
 * that themed copy must load AFTER the SDK base tokens to win the
 * cascade. A no-op here keeps default/v1 builds correct; v2 fills it in.
 */
:root {
  /* intentionally empty — default theme inherits the SDK base tokens */
}


/* brand */
/* ============================================================
   Townhouse Cartagena — global finish layer.

   Two jobs:
     1. the baseline refinements every theme wants;
     2. the .th-band utility — this house's section punctuation.

   The band assets and marks themselves live in tokens/palette.css
   (they are the palette here — the page has no other chroma).
   ============================================================ */

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;
}

/* ============================================================
   THE PAINTED BAND

   The source's section punctuation: a photographed brush stroke
   carrying a short, loud line. A band sizes to its own content and
   stretches its stroke to fit — `100% 100%` on purpose, because a
   stroke is ONE gesture and tiling it would betray the hand.

   Because the stroke is a ragged shape on transparency, content
   must be inset from the band's edges or it will hang off the paint.
   That is what --th-band-inset is for; tune it per band.

   Usage:
     <section class="th-band th-band--green">
       <div class="th-band__in"> … </div>
     </section>
   ============================================================ */
.th-band {
  --th-band-inset: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.th-band__in {
  position: relative;
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--th-band-inset);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.th-band--hero   { background-image: var(--th-band-hero); }
.th-band--green  { background-image: var(--th-band-green); }
.th-band--amber  { background-image: var(--th-band-amber); }
.th-band--green2 { background-image: var(--th-band-green2); }
.th-band--black  { background-image: var(--th-band-black); }
.th-band--wash   { background-image: var(--th-band-wash); }
.th-band--amber2 { background-image: var(--th-band-amber2); }
.th-band--taupe  { background-image: var(--th-band-taupe); }
.th-band--amber3 { background-image: var(--th-band-amber3); }
.th-band--pink   { background-image: var(--th-band-pink); }

/* bands that carry white lettering */
.th-band--green .th-band__in,
.th-band--green2 .th-band__in,
.th-band--black .th-band__in,
.th-band--wash .th-band__in {
  color: var(--site-color-fg-inverse);
}

/* On a phone the stroke gets tall and thin and the paint runs out
   from under the copy. Let it crop rather than distort. */
@media (max-width: 700px) {
  .th-band {
    --th-band-inset: clamp(1.25rem, 5vw, 2rem);
    background-size: cover;
  }
}


/* primitives */
/* ============================================================
   Townhouse Cartagena — Button Primitive · Variant 1
   "Painted Stroke Authority"
   ------------------------------------------------------------
   Titles-as-buttons: Fraunces 700 labels set on hand-painted,
   slightly asymmetric rounded forms. The primary is a glowing
   amber-terracotta editorial mark; the secondary a delicate
   hairline drawn on the cream ground; the ghost a quiet inked
   caption in the voice of the source site's hand-lettered
   nav links. Drawn, not measured — romantic yet decisive.
   ============================================================ */

.site-btn {
  /* ---- component-scoped structure (never brand tokens) ---- */
  --site-radius: 14px 12px 15px 13px;          /* drawn-not-measured asymmetry */
  --site-radius-press: 12px 14px 12px 15px;    /* the stroke settles when pressed */
  --site-pad-y: 13px;
  --site-pad-x: 26px;
  --site-pad-x-end: 28px;                       /* optical: serif labels lean left */
  --site-font-size: 1rem;
  --site-tracking: 0.015em;
  --site-stroke: 1.5px;
  --site-lift: -1px;
  --site-shadow-rest: 0 1px 0 rgba(43, 27, 16, 0.06);
  --site-shadow-hover:
    0 6px 18px -6px rgba(206, 114, 49, 0.45),
    0 2px 5px -2px rgba(43, 27, 16, 0.18);
  --site-focus-halo: 0 0 0 3px var(--site-color-bg), 0 0 0 5.5px var(--site-color-accent);
  --site-transition:
    background-color var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1))),
    border-color var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1))),
    color var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1))),
    box-shadow var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1))),
    border-radius var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1))),
    transform 180ms var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)));

  /* ---- base form ---- */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: var(--site-pad-y) var(--site-pad-x-end) var(--site-pad-y) var(--site-pad-x);
  min-height: 48px;

  font-family: var(--site-font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 28;          /* Fraunces small-optical: warm, inky */
  font-size: var(--site-font-size);
  line-height: 1.1;
  letter-spacing: var(--site-tracking);
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;

  border: var(--site-stroke) solid transparent;
  border-radius: var(--site-radius);
  background: none;
  color: var(--site-color-fg);
  box-shadow: var(--site-shadow-rest);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  touch-action: manipulation;

  transition: var(--site-transition);
}

/* Icon children sit optically centered against serif labels */
.site-btn > svg,
.site-btn > img {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-block: -0.1em;
}

/* ============================================================
   PRIMARY — the glowing amber mark. Flush terracotta fill,
   painted edge, cream Fraunces label. One per composition.
   ============================================================ */

.site-btn--primary {
  background-color: var(--site-color-accent);
  border-color: var(--site-color-accent);
  color: var(--site-color-on-accent, var(--site-color-bg));
  box-shadow:
    inset 0 1px 0 rgba(251, 244, 232, 0.22),   /* wet-paint highlight along the top */
    0 2px 8px -2px rgba(206, 114, 49, 0.4);
}

.site-btn--primary:hover {
  background-color: var(--site-color-accent-deep, var(--site-color-accent));
  border-color: var(--site-color-accent-deep, var(--site-color-accent));
  transform: translateY(var(--site-lift));
  border-radius: var(--site-radius-press);      /* the brushstroke re-settles */
  box-shadow:
    inset 0 1px 0 rgba(251, 244, 232, 0.18),
    var(--site-shadow-hover);
}

.site-btn--primary:active {
  transform: translateY(1px);
  border-radius: var(--site-radius-press);
  box-shadow:
    inset 0 2px 4px rgba(43, 27, 16, 0.28),    /* pigment pools under the thumb */
    0 1px 2px -1px rgba(43, 27, 16, 0.2);
}

/* ============================================================
   SECONDARY — a delicate hairline drawn on the cream ground.
   Ink label; on hover the line warms and the ground blushes.
   ============================================================ */

.site-btn--secondary {
  background-color: var(--site-color-bg-subtle, var(--site-color-bg));
  border-color: var(--site-color-border);
  color: var(--site-color-fg);
}

.site-btn--secondary:hover {
  border-color: var(--site-color-accent);
  background-color: var(--site-color-muted);
  color: var(--site-color-accent-deep, var(--site-color-accent));
  transform: translateY(var(--site-lift));
  border-radius: var(--site-radius-press);
  box-shadow: 0 5px 14px -6px rgba(43, 27, 16, 0.22);
}

.site-btn--secondary:active {
  transform: translateY(1px);
  background-color: var(--site-color-muted);
  border-color: var(--site-color-accent-deep, var(--site-color-accent));
  border-radius: var(--site-radius-press);
  box-shadow: inset 0 1px 3px rgba(43, 27, 16, 0.14);
}

/* ============================================================
   GHOST — the hand-lettered caption link (the source site's
   quiet inked nav voice). No box; an underpainted stroke
   sweeps in beneath the label on hover.
   ============================================================ */

.site-btn--ghost {
  padding-inline: 10px;
  min-height: 40px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--site-color-fg);
  letter-spacing: 0.03em;
}

.site-btn--ghost::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px 1px 2px 1.5px;            /* the stroke is drawn, not ruled */
  background: var(--site-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--site-motion-duration, var(--site-duration, 320ms)) var(--site-motion-ease-expo, var(--site-ease-expo, cubic-bezier(0.16, 1, 0.3, 1)));
}

.site-btn--ghost:hover {
  color: var(--site-color-accent-deep, var(--site-color-accent));
  transform: none;                              /* the caption never levitates */
  box-shadow: none;
}

.site-btn--ghost:hover::before {
  transform: scaleX(1);
}

.site-btn--ghost:active {
  color: var(--site-color-fg);
  transform: translateY(1px);
  box-shadow: none;
}

.site-btn--ghost:active::before {
  transform: scaleX(1);
  background: var(--site-color-accent-deep, var(--site-color-accent));
}

/* ============================================================
   SMALL — icon-adjacent density for date pickers, coupon
   fields, inline card actions. Same voice, tighter breath.
   ============================================================ */

.site-btn--sm {
  --site-pad-y: 8px;
  --site-pad-x: 16px;
  --site-pad-x-end: 17px;
  --site-font-size: 0.875rem;
  --site-radius: 11px 9px 12px 10px;
  --site-radius-press: 9px 11px 9px 12px;
  min-height: 36px;
  gap: 7px;
}

.site-btn--sm.site-btn--ghost {
  min-height: 32px;
  padding-inline: 7px;
}

.site-btn--sm.site-btn--ghost::before {
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 1.5px;
}

/* ============================================================
   FOCUS RITUAL — a double-ring halo: cream breath, then a
   painted amber circuit. Identical ritual across variants.
   ============================================================ */

.site-btn:focus-visible {
  outline: none;
  box-shadow: var(--site-focus-halo);
}

.site-btn--primary:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(251, 244, 232, 0.22),
    var(--site-focus-halo);
}

.site-btn--ghost:focus-visible {
  border-radius: 10px 8px 11px 9px;
  box-shadow: var(--site-focus-halo);
}

/* ============================================================
   DISABLED — the pigment dries out. No motion, no invitation.
   ============================================================ */

.site-btn[disabled],
.site-btn[disabled]:hover,
.site-btn[disabled]:active {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  color: var(--site-color-fg-soft, rgba(43, 27, 16, 0.68));
  opacity: 0.55;
}

.site-btn--primary[disabled],
.site-btn--primary[disabled]:hover {
  background-color: var(--site-color-muted);
  border-color: var(--site-color-border);
  color: var(--site-color-fg-soft, rgba(43, 27, 16, 0.68));
}

.site-btn--secondary[disabled],
.site-btn--secondary[disabled]:hover {
  background-color: transparent;
  border-color: var(--site-color-border);
  border-style: dashed;                        /* the line un-inks itself */
}

.site-btn--ghost[disabled]::before {
  display: none;
}

/* ============================================================
   LOADING — the label holds its ground (no layout shift);
   a hand-drawn ring spins where the words fade to a whisper.
   ============================================================ */

.site-btn.is-loading {
  pointer-events: none;
  cursor: progress;
  color: transparent !important;               /* label keeps its width, loses its voice */
}

.site-btn.is-loading::before {
  opacity: 0;                                  /* ghost underline stays quiet */
}

.site-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15em;
  height: 1.15em;
  margin: -0.575em 0 0 -0.575em;
  border: 2px solid currentColor;
  border-color: var(--site-color-accent) var(--site-color-accent) var(--site-color-accent) transparent;
  border-radius: 55% 45% 52% 48%;              /* even the spinner is hand-painted */
  animation: site-btn-brush-spin 850ms linear infinite;
}

.site-btn--primary.is-loading::after {
  border-color: var(--site-color-on-accent, var(--site-color-bg)) var(--site-color-on-accent, var(--site-color-bg)) var(--site-color-on-accent, var(--site-color-bg)) transparent;
}

@keyframes site-btn-brush-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   MOTION COURTESY — the craft stays, the choreography rests.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .site-btn,
  .site-btn::before {
    transition: none;
  }
  .site-btn:hover,
  .site-btn:active {
    transform: none;
  }
  .site-btn.is-loading::after {
    animation-duration: 1600ms;
  }
}

/* ============================================================
   HEADER-UTILITIES LANGUAGE TOGGLE — suppressed.
   ------------------------------------------------------------
   SiteHeader's flag pair owns language switching in the bar, and
   the drawer carries the SDK <LanguageSwitcher>; once languages
   went live, HeaderUtilities began rendering its OWN "EN ⌄"
   toggle in both places — a duplicate control. Companion rule to
   SiteHeader.vue's chrome (this primitives sheet is the bundled
   global stylesheet these two container-scoped rules ride in).
   !important: the utilities component's scoped rule ties on
   specificity and would win on source order otherwise.
   ============================================================ */

.th-hdr .pop-hdr-utils__lang,
.th-drawer__foot .pop-hdr-utils__lang {
  display: none !important;
}

/* ============================================================
   Townhouse Cartagena — form_controls · Variant 3
   "BOLD EDITORIAL — Signage, not utility"
   ------------------------------------------------------------
   The convention flips: fields are dark espresso vessels set on
   the light sheet — intimate, enclosing, gallery-wall confident.
   Cream ink lives INSIDE the dark; amber does the talking:
   oversized Karla-caps labels above, a 2px amber stroke on
   focus that lands like a painted frame. Errors stay warm —
   terracotta-red, candlelit, never alarming.
   Public API (LAW): .site-field, .site-field__label,
   .site-field__input, .site-field__help, .site-field__error,
   .site-field--error, .site-choice
   ============================================================ */

.site-field {
  /* ---- component-scoped structure (brand vars only for colour/type) ---- */
  --site-well: var(--site-color-on-accent, #FBF4E8);    /* light vessel fill       */
  --site-color-fg: #333333;                             /* dark grey ink, legible  */
  --site-ink-dim: rgba(51, 51, 51, 0.58);               /* placeholder wash        */
  --site-ink-faint: rgba(51, 51, 51, 0.22);             /* inner hairlines         */
  --site-stroke: transparent;                           /* resting: fill IS edge   */
  --site-stroke-w: 2px;
  --site-radius: var(--radius-sm, 8px);
  --site-pad-x: var(--site-4, 20px);
  --site-pad-y: 14px;
  --site-ring: 0 0 0 4px rgba(206, 114, 49, 0.22);      /* amber halo, focus       */
  --site-lift: 0 10px 26px -14px rgba(43, 27, 16, 0.45);/* the vessel sits proud   */
  --site-error-hue: #B23A2B;                            /* warm terracotta-red     */
  --site-error-glow: rgba(178, 58, 43, 0.20);
  --site-speed: var(--site-motion-duration, var(--site-duration, 320ms));
  --site-ease: var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)));

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--site-2, 8px);
  margin: 0 0 var(--site-5, 32px);
  font-family: var(--site-font-body);
  text-align: left;
}

.site-field:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   LABEL — the signage. Oversized Karla caps in amber, sitting
   above the vessel like a plaque beside a hung canvas.
   ------------------------------------------------------------ */
.site-field__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--site-2, 8px);
  font-family: var(--site-font-body);
  font-size: 0.8125rem;                 /* 13px — oversized for a label   */
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--site-tracking-caps, 0.14em);
  color: var(--site-color-accent-deep, var(--site-color-accent));
  transition: color var(--site-speed) var(--site-ease);
}

/* painted tick before the label — the curator's mark */
.site-field__label::before {
  content: "";
  align-self: center;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--site-color-accent);
  transform: rotate(-2deg);             /* the pinned-print habit          */
  transition: width var(--site-speed) var(--site-ease),
              background-color var(--site-speed) var(--site-ease);
}

/* label warms wider when its field takes focus */
.site-field:focus-within .site-field__label::before {
  width: 24px;
}

/* ------------------------------------------------------------
   THE VESSEL — input, select, textarea all wear it.
   Dark espresso fill, cream ink, generous optical padding.
   ------------------------------------------------------------ */
.site-field__input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: var(--site-pad-y) var(--site-pad-x);
  font-family: var(--site-font-body);
  font-size: 1.0625rem;                 /* 17px — confident, legible      */
  font-weight: var(--site-body-weight, 400);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--site-color-fg);
  background-color: var(--site-well);
  border: var(--site-stroke-w) solid var(--site-stroke);
  border-radius: var(--site-radius);
  box-shadow: var(--site-lift);
  caret-color: var(--site-color-accent);
  outline: none;
  transition: border-color var(--site-speed) var(--site-ease),
              box-shadow var(--site-speed) var(--site-ease),
              background-color var(--site-speed) var(--site-ease),
              transform var(--site-speed) var(--site-ease);
}

.site-field__input::placeholder {
  color: var(--site-ink-dim);
  font-style: italic;                   /* the Romantic murmur inside      */
  opacity: 1;
}

.site-field__input::selection {
  background: var(--site-color-accent);
  color: var(--site-color-fg);
}

/* hover — the vessel leans in */
.site-field__input:hover:not(:disabled):not(:focus-visible) {
  border-color: rgba(206, 114, 49, 0.45);
}

/* FOCUS RITUAL — the amber frame snaps on, halo blooms,
   the whole vessel lifts a breath off the page */
.site-field__input:focus-visible {
  border-color: var(--site-color-accent);
  box-shadow: var(--site-ring), var(--site-lift);
  transform: translateY(-1px);
}

/* filled state — quiet confirmation: cream ink at full strength,
   a faint amber underscore memory on the edge */
.site-field__input:not(:placeholder-shown):not(:focus-visible):not(:disabled) {
  border-color: rgba(206, 114, 49, 0.28);
}

/* autofill — keep the dark room dark */
.site-field__input:-webkit-autofill,
.site-field__input:-webkit-autofill:hover,
.site-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--site-color-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--site-well) inset, var(--site-lift);
  caret-color: var(--site-color-accent);
  transition: background-color 9999s ease-out;
}

/* disabled — the light dims, nothing shouts */
.site-field__input:disabled {
  background-color: rgba(43, 27, 16, 0.08);
  color: rgba(51, 51, 51, 0.48);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

.site-field__input:disabled::placeholder {
  color: rgba(51, 51, 51, 0.34);
}

.site-field:has(.site-field__input:disabled) .site-field__label {
  color: var(--site-color-fg-soft, rgba(43, 27, 16, 0.68));
}

.site-field:has(.site-field__input:disabled) .site-field__label::before {
  background: var(--site-color-border);
}

/* ------------------------------------------------------------
   SELECT — same vessel, cream chevron etched in the corner
   ------------------------------------------------------------ */
select.site-field__input {
  padding-right: calc(var(--site-pad-x) + 32px);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.5 1.5L7 7L12.5 1.5' stroke='%23CE7231' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--site-pad-x) center;
  background-size: 14px 9px;
}

select.site-field__input:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.5 1.5L7 7L12.5 1.5' stroke='%23FBF4E8' stroke-opacity='0.35' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* dropdown panel text (where the platform allows) */
select.site-field__input option {
  background-color: var(--site-well);
  color: var(--site-color-fg);
  font-family: var(--site-font-body);
}

/* select shows "filled" via required/invalid heuristics being
   unreliable — rely on the same resting treatment instead */
select.site-field__input:not(:focus-visible):not(:disabled) {
  border-color: rgba(206, 114, 49, 0.28);
}

select.site-field__input:focus-visible {
  border-color: var(--site-color-accent);
}

/* ------------------------------------------------------------
   TEXTAREA — a taller room; same walls
   ------------------------------------------------------------ */
textarea.site-field__input {
  min-height: 132px;
  padding-top: calc(var(--site-pad-y) + 2px);
  resize: vertical;
  line-height: var(--site-leading-body, 1.6);
}

/* ------------------------------------------------------------
   HELP + ERROR — the wall text beneath the piece
   ------------------------------------------------------------ */
.site-field__help {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--site-color-fg-soft, rgba(43, 27, 16, 0.68));
}

.site-field__error {
  display: none;
  margin: 0;
  font-family: var(--site-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--site-error-hue);
}

/* small painted dash before the error — same mark, warmer voice */
.site-field__error::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 3px;
  margin-right: var(--site-2, 8px);
  border-radius: 2px;
  background: var(--site-error-hue);
  transform: rotate(-2deg) translateY(-1px);
}

/* ------------------------------------------------------------
   ERROR ROW STATE — warm terracotta, never a siren
   ------------------------------------------------------------ */
.site-field--error .site-field__label {
  color: var(--site-error-hue);
}

.site-field--error .site-field__label::before {
  background: var(--site-error-hue);
}

.site-field--error .site-field__input {
  border-color: var(--site-error-hue);
  box-shadow: 0 0 0 4px var(--site-error-glow), var(--site-lift);
}

.site-field--error .site-field__input:focus-visible {
  border-color: var(--site-error-hue);
  box-shadow: 0 0 0 4px var(--site-error-glow), var(--site-lift);
  transform: translateY(-1px);
}

.site-field--error .site-field__input::placeholder {
  color: rgba(178, 58, 43, 0.62);
}

.site-field--error .site-field__error {
  display: block;
  animation: site-field-error-in var(--site-speed) var(--site-ease) both;
}

.site-field--error .site-field__help {
  display: none;                        /* the error speaks; help yields  */
}

@keyframes site-field-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   CHOICE ROW — checkbox / radio.
   Dark lacquered tokens on the light sheet; amber wax fills
   them when chosen. Label text in body ink, roomy hit area.
   ------------------------------------------------------------ */
.site-choice {
  --site-error-hue: #B23A2B;
  --site-speed: var(--site-motion-duration, var(--site-duration, 320ms));
  --site-ease: var(--site-motion-ease, var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)));

  display: flex;
  align-items: flex-start;
  gap: var(--site-3, 12px);
  margin: 0 0 var(--site-3, 12px);
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--site-color-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-choice:last-child {
  margin-bottom: 0;
}

.site-choice input[type="checkbox"],
.site-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;                      /* optical alignment to first line */
  background-color: var(--site-color-fg);
  border: 2px solid var(--site-color-fg);
  box-shadow: 0 4px 12px -6px rgba(43, 27, 16, 0.5);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color var(--site-speed) var(--site-ease),
              border-color var(--site-speed) var(--site-ease),
              box-shadow var(--site-speed) var(--site-ease),
              transform calc(var(--site-speed) / 2) var(--site-ease);
}

.site-choice input[type="checkbox"] {
  border-radius: 6px;
}

.site-choice input[type="radio"] {
  border-radius: 50%;
}

/* the mark waits inside, unlit */
.site-choice input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 9px;
  transform: scale(0) rotate(-4deg);
  transform-origin: center;
  background-color: var(--site-color-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5L4.4 8L11 1' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5L4.4 8L11 1' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--site-speed) var(--site-ease);
}

.site-choice input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--site-color-fg);
  transform: scale(0);
  transition: transform var(--site-speed) var(--site-ease);
}

/* hover — a hint of amber at the rim */
.site-choice:hover input[type="checkbox"]:not(:disabled),
.site-choice:hover input[type="radio"]:not(:disabled) {
  border-color: var(--site-color-accent);
}

/* CHOSEN — amber wax seal pressed into the dark token */
.site-choice input[type="checkbox"]:checked,
.site-choice input[type="radio"]:checked {
  background-color: var(--site-color-accent);
  border-color: var(--site-color-accent);
  box-shadow: 0 6px 14px -6px rgba(206, 114, 49, 0.55);
}

.site-choice input[type="checkbox"]:checked::before {
  transform: scale(1) rotate(-4deg);
}

.site-choice input[type="radio"]:checked::before {
  transform: scale(1);
}

/* pressed — physical give */
.site-choice input[type="checkbox"]:active:not(:disabled),
.site-choice input[type="radio"]:active:not(:disabled) {
  transform: scale(0.92);
}

/* focus ritual — same amber halo the vessels wear */
.site-choice input[type="checkbox"]:focus-visible,
.site-choice input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--site-color-accent);
  box-shadow: 0 0 0 4px rgba(206, 114, 49, 0.22),
              0 4px 12px -6px rgba(43, 27, 16, 0.5);
}

/* disabled choice — dimmed lacquer */
.site-choice input[type="checkbox"]:disabled,
.site-choice input[type="radio"]:disabled {
  background-color: rgba(43, 27, 16, 0.30);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}

.site-choice:has(input:disabled) {
  color: var(--site-color-fg-soft, rgba(43, 27, 16, 0.68));
  cursor: not-allowed;
}

/* error state carried onto a choice row */
.site-field--error .site-choice input[type="checkbox"]:not(:checked),
.site-field--error .site-choice input[type="radio"]:not(:checked) {
  border-color: var(--site-error-hue);
  background-color: var(--site-color-fg);
}

/* ------------------------------------------------------------
   RHYTHM — consecutive fields breathe on the spacing scale;
   a cluster of choices tucks tighter under its field label
   ------------------------------------------------------------ */
.site-field + .site-field {
  margin-top: 0;                        /* margin-bottom owns the rhythm  */
}

.site-field > .site-choice:first-of-type {
  margin-top: var(--site-1, 4px);
}

/* ------------------------------------------------------------
   REDUCED MOTION — the frames still land, instantly
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-field__input,
  .site-field__label,
  .site-field__label::before,
  .site-field__error,
  .site-choice input[type="checkbox"],
  .site-choice input[type="radio"],
  .site-choice input[type="checkbox"]::before,
  .site-choice input[type="radio"]::before {
    transition: none;
    animation: none;
  }

  .site-field__input:focus-visible {
    transform: none;
  }
}


/* theme skin */
/* ============================================================
   Townhouse Cartagena — Concierge Skin · Variant 1
   "Painted Intimacy"
   ------------------------------------------------------------
   Ground: glowing plaster cream (#FBF4E8) — not the ledger sand
   of v2, not the espresso dark of v3. The full warmth of the
   brand's own ivory, as if the panel were pressed from the wall
   of a colonial courtyard, sun still in it.

   Accent: the brand's amber brushstroke (#CE7231) leads the
   entire widget — the FAB IS the amber mark, the only colour
   voice. No borders to speak of: the edge is dissolved, the
   depth whispered by a warm shadow that reads as sun on plaster.

   Typography: Fraunces carries the intimate closing phrases
   (timestamps, concierge sign-offs, the "Always here" register);
   Karla runs every spoken line — open, warm, conversational.

   Geometry: the FAB is a full-pill, a rounded amber thumbprint
   pressing into the corner, hand-painted and certain. The panel
   wears gently asymmetric corners — drawn, not measured —
   evoking the soft spine of a folio letter rather than a clipped
   UI card. This is the Tastemaker reading the brand at her most
   sensual and editorial: wide breathing room, gesture over grid.

   Structural contract with v2 / v3:
     v1  cream ground · dissolved border · amber 50% pill · drawn panel (20/22px)
     v2  sand ground · tan hairline · deep-amber 50% circle · 4px ledger card
     v3  espresso ground · amber glow border · notched circle · 24/22px banquette
   ============================================================ */

.cl {

  /* ----------------------------------------------------------
     PALETTE — cream sheet, espresso ink, amber brushstroke
  ---------------------------------------------------------- */

  /* The page-ground cream: plaster ivory, the warmest neutral
     in the brand. Neither white nor beige — specifically THIS. */
  --site-color-bg:        #FBF4E8;

  /* Espresso ink: the hand that writes on the cream sheet. */
  --site-color-fg:        #2B1B10;

  /* Brand amber: the only colour. Every interactive cue,
     the FAB fill, the bubble accent — this one stroke. */
  --site-color-accent:    #CE7231;

  /* Cream on amber: the surface echo — type pressed back
     into the ground when the amber stroke carries it. */
  --site-color-on-accent: #FBF4E8;

  /* Border dissolved — warmth is shadow, not line.
     The edge is a penumbra, not a rule. */
  --site-color-border:    transparent;

  /* ----------------------------------------------------------
     TYPOGRAPHY — editorial serif + warm conversational sans
  ---------------------------------------------------------- */

  /* Fraunces: the concierge's signing hand — used for
     timestamps, section closings, the intimate register
     ("Let us know", "Always here for you"). */
  --site-font-display: "Fraunces", "Georgia", serif;

  /* Karla: every exchanged line, the input field, the
     quick reply chips — open, unhurried, never stiff. */
  --site-font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  /* ----------------------------------------------------------
     CONCIERGE LAUNCHER — the amber thumbprint
     A full pill: no notch, no flattening. The amber at its
     most direct — a gesture, not an icon. Cream type floats
     inside like handwritten initials on a wax seal.
  ---------------------------------------------------------- */

  --concierge-fab-bg:     #CE7231;   /* amber fill — the brushstroke itself    */
  --concierge-fab-fg:     #FBF4E8;   /* cream glyph — initials on the mark     */
  --concierge-fab-radius: 50%;       /* full pill — warm, rounded, unhurried   */

  /* ----------------------------------------------------------
     CHAT PANEL — the folio corner
     Generous asymmetric radius: drawn, not measured. Each
     corner varies by 2px — the soft spine of a folded letter,
     not the precision of a UI component. Breathing room over
     density; the panel is a surface you linger on.
  ---------------------------------------------------------- */

  --concierge-panel-radius: 20px 22px 20px 22px;   /* hand-formed, folio-soft */

}


/* chrome components */

/* The panel deliberately styles itself from `--site-*` tokens ONLY, so it
 * picks up each theme's palette + type without the theme writing any CSS.
 * Themes that want more control restyle via the class hooks above. */
.sdk-navgrp[data-v-1cbbee91] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.sdk-navgrp__trigger[data-v-1cbbee91] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* A caret drawn in CSS — no icon font, no SVG asset to ship. */
.sdk-navgrp__caret[data-v-1cbbee91] {
  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-navgrp--open .sdk-navgrp__caret[data-v-1cbbee91] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
/* The link-trigger already carries a caret; this separate hit target exists
 * for touch + keyboard. On hover-capable pointers the panel opens on hover,
 * so it's redundant there — but it stays focusable for keyboard users. */
.sdk-navgrp__caret-btn[data-v-1cbbee91] {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  /* Touch: the trigger's own caret is decorative — this button is the opener. */
.sdk-navgrp__caret-btn[data-v-1cbbee91] { display: inline-flex;
}
.sdk-navgrp__trigger > .sdk-navgrp__caret[data-v-1cbbee91] { display: none;
}
}
.sdk-navgrp__caret-btn[data-v-1cbbee91]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.sdk-navgrp__panel[data-v-1cbbee91] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;              /* above the concierge bubble (998–999) */
  min-width: max(180px, 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-navgrp__panel[hidden][data-v-1cbbee91] { display: none;
}
.sdk-navgrp__item[data-v-1cbbee91] { margin: 0;
}
.sdk-navgrp__link[data-v-1cbbee91] {
  display: block;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-navgrp__link[data-v-1cbbee91]:hover,
.sdk-navgrp__link[data-v-1cbbee91]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-navgrp__caret[data-v-1cbbee91] { transition: none;
}
}


.sdk-navacc__row[data-v-448a3764] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.sdk-navacc__caret[data-v-448a3764] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-navacc--open .sdk-navacc__caret[data-v-448a3764] { transform: rotate(-135deg);
}
.sdk-navacc__list[data-v-448a3764] {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.sdk-navacc__list[hidden][data-v-448a3764] { display: none;
}
.sdk-navacc__link[data-v-448a3764] {
  display: block;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  /* A child sits UNDER its parent in the hierarchy — say so typographically
   * rather than making it look like another top-level destination. */
  font-size: 0.9em;
  opacity: 0.85;
}
.sdk-navacc__link[data-v-448a3764]:hover,
.sdk-navacc__link[data-v-448a3764]:focus-visible { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sdk-navacc__caret[data-v-448a3764] { transition: none;
}
}


.sdk-cta[data-v-9df4945d] {
  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-9df4945d] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-9df4945d] {
  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-9df4945d] {
  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-9df4945d] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-9df4945d] {
  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-9df4945d] { display: none;
}
.sdk-cta__item[data-v-9df4945d] { margin: 0;
}
.sdk-cta__link[data-v-9df4945d] {
  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-9df4945d]:hover,
.sdk-cta__link[data-v-9df4945d]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-9df4945d] { 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-ddad464d] {
  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-ddad464d] {
  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-ddad464d]::placeholder { color: inherit; opacity: 0.5;
}
.currency-panel__search[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: 1px;
}
.currency-panel__group + .currency-panel__group[data-v-ddad464d] { margin-top: 0.5rem;
}
.currency-panel__group-label[data-v-ddad464d] {
  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-ddad464d] { list-style: none; margin: 0; padding: 0;
}
.currency-panel__option-btn[data-v-ddad464d] {
  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-ddad464d]:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.currency-panel__option-btn[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: -2px;
}
.currency-panel__option-flag[data-v-ddad464d] { 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-ddad464d] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-panel__option-code[data-v-ddad464d] {
  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-ddad464d] { flex: 0 0 auto; opacity: 0.75;
}
.currency-panel__option--active .currency-panel__option-btn[data-v-ddad464d] { font-weight: 600;
}
.currency-panel__empty[data-v-ddad464d] {
  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-5e6a62a1] {
  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-5e6a62a1] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-5e6a62a1] {
  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-5e6a62a1] {
  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-5e6a62a1] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-5e6a62a1] {
  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-5e6a62a1] { display: none;
}
.sdk-cta__item[data-v-5e6a62a1] { margin: 0;
}
.sdk-cta__link[data-v-5e6a62a1] {
  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-5e6a62a1]:hover,
.sdk-cta__link[data-v-5e6a62a1]: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-5e6a62a1] {
  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-5e6a62a1] { 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;
}


/* =====================================================================
   Tuning surface (law H6). A consumer may set any of these on the element
   it gives the class to; none of them re-hue a locked brand role.
   ===================================================================== */
.site-sound[data-v-c47d7e18] {
  --snd-ink:     var(--site-color-fg, #1a1815);
  --snd-paper:   var(--site-color-bg, #fbf9f5);
  --snd-hairline: color-mix(in srgb, var(--snd-ink) 14%, transparent);
  --snd-h:       38px;
  --snd-radius:  999px;
  --snd-dock-lift: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--snd-ink);
  font-family: var(--site-font-body, inherit);
}

/* ── Floating shell ──────────────────────────────────────────────────
   A hairline plate on frosted paper, not a drop-shadowed bubble. The
   shadow is a single soft lift so it reads as a physical chip over a
   photograph without shouting. */
.site-sound--float[data-v-c47d7e18] {
  position: fixed;
  z-index: 900;
  padding: 3px;
  border-radius: var(--snd-radius);
  background: color-mix(in srgb, var(--snd-paper) 82%, transparent);
  border: 1px solid var(--snd-hairline);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
}

/* Corners. Bottom placements add the measured dock lift, so the control
   sits ABOVE the concierge instead of under it (law E4). */
.site-sound--at-top-right[data-v-c47d7e18]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-c47d7e18] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-c47d7e18]  { bottom: calc(14px + var(--snd-dock-lift)); left:  max(14px, env(safe-area-inset-left));
}

/* Panels open UPWARD from a bottom-anchored control. */
.site-sound--at-bottom-right .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left  .site-sound__panel[data-v-c47d7e18] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left .site-sound__panel[data-v-c47d7e18] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-c47d7e18] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--snd-h);
  padding: 0 0.7rem 0 0.6rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.site-sound__btn[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 0; flex: none;
  opacity: 0.9;
}

/* ── The word ────────────────────────────────────────────────────────
   Small caps with wide tracking — the idiom hotel chrome already uses for
   nav and eyebrows, so the control reads as part of the design rather than
   a bolted-on widget. */
.site-sound__label[data-v-c47d7e18] {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.2; text-align: left;
}
.site-sound__label-main[data-v-c47d7e18] {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--site-tracking-ui, 0.14em);
  white-space: nowrap;
}
.site-sound__label-sub[data-v-c47d7e18] {
  margin-top: 1px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: var(--site-tracking-body, normal);
  opacity: 0.6;
  max-width: 17ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-sound__sr[data-v-c47d7e18] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Player card ─────────────────────────────────────────────────── */
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-c47d7e18] {
  flex: none; width: 38px; height: 38px; border-radius: 7px;
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px var(--snd-hairline);
}
.site-sound__cue[data-v-c47d7e18] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-c47d7e18] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-c47d7e18] { min-width: var(--snd-h); padding: 0; justify-content: center; gap: 0;
}

/* In the header: no chrome of its own — inherit the bar. */
.site-sound--header[data-v-c47d7e18] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-c47d7e18] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-c47d7e18] { font-size: 0.62rem;
}

/* ── Level meter ─────────────────────────────────────────────────────
   Four bars, visible at rest (law H4) — the animation is enhancement, never
   the only way to read the state. */
.site-sound__eq[data-v-c47d7e18] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-c47d7e18] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: site-sound-eq-c47d7e18 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-c47d7e18 {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: none; height: 60%;
}
.site-sound--float[data-v-c47d7e18] { transition: none;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 4px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  opacity: 0.4;
}
.site-sound__more[data-v-c47d7e18]:hover { opacity: 0.9;
}
.site-sound__more[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-c47d7e18] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  min-width: 215px; padding: 0.7rem 0.8rem;
  background: var(--snd-paper);
  color: var(--snd-ink);
  border: 1px solid var(--snd-hairline);
  border-radius: 12px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.site-sound__track[data-v-c47d7e18] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-c47d7e18] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-c47d7e18] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-c47d7e18] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer; opacity: 0.65;
}
.site-sound__next[data-v-c47d7e18]:hover { opacity: 1;
}


/* ── Mobile ─────────────────────────────────────────────────────────
   A 38px cover plus two lines is most of a phone's width, so the card
   sheds its artwork and subtitle and becomes a labelled pill. Tap targets
   clear 44px whatever the layout. */
@media (max-width: 640px) {
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-top-left[data-v-c47d7e18] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-bottom-right[data-v-c47d7e18] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18],  .site-sound--at-bottom-left[data-v-c47d7e18]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-c47d7e18],
  .site-sound__label-sub[data-v-c47d7e18] { display: none;
}
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-c47d7e18] { min-height: 44px;
}
}


.pop-hdr-utils[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-d000ae81] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.pop-hdr-utils__btn[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-d000ae81] {
  /* Icon-only by default; themes can reveal labels via a wrapping class. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.pop-hdr-utils__lang[data-v-d000ae81] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 0.55rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-d000ae81] {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 8rem;
  background: var(--site-surface, #fff);
  color: var(--site-ink, #111);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 1200;
}
.pop-hdr-utils__lang-item[data-v-d000ae81] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 0.4rem;
}
.pop-hdr-utils__lang-item[data-v-d000ae81]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-d000ae81] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-d000ae81], .pop-hdr-utils__lang-toggle[data-v-d000ae81] { transition: none;
}
}


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


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-03bbd189] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-03bbd189] {
  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-03bbd189] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-03bbd189] {
  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-03bbd189] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-03bbd189] {
  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-03bbd189] {
  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-03bbd189] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-03bbd189],
.lang-switcher-fade-leave-active[data-v-03bbd189] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-03bbd189],
.lang-switcher-fade-leave-to[data-v-03bbd189] {
  opacity: 0;
  transform: translateY(0.25rem);
}


/* ==================================================================
   1 · the booking strip — the source's transactional anchor, a ~40px
   dark bar; its content sits on the ~1200px sheet like the source's
   ================================================================== */
.th-util[data-v-1821ac94] { background: #3D3D3D; color: #FFFFFF; margin: 0;
}
.th-util__in[data-v-1821ac94] {
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  min-height: 40px;
  padding: 4px var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4, 20px);
  flex-wrap: wrap;
}
.th-util__promise[data-v-1821ac94] {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.th-util__fields[data-v-1821ac94] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.th-util__field[data-v-1821ac94] {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--site-font-body);
  font-size: 12px;
  color: #FFFFFF;
}
.th-util__field input[data-v-1821ac94] {
  appearance: none;
  border: 0;
  border-radius: 2px;
  padding: 4px 6px;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--site-font-body);
  font-size: 12px;
  line-height: 1.2;
}
.th-util__field input[data-v-1821ac94]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--site-color-accent);
}
.th-util__search[data-v-1821ac94] {
  appearance: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  min-height: 26px;
  padding: 4px 22px;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--site-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-util__search[data-v-1821ac94]:hover,
.th-util__search[data-v-1821ac94]:focus-visible {
  background: var(--site-color-accent);
  color: #FFFFFF;
  outline: none;
}

/* ==================================================================
   2 · the house bar — strip 40 + bar 122 = the source's 162px header.
   ONE COMPOSED LINE, centred: max-content width, small zone gaps
   (the source packs its zones 13–31px apart), no flex-grow spreading.
   It grows past 1200px when it must and never wraps.
   ================================================================== */
.th-hdr[data-v-1821ac94] {
  /* in flow, not sticky — the source's header scrolls away with the page */
  position: relative;
  z-index: 1000; /* nav panels must clear the concierge (998–999) */
  background: var(--site-color-bg);
}
.th-hdr__bar[data-v-1821ac94] {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  min-height: clamp(80px, 8.5vw, 122px);
  padding: var(--site-space-2, 8px) clamp(14px, 1.6vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 27px);
  min-width: 0;
}
.th-hdr__social[data-v-1821ac94] { flex: 0 0 auto; order: -2;
}
.th-hdr__social[data-v-1821ac94] a,
.th-hdr__social[data-v-1821ac94] button { color: var(--site-color-fg);
}

/* the social marks — grey profile icons, WhatsApp in its own green,
   HAND-SCATTERED like the source pins them: measured y-offsets of
   −7 / +2 / 0 px and gaps of 14 then 8 px, repeating per slot so a
   fourth icon starts the same loose rhythm again */
.th-hdr__soc[data-v-1821ac94] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  order: -1;
  flex: 0 0 auto;
}
.th-hdr__soc li + li[data-v-1821ac94] { margin-left: 8px;
}
.th-hdr__soc li[data-v-1821ac94]:nth-child(3n + 1) { transform: translateY(-7px);
}
.th-hdr__soc li[data-v-1821ac94]:nth-child(3n + 2) { transform: translateY(2px); margin-left: 14px;
}
.th-hdr__soc li[data-v-1821ac94]:first-child { margin-left: 0;
}
.th-hdr__soc-btn[data-v-1821ac94] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #9A9A9A;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__soc-btn--whatsapp[data-v-1821ac94] { color: #2CB742;
}
.th-hdr__soc-btn[data-v-1821ac94]:hover,
.th-hdr__soc-btn[data-v-1821ac94]:focus-visible { color: var(--site-color-accent); outline: none;
}
.th-hdr__soc-btn[data-v-1821ac94]:focus-visible {
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}
.th-hdr__soc-btn[data-v-1821ac94] svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}
.th-hdr__brand[data-v-1821ac94] {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--site-color-fg);
}
.th-hdr__logo[data-v-1821ac94] {
  display: block;
  height: clamp(52px, 5vw, 71px);
  width: auto;
  max-width: min(36vw, 140px);
  object-fit: contain;
  object-position: left center;
}
.th-hdr__wordmark[data-v-1821ac94] {
  font-family: var(--site-font-ui);
  font-size: 1.15rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.th-hdr__brand[data-v-1821ac94]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 4px;
}
.th-hdr__nav[data-v-1821ac94] { flex: 0 1 auto; min-width: 0;
}
.th-hdr__list[data-v-1821ac94] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* the line never breaks — the burger takes over below */
  gap: clamp(12px, 2vw, 29px);
  min-width: 0;
}
.th-hdr__item[data-v-1821ac94] { flex: 0 0 auto;
}

/* The source sets the bar in CAPS. Its own labels are written that way
   in the content; ours come from amenity RECORDS, which are Title Case
   ("Rooftop", "Lobby Bar"), so the caps have to be applied here or the
   bar reads a full weight lighter than the original. */
.th-hdr[data-v-1821ac94] .th-nav-link,
.th-hdr .th-nav-link[data-v-1821ac94] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 14px 1px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr[data-v-1821ac94] .th-nav-link:hover,
.th-hdr .th-nav-link[data-v-1821ac94]:hover,
.th-hdr[data-v-1821ac94] .th-nav-link[aria-expanded="true"],
.th-hdr[data-v-1821ac94] .th-nav-link.router-link-active,
.th-hdr .th-nav-link.router-link-active[data-v-1821ac94],
.th-hdr[data-v-1821ac94] .th-nav-link[aria-current="page"],
.th-hdr .th-nav-link[aria-current="page"][data-v-1821ac94] { color: var(--site-color-accent);
}
.th-hdr[data-v-1821ac94] .th-nav-link:focus-visible,
.th-hdr .th-nav-link[data-v-1821ac94]:focus-visible {
  outline: none;
  color: var(--site-color-accent);
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 4px;
}

/* the SDK's dropdown caret renders as a stray vertical bar in the hand
   font — the source's EAT & DRINK / MORE carry no indicator at all */
.th-hdr[data-v-1821ac94] .sdk-navgrp__caret { display: none;
}

/* the source's dropdown has NO card at all — just the hand-lettered
   entries floating below the trigger on the white sheet */
.th-hdr[data-v-1821ac94] .sdk-navgrp__panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0 0;
  min-width: 0;
}
.th-hdr[data-v-1821ac94] .sdk-navgrp__panel a {
  display: block;
  padding: 5px 8px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr[data-v-1821ac94] .sdk-navgrp__panel a:hover,
.th-hdr[data-v-1821ac94] .sdk-navgrp__panel a:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* ---- the instant-book cluster ---- */
.th-instant[data-v-1821ac94] { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto;
}
.th-instant__label[data-v-1821ac94] {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--site-color-fg);
  white-space: nowrap;
}
.th-instant__row[data-v-1821ac94] { display: flex; align-items: center; gap: 6px;
}
.th-instant[data-v-1821ac94] .th-plaque { text-transform: uppercase;
}

/* ---- the two round flags, closing the line (source: 20×20, 23px
   apart, just right of the plaques) ---- */
.th-hdr__flags[data-v-1821ac94] {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: 0 0 auto;
  margin-left: -8px; /* source: only ~13px from the plaques */
}
.th-hdr__flag[data-v-1821ac94] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 3px;
  line-height: 0;
  opacity: 0.6;
  transition: opacity var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__flag--current[data-v-1821ac94] { opacity: 1; cursor: default;
}
.th-hdr__flag[data-v-1821ac94]:hover,
.th-hdr__flag[data-v-1821ac94]:focus-visible { opacity: 1; outline: none;
}
.th-hdr__flag[data-v-1821ac94]:focus-visible {
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 50%;
}
.th-hdr__flag-img[data-v-1821ac94] {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.th-hdr__flag-code[data-v-1821ac94] {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  text-transform: uppercase;
  color: var(--site-color-fg);
}

/* the extra-tongues dropdown — only mounts from the third language on */
.th-hdr__flags-more[data-v-1821ac94] { position: relative;
}
.th-hdr__flags-toggle[data-v-1821ac94] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
  color: var(--site-color-fg);
  display: inline-flex;
  align-items: center;
}
.th-hdr__flags-toggle[data-v-1821ac94]:hover,
.th-hdr__flags-toggle[data-v-1821ac94]:focus-visible { color: var(--site-color-accent); outline: none;
}
.th-hdr__flags-panel[data-v-1821ac94] {
  list-style: none;
  margin: 6px 0 0;
  padding: var(--site-space-2, 8px);
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  background: var(--site-color-bg);
  border: 2px solid var(--site-color-fg);
  border-radius: 12px 10px 13px 11px; /* drawn, not ruled */
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
  min-width: 150px;
}
.th-hdr__flags-item[data-v-1821ac94] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  text-transform: uppercase;
  color: var(--site-color-fg);
  transition:
    color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease),
    background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__flags-item[data-v-1821ac94]:hover,
.th-hdr__flags-item[data-v-1821ac94]:focus-visible {
  color: var(--site-color-accent);
  background: var(--site-color-muted);
  outline: none;
}
.th-hdr__burger[data-v-1821ac94] {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 9px;
  color: var(--site-color-fg);
}
.th-hdr__burger[data-v-1821ac94]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}

/* the whole line only fits above ~1240px once seven places are named */
@media (max-width: 1240px) {
.th-hdr__bar[data-v-1821ac94] { width: auto;
}
.th-hdr__nav[data-v-1821ac94],
  .th-hdr__social[data-v-1821ac94],
  .th-hdr__flags[data-v-1821ac94],
  .th-instant__label[data-v-1821ac94] { display: none;
}
  /* the Instagram / WhatsApp marks STAY in the bar on small screens */
.th-instant[data-v-1821ac94] { margin-left: auto;
}
.th-hdr__burger[data-v-1821ac94] { display: inline-flex;
}
}
@media (max-width: 760px) {
.th-instant__row .th-plaque[data-v-1821ac94] { min-width: 68px; padding-inline: 12px;
}
}
@media (max-width: 620px) {
.th-hdr__logo[data-v-1821ac94] { height: 44px; max-width: 17vw;
}
  /* the phone bar carries icons + logo + both plaques + the burger:
     tighten every zone so nothing wraps or clips at 390px */
.th-hdr__bar[data-v-1821ac94] { gap: 8px; padding-inline: 10px;
}
.th-hdr__soc li + li[data-v-1821ac94] { margin-left: 4px;
}
.th-hdr__soc li[data-v-1821ac94]:nth-child(3n + 2) { margin-left: 8px;
}
.th-hdr__soc-btn[data-v-1821ac94] { width: 24px; height: 24px;
}
.th-hdr__soc-btn[data-v-1821ac94] svg { width: 20px; height: 20px;
}
.th-util__in[data-v-1821ac94] { justify-content: center; text-align: center; padding-block: 8px; row-gap: 6px;
}
.th-util__promise[data-v-1821ac94] { width: 100%; font-size: 12px;
}
  /* one tidy grid instead of a ragged three-row wrap */
.th-util__fields[data-v-1821ac94] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
}
.th-util__field[data-v-1821ac94] { justify-content: space-between; gap: 5px; font-size: 11px; white-space: nowrap;
}
.th-util__field input[data-v-1821ac94] { width: 106px; min-width: 0; min-height: 26px;
}
.th-util__search[data-v-1821ac94] { grid-column: 1 / -1; justify-self: center; min-width: 170px; min-height: 30px;
}
}

/* ==================================================================
   Drawer
   ================================================================== */
.th-overlay[data-v-1821ac94] { position: fixed; inset: 0; z-index: 1200;
}
.th-overlay__backdrop[data-v-1821ac94] {
  position: absolute;
  inset: 0;
  background: var(--site-color-ink-wash, rgba(0, 0, 0, 0.55));
  cursor: pointer;
}
.th-drawer[data-v-1821ac94] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 88%);
  display: flex;
  flex-direction: column;
  background: var(--site-color-bg);
  border-left: 2px solid var(--site-color-fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.th-drawer__top[data-v-1821ac94] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3, 12px);
  padding: var(--site-space-4, 20px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  border-bottom: 2px solid var(--site-color-fg);
}
.th-drawer__brand[data-v-1821ac94] {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: var(--site-color-fg);
}
.th-drawer__logo[data-v-1821ac94] { display: block; height: 46px; width: auto; max-width: 55vw; object-fit: contain;
}
.th-drawer__wordmark[data-v-1821ac94] {
  font-family: var(--site-font-ui);
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-drawer__x[data-v-1821ac94] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: var(--site-color-fg);
}
.th-drawer__x[data-v-1821ac94]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}
.th-drawer__nav[data-v-1821ac94] {
  flex: 1 1 auto;
  padding: var(--site-space-5, 32px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
}
.th-drawer__list[data-v-1821ac94] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2, 8px);
}
.th-drawer__item[data-v-1821ac94] {
  border-bottom: 1px solid var(--site-color-border);
  padding-bottom: var(--site-space-2, 8px);
}
.th-drawer__item[data-v-1821ac94]:last-child { border-bottom: 0;
}
.th-drawer[data-v-1821ac94] .th-drawer__link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-family: var(--site-font-ui);
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-drawer[data-v-1821ac94] .th-drawer__link:hover,
.th-drawer[data-v-1821ac94] .th-drawer__link:focus-visible,
.th-drawer[data-v-1821ac94] .th-drawer__link.router-link-active,
.th-drawer[data-v-1821ac94] .th-drawer__link[aria-current="page"] {
  color: var(--site-color-accent);
  outline: none;
}
.th-drawer__nav[data-v-1821ac94] a { text-decoration: none; color: inherit;
}
.th-drawer__nav[data-v-1821ac94] a:not(.th-drawer__link) {
  display: block;
  padding: 7px 0 7px var(--site-space-4, 20px);
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  color: var(--site-color-fg-muted);
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-drawer__nav[data-v-1821ac94] a:not(.th-drawer__link):hover,
.th-drawer__nav[data-v-1821ac94] a:not(.th-drawer__link):focus-visible {
  color: var(--site-color-accent);
  outline: none;
}
.th-drawer__foot[data-v-1821ac94] {
  padding: var(--site-space-4, 20px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem)) var(--site-space-5, 32px);
  border-top: 2px solid var(--site-color-fg);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-3, 12px);
}
.th-drawer__lang[data-v-1821ac94] select {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  border: 1px solid var(--site-color-fg);
  border-radius: 7px 5px 8px 6px;
  padding: 6px 8px;
  background: var(--site-color-bg);
  color: var(--site-color-fg);
}
.thdrawer-enter-active[data-v-1821ac94],
.thdrawer-leave-active[data-v-1821ac94] { transition: opacity var(--site-motion-duration, 320ms) var(--site-motion-ease, ease);
}
.thdrawer-enter-active .th-drawer[data-v-1821ac94],
.thdrawer-leave-active .th-drawer[data-v-1821ac94] {
  transition: transform var(--site-motion-duration-slow, 520ms) var(--site-motion-ease-out, ease-out);
}
.thdrawer-enter-from[data-v-1821ac94],
.thdrawer-leave-to[data-v-1821ac94] { opacity: 0;
}
.thdrawer-enter-from .th-drawer[data-v-1821ac94],
.thdrawer-leave-to .th-drawer[data-v-1821ac94] { transform: translateX(102%);
}
@media (prefers-reduced-motion: reduce) {
.th-hdr[data-v-1821ac94] .th-nav-link,
  .th-hdr .th-nav-link[data-v-1821ac94],
  .th-hdr__soc-btn[data-v-1821ac94],
  .th-hdr__flag[data-v-1821ac94],
  .th-drawer[data-v-1821ac94] .th-drawer__link,
  .th-util__search[data-v-1821ac94],
  .thdrawer-enter-active[data-v-1821ac94],
  .thdrawer-leave-active[data-v-1821ac94],
  .thdrawer-enter-active .th-drawer[data-v-1821ac94],
  .thdrawer-leave-active .th-drawer[data-v-1821ac94] { transition: none;
}
}


/* =====================================================================
   THE THEME LAYER — Townhouse Cartagena
   ---------------------------------------------------------------------
   WHY THIS LIVES IN THE HEADER, AND NOT IN tokens.css
   ---------------------------------------------------------------------
   tokens.css is a BUILD ARTIFACT. It is recomposed from the design
   graph on every build ("composed: design-graph tokens") and hand edits
   to it — or to tokens/palette.css, tokens/type.css, brand.css — are
   discarded. Verified three times: the emitted bundle kept the old
   Fraunces/Karla/#CE7231 values and produced a byte-identical CSS hash
   after each write. Only .vue files and primitives/*.css reach the
   bundle.

   So the theme lands here, in the one component that is global chrome,
   always mounted on every route, and already owns a documented
   non-scoped global write (--site-header-h, at the end of this block).

   This is a WORKAROUND, not the resting place. When the design graph
   can be updated for this hotel, move the three sections below into it
   verbatim and delete them from here.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · THE FONT BRIDGE
   Five hand-lettered faces that are NOT Google fonts, plus the body
   workhorse. The SDK's font pipeline emits a Google URL for any brand
   face it does not recognise; that resolves to nothing and falls back
   to system-ui, silently. The hand faces are the hotel's own uploads;
   the body face is the hotel's licensed Helvetica WORLD webfont
   (helvetica-w01) — NOT the system's Helvetica Neue, which is visibly
   narrower and re-wraps every measure on the page. All are served with
   `access-control-allow-origin: *`.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "TH Marker";
  src: url("https://static.wixstatic.com/ufonts/7025d5_650e1257ccfd4b909e828fa605ac5fcd/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/7025d5_650e1257ccfd4b909e828fa605ac5fcd/woff/file.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "TH Hand";
  src: url("https://static.wixstatic.com/ufonts/b2babf_ebf0c578cede41149f523f8e31066f7c/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_ebf0c578cede41149f523f8e31066f7c/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Head";
  src: url("https://static.wixstatic.com/ufonts/b2babf_0de8441de97d4364880d4bf769d1fedf/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_0de8441de97d4364880d4bf769d1fedf/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Quote";
  src: url("https://static.wixstatic.com/ufonts/b2babf_e7f6b929462949eba3e71e4507cd4ceb/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_e7f6b929462949eba3e71e4507cd4ceb/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Chalk";
  src: url("https://static.wixstatic.com/ufonts/b2babf_923327a896da41408224304c10d8f84a/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_923327a896da41408224304c10d8f84a/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/8eac109b-0fa9-42bf-a305-43e471e23779/v1/helvetica-w01-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/2af1bf48-e783-4da8-9fa0-599dde29f2d5/v1/helvetica-w01-roman.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/2f12de04-5ca4-4ada-9e66-a958673b12b5/v1/helvetica-w01-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2 · TOKENS
   !important throughout: the graph-composed tokens.css also writes
   :root, so specificity ties and source order would otherwise decide.
   --------------------------------------------------------------------- */
:root {
  --site-color-bg:              #FFFFFF !important;
  --site-color-bg-subtle:       #FFFFFF !important;
  --site-color-surface:         #FFFFFF !important;
  --site-color-surface-raised:  #FFFFFF !important;
  --site-color-surface-sunken:  #F6F5F5 !important;
  --site-color-surface-inverse: #000000 !important;

  --site-color-fg:              #000000 !important;
  --site-color-ink:             #000000 !important;
  --site-color-ink-strong:      #000000 !important;
  --site-color-fg-secondary:    #2E2E2E !important;
  --site-color-fg-muted:        #555555 !important;
  --site-color-fg-soft:         #555555 !important;
  --site-color-fg-faint:        #8A8A8A !important;
  --site-color-fg-inverse:      #FFFFFF !important;
  --site-color-fg-inverse-soft: #FFFFFF !important;

  --site-color-primary:         #000000 !important;
  --site-color-primary-hover:   #000000 !important;
  --site-color-primary-active:  #000000 !important;
  --site-color-primary-fg:      #FFFFFF !important;
  --site-color-primary-tint:    #F6F5F5 !important;

  --site-color-accent:          #DC992F !important;
  --site-color-accent-hover:    #C4841F !important;
  --site-color-accent-active:   #A76D14 !important;
  --site-color-accent-fg:       #FFFFFF !important;
  --site-color-accent-tint:     #FBF0DE !important;
  --site-color-accent-deep:     #8A5A0F !important;
  --site-color-on-accent:       #FFFFFF !important;

  --site-color-paint-amber:     #E9A03A;
  --site-color-paint-green:     #4E8C5B;
  --site-color-paint-forest:    #2F6B3C;
  --site-color-paint-pink:      #F23D8F;
  --site-color-paint-taupe:     #9A8F80;

  --site-color-muted:           #F6F5F5 !important;
  --site-color-muted-fg:        #555555 !important;
  --site-color-muted-hover:     #EDEDED !important;

  --site-color-border:          #E2E2E2 !important;
  --site-color-border-subtle:   #F0F0F0 !important;
  --site-color-border-strong:   #000000 !important;
  --site-color-border-accent:   #DC992F !important;
  --site-color-border-inverse:  #3A3A3A !important;

  --site-color-link:            #000000 !important;
  --site-color-link-hover:      #DC992F !important;
  --site-color-focus-ring:      #DC992F !important;
  --site-color-selection-bg:    #FBF0DE !important;
  --site-color-selection-fg:    #000000 !important;

  --site-color-overlay:         rgba(0, 0, 0, 0.5) !important;
  --site-color-overlay-strong:  rgba(0, 0, 0, 0.78) !important;
  --site-color-ink-wash:        rgba(0, 0, 0, 0.55) !important;
  --site-color-shadow:          rgba(0, 0, 0, 0.10) !important;
  --site-color-shadow-strong:   rgba(0, 0, 0, 0.24) !important;

  --site-color-header-bg:       #FFFFFF !important;
  --site-color-header-fg:       #000000 !important;
  --site-color-footer-bg:       #FFFFFF !important;
  --site-color-footer-fg:       #000000 !important;
  --site-color-footer-muted:    #555555 !important;
  --site-color-card-bg:         #FFFFFF !important;
  /* measured off the source's room cards: a dusty lavender rule */
  --site-color-card-border:     #CABDCD !important;
  --site-color-input-bg:        #FFFFFF !important;
  --site-color-input-border:    #CFCFCF !important;
  --site-color-input-fg:        #000000 !important;

  --site-font-display: "TH Marker", "Trebuchet MS", sans-serif !important;
  --site-font-hand:    "TH Head", "Comic Sans MS", cursive !important;
  --site-font-ui:      "TH Hand", "Trebuchet MS", sans-serif !important;
  --site-font-quote:   "TH Quote", "Comic Sans MS", cursive !important;
  --site-font-chalk:   "TH Chalk", "Comic Sans MS", cursive !important;
  --site-font-body:    "TH Body", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --site-font-accent:  "TH Head", "Comic Sans MS", cursive !important;

  --site-font-display-weight: 700 !important;
  --site-font-display-weight-soft: 400 !important;
  --site-font-display-settings: normal !important;
  --site-font-subhead-settings: normal !important;
  --site-font-body-weight: 400 !important;
  --site-font-body-settings: normal !important;
  --site-font-accent-style: normal !important;
  --site-font-accent-settings: normal !important;
  --site-font-ui-weight: 400 !important;
  --site-display-weight: 700 !important;
  --site-body-weight: 400 !important;

  --site-type-xs:   0.625rem !important;
  --site-type-sm:   0.75rem !important;
  --site-type-base: 0.875rem !important;
  --site-type-md:   1rem !important;
  --site-type-lg:   1.25rem !important;
  --site-type-xl:   1.375rem !important;
  --site-type-2xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2rem) !important;
  --site-type-3xl:  clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem) !important;
  --site-type-hero: clamp(2.2rem, 1.4rem + 3.6vw, 3.5rem) !important;

  /* leading measured off the source: body copy is 14px on 1.3 (home)
     to 1.4 (interior); nothing ever opens to 1.7. The loose value here
     was several hundred px of page drift on every interior view. */
  --site-leading-display: 1.35 !important;
  --site-leading-heading: 1.35 !important;
  --site-leading-body:    1.4 !important;
  --site-leading-lead:    1.4 !important;
  --site-leading-meta:    1.4 !important;

  --site-tracking-display: 0.2em !important;
  --site-tracking-body:    0.01em !important;
  --site-tracking-caps:    0.09em !important;

  --site-measure-body: 46ch !important;
  --site-measure-lead: 52ch !important;

  --site-rule-heavy: 2px solid #000000 !important;
  --site-divider-glyph: "" !important;
  --site-dropcap-size: 1em !important;

  --site-space-section: clamp(64px, 6vw + 32px, 104px) !important;
  --site-max-width: 1200px !important;

  --tilt-1: -1.5deg;
  --tilt-2: 2deg;

  --site-motion-duration-hover: 200ms !important;
  --site-motion-duration: 320ms !important;
  --site-motion-duration-slow: 520ms !important;
  --site-motion-duration-reveal: 700ms !important;
  --site-motion-stagger: 70ms !important;
  --site-motion-reveal-distance: 18px !important;
  --site-motion-reveal-blur: 0px !important;

  /* the painted bands — the house's real chroma */
  --th-band-hero:   url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRXG18EEGARE5FK0RYGC.png");
  --th-band-green:  url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSC1GWBN3RMPZ8N43PYK.png");
  --th-band-amber:  url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSG17F5TGM69X1A4GST7.png");
  --th-band-green2: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJ7H5GGK2ZT8EFMGS8S.png");
  --th-band-black:  url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJD6MGNQS2ABYMXSVJV.png");
  --th-band-wash:   url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRHVTGCWPX7230V83ET3.jpg");
  --th-band-amber2: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSCSZCGYY1XD5PJVQQE0.png");
  --th-band-taupe:  url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJ2E6886TNBT6HVCPKC.png");
  --th-band-amber3: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJKXRH4EEJXX2544XY7.png");
  --th-band-pink:   url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJRFSPW3APZF8XTSDAZ.png");

  --th-mark-wordmark: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3QW8DX1GPQ6D5P6VEG835.png");
  --th-mark-bird:     url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SP940QV76M5GT0CQBVXE.png");
  --th-mark-plaque:   url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SP1JCW667Y4ZBE6JJF2R.png");

  /* the hand-drawn photo frames — overlaid on photographs so no image
     ever reads as a bare rectangle (the source's signature habit) */
  --th-frame-thick: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZFNPHCREXA8301GR0AQYPX6.png");
  --th-frame-thin:  url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KY19GM8XCJDYE95AKVD8HJQ4.png");

  /* The app-shell reserve is zeroed from script (see zeroShellReserve in
     this component), not declared here: a static rule would apply on every
     route whether or not this header is mounted. */
}

/* ---------------------------------------------------------------------
   3 · THE PAINTED BAND UTILITY + THE PLAQUE + THE FRAMED PHOTO
   --------------------------------------------------------------------- */
.th-band {
  --th-band-inset: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.th-band__in {
  position: relative;
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--th-band-inset);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.th-band--hero   { background-image: var(--th-band-hero);
}
.th-band--green  { background-image: var(--th-band-green);
}
.th-band--amber  { background-image: var(--th-band-amber);
}
.th-band--green2 { background-image: var(--th-band-green2);
}
.th-band--black  { background-image: var(--th-band-black);
}
.th-band--wash   { background-image: var(--th-band-wash);
}
.th-band--amber2 { background-image: var(--th-band-amber2);
}
.th-band--taupe  { background-image: var(--th-band-taupe);
}
.th-band--amber3 { background-image: var(--th-band-amber3);
}
.th-band--pink   { background-image: var(--th-band-pink);
}
.th-band--green .th-band__in,
.th-band--green2 .th-band__in,
.th-band--black .th-band__in,
.th-band--wash .th-band__in { color: #FFFFFF;
}
@media (max-width: 700px) {
.th-band {
    --th-band-inset: clamp(1.25rem, 5vw, 2rem);
    /* not `cover`, and past 100%: the brush artwork carries wide transparent
       margins, so at phone widths we crop them off — otherwise the opaque
       paint is narrower than the text and white copy reads white-on-white */
    background-size: 145% 118%;
}
}

/* the painted plaque — a real watercolour swatch from the hotel's own
   library, with the hand lettering sitting on top of it */
.th-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 44px;
  padding: 10px 18px;
  background-image: var(--th-mark-plaque);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  line-height: 1;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--site-motion-duration-hover, 200ms) var(--site-motion-ease-hover, ease-out);
}

/* the source paints one plaque green and one amber. Same swatch, turned
   — so the brush texture and torn edge survive the colour change. */
.th-plaque--green { filter: hue-rotate(75deg) saturate(0.85);
}
.th-plaque:hover,
.th-plaque:focus-visible { transform: rotate(-1.5deg) scale(1.03); outline: none;
}
.th-plaque:focus-visible {
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--site-color-accent);
}
.th-plaque--wide { width: 100%; min-height: 52px;
}

/* the source's inline CTA — measured: 12px WHITE hand caps riding a
   flat amber fill (RESERVE TABLE, BOOK NOW, MENUS HERE, EMAIL THEM) */
.th-caps-link {
  display: inline-block;
  padding: 8px 22px;
  background: var(--site-color-accent);
  border: 0;
  border-radius: 3px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-accent-fg, #FFFFFF);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-caps-link:hover,
.th-caps-link:focus-visible {
  background: var(--site-color-accent-hover);
  color: var(--site-color-accent-fg, #FFFFFF);
  outline: none;
}

/* the framed photograph — the frame drawing stretched over the photo,
   so no photograph ever reads as a bare rectangle */
.th-framed {
  position: relative;
  display: block;
  overflow: hidden;
}

/* absolutely positioned so a portrait photograph can never stretch the
   frame's aspect-ratio box — an aspect-ratio box is only *preferred*,
   and in-flow replaced content grows it (the Lobby Bar hub card
   rendered 430×637 before this) */
.th-framed > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the frame's ragged edge must cover the photo's crop line */
  padding: 3.4%;
  box-sizing: border-box;
}
.th-framed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--th-frame-thick);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.th-framed--thin::after { background-image: var(--th-frame-thin);
}

/* Members Only's masthead lettering is AMBER on the black ground —
   measured off the source (rgb 220,153,47). A theme-layer decision so
   both grounds keep one title rule in the page component. */
.th-am--dark .th-am__title,
.th-am--dark .th-am__mast-lede { color: var(--site-color-accent);
}
@media (prefers-reduced-motion: reduce) {
.th-plaque,
  .th-caps-link { transition: none;
}
.th-plaque:hover { transform: none;
}
}


/* ==================================================================
   The source footer, measured off its own mesh CSS at 1440:
   38px of sheet above the 187×72 script logo, 16px to the first
   register; registers 8px/1.4 uglydave caps, groups separated by one
   blank 11px row; two legal words; then the two 21px social marks in
   25px boxes with no gap, 44px of quiet to the page end (the grey
   Cloudbeds strip that follows on the source is deliberately NOT
   cloned). The whole axis sits 13px left of the column centre on the
   source — kept via the translate, dropped on phones.
   ================================================================== */
.thf[data-v-b0eb6b29] {
  background: #fff;
  color: #000;
}
.thf__in[data-v-b0eb6b29] {
  max-width: 680px;
  margin-inline: auto;
  padding: 38px var(--site-gutter, clamp(1.25rem, 4vw, 3rem)) 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  transform: translateX(-13px);
  /* hotelier request 2026-08-16: everything in the footer 10% larger
     than the source. zoom scales the whole composition — logo, type,
     gaps, icons — in one stroke, keeping the source's proportions. */
  zoom: 1.1;
}
.thf__brand[data-v-b0eb6b29] {
  display: inline-block;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
}

/* the one-line script mark — 187×72 on the source */
.thf__logo[data-v-b0eb6b29] {
  display: block;
  width: clamp(150px, 14vw, 187px);
  height: auto;
}
.thf__brand[data-v-b0eb6b29]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}

/* the registers — the source sets these at 8px/1.4, uglydave caps */
.thf__line[data-v-b0eb6b29] {
  margin: 0;
  font-family: uglydave, var(--site-font-ui) !important;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}

/* one blank 8px paragraph on the source = one empty ~11px row */
.thf__gap[data-v-b0eb6b29] {
  display: block;
  height: 11px;
}
.thf__gap--half[data-v-b0eb6b29] {
  height: 5px;
}
.thf__link[data-v-b0eb6b29] {
  color: inherit;
  text-decoration: none;
}
.thf__link[data-v-b0eb6b29]:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* SMALL PRINT / POLÍTICAS — plain hand-lettered words in the flow;
   the button chrome disappears entirely into the register above */
.thf__legal-btn[data-v-b0eb6b29] {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  font: inherit;
  font-family: inherit !important;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.thf__legal-btn[data-v-b0eb6b29]:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* the two marks — the source's own PNGs, 21px in 25px boxes, no gap */
.thf__social[data-v-b0eb6b29] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}
.thf__social-btn[data-v-b0eb6b29] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}
.thf__social-btn img[data-v-b0eb6b29] {
  display: block;
  width: 21px;
  height: 21px;
}
.thf__social-btn[data-v-b0eb6b29]:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
  outline: none;
}

/* ==================================================================
   legal modal
   ================================================================== */
.thfm[data-v-b0eb6b29] {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  background: var(--site-color-overlay-strong, rgba(0, 0, 0, 0.78));
}
.thfm__panel[data-v-b0eb6b29] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 660px;
  max-height: min(84vh, 46rem);
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border: 2px solid var(--site-color-fg);
  border-radius: 18px 14px 20px 16px; /* drawn, not ruled */
  overflow: hidden;
}
.thfm__head[data-v-b0eb6b29] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4, 20px);
  padding: var(--site-space-5, 32px) var(--site-space-5, 32px) var(--site-space-3, 12px);
}
.thfm__title[data-v-b0eb6b29] {
  margin: 0;
  font-family: var(--site-font-hand);
  font-size: var(--site-type-lg, 1.25rem);
  line-height: 1.3;
  color: var(--site-color-accent);
}
.thfm__close[data-v-b0eb6b29],
.thfm__tab[data-v-b0eb6b29] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  color: var(--site-color-fg);
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.thfm__close[data-v-b0eb6b29]:hover,
.thfm__close[data-v-b0eb6b29]:focus-visible,
.thfm__tab[data-v-b0eb6b29]:hover,
.thfm__tab[data-v-b0eb6b29]:focus-visible { color: var(--site-color-accent); outline: none;
}
.thfm__tabs[data-v-b0eb6b29] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-1, 4px);
  padding: 0 var(--site-space-5, 32px) var(--site-space-3, 12px);
  border-bottom: 1px solid var(--site-color-border);
}
.thfm__tab--active[data-v-b0eb6b29] { color: var(--site-color-accent);
}
.thfm__body[data-v-b0eb6b29] {
  min-height: 0;
  overflow-y: auto;
  padding: var(--site-space-4, 20px) var(--site-space-5, 32px) var(--site-space-5, 32px);
  white-space: pre-wrap; /* the hotelier's own paragraph breaks are kept */
  font-family: var(--site-font-body);
  font-size: var(--site-type-base, 0.875rem);
  line-height: var(--site-leading-body, 1.4);
  color: var(--site-color-fg-secondary);
}
.thfm-enter-active[data-v-b0eb6b29],
.thfm-leave-active[data-v-b0eb6b29] { transition: opacity var(--site-motion-duration, 320ms) var(--site-motion-ease, ease);
}
.thfm-enter-from[data-v-b0eb6b29],
.thfm-leave-to[data-v-b0eb6b29] { opacity: 0;
}
@media (max-width: 640px) {
.thfm__head[data-v-b0eb6b29],
  .thfm__tabs[data-v-b0eb6b29],
  .thfm__body[data-v-b0eb6b29] { padding-inline: var(--site-space-4, 20px);
}
}

/* the 8px registers are the source's whisper at 1440 — on a phone they are
   simply illegible and the links untappable, so scale them up there only */
@media (max-width: 700px) {
.thf__in[data-v-b0eb6b29] { transform: none;
}
.thf__line[data-v-b0eb6b29] { font-size: 11px; line-height: 1.6;
}
.thf__gap[data-v-b0eb6b29] { height: 14px;
}
.thf__link[data-v-b0eb6b29] { display: inline-block; padding: 5px 2px;
}
.thf__legal-btn[data-v-b0eb6b29] { padding: 2px 4px;
}
.thf__social[data-v-b0eb6b29] { gap: 12px;
}
.thf__social-btn[data-v-b0eb6b29] { width: 44px; height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.thfm-enter-active[data-v-b0eb6b29],
  .thfm-leave-active[data-v-b0eb6b29] { transition: none;
}
}


/* 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-607a7acc] {
  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-607a7acc] {
  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-607a7acc] { min-width: 0;
}
.fx__group--text[data-v-607a7acc] { flex: 1 1 100%;
}
.fx__heading[data-v-607a7acc] {
  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-607a7acc] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-607a7acc] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-607a7acc]:hover, .fx__link[data-v-607a7acc]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-607a7acc] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-607a7acc] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-607a7acc] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-607a7acc] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-607a7acc] { gap: 1.5rem;
}
.fx__group[data-v-607a7acc] { 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-566a4cc8] {
  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-566a4cc8] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}


/* brand record */
@font-face { font-family: "spinnaker"; src: url("/cdn/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SNRWF9YNMQNX7WPQSD5P.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --site-color-fg: #000000;
  --site-color-accent: #dc992f;
  --site-color-bg: #ffffff;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(255 255 255);
  --site-color-fg-muted: #666666;
  --a11y-focus: #c4882a;
  --site-color-site-1: #555555;
  --site-color-site-2: #0000ee;
  --site-color-site-3: #888888;
  --site-color-site-4: #116dff;
  --site-color-site-5: #444444;
  --site-color-accent-weight: 12;
  --site-color-bg-weight: 59;
  --site-color-fg-weight: 4;
  --site-color-site-1-weight: 5;
  --site-color-site-2-weight: 5;
  --site-color-site-3-weight: 5;
  --site-color-site-4-weight: 5;
  --site-color-site-5-weight: 5;
  --site-font-display: "wfont_b2babf_ebf0c578cede41149f523f8e31066f7c", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "spinnaker", system-ui, -apple-system, "Segoe UI", sans-serif;
}