/* ================================================================
   MANDEVILLA STAYS — Lodgify Global CSS
   Version : 3.9
   Updated : 2026-05-31
   ----------------------------------------------------------------
   VERIFY DEPLOYMENT: open browser DevTools → Network tab,
   find ms-global.css, check Response Headers for Last-Modified.
   Or search this file for "Version :" to confirm the number above.
   ================================================================
   WHERE TO PASTE:
     Lodgify → Website → Settings → Custom CSS

   CRITICAL SETUP — read before pasting:
   1. In Lodgify's page editor, set EVERY ms-* HTML block to
      "Full Width" layout. This is what makes alignment work.
   2. The counter JS lives in ms-global.js — paste that into
      Lodgify → Website → Settings → Custom Scripts (footer).
   3. Re-upload your logo via Lodgify → Branding → Logo.

   WHAT'S NEW IN v3.0  (vs v2.0):
   - Trust Badges Row        (.ms-badges-row / .ms-badge-item)
   - Page Hero               (.ms-page-hero)
   - Reviews Grid            (.ms-reviews-grid / .ms-review-card)
   - Image + Copy Two-Col    (.ms-image-copy / .ms-img-frame)
   - Sage Accent modifier    (.ms-sage-accent)
   - Sage buttons            (.ms-btn--sage / .ms-btn--outline-sage)
   - Light section bullet list (now has its own explicit rules)
   - Light CTA band support
   ================================================================ */


/* ── 1. FONTS ────────────────────────────────────────────────── */
/* @import does NOT reliably work in Lodgify Custom CSS.
   Load fonts via Lodgify → Settings → Custom Scripts → HEADER instead:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,400;9..144,0,500;9..144,1,300;9..144,1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
*/


/* ── 2. PAGE BACKGROUND ──────────────────────────────────────── */
body {
  background-color: #F7F1E8; /* --ms-cream */
}


/* ── 3. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --ms-cream:      #F7F1E8;
  --ms-cream-2:    #EFE6D6;
  --ms-ink:        #2B2722;
  --ms-ink-2:      #5A5147;
  --ms-ink-3:      #8A8278;
  --ms-terra:      #B8553A;
  --ms-terra-2:    #9A4530;
  --ms-sage:       #7B8B6F;
  --ms-gold:       #C89B5A;
  --ms-line:       rgba(43,39,34,.12);
  --ms-line-light: rgba(247,241,232,.18);
  --ms-shadow:     0 30px 60px -30px rgba(43,39,34,.35);
  --ms-shadow-sm:  0 12px 28px -18px rgba(43,39,34,.45);
  --ms-serif:      'Fraunces', Georgia, serif;
  --ms-sans:       'Inter', system-ui, sans-serif;
  --ms-radius:     6px;
  --ms-radius-lg:  16px;

  /* THE SINGLE SOURCE OF TRUTH for content width.
     Matches Lodgify's outer container so all sections align. */
  --ms-container: 1120px;

  /* Horizontal guard rail when viewport is narrow */
  --ms-gutter: 24px;

  /* Vertical rhythm */
  --ms-pad-y: 96px;
}


/* ── 3. BASE RESETS (scoped to MS elements) ──────────────────── */
.ms-dark-section *,
.ms-light-section * {
  box-sizing: border-box;
}
.ms-dark-section img,
.ms-light-section img {
  display: block;
  max-width: 100%;
}


/* ================================================================
   4. ALIGNMENT SYSTEM
   ================================================================
   Every MS block is set to "Full Width" in Lodgify.
   The .ms-inner wrapper centres content at --ms-container wide,
   which matches Lodgify's own standard page container (1120px).
   ================================================================ */

/* ── Widget gap fix ───────────────────────────────────────────────
   Lodgify injects a <div class="large no-line"> separator (2px,
   17.5px margins) between every widget row, and wraps each widget
   in a container (.css-jv51of) with 14px padding. Together these
   create ~65px of gap between sections. We hide the separator and
   apply -14px margins to cancel the wrapper padding.
   If the gap ever changes size, update the two margin values below. */
.large.no-line {
  display: none !important;
}

.ms-dark-section,
.ms-light-section,
.ms-sage-section,
.ms-terra-section {
  /* Full-bleed breakout — escapes Lodgify's content container */
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  display: block;
  padding-left:  0 !important;
  padding-right: 0 !important;
  /* Keep negative margins as fallback for any wrapper padding */
  margin-top:    -14px;
  margin-bottom: -14px;
}

/* ── REMOVE LODGIFY WIDGET WRAPPER GAPS ────────────────────────
   Lodgify wraps each HTML widget in a div[id^="sect"] with
   14px top/bottom padding, creating visible gaps between sections.
   [id^="sect"] is stable across deploys; the css-XXXXX class is not.
   :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+).
   ─────────────────────────────────────────────────────────────── */
[id^="sect"]:has([class*="ms-"]) {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

/* ── FIXED NAV OFFSET ───────────────────────────────────────────
   position:fixed removes the header from document flow, so content
   starts at top:0 (hidden behind the nav).

   Home page uses .variant-transparent → hero intentionally goes
   behind the nav, no offset needed.

   All other pages use .variant-default → content must be pushed
   down by the nav height (64px) so nothing is hidden.

   body:has() is supported in all modern browsers.
   ─────────────────────────────────────────────────────────────── */
body:has(header[data-testid="header"].variant-default) {
  padding-top: 64px !important;
}

/* Property pages: no padding-top — hero goes full-bleed behind the transparent nav,
   same as the homepage. The nav overlays the dark hero naturally. */

/* ── FOOTER GAP FIX ─────────────────────────────────────────────
   Lodgify's footer has padding-top: 42px by default, creating a
   visible cream gap between the last HTML section and the footer.
   Reduced to 20px — enough internal breathing room without the gap.
   ─────────────────────────────────────────────────────────────── */
footer {
  padding-top: 20px !important;
  margin-top:  0    !important;
}

/* Standard inner wrapper — use inside EVERY section block */
.ms-inner {
  width: min(var(--ms-container), calc(100% - var(--ms-gutter) * 2));
  margin-left:  auto;
  margin-right: auto;
  padding-top:    var(--ms-pad-y);
  padding-bottom: var(--ms-pad-y);
}

/* Narrow variant for intros & pull-quotes */
.ms-inner--narrow {
  width: min(var(--ms-container), calc(100% - var(--ms-gutter) * 2));
  margin-left:  auto;
  margin-right: auto;
  padding-top:    var(--ms-pad-y);
  padding-bottom: var(--ms-pad-y);
  text-align: center;
}
.ms-inner--narrow .ms-text-cap {
  max-width: 760px;
  margin-left:  auto;
  margin-right: auto;
}

/* Compact vertical padding for CTA bands and badge rows */
.ms-inner--compact {
  padding-top:    64px;
  padding-bottom: 64px;
}


/* ================================================================
   5. DARK SECTIONS  (.ms-dark-section)
   ================================================================ */

.ms-dark-section {
  background: var(--ms-ink);
  color: var(--ms-cream);
}

/* Eyebrow on dark */
.ms-dark-section .ms-eyebrow {
  color: var(--ms-gold);
}
.ms-dark-section .ms-eyebrow::before {
  background: var(--ms-gold);
}

/* Headings & body on dark — !important to override Lodgify's theme colour cascade */
.ms-dark-section h2,
.ms-dark-section h3 {
  color: var(--ms-cream) !important;
}
.ms-dark-section em {
  color: var(--ms-gold) !important;
}
.ms-dark-section p {
  color: rgba(247,241,232,.78) !important;
}
.ms-dark-section a:not(.ms-btn) {
  color: var(--ms-gold);
  text-decoration: underline;
}

/* ── Two-column layout ────────────────────────────────────────── */
.ms-dark-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
}

/* ── Single-col centred ───────────────────────────────────────── */
.ms-dark-inner--single {
  display: block;
  text-align: center;
  max-width: 760px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── CTA band (less vertical padding) ────────────────────────── */
.ms-dark-section.ms-cta-band .ms-inner {
  padding-top:    64px;
  padding-bottom: 64px;
  text-align:     center;
}

/* ── Bullet list on dark ──────────────────────────────────────── */
.ms-dark-section .ms-bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}
.ms-dark-section .ms-bullet-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: rgba(247,241,232,.85);
  line-height: 1.5;
}
.ms-dark-section .ms-bullet-list li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-gold);
  margin-top: 9px;
}


/* ================================================================
   6. LIGHT SECTIONS  (.ms-light-section)
   ================================================================ */

.ms-light-section {
  background: var(--ms-cream);
  color: var(--ms-ink);
}

/* Cream-2 variant */
.ms-light-section.ms-cream-2 {
  background: var(--ms-cream-2);
}

/* Eyebrow, headings, copy on light */
.ms-light-section .ms-eyebrow {
  color: var(--ms-terra);
}
.ms-light-section .ms-eyebrow::before {
  background: var(--ms-terra);
}
.ms-light-section h2,
.ms-light-section h3 {
  color: var(--ms-ink) !important;
}
.ms-light-section em {
  color: var(--ms-terra) !important;
}
.ms-light-section p {
  color: var(--ms-ink-2) !important;
}

/* ── Two-col layout ───────────────────────────────────────────── */
.ms-light-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Force ms-light-inner to container width (fixes Corporate Retreats alignment) */
.ms-light-inner {
  width: min(var(--ms-container), calc(100% - var(--ms-gutter) * 2)) !important;
  max-width: var(--ms-container) !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ── Bullet list on light ─────────────────────────────────────── */
.ms-light-section .ms-bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}
.ms-light-section .ms-bullet-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ms-ink-2);
  line-height: 1.5;
}
.ms-light-section .ms-bullet-list li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-terra);
  margin-top: 9px;
}

/* ── CTA band on light ────────────────────────────────────────── */
.ms-light-section.ms-cta-band .ms-inner,
.ms-light-section.ms-cta-band .ms-inner--compact {
  text-align: center;
}


/* ================================================================
   7. SHARED TYPOGRAPHY
   ================================================================ */

.ms-dark-section h1,
.ms-dark-section h2,
.ms-dark-section h3,
.ms-light-section h1,
.ms-light-section h2,
.ms-light-section h3 {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: .2em 0;
}
.ms-dark-section h1,
.ms-light-section h1 {
  font-size: clamp(38px, 5vw, 64px);
  letter-spacing: -.02em;
}
.ms-dark-section h1  { color: var(--ms-cream) !important; }
.ms-light-section h1 { color: var(--ms-ink)   !important; }
.ms-dark-section h1 em  { color: var(--ms-gold)  !important; font-style: italic; }
.ms-light-section h1 em { color: var(--ms-terra) !important; font-style: italic; }
.ms-dark-section h2,
.ms-light-section h2 {
  font-size: clamp(30px, 3.6vw, 46px);
}
.ms-dark-section h3,
.ms-light-section h3 {
  font-size: clamp(26px, 3vw, 38px);
}
.ms-dark-section p,
.ms-light-section p {
  font-family: var(--ms-sans) !important;
  font-size: 17px;
  line-height: 1.55;
  max-width: 60ch;
}
.ms-dark-section em,
.ms-light-section em {
  font-style: italic;
}

/* ── Eyebrow ──────────────────────────────────────────────────── */
.ms-eyebrow {
  display: inline-block;
  font-family: var(--ms-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ms-eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
}


/* ================================================================
   8. BUTTONS
   ================================================================ */

.ms-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--ms-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.ms-btn:hover {
  transform: translateY(-1px);
}

/* Solid — Terra/Red */
.ms-btn--terra {
  background: var(--ms-terra);
  color: #fff;
  border-color: var(--ms-terra);
}
.ms-btn--terra:hover {
  background: var(--ms-terra-2);
  border-color: var(--ms-terra-2);
}

/* Solid — Gold */
.ms-btn--gold {
  background: var(--ms-gold);
  color: var(--ms-ink);
  border-color: var(--ms-gold);
}
.ms-btn--gold:hover {
  background: #b6884a;
  border-color: #b6884a;
}

/* Solid — Sage */
.ms-btn--sage {
  background: var(--ms-sage);
  color: #fff;
  border-color: var(--ms-sage);
}
.ms-btn--sage:hover {
  background: #677a5c;
  border-color: #677a5c;
}

/* Ghost (for dark backgrounds) */
.ms-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.65);
}
.ms-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

/* Outline — Ink */
.ms-btn--outline {
  background: transparent;
  color: var(--ms-ink);
  border-color: var(--ms-ink);
}
.ms-btn--outline:hover {
  background: var(--ms-ink);
  color: #fff;
}

/* Outline — Sage */
.ms-btn--outline-sage {
  background: transparent;
  color: var(--ms-sage);
  border-color: var(--ms-sage);
}
.ms-btn--outline-sage:hover {
  background: var(--ms-sage);
  color: #fff;
}

/* Size modifier */
.ms-btn--lg {
  padding: 16px 32px;
  font-size: 15px;
}

/* CTA row wrapper */
.ms-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
  align-items: center;
}


/* ================================================================
   9. STATS PANEL  (2x2 grid, dark two-col right panel)
   ================================================================ */

.ms-stats-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 40px;
  border: 1px solid var(--ms-line-light);
  border-radius: var(--ms-radius);
  background: rgba(255,255,255,.03);
}
/* Lodgify converts <b> → <strong>; target both. !important beats theme cascade. */
.ms-stats-panel .ms-stat b,
.ms-stats-panel .ms-stat strong {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(32px, 3.2vw, 48px) !important;
  color: var(--ms-cream) !important;
  display: block !important;
  line-height: 1;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}
/* Counter number span */
.ms-stats-panel .ms-stat b .ms-stat-num,
.ms-stats-panel .ms-stat strong .ms-stat-num {
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  display: inline-block !important;
  min-width: 2.5ch;
}
/* Inline suffix: "+", "★" */
.ms-stats-panel .ms-stat b .ms-stat-sfx,
.ms-stats-panel .ms-stat strong .ms-stat-sfx {
  font-size: 0.36em !important;
  font-weight: 400;
  color: var(--ms-gold) !important;
  display: inline !important;
  vertical-align: super;
  margin-left: 3px;
}
/* Label below the number */
.ms-stats-panel .ms-stat .ms-stat-label,
.ms-stats-panel .ms-stat span {
  font-family: var(--ms-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,241,232,.55);
  margin-top: 10px;
  display: block !important;
}


/* ================================================================
   10. COUNTER SECTION FIX
   ================================================================ */

.counter-section {
  padding-left:  0 !important;
  padding-right: 0 !important;
}
.counter-inner {
  width: min(var(--ms-container), calc(100% - var(--ms-gutter) * 2)) !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}


/* ================================================================
   11. CARDS GRID  (3-col feature cards)
   ================================================================ */

.ms-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ms-card {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  padding: 32px;
  box-shadow: var(--ms-shadow-sm);
}
.ms-card .ms-card-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}
.ms-card h4 {
  font-family: var(--ms-serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--ms-ink);
}
.ms-card p {
  font-size: 15px;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: none;
}
/* Cards on dark background */
.ms-dark-section .ms-card {
  background: rgba(255,255,255,.05);
  border-color: var(--ms-line-light);
}
.ms-dark-section .ms-card h4 { color: var(--ms-cream); }
.ms-dark-section .ms-card p  { color: rgba(247,241,232,.7); }


/* ================================================================
   12. STATS ROW  (horizontal 4-up)
   ================================================================ */

.ms-stats-row {
  display: flex;
  border-top:    1px solid var(--ms-line-light);
  border-bottom: 1px solid var(--ms-line-light);
  margin-top: 48px;
  padding: 44px 0;
}
.ms-stats-row .ms-stat-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--ms-line-light);
  padding: 16px 24px;
}
.ms-stats-row .ms-stat-item:last-child {
  border-right: none;
}
.ms-stats-row .ms-stat-item b,
.ms-stats-row .ms-stat-item strong {
  display: block;
  font-family: var(--ms-serif);
  font-weight: 300;
  font-size: clamp(40px, 4.8vw, 68px);
  color: var(--ms-cream);
  line-height: 1;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}
/* Counter number span — force inherit so Lodgify's span reset doesn't shrink it.
   Lodgify applies span { display:block } globally — override with !important.
   inline-block + min-width pre-allocates space for widest value so the
   suffix doesn't jump as digit count grows during the count animation. */
.ms-stats-row .ms-stat-item b .ms-stat-num,
.ms-stats-row .ms-stat-item strong .ms-stat-num {
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  display: inline-block !important;
  min-width: 3.5ch;
}
/* Inline suffix: "+", "★" — smaller, gold.
   Lodgify's global span { display:block } must be overridden with !important. */
.ms-stats-row .ms-stat-item b .ms-stat-sfx,
.ms-stats-row .ms-stat-item strong .ms-stat-sfx {
  font-size: 0.36em !important;
  font-weight: 400;
  color: var(--ms-gold) !important;
  display: inline !important;
  vertical-align: super;
  margin-left: 3px;
}
/* Label — Lodgify strips plain <span> but keeps classed ones;
   use <span class="ms-stat-label"> in HTML */
.ms-stats-row .ms-stat-item span,
.ms-stats-row .ms-stat-item .ms-stat-label {
  font-family: var(--ms-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,241,232,.55);
  margin-top: 14px;
  display: block;
}
/* Light section overrides */
.ms-light-section .ms-stats-row {
  border-color: var(--ms-line);
}
.ms-light-section .ms-stats-row .ms-stat-item {
  border-right-color: var(--ms-line);
}
.ms-light-section .ms-stats-row .ms-stat-item b,
.ms-light-section .ms-stats-row .ms-stat-item strong {
  color: var(--ms-ink);
}
.ms-light-section .ms-stats-row .ms-stat-item span,
.ms-light-section .ms-stats-row .ms-stat-item .ms-stat-label {
  color: var(--ms-ink-2);
}


/* ================================================================
   13. TESTIMONIAL BLOCK
   ================================================================ */

.ms-testimonial {
  text-align: center;
}
.ms-testimonial .ms-stars {
  color: var(--ms-gold);
  letter-spacing: 4px;
  margin-bottom: 20px;
  font-size: 18px;
}
/* Two-class selector (0,2,1) beats Lodgify's .css-xxxxx blockquote (0,1,1) */
.ms-dark-section .ms-testimonial blockquote,
.ms-terra-section .ms-testimonial blockquote {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.4;
  max-width: 32ch;
  margin: 0 auto;
  color: var(--ms-cream) !important;
}
.ms-light-section .ms-testimonial blockquote {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.4;
  max-width: 32ch;
  margin: 0 auto;
  color: var(--ms-ink) !important;
}
.ms-testimonial cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,241,232,.5);
}
.ms-light-section .ms-testimonial cite {
  color: var(--ms-ink-2);
}


/* ================================================================
   15. STICKY NAVIGATION
   ================================================================
   Lodgify's header is position:absolute by default (overlays the
   hero). We override to position:fixed so it always sits at the
   top of the viewport.

   At page-top the header stays transparent (Lodgify's own
   variant-transparent styles handle that). Once the user scrolls
   past 60px our JS adds .ms-scrolled → ink background slides in.

   Selector uses [data-testid="header"] — stable across Lodgify
   deploys, unlike the auto-generated css-XXXXX class names.
   ================================================================ */

header[data-testid="header"] {
  position: fixed !important;
  top:    0 !important;
  left:   0 !important;
  right:  0 !important;
  z-index: 200 !important;
  min-height: 64px !important;  /* Lodgify default is 100px — override to tighten nav */
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Interior pages (variant-default) — always dark nav so cream logo is always visible.
   variant-transparent pages (home hero) stay transparent via Lodgify's own styles. */
header[data-testid="header"].variant-default {
  background-color: #2B2722 !important;
  --lodgify-ui-header-link-color: #F7F1E8 !important;
}

header[data-testid="header"].variant-default a,
header[data-testid="header"].variant-default button,
header[data-testid="header"].variant-default [class*="link"],
header[data-testid="header"].variant-default [class*="nav"],
header[data-testid="header"].variant-default [class*="menu"],
header[data-testid="header"].variant-default [class*="header"] {
  color: #F7F1E8 !important;
}

/* Property detail pages use variant-transparent over a dark hero image —
   keep transparent (no background override) but ensure link text is cream
   so it's readable against the dark hero. Turns dark on scroll via ms-scrolled. */
body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent {
  --lodgify-ui-header-link-color: #F7F1E8 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent a,
body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent button,
body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent [class*="link"],
body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent [class*="nav"],
body:has([data-testid="component-resolver.PropertyHero"]) header[data-testid="header"].variant-transparent [class*="menu"] {
  color: #F7F1E8 !important;
}

/* ── NAV DROPDOWN MENU ──────────────────────────────────────────
   Lodgify's dropdown has a white bg by default. On our dark nav,
   the inherited cream link colour becomes invisible against white.
   Force ink background + cream text to stay consistent.
   Targets all common Lodgify dropdown patterns.
   ─────────────────────────────────────────────────────────────── */
/* Lodgify nav uses orientation-horizontal for the main bar;
   the dropdown submenu uses orientation-vertical */
header[data-testid="header"] [class*="orientation-vertical"],
header[data-testid="header"] [class*="dropdown"],
header[data-testid="header"] [class*="Dropdown"],
header[data-testid="header"] [class*="submenu"],
header[data-testid="header"] [class*="sub-menu"],
header[data-testid="header"] [class*="popover"],
header[data-testid="header"] [class*="Popover"],
header[data-testid="header"] nav ul ul,
header[data-testid="header"] [role="menu"],
header[data-testid="header"] [role="listbox"] {
  background-color: #2B2722 !important;
  border: 1px solid rgba(247,241,232,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

header[data-testid="header"] [class*="orientation-vertical"] a,
header[data-testid="header"] [class*="orientation-vertical"] li,
header[data-testid="header"] [class*="orientation-vertical"] button,
header[data-testid="header"] [class*="dropdown"] a,
header[data-testid="header"] [class*="dropdown"] button,
header[data-testid="header"] [class*="Dropdown"] a,
header[data-testid="header"] [class*="Dropdown"] button,
header[data-testid="header"] [class*="submenu"] a,
header[data-testid="header"] [class*="submenu"] button,
header[data-testid="header"] nav ul ul a,
header[data-testid="header"] nav ul ul li,
header[data-testid="header"] [role="menu"] a,
header[data-testid="header"] [role="menu"] li,
header[data-testid="header"] [role="option"] {
  color: #F7F1E8 !important;
  background-color: transparent !important;
}

header[data-testid="header"] [class*="orientation-vertical"] a:hover,
header[data-testid="header"] [class*="dropdown"] a:hover,
header[data-testid="header"] [class*="Dropdown"] a:hover,
header[data-testid="header"] nav ul ul a:hover,
header[data-testid="header"] [role="menu"] a:hover,
header[data-testid="header"] [role="option"]:hover {
  background-color: rgba(247,241,232,0.08) !important;
  color: #C89B5A !important;
}

/* Scrolled state — toggled by the JS in ms-global.js */
header[data-testid="header"].ms-scrolled {
  background-color: #2B2722 !important;
  box-shadow: 0 2px 20px rgba(43, 39, 34, 0.28) !important;
  /* Override Lodgify's own nav-link colour variable */
  --lodgify-ui-header-link-color: #F7F1E8 !important;
}

/* Ensure nav link colours stay readable on the ink background —
   cast a wide net to catch Lodgify's dynamic class names */
header[data-testid="header"].ms-scrolled a,
header[data-testid="header"].ms-scrolled button,
header[data-testid="header"].ms-scrolled [class*="link"],
header[data-testid="header"].ms-scrolled [class*="nav"],
header[data-testid="header"].ms-scrolled [class*="menu"],
header[data-testid="header"].ms-scrolled [class*="header"] {
  color: #F7F1E8 !important;
}

/* ── NAV FONT ENFORCEMENT ───────────────────────────────────────
   Lodgify's theme fonts (Questrial/Pompiere) can leak into nav
   elements such as the language-selector button. Cast a wide net
   over all header text to enforce Inter.
   ─────────────────────────────────────────────────────────────── */
header[data-testid="header"] a,
header[data-testid="header"] button,
header[data-testid="header"] span,
header[data-testid="header"] li,
header[data-testid="header"] [class*="content"],
header[data-testid="header"] [aria-label="Change Language"],
header[data-testid="header"] [aria-label*="currency"],
header[data-testid="header"] [aria-label*="Currency"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── LOGO SWAP — handled by JS (ms-global.js section 3) ────────
   Swaps logo src between logo-wordmark-dark.png and
   logo-wordmark-light.png based on header state.
   CSS filter approach abandoned — it inverts the gold rule colour.
   ─────────────────────────────────────────────────────────────── */


/* ================================================================
   14. SCROLL REVEAL
   ================================================================
   Elements are VISIBLE by default so the Lodgify editor can see them.
   The JS in ms-global.js adds .ms-will-reveal at runtime to opt them
   into the hidden→visible animation. Editor never runs that step,
   so content stays visible while editing.
   ================================================================ */

.ms-reveal {
  /* visible by default — no hidden state here */
}
.ms-reveal.ms-will-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
.ms-reveal.ms-in {
  opacity: 1;
  transform: none;
}


/* ================================================================
   15. PROPERTY CARDS  (.stay-card)
   ================================================================ */

.stay-card {
  border-radius: var(--ms-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ms-line);
  box-shadow: 0 2px 10px rgba(43,39,34,.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.stay-card:hover {
  box-shadow: 0 6px 28px rgba(43,39,34,.14);
  transform: translateY(-3px);
}

/* Photo panel */
.stay-card .card-img-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--ms-cream-2);
  flex-shrink: 0;
}
.stay-card .card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
  z-index: 1;
}
.stay-card .card-img-wrap figure {
  margin: 0;
  height: 100%;
}
.stay-card .card-img-wrap figure img,
.stay-card .card-img-wrap img.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  filter: brightness(.78) saturate(.9);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
}
.stay-card:hover .card-img-wrap figure img,
.stay-card:hover .card-img-wrap img.card-img {
  transform: scale(1.04);
  filter: brightness(.88) saturate(1);
}
.stay-card .card-img:not(img) {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  filter: brightness(.78) saturate(.9);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
}
.stay-card:hover .card-img:not(img) {
  transform: scale(1.04);
  filter: brightness(.88) saturate(1);
}

/* Location pill */
.stay-card .card-location {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  font-family: var(--ms-sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ms-cream);
  background: rgba(43,39,34,.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Card body */
.stay-card .card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.stay-card .card-name {
  font-family: var(--ms-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--ms-ink);
  line-height: 1.1;
}
.stay-card .card-name em {
  font-style: italic;
  color: var(--ms-terra);
  font-weight: 300;
}
.stay-card .card-tagline {
  font-family: var(--ms-sans);
  font-size: 14px;
  color: var(--ms-terra);
  font-weight: 400;
  margin-top: -8px;
}

/* Facts strip */
.stay-card .facts {
  display: flex;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  overflow: hidden;
  margin: 0;
}
.stay-card .fact {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-right: 1px solid var(--ms-line);
}
.stay-card .fact:last-child {
  border-right: none;
}
.stay-card .fact b,
.stay-card .fact strong {
  display: block;
  font-family: var(--ms-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ms-ink);
  line-height: 1;
}
.stay-card .fact span {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
  margin-top: 3px;
  display: block;
}

/* Description */
.stay-card .card-desc {
  font-family: var(--ms-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ms-ink-2);
  max-width: none;
  margin: 0;
}

/* Tags */
.stay-card .card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stay-card .tag {
  font-family: var(--ms-sans);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ms-sage);
  background: rgba(123,139,111,.12);
  border: 1px solid rgba(123,139,111,.3);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* CTA button */
.stay-card .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ms-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ms-terra);
  color: #fff;
  transition: background .2s ease;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.stay-card .btn-primary:hover {
  background: var(--ms-terra-2);
}

/* Card grid wrapper */
.stay-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: min(var(--ms-container), calc(100% - var(--ms-gutter) * 2));
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--ms-pad-y);
  padding-bottom: var(--ms-pad-y);
}


/* ================================================================
   16. LOGO FIX
   ================================================================ */

[data-testid="logo"] {
  display: flex !important;
  align-items: center !important;
  min-width: 140px !important;
  flex-shrink: 0 !important;
}
[data-testid="logo.image"],
[data-testid="logo.image-wrapper"] {
  display: block !important;
  width:  auto !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}
[data-testid="logo"] img {
  display: block !important;
  height: 44px !important;
  width:  auto !important;
  max-height: 44px !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
}
[data-testid="logo"] img::after {
  content: "Mandevilla Stays";
  font-family: var(--ms-serif);
  font-size: 20px;
  color: currentColor;
}


/* ================================================================
   17. TWO FEATURE CARDS  (.ms-two-cards / .ms-feature-card)
   ================================================================
   Full-width intro at top, then 2-col bordered feature cards below.
   Used on homepage "Moments worth talking about" section.
   ================================================================ */

.ms-two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.ms-feature-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(247,241,232,.14);
  border-radius: 14px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Dash-style bullet list — em dash prefix instead of dot */
.ms-dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.ms-dash-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--ms-sans);
  font-size: 15px;
  color: rgba(247,241,232,.78);
  line-height: 1.5;
}
.ms-dash-list li::before {
  content: "—";
  color: var(--ms-gold);
  flex-shrink: 0;
  line-height: 1.5;
}
/* Light section variant */
.ms-light-section .ms-feature-card {
  background: #fff;
  border-color: var(--ms-line);
  box-shadow: var(--ms-shadow-sm);
}
.ms-light-section .ms-dash-list li {
  color: var(--ms-ink-2);
}
.ms-light-section .ms-dash-list li::before {
  color: var(--ms-terra);
}
@media (max-width: 760px) {
  .ms-two-cards {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   18. TRUST BADGES ROW  (.ms-badges-row)
   ================================================================ */

.ms-badges-row {
  display: flex;
  justify-content: center;
  border-top:    1px solid var(--ms-line-light);
  border-bottom: 1px solid var(--ms-line-light);
}
.ms-badge-item {
  flex: 1;
  text-align: center;
  padding: 24px 16px;
  border-right: 1px solid var(--ms-line-light);
}
.ms-badge-item:last-child {
  border-right: none;
}
.ms-badge-item .ms-badge-val {
  font-family: var(--ms-serif);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 400;
  color: var(--ms-cream);
  display: block;
  line-height: 1.2;
}
.ms-badge-item .ms-badge-lbl {
  font-family: var(--ms-sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,241,232,.45);
  margin-top: 6px;
  display: block;
}
/* Light overrides */
.ms-light-section .ms-badges-row {
  border-color: var(--ms-line);
}
.ms-light-section .ms-badge-item {
  border-right-color: var(--ms-line);
}
.ms-light-section .ms-badge-item .ms-badge-val { color: var(--ms-ink); }
.ms-light-section .ms-badge-item .ms-badge-lbl { color: var(--ms-ink-3); }


/* ================================================================
   18. PAGE HERO  (.ms-page-hero)
   ================================================================ */

.ms-page-hero {
  text-align: center;
  padding-top:    120px;
  padding-bottom: 80px;
}
.ms-page-hero h1 {
  font-family: var(--ms-serif);
  font-weight: 300;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: .15em 0;
}
.ms-dark-section  .ms-page-hero h1  { color: var(--ms-cream); }
.ms-light-section .ms-page-hero h1  { color: var(--ms-ink); }
.ms-dark-section  .ms-page-hero em  { color: var(--ms-gold);  font-style: italic; }
.ms-light-section .ms-page-hero em  { color: var(--ms-terra); font-style: italic; }
.ms-page-hero .ms-hero-sub {
  font-family: var(--ms-sans);
  font-size: 18px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto;
}
.ms-dark-section  .ms-page-hero .ms-hero-sub { color: rgba(247,241,232,.72); }
.ms-light-section .ms-page-hero .ms-hero-sub { color: var(--ms-ink-2); }


/* ================================================================
   19. REVIEWS GRID  (.ms-reviews-grid)
   ================================================================
   Property pills — use inside .ms-review-card to badge each review
   ================================================================ */

.ms-pill {
  display: inline-block;
  font-family: var(--ms-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ms-pill--teemos {
  color: var(--ms-sage);
  background: rgba(123,139,111,.12);
  border: 1px solid rgba(123,139,111,.3);
}
.ms-pill--cresta {
  color: var(--ms-terra);
  background: rgba(184,85,58,.08);
  border: 1px solid rgba(184,85,58,.25);
}

/* ================================================================ */

.ms-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.ms-review-card {
  padding: 24px;
  border-radius: var(--ms-radius);
  border: 1px solid var(--ms-line-light);
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
}
.ms-light-section .ms-review-card {
  background: #fff;
  border-color: var(--ms-line);
  box-shadow: var(--ms-shadow-sm);
}
.ms-review-card .ms-rv-stars {
  color: var(--ms-gold);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  display: block;
}
.ms-review-card blockquote {
  font-family: var(--ms-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.ms-dark-section  .ms-review-card blockquote { color: rgba(247,241,232,.88); }
.ms-light-section .ms-review-card blockquote { color: var(--ms-ink); }
.ms-review-card .ms-rv-name {
  font-family: var(--ms-sans);
  font-size: 12px;
  font-weight: 500;
  display: block;
}
.ms-dark-section  .ms-review-card .ms-rv-name { color: var(--ms-cream); }
.ms-light-section .ms-review-card .ms-rv-name { color: var(--ms-ink); }
.ms-review-card .ms-rv-detail {
  font-family: var(--ms-sans);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.ms-dark-section  .ms-review-card .ms-rv-detail { color: rgba(247,241,232,.4); }
.ms-light-section .ms-review-card .ms-rv-detail { color: var(--ms-ink-3); }
.ms-reviews-cta {
  text-align: center;
  margin-top: 36px;
}


/* ================================================================
   20. IMAGE + COPY TWO-COL  (.ms-image-copy)
   ================================================================ */

.ms-image-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ms-img-frame {
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ms-cream-2);
}
.ms-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================================================================
   21. SAGE ACCENT MODIFIER  (.ms-sage-accent)
   ================================================================
   Add to a .ms-light-section to swap terra→sage for eyebrows,
   italic highlights, and bullet dots. Pair with .ms-btn--sage.
   ================================================================ */

.ms-sage-accent .ms-eyebrow             { color: var(--ms-sage); }
.ms-sage-accent .ms-eyebrow::before     { background: var(--ms-sage); }
.ms-sage-accent h2 em,
.ms-sage-accent h3 em,
.ms-sage-accent p em                    { color: var(--ms-sage); }
.ms-sage-accent .ms-bullet-list li::before { background: var(--ms-sage); }


/* ================================================================
   22. EVENTS PAGE COMPONENTS
   ================================================================ */

/* ── 4-column card grid variant ──────────────────────────────── */
.ms-cards-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Footnote / small print text ─────────────────────────────── */
.ms-footnote {
  font-family: var(--ms-sans);
  font-size: 12px;
  color: rgba(247,241,232,.4);
  text-align: center;
  margin-top: 18px;
  line-height: 1.6;
}
.ms-footnote a {
  color: rgba(200,155,90,.65);
  text-decoration: underline;
}
.ms-light-section .ms-footnote {
  color: var(--ms-ink-3);
}
.ms-light-section .ms-footnote a {
  color: var(--ms-terra);
}

/* ── Venue proximity grid ─────────────────────────────────────── */
.ms-venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
.ms-venue-item {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ms-line-light);
  border-radius: var(--ms-radius);
  padding: 16px 18px;
}
.ms-venue-item .ms-venue-name {
  font-family: var(--ms-serif);
  font-weight: 300;
  font-size: 16px;
  color: var(--ms-cream);
  margin-bottom: 6px;
}
.ms-venue-item .ms-venue-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ms-venue-item .ms-venue-dist {
  font-family: var(--ms-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ms-gold);
}
.ms-venue-item .ms-venue-tag {
  font-family: var(--ms-sans);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200,155,90,.1);
  border: 1px solid rgba(200,155,90,.2);
  color: rgba(200,155,90,.75);
}
.ms-venue-note {
  font-family: var(--ms-sans);
  font-size: 11.5px;
  color: rgba(247,241,232,.38);
  margin-top: 14px;
  line-height: 1.6;
}

/* ── Terra CTA section ────────────────────────────────────────── */
/* Full-bleed terracotta band — use for event/enquiry CTAs.
   Inherits the same breakout & gap-fix rules as dark/light.      */
.ms-terra-section {
  background: var(--ms-terra);
  color: var(--ms-cream);
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  display: block;
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin-top:    -14px;
  margin-bottom: -14px;
}
.ms-terra-section h1,
.ms-terra-section h2,
.ms-terra-section h3 {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  color: var(--ms-cream) !important;
}
.ms-terra-section h2 em,
.ms-terra-section h3 em {
  color: rgba(247,241,232,.75) !important;
  font-style: italic;
}
.ms-terra-section p {
  font-family: var(--ms-sans) !important;
  color: rgba(247,241,232,.82) !important;
}

/* Responsive */
@media (max-width: 960px) {
  .ms-cards-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ms-cards-grid--4 {
    grid-template-columns: 1fr;
  }
  .ms-venue-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   23. CONTACT PAGE  (Lodgify built-in contact component)
   ================================================================
   Targets stable (non-hashed) class names only.
   Safe to keep in global CSS — these selectors are specific
   enough not to bleed into booking flows on other pages.
   ================================================================ */

/* ── "Contact" heading above the form ────────────────────────────
   The hashed class (css-19ntu0z) may change on Lodgify redeploy
   but is included as an extra hook alongside the tag+class combo.
   If you want to HIDE this heading entirely (keeping only the
   hero widget heading), swap font-family for display: none.     */
h3.css-19ntu0z {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(26px, 2.8vw, 36px) !important;
  color: var(--ms-ink) !important;
  letter-spacing: -.01em;
}

/* ── Input fields (text / email / tel / textarea) ─────────────── */
input.animated-label,
textarea.animated-label {
  background: transparent !important;
  border:        none !important;
  border-bottom: 1.5px solid rgba(200,155,90,.38) !important;
  border-radius: 0 !important;
  font-family:   var(--ms-sans) !important;
  font-size:     15px !important;
  color:         var(--ms-ink) !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  box-shadow:    none !important;
  transition:    border-color .2s ease !important;
}
input.animated-label:focus,
textarea.animated-label:focus {
  border-bottom-color: var(--ms-terra) !important;
  box-shadow:          none !important;
  outline:             none !important;
}

/* Floating labels */
input.animated-label ~ label,
input.animated-label + label,
textarea.animated-label ~ label,
textarea.animated-label + label {
  font-family:     var(--ms-sans) !important;
  letter-spacing:  .1em !important;
  text-transform:  uppercase !important;
  color:           var(--ms-ink-3) !important;
}

/* ── Submit button — fix black text & Questrial font ─────────────
   button.primary exists on all Lodgify pages; .styled-override
   is present only on the contact/enquiry send button.            */
button.primary.styled-override {
  color:          var(--ms-cream) !important;
  font-family:    var(--ms-sans) !important;
  font-weight:    500 !important;
  letter-spacing: .08em !important;
  border-radius:  var(--ms-radius) !important;
  transition:     background .2s ease, transform .2s ease !important;
}
button.primary.styled-override:hover {
  background:  var(--ms-terra-2) !important;
  transform:   translateY(-1px);
}

/* ── Contact details strip (our custom HTML widget below form) ─── */
.ms-contact-strip {
  display:         flex;
  justify-content: center;
  gap:             0;
  flex-wrap:       wrap;
}
.ms-contact-strip-item {
  flex:        1;
  min-width:   160px;
  text-align:  center;
  padding:     32px 24px;
  border-right: 1px solid var(--ms-line-light);
}
.ms-contact-strip-item:last-child {
  border-right: none;
}
.ms-contact-strip-item .ms-csi-label {
  display:        block;
  font-family:    var(--ms-sans);
  font-size:      10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          rgba(247,241,232,.45);
  margin-bottom:  8px;
}
.ms-contact-strip-item .ms-csi-value {
  display:     block;
  font-family: var(--ms-sans);
  font-size:   15px;
  color:       var(--ms-cream);
  font-weight: 400;
}
.ms-contact-strip-item a.ms-csi-value {
  color:           var(--ms-gold);
  text-decoration: none;
}
.ms-contact-strip-item a.ms-csi-value:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ms-contact-strip-item {
    flex:         0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--ms-line-light);
  }
  .ms-contact-strip-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}


/* ================================================================
   24. OPEN PILLARS GRID  (.ms-pillars / .ms-pillar)
   ================================================================
   Reusable no-box feature grid. Works in 3-column (3 items) and
   3×2 (6 items) layouts. Adapts automatically to dark, light,
   and cream-2 section backgrounds via context selectors.

   USAGE — 3 items:
     <div class="ms-pillars">
       <div class="ms-pillar">
         <span class="ms-pillar-num">01 — Label</span>
         <h3 class="ms-pillar-title">Heading</h3>
         <p class="ms-pillar-body">Body text.</p>
       </div>
       … × 3
     </div>

   USAGE — 6 items: identical structure, just 6 .ms-pillar divs.
   The second row auto-gets a top border.

   NOTE: Use <div class="ms-pillar-body"> instead of <p> if the
   body text is inside a .ms-dark-section or .ms-light-section
   to avoid the global p { max-width: 60ch } rule truncating it.
   Same applies to .ms-pillars-note — always use <div>, not <p>.
   ================================================================ */

/* ── Grid container ───────────────────────────────────────────── */
.ms-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--ms-line-light);
}
.ms-light-section .ms-pillars {
  border-top-color: var(--ms-line);
}

/* ── Each pillar ──────────────────────────────────────────────── */
.ms-pillar {
  padding: 40px 40px 40px 0;
  border-right: 1px solid var(--ms-line-light);
}
.ms-light-section .ms-pillar {
  border-right-color: var(--ms-line);
}
/* First item: no left padding */
.ms-pillar:first-child { padding-left: 0; }
/* Last of every row: no right border */
.ms-pillar:nth-child(3n) { border-right: none; padding-left: 40px; padding-right: 0; }
/* Middle of every row */
.ms-pillar:nth-child(3n+2) { padding-left: 40px; padding-right: 40px; }
/* Second row (items 4–6): top separator */
.ms-pillar:nth-child(n+4) { border-top: 1px solid var(--ms-line-light); }
.ms-light-section .ms-pillar:nth-child(n+4) { border-top-color: var(--ms-line); }

/* ── Numbered label ───────────────────────────────────────────── */
.ms-pillar-num {
  display: block;
  font-family: var(--ms-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ms-dark-section  .ms-pillar-num  { color: var(--ms-gold); }
.ms-light-section .ms-pillar-num  { color: var(--ms-terra); }
.ms-terra-section .ms-pillar-num  { color: rgba(247,241,232,.6); }

/* ── Pillar heading ───────────────────────────────────────────── */
.ms-pillar-title {
  font-family: var(--ms-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.15;
  margin: 0 0 18px !important;
}
.ms-dark-section  .ms-pillar-title { color: var(--ms-cream) !important; }
.ms-light-section .ms-pillar-title { color: var(--ms-ink)   !important; }
.ms-terra-section .ms-pillar-title { color: var(--ms-cream) !important; }

/* ── Body copy ────────────────────────────────────────────────── */
.ms-pillar-body {
  font-family: var(--ms-sans);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: none;
}
.ms-dark-section  .ms-pillar-body { color: rgba(247,241,232,.68); }
.ms-light-section .ms-pillar-body { color: var(--ms-ink-2); }
.ms-terra-section .ms-pillar-body { color: rgba(247,241,232,.78); }

/* ── Footer note (full-width, flush under grid) ───────────────── */
.ms-pillars-note {
  margin-top: 0;
  padding-top: 28px;
  border-top: 1px solid var(--ms-line-light);
  font-family: var(--ms-sans);
  font-size: 13px;
  line-height: 1.6;
  max-width: none;
}
.ms-dark-section  .ms-pillars-note { color: rgba(247,241,232,.4); }
.ms-light-section .ms-pillars-note { color: var(--ms-ink-3); border-top-color: var(--ms-line); }
.ms-terra-section .ms-pillars-note { color: rgba(247,241,232,.55); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ms-pillars {
    grid-template-columns: 1fr;
  }
  .ms-pillar {
    padding: 32px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ms-line-light);
  }
  .ms-light-section .ms-pillar {
    border-bottom-color: var(--ms-line);
  }
  /* Second-row top borders collapse into the bottom borders above */
  .ms-pillar:nth-child(n+4) {
    border-top: none !important;
  }
  .ms-pillars-note {
    margin-top: 0;
  }
}


/* ================================================================
   25. SEARCH RESULTS PAGE — PROPERTY CARD RESTYLE
   ================================================================
   Targets Lodgify's built-in search/all-properties page.
   Uses stable data-testid and semantic class selectors —
   avoids css-XXXXX auto-generated names.
   ================================================================ */

/* Page background — cream instead of white */
body:has(header[data-testid="header"].variant-default) {
  background-color: #F7F1E8 !important;
}

/* Search bar strip */
[data-testid="search-app.searchbar"] {
  background-color: #2B2722 !important;
  border-bottom: none !important;
}

/* Search bar input buttons (location, dates, guests) */
[data-testid="search-app.searchbar"] button {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #F7F1E8 !important;
  border-color: rgba(247,241,232,0.2) !important;
  background-color: transparent !important;
}

/* Search / submit button */
[data-testid="search-app.searchbar"] [data-testid="button"] {
  background-color: #B8553A !important;
  color: #F7F1E8 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 4px !important;
}

[data-testid="search-app.searchbar"] [data-testid="button"]:hover {
  background-color: #9E4730 !important;
}

/* ── PROPERTY CARD ──────────────────────────────────────────── */

[data-testid="search-app.rental-card"] {
  background-color: #FFFFFF !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(43,39,34,0.10) !important;
  border: 1px solid rgba(43,39,34,0.08) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

[data-testid="search-app.rental-card"]:hover {
  box-shadow: 0 8px 32px rgba(43,39,34,0.18) !important;
  transform: translateY(-3px) !important;
}

/* Image — full bleed, no radius */
[data-testid="search-app.rental-card"] .card-cover-image {
  border-radius: 0 !important;
}

/* Property name */
[data-testid="search-app.rental-card"] .card-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 20px !important;
  color: #2B2722 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Card body (guests, amenities, price wrapper) */
[data-testid="search-app.rental-card"] .card-body {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Guests count and amenity list */
[data-testid="search-app.rental-card"] [data-testid="text"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #7A6F67 !important;
}

/* Price line */
[data-testid="search-app.price-tag"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #2B2722 !important;
}

/* Price amount (the number itself) */
[data-testid="search-app.price-tag"] strong,
[data-testid="search-app.price-tag"] b,
[data-testid="search-app.price-tag"] span:first-child {
  color: #B8553A !important;
  font-weight: 600 !important;
}

/* Sort + filter bar */
[class*="sort"] button,
[data-testid*="sort"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #2B2722 !important;
  border-color: rgba(43,39,34,0.2) !important;
  background-color: #FFFFFF !important;
  border-radius: 4px !important;
}

/* Results count text */
[class*="results-count"],
[class*="resultsCount"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #2B2722 !important;
}

/* ================================================================
   26. PROPERTY DETAIL PAGE — BRAND RESTYLE
   ================================================================
   Scoped to pages containing the PropertyHero component so these
   rules don't bleed onto other Lodgify pages.
   Uses data-testid (stable) and semantic class names where possible.
   ================================================================ */

/* Page background */
body:has([data-testid="component-resolver.PropertyHero"]) {
  background-color: #F7F1E8 !important;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */

body:has([data-testid="component-resolver.PropertyHero"]) h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 42px !important;
  color: #2B2722 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 28px !important;
  color: #2B2722 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  color: #2B2722 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) p,
body:has([data-testid="component-resolver.PropertyHero"]) li,
body:has([data-testid="component-resolver.PropertyHero"]) span,
body:has([data-testid="component-resolver.PropertyHero"]) div {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── SECTION LABELS — "Vacation Home", "Highlights", "Contact us" ──
   Lodgify renders these as h4.ui.sub.header (Pompiere bold).
   Restyle to match .ms-eyebrow: Inter, small caps, terracotta.
   ─────────────────────────────────────────────────────────────── */
body:has([data-testid="component-resolver.PropertyHero"]) h4.ui.sub.header,
body:has([data-testid="component-resolver.PropertyHero"]) h4[class*="css-"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #B8553A !important;
}

/* ── SUB-MENU NAV (Description / Pictures / Amenities…) ──── */

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="horizontalMenu-menu-wrapper"] a,
body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="horizontalMenu-menu-wrapper"] button {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #2B2722 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="horizontalMenu-menu-wrapper"] [class*="active"],
body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="horizontalMenu-menu-wrapper"] [class*="selected"] {
  border-bottom-color: #B8553A !important;
  color: #B8553A !important;
}

/* ── DESCRIPTION ────────────────────────────────────────────── */

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="multiparagraph-html-paragraph"],
body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="multiparagraph-html-paragraph"] * {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #4A423C !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="multiparagraph-button-read-more"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #B8553A !important;
  font-weight: 500 !important;
}

/* ── AMENITIES ──────────────────────────────────────────────── */

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="component-resolver.Amenities"] [data-testid="text"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #4A423C !important;
}

/* ── BUTTONS ────────────────────────────────────────────────── */

body:has([data-testid="component-resolver.PropertyHero"]) button.primary,
body:has([data-testid="component-resolver.PropertyHero"]) a.primary {
  background-color: #B8553A !important;
  color: #F7F1E8 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  border: none !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) button.primary:hover,
body:has([data-testid="component-resolver.PropertyHero"]) a.primary:hover {
  background-color: #9E4730 !important;
}

body:has([data-testid="component-resolver.PropertyHero"]) button.secondary,
body:has([data-testid="component-resolver.PropertyHero"]) a.secondary {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: #B8553A !important;
  border-color: #B8553A !important;
  border-radius: 4px !important;
  background-color: transparent !important;
}

/* ── RATES TABLE ────────────────────────────────────────────── */

body:has([data-testid="component-resolver.PropertyHero"]) [data-testid="widgets.rates-table.title"] {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  color: #2B2722 !important;
}


/* ================================================================
   26. DIRECT CTA SECTION  (.ms-direct-cta)
   ================================================================
   Homepage widget: between hero and trust bar.
   File: homepage-direct-cta.html
   ================================================================ */

.ms-direct-cta { padding: 48px 0; }

.ms-direct-cta__inner {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
}

.ms-direct-cta__left { flex: 1; min-width: 0; }

.ms-direct-cta__headline {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 36px !important;
  color: #F7F1E8 !important;
  line-height: 1.2 !important;
  margin: 10px 0 16px !important;
}

.ms-direct-cta__body {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: rgba(247,241,232,0.70) !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
  max-width: 420px;
}

.ms-direct-cta__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.ms-direct-cta__benefits li {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(247,241,232,0.55) !important;
  letter-spacing: 0.02em;
  padding-left: 12px;
  position: relative;
}

.ms-direct-cta__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #C89B5A;
}

.ms-direct-cta__divider {
  width: 1px;
  height: 100px;
  background: rgba(247,241,232,0.12);
  flex-shrink: 0;
}

.ms-direct-cta__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

.ms-direct-cta__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  padding: 18px 24px !important;
  border: 1px solid rgba(247,241,232,0.18) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  min-width: 300px !important;
}

.ms-direct-cta__btn:hover {
  border-color: #C89B5A !important;
  background-color: rgba(247,241,232,0.05) !important;
  text-decoration: none !important;
}

.ms-direct-cta__btn * { text-decoration: none !important; }

.ms-direct-cta__btn-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-direct-cta__btn-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #F7F1E8 !important;
  text-decoration: none !important;
}

.ms-direct-cta__btn-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: rgba(247,241,232,0.50) !important;
  text-decoration: none !important;
}

.ms-direct-cta__btn-arrow {
  font-size: 20px;
  color: #C89B5A !important;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  text-decoration: none !important;
}

.ms-direct-cta__btn:hover .ms-direct-cta__btn-arrow { transform: translateX(4px); }

@media (max-width: 768px) {
  .ms-direct-cta__inner { flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; }
  .ms-direct-cta__divider { display: none; }
  .ms-direct-cta__right { width: 100%; }
  .ms-direct-cta__btn { min-width: 0; width: 100%; }
  .ms-direct-cta__headline { font-size: 28px !important; }
}


/* ================================================================
   27. MOBILE RESPONSIVENESS  (added May 2026)
   ================================================================
   Root fix: prevent horizontal overflow so Lodgify's hamburger
   menu breakpoint can fire, and so our own media queries
   evaluate against the true viewport width.
   ================================================================ */

html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Prevent the 100vw breakout technique from creating overflow */
.ms-dark-section,
.ms-light-section,
.ms-sage-section,
.ms-terra-section {
  overflow-x: hidden;
}

@media (max-width: 768px) {

  /* ── Reduce section padding ─────────────────────────────────── */
  :root {
    --ms-pad-y: 60px;
  }

  /* ── Two-col dark layout → single column ────────────────────── */
  .ms-dark-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* ── Two-col light layout → single column ───────────────────── */
  .ms-light-two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* ── Image + copy → stack image above copy ──────────────────── */
  .ms-image-copy {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* ── Stats panel → keep 2-col but tighten padding ───────────── */
  .ms-stats-panel {
    padding: 24px;
    gap: 24px;
  }

  /* ── 4-up stats row → 2×2 grid ─────────────────────────────── */
  .ms-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 24px 0;
  }
  .ms-stats-row .ms-stat-item {
    border-right: none;
    border-bottom: 1px solid var(--ms-line-light);
    padding: 16px;
  }
  .ms-stats-row .ms-stat-item:nth-child(odd) {
    border-right: 1px solid var(--ms-line-light);
  }
  .ms-stats-row .ms-stat-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .ms-light-section .ms-stats-row .ms-stat-item {
    border-color: var(--ms-line);
  }

  /* ── 3-col feature cards → single column ───────────────────── */
  .ms-cards-grid {
    grid-template-columns: 1fr;
  }

  /* ── 4-col reviews → single column ─────────────────────────── */
  .ms-reviews-grid {
    grid-template-columns: 1fr;
  }

  /* ── Property cards grid → single column ───────────────────── */
  .stay-cards-grid {
    grid-template-columns: 1fr;
  }

  /* ── Page hero padding ──────────────────────────────────────── */
  .ms-page-hero {
    padding-top: 72px;
    padding-bottom: 48px;
  }

  /* ── CTA band padding ───────────────────────────────────────── */
  .ms-dark-section.ms-cta-band .ms-inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* ── Badges row → wrap to 2×2 ──────────────────────────────── */
  .ms-badges-row {
    flex-wrap: wrap;
  }
  .ms-badge-item {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--ms-line-light);
  }
  .ms-badge-item:nth-child(odd) {
    border-right: 1px solid var(--ms-line-light);
  }
  .ms-badge-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}