/* Nyris Retreats — Global Styles */

:root {
  --color-primary: #1F3D2B;
  --color-primary-dark: #15291D;
  --color-primary-light: #2C5639;
  --color-accent: #C28456;
  --color-accent-dark: #A66B40;
  --color-cream: #FAF6EE;
  --color-cream-dark: #F2EBDC;
  --color-sand: #E8DDC9;
  --color-charcoal: #1A1A1A;
  --color-stone: #6B7568;
  --color-stone-light: #8E9690;
  --color-line: #E5DFD0;
  --color-success: #2C7A5A;
  --color-danger: #B14A3F;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06), 0 1px 3px rgba(20, 30, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 30, 25, 0.08), 0 2px 4px rgba(20, 30, 25, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 30, 25, 0.12), 0 4px 8px rgba(20, 30, 25, 0.06);
  --shadow-xl: 0 24px 48px rgba(20, 30, 25, 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-charcoal);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-charcoal);
}
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
a:hover { color: var(--color-accent); }

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* === Brand utility classes === */
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-stone { color: var(--color-stone); }
.text-charcoal { color: var(--color-charcoal); }
.bg-primary { background-color: var(--color-primary); }
.bg-cream { background-color: var(--color-cream); }
.bg-sand { background-color: var(--color-sand); }
.bg-accent { background-color: var(--color-accent); }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 500; font-size: 0.95rem;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s, color 0.2s;
  letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--color-primary); color: var(--color-cream); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--color-cream); }
.btn-accent { background: var(--color-accent); color: white; }
.btn-accent:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: white; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: var(--color-cream); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--color-charcoal); }
.btn-ghost:hover { background: rgba(31, 61, 43, 0.06); color: var(--color-primary); }

.btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* === Header === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.site-header.scrolled { border-color: var(--color-line); background: rgba(250, 246, 238, 0.98); }
.site-header .nav-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
}
.brand-mark {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-primary); display: flex; align-items: center; gap: 0.55rem;
}
.brand-mark svg { width: 28px; height: 28px; }
.brand-mark:hover { color: var(--color-primary-dark); }

/* When the admin uploads a custom logo (image or inline SVG), the logo
   replaces both the default icon and the brand name text. It's pinned to
   the same total bounding box (~32px tall × ~240px wide) that the
   default icon-plus-wordmark currently occupies, so swapping in a logo
   doesn't expand the header or footer or shift surrounding nav. */
.brand-mark-custom { gap: 0; }
.brand-mark-img,
.brand-mark-svg svg {
  display: block;
  height: 48px;
  width: auto;
  /* Caps at 360px on desktop but never takes more than 65% of the viewport,
     so the menu button on the right stays visible on narrow phones while
     the logo still reads at a useful size. */
  max-width: min(360px, 65vw);
  object-fit: contain;
}
.brand-mark-svg { display: inline-flex; align-items: center; }
.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
  font-size: 0.92rem; font-weight: 500; color: var(--color-charcoal);
}
.nav-links a { padding: 0.4rem 0; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--color-accent); transition: width 0.25s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; transition: background 0.2s, color 0.2s;
}
.icon-btn:hover { background: rgba(31, 61, 43, 0.08); }

.mobile-menu-btn { display: none; }

/* === Hero === */
.hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
}
.hero .hero-img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  animation: heroZoom 18s ease-out infinite alternate;
}
/* Carousel mode: 2+ background images stacked with crossfade. All slides
   share the same heroZoom animation so they move together; only opacity
   changes on the 15s interval. */
.hero.has-carousel .hero-img {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero.has-carousel .hero-img.active { opacity: 1; }
.hero .hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,30,25,0.45) 0%, rgba(20,30,25,0.25) 40%, rgba(20,30,25,0.65) 100%);
}
@keyframes heroZoom {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.08); }
}
.hero-content {
  text-align: center; color: white; padding: 0 1.5rem;
  max-width: 880px;
}
.hero-eyebrow {
  display: inline-block; padding: 0.35rem 0.95rem; border-radius: 999px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 1.5rem; font-weight: 500;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  color: white; margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.hero p.lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,0.92);
  max-width: 640px; margin: 0 auto 2.5rem;
}

/* === Search bar === */
.search-bar {
  background: white; border-radius: 999px; padding: 0.45rem;
  display: flex; align-items: stretch; gap: 0;
  max-width: 880px; margin: 0 auto;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.4);
  position: relative;
}
.search-bar .search-field {
  flex: 1; display: flex; flex-direction: column; padding: 0.85rem 1.5rem;
  border-radius: 999px; cursor: pointer; transition: background 0.2s; min-width: 0;
}
.search-bar .search-field:hover { background: rgba(31, 61, 43, 0.04); }
.search-bar .search-field + .search-field { border-left: 1px solid var(--color-line); }
.search-bar .search-field > span {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-charcoal);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
/* Date-trigger button variant of .search-field reset for button defaults */
.search-bar button.search-field {
  font-family: inherit; text-align: left;
  border: 0; outline: none;
}
.search-bar .search-field > span.date-display {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-stone);
  letter-spacing: 0;
  margin-bottom: 0;
  line-height: 1.4;
}
.search-bar .search-field input,
.search-bar .search-field select {
  border: 0; background: transparent; font-size: 0.92rem; color: var(--color-stone);
  padding: 0; width: 100%; outline: none; font-family: inherit;
}
.search-bar .search-field input::placeholder { color: var(--color-stone-light); }
.search-bar .search-submit {
  background: var(--color-accent); color: white; border-radius: 999px;
  padding: 0 1.6rem; font-weight: 500; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.search-bar .search-submit:hover { background: var(--color-accent-dark); }
.search-bar .search-submit:active { transform: scale(0.97); }

/* === Sections === */
.section { padding: 6rem 1.5rem; }
.section-narrow { padding: 4rem 1.5rem; }
.container { max-width: 1400px; margin: 0 auto; }
.container-narrow { max-width: 980px; margin: 0 auto; }

.section-eyebrow {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent); font-weight: 600;
  margin-bottom: 0.85rem;
}
.section-title { font-size: clamp(2rem, 3.2vw, 2.85rem); margin: 0 0 1rem; }
.section-subtitle { font-size: 1.1rem; color: var(--color-stone); max-width: 640px; }

/* === Property card === */
.prop-card {
  display: block; cursor: pointer; transition: transform 0.3s var(--ease-out);
  background: transparent;
}
.prop-card:hover { transform: translateY(-4px); }
.prop-card:hover .prop-card-img { transform: scale(1.04); }

.prop-card-media {
  position: relative; aspect-ratio: 4 / 3.4; border-radius: 18px;
  overflow: hidden; background: var(--color-sand);
  box-shadow: var(--shadow-sm);
}
/* Anchor wrapping the cover image so the entire photo (including any
   watermark/badge baked into the image itself) navigates to the property
   page. Decorative overlays sit above this via z-index; the interactive
   controls (arrows, wishlist) keep stopPropagation in their click handlers
   so they don't bubble to this link. */
.prop-card-media-link {
  display: block; width: 100%; height: 100%;
  color: inherit; text-decoration: none;
}
.prop-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.prop-card-badges {
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px; z-index: 2;
  pointer-events: none;
}
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  background: white; color: var(--color-charcoal);
  box-shadow: var(--shadow-sm);
}
.badge-favorite { background: var(--color-charcoal); color: white; }
.badge-new { background: var(--color-accent); color: white; }
.wishlist-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.2s;
}
.wishlist-btn svg { width: 20px; height: 20px; transition: fill 0.2s, stroke 0.2s; }
.wishlist-btn:hover { transform: scale(1.08); }
.wishlist-btn[aria-pressed="true"] svg { fill: var(--color-danger); stroke: var(--color-danger); }
.wishlist-btn[aria-pressed="false"] svg { fill: rgba(0,0,0,0.5); stroke: white; }

.prop-card-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
  pointer-events: none;
}
.prop-card-dots span {
  width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.6);
  transition: background 0.2s;
}
.prop-card-dots span.active { background: white; }

.prop-card-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.92); display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; z-index: 2;
  box-shadow: var(--shadow-sm);
}
.prop-card-arrow.left { left: 10px; }
.prop-card-arrow.right { right: 10px; }
.prop-card-media:hover .prop-card-arrow { opacity: 1; }
.prop-card-arrow:hover { background: white; transform: translateY(-50%) scale(1.05); }

.prop-card-body { padding: 1rem 0.25rem 0; }
.prop-card-title-row { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.prop-card-title { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--color-charcoal); margin: 0; }
.prop-card-rating { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.92rem; color: var(--color-charcoal); white-space: nowrap; }
.prop-card-meta { font-size: 0.9rem; color: var(--color-stone); margin-top: 0.15rem; }
.prop-card-price { font-size: 0.98rem; color: var(--color-charcoal); margin-top: 0.55rem; }
.prop-card-price strong { font-weight: 600; }

/* === Properties grid === */
.props-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* === Destinations === */
.dest-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }
.dest-card {
  position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/5;
  cursor: pointer; transition: transform 0.4s var(--ease-out);
}
.dest-card:hover { transform: translateY(-3px); }
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.dest-card:hover img { transform: scale(1.07); }
.dest-card .dest-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,30,25,0.05) 50%, rgba(20,30,25,0.78) 100%);
}
.dest-card .dest-content {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: white;
}
.dest-card .dest-content h3 { color: white; font-size: 1.55rem; margin: 0 0 0.3rem; }
.dest-card .dest-content p { font-size: 0.9rem; opacity: 0.9; margin: 0; }
.dest-card .dest-count {
  position: absolute; top: 1rem; right: 1rem;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: var(--color-charcoal);
  font-size: 0.78rem; font-weight: 600;
}

/* === Trust strip === */
.trust-strip {
  background: var(--color-primary); color: var(--color-cream);
  padding: 3rem 1.5rem;
}
.trust-strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto;
  text-align: center;
}
.trust-item .trust-num {
  font-family: var(--font-display); font-size: 2.6rem; color: var(--color-cream); margin-bottom: 0.25rem;
  display: block;
}
.trust-item .trust-label { font-size: 0.85rem; opacity: 0.85; letter-spacing: 0.04em; }

/* === Reveal animation === */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.40s; }

/* === Property detail === */
.detail-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; aspect-ratio: 16 / 8.5; border-radius: 18px; overflow: hidden;
  position: relative;
}
.detail-gallery > * {
  position: relative; overflow: hidden; cursor: pointer; background: var(--color-sand);
}
.detail-gallery > *:first-child { grid-row: span 2; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.detail-gallery > *:hover img { transform: scale(1.04); }
.detail-gallery .show-all {
  position: absolute; bottom: 16px; right: 16px; z-index: 5;
  background: white; padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.85rem;
  font-weight: 500; box-shadow: var(--shadow-sm); border: 1px solid var(--color-line);
}
.detail-gallery .show-all:hover { background: var(--color-cream); }

/* === Photo grid (full-screen scrollable grid) === */
.photo-grid-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: var(--color-cream);
  display: none; flex-direction: column;
  overscroll-behavior: contain;
}
.photo-grid-overlay.open { display: flex; animation: fadeIn 0.2s; }
.photo-grid-header {
  position: sticky; top: 0; z-index: 1;
  background: var(--color-cream);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.photo-grid-close {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--color-charcoal);
  transition: background 0.15s; cursor: pointer;
}
.photo-grid-close:hover { background: rgba(0,0,0,0.06); }
.photo-grid-title { font-size: 0.95rem; font-weight: 500; color: var(--color-charcoal); }
.photo-grid-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
}
.photo-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1280px; margin: 0 auto;
}
@media (min-width: 560px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .photo-grid { grid-template-columns: repeat(5, 1fr); } }
.photo-grid-tile {
  position: relative; padding: 0; border: 0;
  background: var(--color-sand);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: opacity 0.15s;
}
.photo-grid-tile:hover { opacity: 0.92; }
.photo-grid-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.photo-grid-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* === Lightbox === */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,25,22,0.95);
  display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.open { display: flex; animation: fadeIn 0.3s; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.lightbox-close, .lightbox-nav {
  position: absolute; width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: white; backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: white; font-size: 0.9rem; opacity: 0.85; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* === Booking widget === */
.booking-widget {
  border: 1px solid var(--color-line); border-radius: 16px; padding: 1.5rem;
  background: white; box-shadow: var(--shadow-md); position: sticky; top: 100px;
  z-index: 5;
}
.booking-widget .booking-form { position: relative; }
.booking-widget .price-row { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.booking-widget .price-row .price-from-label {
  font-size: 0.85rem; color: var(--color-stone); font-weight: 500;
  text-transform: lowercase; letter-spacing: 0.02em;
}
.booking-widget .price-row .price { font-size: 1.55rem; font-weight: 600; color: var(--color-charcoal); }
.booking-widget .price-row .per { color: var(--color-stone); font-size: 0.95rem; }

.booking-form { border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; }
.booking-form .row { display: grid; grid-template-columns: 1fr 1fr; }
.booking-form .row + .row { border-top: 1px solid var(--color-line); }
.booking-form .field { padding: 0.7rem 0.85rem; }
.booking-form .field + .field { border-left: 1px solid var(--color-line); }
.booking-form label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-charcoal); display: block; margin-bottom: 0.15rem; }
.booking-form input, .booking-form select {
  border: 0; padding: 0; font-family: inherit; font-size: 0.95rem; outline: none;
  width: 100%; background: transparent; color: var(--color-charcoal);
}
.booking-line { display: flex; justify-content: space-between; padding: 0.6rem 0; font-size: 0.92rem; color: var(--color-stone); }
.booking-line + .booking-line { border-top: 1px solid var(--color-line); }
.booking-total { display: flex; justify-content: space-between; padding-top: 0.85rem; margin-top: 0.5rem; border-top: 1px solid var(--color-line); font-weight: 600; color: var(--color-charcoal); font-size: 1.05rem; }

/* === Booking calendar (custom, replaces native date inputs) === */
.booking-form .date-trigger {
  text-align: left; cursor: pointer; background: transparent; border: 0;
  font-family: inherit; padding: 0.7rem 0.85rem; width: 100%;
  display: flex; flex-direction: column; gap: 0.1rem;
  font: inherit; color: inherit;
  border-radius: 0;
}
.booking-form .date-trigger label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-charcoal); display: block; margin: 0; cursor: pointer;
}
.booking-form .date-trigger .date-display {
  font-size: 0.95rem; color: var(--color-charcoal); line-height: 1.3;
}
.booking-form .date-trigger:hover { background: rgba(31,61,43,0.04); }
.booking-form .date-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Hospitable Direct embed — force the rendered iframe to fill its wrapper
   so the booking card lines up with the sibling perks/channel cards in the
   right column. Without this, Hospitable's snippet lays the iframe out
   narrower than the column and the booking card looks inset against the
   Direct-booking perks below. */
#hospInlineWidget,
#hospInlineWidget > * { width: 100%; }
#hospInlineWidget iframe { display: block; width: 100% !important; max-width: 100%; border: 0; margin: 0 auto; }

/* On mobile, Hospitable renders the calendar / Guests / Reserve column
   left-aligned inside the iframe at ~285px regardless of the iframe's
   actual width — leaving visible whitespace on the right when the iframe
   spans the full column. We can't reach across the iframe boundary to
   recenter their CSS, so cap the iframe width to match their content and
   center it; the perks card below stays full-width below as before. */
@media (max-width: 640px) {
  #hospInlineWidget iframe { max-width: 320px !important; }
}

/* Always-on-top floating calendar — JS sets exact top/left via fixed-positioning
   anchored to the trigger button. z-index sits above the sticky header (50)
   and below the lightbox (200). */
.bkcal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.bkcal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.booking-calendar {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  padding: 1.25rem;
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  color: var(--color-charcoal);
}
.bkcal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 0.5rem;
}
.bkcal-titles {
  display: flex; gap: 4rem; flex: 1; justify-content: center; font-weight: 600; font-size: 0.95rem;
}
.bkcal-titles span:nth-child(2) { display: none; }
@media (min-width: 600px) {
  .bkcal-titles span:nth-child(2) { display: inline; }
}
.bkcal-nav {
  width: 32px; height: 32px; border-radius: 999px;
  background: transparent; color: var(--color-charcoal); font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.bkcal-nav:hover { background: rgba(31,61,43,0.06); }
.bkcal-close {
  width: 32px; height: 32px; border-radius: 999px;
  background: transparent; color: var(--color-charcoal); font-size: 1.4rem; line-height: 1;
}
.bkcal-close:hover { background: rgba(31,61,43,0.06); }

.bkcal-grids {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 600px) {
  .bkcal-grids { grid-template-columns: 1fr 1fr; }
}
.bkcal-month-title {
  text-align: center; font-weight: 600; font-size: 0.95rem;
  margin-bottom: 0.5rem; display: none;
}
@media (max-width: 599px) { .bkcal-month-title { display: block; } }
.bkcal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  font-size: 0.7rem; color: var(--color-stone); text-align: center;
  margin-bottom: 0.5rem; font-weight: 600; letter-spacing: 0.04em;
}
.bkcal-cells {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.bkcal-cell {
  aspect-ratio: 1.05 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 0.92rem; color: var(--color-charcoal);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  padding: 0; gap: 0;
  position: relative;
}
.bkcal-cell .cell-day { font-size: 0.92rem; font-weight: 500; line-height: 1; }
.bkcal-cell .cell-price {
  font-size: 0.65rem; color: var(--color-stone); line-height: 1; margin-top: 2px;
  font-feature-settings: "tnum";
}
.bkcal-cell.empty { cursor: default; }
.bkcal-cell:not([disabled]):not(.empty):hover {
  background: var(--color-cream-dark);
}
.bkcal-cell.checkin, .bkcal-cell.checkout {
  background: var(--color-primary) !important; color: var(--color-cream) !important;
}
.bkcal-cell.checkin .cell-price, .bkcal-cell.checkout .cell-price {
  color: rgba(250, 246, 238, 0.8) !important;
}
.bkcal-cell.in-range {
  background: rgba(31, 61, 43, 0.10);
}
.bkcal-cell.disabled,
.bkcal-cell.past,
.bkcal-cell.booked {
  cursor: not-allowed;
}
/* Past dates: faint, no strikethrough — just out of reach */
.bkcal-cell.past:not(.booked) {
  color: var(--color-stone-light);
  background: transparent !important;
  opacity: 0.55;
}
.bkcal-cell.past:not(.booked) .cell-price { display: none; }
.bkcal-cell.past:not(.booked):hover { background: transparent !important; }

/* Booked dates: gray tile + bold strikethrough — unmistakably unavailable */
.bkcal-cell.booked {
  background: #ECECEC !important;
  color: #8A8A8A !important;
}
.bkcal-cell.booked .cell-day {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #8A8A8A;
  font-weight: 500;
  color: #8A8A8A;
}
.bkcal-cell.booked .cell-price {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8A8A8A;
  font-weight: 500;
  text-decoration: none;
}
.bkcal-cell.booked:hover { background: #ECECEC !important; }

/* Pulsing red flash when a user tries to span over booked nights */
@keyframes bkcal-conflict-pulse {
  0%, 100% { background: #ECECEC !important; box-shadow: none; }
  20%, 60% { background: #FBD5D0 !important; box-shadow: 0 0 0 2px var(--color-danger); }
}
.bkcal-cell.booked.conflict-flash {
  animation: bkcal-conflict-pulse 1.4s ease-in-out;
}
.bkcal-cell.booked.conflict-flash .cell-day,
.bkcal-cell.booked.conflict-flash .cell-price {
  color: var(--color-danger) !important;
  text-decoration-color: var(--color-danger);
}

.bkcal-banner {
  background: rgba(177, 74, 63, 0.10);
  color: var(--color-danger);
  border: 1px solid rgba(177, 74, 63, 0.35);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  margin-bottom: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
}
.bkcal-banner.hidden { display: none; }
.bkcal-foot {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--color-line);
  font-size: 0.82rem; color: var(--color-stone); flex-wrap: wrap;
}
.bkcal-legend { display: inline-flex; align-items: center; gap: 0.4rem; }
.bkcal-legend .dot {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}
.bkcal-legend .dot.booked { background: var(--color-line); border: 1px solid var(--color-stone); }
.bkcal-legend .dot.live { background: var(--color-success); }
.bkcal-clear {
  margin-left: auto; background: transparent; color: var(--color-primary);
  font-weight: 500; font-size: 0.85rem; padding: 0.25rem 0.5rem;
  text-decoration: underline;
}
.bkcal-clear:hover { color: var(--color-primary-dark); }

/* === Property detail body grid ===
   Description column + booking widget aside. Stacks on narrow viewports
   (matches when .detail-gallery and other layout pieces collapse). */
.detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
}

/* === Reviews === */
/* Two-column grids on the property detail page. minmax(0, 1fr) instead of
   plain 1fr so children can shrink below their min-content width — without
   it, long author lines push the grid wider than the parent and overflow
   the right padding on mobile. */
.review-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rating-bars {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 2rem 0; margin-bottom: 2rem;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
@media (max-width: 640px) {
  .review-grid,
  .rating-bars { grid-template-columns: 1fr; }
}
.review-card {
  background: white; border: 1px solid var(--color-line); border-radius: 14px;
  padding: 1.5rem; transition: box-shadow 0.2s, transform 0.2s;
  min-width: 0;
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.review-card .stars { color: var(--color-accent); font-size: 0.95rem; letter-spacing: 0.05em; }
.review-card .review-text { margin: 0.65rem 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-charcoal); }
.review-card .review-author { font-size: 0.82rem; color: var(--color-stone); }

.rating-bar { display: flex; align-items: center; gap: 0.85rem; margin: 0.4rem 0; }
.rating-bar .label { font-size: 0.85rem; color: var(--color-charcoal); width: 110px; }
.rating-bar .bar { flex: 1; height: 4px; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.rating-bar .bar > div { height: 100%; background: var(--color-charcoal); }
.rating-bar .val { font-size: 0.85rem; color: var(--color-charcoal); font-weight: 500; min-width: 36px; text-align: right; }

/* === Amenities === */
.amenity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.amenity-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--color-line);
  font-size: 0.95rem;
}
.amenity-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); }

/* === Mobile sticky CTA === */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: white; border-top: 1px solid var(--color-line);
  padding: 0.85rem 1.25rem;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.05);
}

/* === Footer === */
.site-footer {
  background: var(--color-primary-dark); color: rgba(250, 246, 238, 0.85);
  padding: 4rem 1.5rem 2rem;
}
.site-footer h4 { color: var(--color-cream); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; margin: 0 0 1rem; letter-spacing: 0.02em; }
.site-footer a { color: rgba(250, 246, 238, 0.7); }
.site-footer a:hover { color: var(--color-cream); }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; max-width: 1400px; margin: 0 auto; }
.site-footer .footer-brand p { font-size: 0.92rem; max-width: 320px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.6rem; font-size: 0.9rem; }
.site-footer .footer-base {
  border-top: 1px solid rgba(250,246,238,0.12); margin-top: 3rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto;
  font-size: 0.82rem; color: rgba(250,246,238,0.55); flex-wrap: wrap; gap: 1rem;
}

/* === FAQ accordion === */
.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-q {
  width: 100%; text-align: left; padding: 1.5rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1.08rem;
  color: var(--color-charcoal);
}
.faq-q:hover { color: var(--color-primary); }
.faq-q .icon { width: 22px; height: 22px; flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0 0 1.5rem; color: var(--color-stone); line-height: 1.65; max-width: 880px; }

/* === Newsletter === */
.newsletter {
  background: var(--color-sand); border-radius: 24px;
  padding: 4rem 2rem; text-align: center;
}
.newsletter form {
  display: flex; max-width: 500px; margin: 1.5rem auto 0; gap: 0.5rem;
}
.newsletter input {
  flex: 1; padding: 0.85rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--color-line); background: white;
  font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color 0.2s;
}
.newsletter input:focus { border-color: var(--color-primary); }

/* === Toast === */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--color-charcoal); color: white;
  padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.92rem;
  box-shadow: var(--shadow-lg); z-index: 100; opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* === Mobile drawer === */
/* Side-panel drawer + blurred/darkened backdrop. Drawer takes ~85vw (capped
   at 360px) on the right; the rest of the viewport is the backdrop, which
   dims and blurs the page behind so the menu items always have contrast
   regardless of theme or scroll position. Click backdrop to close. */
/* Backdrop covers the FULL viewport so the page is uniformly blurred as
   the drawer slides in — without that the blur reads as a fixed bar on
   the left that the drawer slides up to meet. The drawer sits on top with
   its own translucency + blur, so the dim scrim showing through it gets
   absorbed by the cream tint. Slightly lighter dim (0.35 vs 0.5) keeps
   the drawer from looking muddy. */
.mobile-drawer-backdrop {
  position: fixed; inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.mobile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer {
  position: fixed; top: 0; bottom: 0; right: 0;
  width: min(85vw, 360px); z-index: 100;
  /* Slightly translucent + frosted-glass blur over the page beneath. The
     opaque fallback keeps it readable on browsers without color-mix /
     backdrop-filter (older Android WebViews). */
  background: var(--color-cream);
  background: color-mix(in srgb, var(--color-cream) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateX(100%); transition: transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
  padding: 5rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  /* Inert when closed — prevents accidental clicks on hidden links and stops
     it being revealed if anything ever pushes the body beyond its viewport. */
  visibility: hidden; pointer-events: none;
  overflow-y: auto;
}
.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible; pointer-events: auto;
  transition: transform 0.35s var(--ease-out), visibility 0s linear 0s;
}
.mobile-drawer a {
  font-family: var(--font-display); font-size: 1.6rem; padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line); color: var(--color-charcoal);
}
.mobile-drawer .close-drawer {
  position: absolute; top: 1.25rem; right: 1.25rem;
}

/* === Forms === */
.form-control {
  width: 100%; padding: 0.85rem 1rem; border-radius: 10px;
  border: 1px solid var(--color-line); background: white;
  font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color 0.2s;
}
.form-control:focus { border-color: var(--color-primary); }
.form-label { font-size: 0.85rem; font-weight: 500; color: var(--color-charcoal); display: block; margin-bottom: 0.4rem; }

/* === Compare bar === */
.compare-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--color-charcoal); color: white;
  padding: 0.85rem 1.25rem; border-radius: 999px;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--shadow-lg); z-index: 30; opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}
.compare-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }
.compare-bar .btn { padding: 0.45rem 1rem; font-size: 0.85rem; }

/* === Skeleton === */
.skel {
  background: linear-gradient(90deg, var(--color-sand) 25%, var(--color-cream-dark) 50%, var(--color-sand) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* === Map placeholder === */
.map-static {
  width: 100%; height: 320px; background: var(--color-sand) center/cover no-repeat;
  border-radius: 16px; position: relative; overflow: hidden;
}
.map-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
  width: 36px; height: 36px; background: var(--color-accent); color: white;
  border-radius: 999px 999px 999px 0; transform-origin: bottom left;
  display: inline-flex; align-items: center; justify-content: center;
  rotate: -45deg; box-shadow: var(--shadow-md);
}
.map-pin svg { rotate: 45deg; width: 18px; height: 18px; }

/* === Responsive === */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .nav-actions .btn { display: none; }
  /* Hide the wishlist heart on mobile — the drawer already has a Wishlist
     link, and dropping it gives the larger logo more room. The hamburger
     (mobile-menu-btn) is excluded so it stays visible. */
  .nav-actions .icon-btn:not(.mobile-menu-btn) { display: none; }
  .brand-mark-img, .brand-mark-svg svg { height: 56px; }
  /* Top-align hero content on mobile so the eyebrow pill never gets
     pushed behind the sticky header (vertical-centering on short phones
     overflowed the content past the hero's top edge). 1.5rem matches the
     eyebrow's own margin-bottom so the gap above the pill mirrors the
     gap below it to the headline. */
  .hero { min-height: 88vh; align-items: flex-start; }
  .hero-content { padding-top: 1.5rem; padding-bottom: 3rem; }
  .section { padding: 4rem 1.5rem; }
  .search-bar { flex-direction: column; border-radius: 24px; padding: 0.5rem; gap: 4px; }
  .search-bar .search-field { padding: 0.75rem 1.25rem; border-radius: 18px; }
  .search-bar .search-field + .search-field { border-left: 0; border-top: 1px solid var(--color-line); }
  .search-bar .search-submit { padding: 0.95rem; border-radius: 18px; justify-content: center; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .detail-gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4/3; }
  .detail-gallery > *:not(:first-child) { display: none; }
  .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .booking-widget { position: static; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .amenity-grid { grid-template-columns: 1fr; }
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: 80px; }
}

@media (max-width: 640px) {
  .dest-grid { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr; }
  .props-grid { grid-template-columns: 1fr; }
  .newsletter { padding: 2.5rem 1.25rem; }
  .newsletter form { flex-direction: column; }
}

/* === Theme template: "modern" (Airbnb-style) ===
   Selected from admin → Branding & theme → Theme template. Color and font
   choices come from the theme's CSS variables; this block handles the
   structural changes that variables can't (sans-serif headings, tighter
   radii, flatter buttons, white surfaces). */
[data-template="modern"] h1,
[data-template="modern"] h2,
[data-template="modern"] h3,
[data-template="modern"] h4,
[data-template="modern"] h5,
[data-template="modern"] .font-display {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.022em;
}
[data-template="modern"] .brand-mark {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.012em;
}
[data-template="modern"] .btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
[data-template="modern"] .btn-primary,
[data-template="modern"] .btn-accent { color: white; }
[data-template="modern"] .btn-outline {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}
[data-template="modern"] .btn-outline:hover {
  background: var(--color-charcoal);
  color: white;
}
[data-template="modern"] .booking-widget,
[data-template="modern"] .review-card,
[data-template="modern"] .prop-card,
[data-template="modern"] .book-card,
[data-template="modern"] .amenity-item,
[data-template="modern"] .form-control,
[data-template="modern"] .field {
  border-radius: 12px;
}
[data-template="modern"] .badge { border-radius: 8px; font-weight: 600; }
[data-template="modern"] .detail-gallery,
[data-template="modern"] .photo-grid-tile { border-radius: 14px; }

/* Surfaces: airy white page, faintly cream cards (matches the booking-card
   look in the modern reference). The booking widget on the property page
   gets the cream tint so it reads as a distinct card against white. */
[data-template="modern"] .site-header { background: rgba(255, 255, 255, 0.92); }
[data-template="modern"] .site-header.scrolled { background: rgba(255, 255, 255, 0.98); }
[data-template="modern"] .booking-widget {
  background: var(--color-sand);
  border: 1px solid var(--color-line);
}

/* The login screen + brand preview shouldn't show the serif wordmark when
   the modern template is active — keep them sans like the rest of the site. */
[data-template="modern"] .brand-mark span,
[data-template="modern"] [data-brand-name] {
  font-family: var(--font-body) !important;
}

/* === Theme template: "luxury" (Champagne & Navy) ===
   High-contrast Bodoni headings, deep navy text on ivory, champagne-gold
   accents, generous radii. Targets a magazine-luxury feel — Aman / Four
   Seasons / Vogue editorial register, not Airbnb-clean or rustic-warm. */
[data-template="luxury"] h1,
[data-template="luxury"] h2,
[data-template="luxury"] h3,
[data-template="luxury"] h4,
[data-template="luxury"] h5,
[data-template="luxury"] .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
}
[data-template="luxury"] .brand-mark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
}
[data-template="luxury"] .booking-widget,
[data-template="luxury"] .review-card,
[data-template="luxury"] .prop-card,
[data-template="luxury"] .book-card { border-radius: 18px; }
[data-template="luxury"] .detail-gallery,
[data-template="luxury"] .photo-grid-tile { border-radius: 20px; }

/* Hairline gold dividers + 1px gold borders on key surfaces — subtle
   detail that reads as "considered" without going gilded. */
[data-template="luxury"] .booking-widget,
[data-template="luxury"] .prop-card,
[data-template="luxury"] .review-card,
[data-template="luxury"] .book-card {
  border: 1px solid rgba(184, 153, 104, 0.18);
}
[data-template="luxury"] .btn-accent {
  color: white;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}
[data-template="luxury"] .btn-primary {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}
/* Section eyebrows already have uppercase tracking; nudge them gold. */
[data-template="luxury"] .section-eyebrow { color: var(--color-accent); }