.hdr-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
.hdr-root .container-page,
.hdr-mobile-menu .container-page {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.hdr-root .container-page > div,
.hdr-mobile-menu .container-page > div {
  flex: 0 0 auto !important;
  width: auto !important;
}
.hdr-nav-link {
  margin-right: 2rem;
}
.hdr-nav-link:last-child {
  margin-right: 0;
}
@media (min-width: 1024px) {
  .hdr-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
}
.hdr-mobile-menu {
  z-index: 9999 !important;
}
.hdr-mobile-menu.hidden {
  display: none !important;
}
.hdr-mobile-menu.flex {
  display: flex !important;
  flex-direction: column !important;
}
.js-hdr-mobile-link {
  display: block !important;
}

/*
 * Site-wide "dual button" fix (root cause, not a symptom override):
 * the Lovable-to-WP compiler puts the real Tailwind classes (bg, radius,
 * padding, hover) on the widget's OUTER wrapper div, but Elementor still
 * renders its own native <a class="elementor-button"> inside with the
 * Kit's default button skin (background/padding/color). Wherever the
 * widget's own classic background_color/button_text_color setting doesn't
 * win the cascade against Elementor's global button defaults, the
 * Kit-default pill shows through behind/around the intended button, and
 * padding doubles. Fix: neutralize the inner <a> completely and let the
 * outer wrapper (which already carries the full, correct Tailwind button
 * styling) be the only visual layer, while still inheriting whatever
 * color the widget's own settings put on the inner <a>.
 */
.elementor-widget-button > .elementor-button {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elementor-widget-button > .elementor-button:hover {
  background: transparent !important;
}
.elementor-widget-button > .elementor-button,
.elementor-widget-button > .elementor-button:visited,
.elementor-widget-button > .elementor-button:hover,
.elementor-widget-button > .elementor-button:focus {
  color: inherit !important;
}

.ftr-root .container-page {
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 768px) {
  .ftr-root .container-page {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

.site-popup-overlay {
  display: none !important;
}
.site-popup-overlay.open {
  display: flex !important;
}
.popup-panel {
  position: relative;
}
.popup-cf7-wrap .wpcf7-form-control-wrap { display: block; margin-top: 4px; }
.popup-cf7-wrap input, .popup-cf7-wrap select, .popup-cf7-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5dee7);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
}
.popup-cf7-wrap label { font-size: 12px; font-weight: 500; color: var(--muted-foreground, #6b6270); }
.popup-cf7-wrap p { margin-bottom: 14px; }
.popup-cf7-wrap input[type=submit] {
  background: var(--primary, #5b2358);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  padding: 12px;
}
.site-popup-overlay { z-index: 99998 !important; }

.popup-panel > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px;
}
.js-popup-close {
  font-size: 16px !important;
  line-height: 1;
  flex-shrink: 0;
}
.js-popup-close svg { width: 16px !important; height: 16px !important; }
.popup-panel > div:first-child {
  flex-wrap: nowrap !important;
}
.popup-panel > div:first-child > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.popup-panel > div:first-child .js-popup-close {
  flex: 0 0 auto;
  margin-left: 12px;
}
/* Exclusive Access form card: match Lovable's white-card CF7 form exactly */
.exclusive-form-card {
  display: flex !important;
  flex-direction: column !important;
}
.exclusive-form-card .lwc-cf7-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
@media (max-width: 640px) {
  .exclusive-form-card .lwc-cf7-form {
    grid-template-columns: 1fr;
  }
}
.exclusive-form-card .lwc-cf7-field:nth-child(3),
.exclusive-form-card .lwc-cf7-field:nth-child(4),
.exclusive-form-card .lwc-cf7-form > p:last-child {
  grid-column: 1 / -1;
}
.exclusive-form-card .lwc-cf7-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground, #7a7080);
}
.exclusive-form-card .lwc-input,
.exclusive-form-card .lwc-select {
  height: 44px;
}
.exclusive-form-card .wpcf7-form .wpcf7-submit {
  width: 100%;
  height: 48px;
  align-self: stretch;
}
.exclusive-form-card .wpcf7-response-output {
  margin-top: 12px;
}
/* Root-cause fix: Elementor's container width/flex-shrink settings
   intermittently fail to hold .container-page at its intended max-width,
   causing random narrower widths (916px, 665px, etc.) across sections.
   Force it consistently everywhere, matching Lovable's actual 1280px
   content width with 20px mobile gutters. */
.container-page {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
@media (min-width: 1280px) {
  .container-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Google Maps embed container: Elementor's grid-stretch for the map's
   right column isn't reliably giving it real height (same class of bug
   as other Elementor container-sizing issues here) - force an explicit
   height so the absolutely-positioned iframe has something to fill. */
#location .grid.lg\:grid-cols-2 {
  align-items: stretch !important;
}
#location [class*="min-h-"] {
  min-height: 420px !important;
  height: 100% !important;
}
#location .elementor-widget-html {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#location .elementor-widget-html .elementor-widget-container {
  height: 100%;
}
/* Home-card image carousels: arbitrary-value aspect-[4/3] class isn't in
   the theme's precompiled Tailwind build, so the carousel container had
   zero height and every absolutely-positioned slide/badge was invisible. */
.lwc-carousel {
  aspect-ratio: 4 / 3 !important;
  position: relative !important;
}
.lwc-carousel.js-carousel {
  width: 100% !important;
  display: block !important;
}

/* Systemic fix: when an image widget's outer wrapper carries "absolute
   inset-0 h-full w-full object-cover/object-contain" (meant for a
   full-bleed layer), Elementor renders those classes on the WRAPPER div,
   not the actual <img> tag, so the image stays at its natural/static size
   inside a correctly-sized wrapper (small centered photo with empty
   padding - hit in the gallery bento grid and the home-card carousels).
   Force the real <img> to fill, respecting each wrapper's own
   object-cover vs object-contain intent rather than hardcoding one. */
.elementor-widget-image.absolute img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
.elementor-widget-image.absolute.object-cover img {
  object-fit: cover !important;
}
.elementor-widget-image.absolute.object-contain img {
  object-fit: contain !important;
}
/* Gallery bento grid: one plain (non-span) cell was collapsing to 0
   height despite auto-rows-[220px] being set elsewhere on the grid -
   force a safety-net min-height on every grid cell so none can collapse. */
#gallery .grid > div {
  min-height: 180px;
}
@media (min-width: 768px) {
  #gallery .grid > div {
    min-height: 220px;
  }
}
/* Popup form: match the same refined grid/label treatment as the
   Exclusive Access card exactly, instead of the earlier basic styling. */
.popup-cf7-wrap .lwc-cf7-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
@media (max-width: 480px) {
  .popup-cf7-wrap .lwc-cf7-form {
    grid-template-columns: 1fr;
  }
}
.popup-cf7-wrap .lwc-cf7-field:nth-child(3),
.popup-cf7-wrap .lwc-cf7-field:nth-child(4),
.popup-cf7-wrap .lwc-cf7-form > p:last-child {
  grid-column: 1 / -1;
}
.popup-cf7-wrap .lwc-cf7-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground, #7a7080);
}
.popup-cf7-wrap .lwc-input,
.popup-cf7-wrap .lwc-select {
  height: 44px;
}
.popup-cf7-wrap .wpcf7-form .wpcf7-submit {
  width: 100%;
  height: 48px;
  align-self: stretch;
}
/* Same class of bug as the flex-direction issue: Elementor's generated
   --padding-left:0px custom property on header/footer containers isn't
   reliably consumed, falling back to a 10px default and misaligning the
   header/footer ~10px from the rest of the page's containers. Force it
   directly on every structural container we built (not on card-style
   content like the popup panel or Exclusive Access card, which keep
   their own real padding). */
.hdr-root, .hdr-root div,
.ftr-root, .ftr-root div {
  padding: 0 !important;
}
/* Re-assert container-page's own intentional padding after the blanket
   zero above (which otherwise wins by source order and strips it). */
.hdr-root .container-page,
.ftr-root .container-page {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 1280px) {
  .hdr-root .container-page,
  .ftr-root .container-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Two hero/whatsapp elements were forced to content_width:full, which
   makes Elementor size them off the viewport instead of their actual
   (small) parent, causing horizontal overflow/scroll on mobile. */
.elementor-element-lwc00002p {
  width: auto !important;
  right: auto !important;
}
.elementor-element-lwc0000bf {
  width: 100% !important;
  max-width: 100%;
}
/* Hamburger icon: the blanket .hdr-root div padding:0 rule (needed to fix
   the ~10px header misalignment) also stripped this icon's own tap-target
   padding, and its base size was oversized vs Lovable's compact 24px
   icon. Restore a sensible, Lovable-matching size and tap target. */
.js-hdr-hamburger {
  padding: 8px !important;
  border-radius: 6px;
}
.js-hdr-hamburger svg {
  width: 24px !important;
  height: 24px !important;
}
.js-hdr-mobile-close {
  padding: 8px !important;
}
.js-hdr-mobile-close svg {
  width: 20px !important;
  height: 20px !important;
}
.js-hdr-mobile-close,
.js-hdr-mobile-close .elementor-icon,
.js-hdr-mobile-close svg,
.js-hdr-mobile-close svg path {
  color: #fff !important;
  fill: #fff !important;
}
/* Mobile menu links: lay out in wrapping rows instead of one link per
   line, matching the desktop nav's horizontal flow at narrow widths. */
.hdr-mobile-menu .elementor-element-a630d8e {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
.hdr-nav-link {
  margin-bottom: 0.75rem;
}
.js-popup-close svg {
  width: 16px !important;
  height: 16px !important;
}
/* Safety net: several Elementor container width overrides in this build
   have proven intermittent (the same class of CSS-custom-property bug
   documented throughout this stylesheet). Rather than chase every future
   occurrence individually, guarantee no element can ever cause real
   horizontal page scroll. */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
.elementor-element-lwc0000bf {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  left: 0 !important;
  right: auto !important;
  inset: auto !important;
}
/* One amenity image widget (Kids' Play Area) mysteriously renders its <img>
   with no _css_classes output at all despite identical JSON settings to
   its 20 siblings (root cause not isolated after exhausting the usual
   causes: cache, duplicate IDs, JSON diff). Force it directly by src. */
img[src*="07-kids-play-area"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* The blanket ".hdr-root div { padding:0 !important }" rule (needed for
   header alignment) was also zeroing out button widgets' own horizontal
   padding (px-5 etc.), since a button's wrapper is itself a div inside
   .hdr-root. Restore real padding for button/CTA wrappers specifically. */
.hdr-root .elementor-widget-button,
.ftr-root .elementor-widget-button {
  padding: 0 20px !important;
}
/* Hero "Starting Price" card: widen from max-w-md (448px, ~35% of the
   1280px hero row) to at least 45%. */

/* Hero Starting Price card: widen from 5/12 (~35%) to 6/12 (50%) of the
   hero row, via direct CSS grid-column overrides rather than Elementor's
   native _grid_column control, which broke the row's layout entirely
   when edited directly (text column collapsed to a single narrow strip). */
@media (min-width: 1024px) {
  .elementor-element-lwc00001q {
    grid-column: span 6 / span 6 !important;
  }
  .elementor-element-lwc00002l {
    grid-column: span 6 / span 6 !important;
    max-width: 100% !important;
  }
}
/* Mobile amenities cap: show max 8 amenity cards total on mobile (first
   8 Outdoor cards; Clubhouse Amenities section hidden on mobile only,
   still fully visible on tablet/desktop). */
@media (max-width: 767px) {
  .elementor-element-lwc000086 > div:nth-child(n+9) {
    display: none !important;
  }
  .elementor-element-lwc00008f {
    display: none !important;
  }
}
/* Broaden the earlier image-widget fix: some widgets (e.g. the hero photo)
   carry "h-full w-full object-cover" on their wrapper WITHOUT "absolute"
   (they don't need self-positioning, just to fill an already-positioned
   parent), so the earlier .absolute-scoped rule missed them - same root
   cause (wrapper classes never reach the real <img> tag), different
   wrapper class combination. This showed up as ~240px of solid gradient
   "padding" on both sides of the hero background at wide viewports
   (the photo rendering at its natural 1600px size instead of filling). */
.elementor-widget-image.h-full img,
.elementor-widget-image.w-full img {
  width: 100% !important;
  height: 100% !important;
}
.elementor-widget-image.object-cover img {
  object-fit: cover !important;
}
.elementor-widget-image.object-contain img {
  object-fit: contain !important;
}

/* Hero Starting Price card's inner white box has width:auto (shrink to
   content) instead of filling its 624px grid-cell wrapper. */
.elementor-element-lwc00002k {
  width: 100% !important;
}