/* ══════════════════════════════════════════════════════════════════════════
   Aurelia Luxe — Homepage Fix Layer v3.9
   Loaded AFTER main.css, premium.css and theme-fixes.css (see inc/enqueue.php)
   so it wins the cascade cleanly. PMS plugin markup/behaviour untouched —
   visual + structural CSS only, plus one presentational HTML addition
   (gallery caption span) in inc/frontend-functions.php.

   v3.9 UI/UX refinement pass — no redesign, no new sections: tightens
   rhythm inside the accommodation cards, balances the experience grid so
   an incomplete row never stretches or strands, and evens out vertical
   spacing across the homepage.

   v4.1 note: the gallery-depth pass and floating-buttons spacing/idle-bob
   overrides that used to live in this file (old §9/§10/§13) have been
   removed. Both components are now fully specified once in main.css
   ("GALLERY — IMMERSIVE CAROUSEL" and "FLOATING CONTACT BUTTONS"), which
   is the single source of truth for their layout, depth and motion —
   see those blocks instead of looking here.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: single full-height image; gradient tint reaches up to the
   halfway point of the image (deep black at the very bottom, fully
   transparent above it), copy + booking bar sit low, inside the tinted
   band, well under the top third — so the photo itself stays the star. */
.hl-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  min-height: 100svh !important;
  height: 100svh !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}
.hl-hero__bg,
.hl-hero__video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.hl-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  /* Desktop: transparent top half, deepening to near-black at the bottom band
     that holds the copy + booking bar — pushed darker (v3.7) for stronger
     text/CTA contrast without flattening the photo above the midline. */
  background: linear-gradient(
    to bottom,
    rgba(10, 7, 5, 0) 0%,
    rgba(10, 7, 5, 0) 42%,
    rgba(10, 7, 5, 0.55) 62%,
    rgba(10, 7, 5, 0.86) 82%,
    rgba(10, 7, 5, 0.97) 100%
  ) !important;
}
.hl-hero__content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 1.25rem var(--hl-pad) 2.25rem !important;
  min-height: 26% !important;
}
.hl-hero__subtitle {
  text-align: center !important;
  margin-inline: auto !important;
}
.hl-hero__scroll-indicator {
  align-items: center !important;
  margin: 1rem auto 0 !important;
}

/* Booking bar: full width within the tinted band, every field visible */
.hl-search-bar {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.hl-search-bar__inner {
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.hl-search-bar__field {
  flex: 1 1 0 !important;
  min-width: 120px !important;
}
.hl-search-bar__btn {
  flex: 0 0 auto !important;
  padding: 1rem 1.75rem !important;
}

@media (min-width: 901px) {
  .hl-hero__title { font-size: clamp(2.2rem, 4vw, 3.4rem) !important; }
  .hl-hero__subtitle { font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important; max-width: 640px; }
}

@media (max-width: 900px) {
  .hl-hero__content { padding: 1rem 1rem 1.5rem !important; min-height: 30% !important; }
  .hl-hero__eyebrow { font-size: 0.62rem !important; margin-bottom: 0.35rem !important; }
  .hl-hero__title {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.4rem !important;
  }
  .hl-hero__subtitle {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    max-width: 32ch;
    margin-bottom: 0.85rem !important;
  }
  .hl-hero__scroll-indicator { display: none !important; }
  .hl-hero__overlay {
    /* Mobile: intentionally lighter than the desktop gradient above — enough
       tint for the copy to stay readable without the banner going flat black
       edge-to-edge on a small screen. */
    background: linear-gradient(
      to bottom,
      rgba(10, 7, 5, 0) 0%,
      rgba(10, 7, 5, 0) 48%,
      rgba(10, 7, 5, 0.4) 68%,
      rgba(10, 7, 5, 0.7) 86%,
      rgba(10, 7, 5, 0.88) 100%
    ) !important;
  }
}

@media (max-width: 640px) {
  /* Compact 2-column booking widget so text + booking never swallow the photo */
  .hl-search-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: rgba(255,255,255,0.97) !important;
  }
  .hl-search-bar__inner > div:nth-of-type(2),
  .hl-search-bar__inner > div:nth-of-type(4) { display: none !important; }
  .hl-search-bar__inner > div:nth-of-type(1) {
    grid-column: 1 / 2; grid-row: 1;
    border-right: 1px solid var(--hl-border);
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__inner > div:nth-of-type(3) {
    grid-column: 2 / 3; grid-row: 1;
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__inner > div:nth-of-type(5) {
    grid-column: 1 / -1; grid-row: 2;
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__field { padding: 0.5rem 0.7rem !important; }
  .hl-search-bar__field label { font-size: 0.58rem !important; margin-bottom: 0.1rem !important; }
  .hl-search-bar__field input,
  .hl-search-bar__field select { font-size: 0.78rem !important; }
  .hl-search-bar__btn {
    grid-column: 1 / -1; grid-row: 3;
    justify-content: center !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.72rem !important;
    border-radius: 0 0 var(--hl-radius-lg) var(--hl-radius-lg) !important;
  }
}

/* ── 1a. GLOBAL SECTION RHYTHM: the shared --hl-section-v padding topped
   out at 9rem top AND bottom, so two adjacent .section-pad sections could
   stack up to ~18rem of combined whitespace between them on wide screens —
   most visible between Experiences and the Gallery teaser. Lowering the
   clamp's ceiling keeps the same airy, generous feel at typical widths
   while stopping it from ballooning on very large viewports, so spacing
   reads as consistent rather than sometimes-crowded, sometimes-cavernous. */
:root {
  --hl-section-v: clamp(3.5rem, 7vw, 6.5rem) !important;
}
#gallery-teaser {
  padding-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}

/* ── 1b. ACCOMMODATION CARDS: price is the first thing a scanning eye should
   land on, so it's bumped well above the surrounding meta/label text and
   scales down gracefully on smaller cards. The "From" / "/night" labels
   keep their own small size since they already set font-size explicitly
   and load after this rule. ─────────────────────────────────────────────── */
.hl-room-card__price,
.hl-room-result-card__price {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.9rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  gap: 0.3rem !important;
}
.hl-room-card__price-amount,
.hl-room-result-card__price .hl-room-card__price-amount {
  font-size: inherit !important;
  font-weight: inherit !important;
}
.hl-room-card__price-from,
.hl-room-result-card__price .hl-room-card__price-from {
  font-size: 0.72rem !important;
  align-self: flex-start;
  margin-top: 0.2rem;
}
.hl-room-card__price-night,
.hl-room-result-card__price .hl-room-card__price-night {
  font-size: 0.72rem !important;
  align-self: flex-end;
  margin-bottom: 0.15rem;
}
@media (max-width: 640px) {
  .hl-room-card__price,
  .hl-room-result-card__price { font-size: 1.4rem !important; }
}

/* ── 1c. ACCOMMODATION CARD: tighten the rhythm inside the body so title →
   meta → description → footer read as one grouped unit instead of a series
   of loosely related lines with leftover air between them. Individual
   margins are zeroed in favour of a single, even flex gap; the footer gets
   a warm divider and sticks to the bottom of the card so price + CTA always
   read as a single grounded row, never floating. The image gets a touch
   more presence (slightly taller frame, soft base scrim) so it reads as
   the card's main event rather than a thumbnail above the copy. ────────── */
.hl-room-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.7rem !important;
}
.hl-room-card__meta,
.hl-room-card__title,
.hl-room-card__desc,
.hl-room-card__amenities {
  margin-bottom: 0 !important;
}
.hl-room-card__footer {
  margin-top: auto !important;
  padding-top: 1.15rem !important;
  border-top: 1px solid color-mix(in oklab, var(--hl-gold) 28%, var(--hl-border)) !important;
}
.hl-room-card__image-wrap {
  aspect-ratio: 5 / 4 !important;
}
.hl-rooms-grid--single .hl-room-card__image-wrap {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 420px !important;
}
.hl-room-card__image-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 42% !important;
  background: linear-gradient(to top, rgba(10,9,8,0.45), transparent) !important;
  pointer-events: none !important;
}

/* Single-featured-room layout: the split image/content card previously
   centred its copy inside a 420px-tall column, which left large empty
   margins above/below short copy and made the two halves feel unrelated.
   Left-aligning the content and adding a soft divider ties both halves
   together as one composition instead of two abutting blocks. */
.hl-rooms-grid--single .hl-room-card__body {
  justify-content: flex-start !important;
  gap: 1rem !important;
  border-left: 1px solid rgba(201,169,110,0.25) !important;
}

/* ── 2. EXPERIENCES: real gap between every tile, all four corners
   rounded on each card independently, centred as a block both ways so
   nothing ever reads as fused or lopsided ───────────────────────────── */
#experiences .hl-exp-grid,
body .hl-exp-grid,
body section.hl-experiences .hl-exp-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2rem !important;
  row-gap: 2.5rem !important;
  width: 100% !important;
  margin-inline: auto !important;
}
#experiences .hl-exp-card,
body .hl-exp-card {
  display: block !important;
  /* 3-up on desktop: any incomplete last row centres itself (via the
     grid's justify-content: center) instead of stretching a lone card or
     pair across the full row width and leaving a lopsided empty gap. */
  flex: 1 1 calc((100% - 4rem) / 3) !important;
  max-width: calc((100% - 4rem) / 3) !important;
  min-width: 280px !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(20, 15, 11, 0.16) !important;
  background-clip: padding-box !important;
}
/* Clip the image/overlay to the rounded corners on the inner layers
   instead of the card itself, so the box-shadow is never cut off */
#experiences .hl-exp-card__image,
body .hl-exp-card__image {
  border-radius: 18px !important;
  overflow: hidden !important;
}
#experiences .hl-exp-card__overlay,
body .hl-exp-card__overlay {
  border-radius: 18px !important;
}
@media (max-width: 900px) {
  #experiences .hl-exp-card,
  body .hl-exp-card {
    flex: 1 1 calc((100% - 2rem) / 2) !important;
    max-width: calc((100% - 2rem) / 2) !important;
  }
}
@media (max-width: 640px) {
  #experiences .hl-exp-grid,
  body .hl-exp-grid,
  body section.hl-experiences .hl-exp-grid { gap: 1.5rem !important; }
  #experiences .hl-exp-card,
  body .hl-exp-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── 4. FLOATING BUTTONS: fully specified once in main.css ("FLOATING
   CONTACT BUTTONS"), per this file's own header note above — nothing to
   override here. ─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   v3.8 — 5. ANIMATIONS & MICRO-INTERACTIONS
   Builds on the existing reveal-up/left/right + IntersectionObserver system
   already wired up in main.js (initReveal) rather than replacing it: cards
   still fade/slide in as a whole, but their image reveals a beat before the
   text on top of it, so the photo reads first and the copy follows —
   a lightweight, GPU-cheap (opacity + transform only) cinematic stagger.
═══════════════════════════════════════════════════════════════════════════ */

/* Image-first, text-follows on room + experience cards */
.hl-room-card__image-wrap,
.hl-exp-card__image {
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.hl-room-card.revealed .hl-room-card__image-wrap,
.hl-exp-card.revealed .hl-exp-card__image {
  opacity: 1;
  transform: scale(1);
}
.hl-room-card__body,
.hl-exp-card__content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.hl-room-card.revealed .hl-room-card__body,
.hl-exp-card.revealed .hl-exp-card__content {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

/* Staggered reveal via nth-child — no PHP loop edits needed */
.hl-intro-strip__item:nth-child(1) { transition-delay: 0ms !important; }
.hl-intro-strip__item:nth-child(2) { transition-delay: 90ms !important; }
.hl-intro-strip__item:nth-child(3) { transition-delay: 180ms !important; }
.hl-intro-strip__item:nth-child(4) { transition-delay: 270ms !important; }
.hl-offers-grid > .hl-offer-card:nth-child(1),
.hl-blog-grid > .hl-blog-card:nth-child(1),
.hl-team-grid > .hl-team-card:nth-child(1) { transition-delay: 0ms !important; }
.hl-offers-grid > .hl-offer-card:nth-child(2),
.hl-blog-grid > .hl-blog-card:nth-child(2),
.hl-team-grid > .hl-team-card:nth-child(2) { transition-delay: 110ms !important; }
.hl-offers-grid > .hl-offer-card:nth-child(3),
.hl-blog-grid > .hl-blog-card:nth-child(3),
.hl-team-grid > .hl-team-card:nth-child(3) { transition-delay: 220ms !important; }
.hl-offers-grid > .hl-offer-card:nth-child(4),
.hl-blog-grid > .hl-blog-card:nth-child(4),
.hl-team-grid > .hl-team-card:nth-child(4) { transition-delay: 330ms !important; }

/* Button + icon micro-interactions — lift, don't just recolor */
.hl-btn {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.hl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20, 15, 11, 0.16);
}
.hl-btn:active { transform: translateY(0); box-shadow: none; }
.hl-btn svg { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.hl-btn:hover svg { transform: translateX(4px); }
.hl-search-bar__btn:hover svg { transform: scale(1.08); }

/* Icon pop on the intro-strip stats and section eyebrows */
.hl-intro-strip__value {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.hl-intro-strip__item:hover .hl-intro-strip__value { transform: translateY(-2px); }

/* Gallery + room-card hover lift already exists for images; extend the same
   subtle lift to offer/blog/team cards for a consistent premium feel */
.hl-offer-card,
.hl-blog-card,
.hl-team-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease !important;
}
.hl-offer-card:hover,
.hl-blog-card:hover,
.hl-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(20, 15, 11, 0.14);
}

/* Respect reduced-motion preferences — disable the decorative motion,
   keep the content instantly visible and fully functional */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right,
  .hl-room-card__image-wrap, .hl-exp-card__image,
  .hl-room-card__body, .hl-exp-card__content,
  .hl-btn, .hl-btn svg, .hl-intro-strip__value,
  .hl-offer-card, .hl-blog-card, .hl-team-card,
  .hl-hero__bg, .hl-hero__video {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.8 — 6. MOBILE HERO ENHANCEMENT
   Adds a subtle scroll-linked parallax on the background image (driven by
   main.js, IntersectionObserver-gated so the scroll listener only runs while
   the hero is actually on screen), plus tighter, more deliberate mobile
   typography/spacing and a small layered accent so the hero reads as a
   composed moment rather than a stack of centred lines.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hl-hero__bg, .hl-hero__video { will-change: transform; animation: none !important; }

  .hl-hero__eyebrow {
    position: relative;
    display: inline-block;
    padding-bottom: 0.55rem;
    margin-bottom: 0.5rem !important;
  }
  .hl-hero__eyebrow::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 34px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--hl-gold), transparent);
  }
  .hl-hero__title {
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
    letter-spacing: -0.01em;
  }
  .hl-hero__content { gap: 0.15rem; }
  .hl-search-bar { margin-top: 0.6rem !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.9 — FINAL PRODUCTION POLISH
   Targeted refinements only — every rule below addresses one specific,
   named weak spot; nothing here touches a section that already reads well.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 7. ACCOMMODATION: let the photo carry the card. A 4:3.6 frame gives
   the room noticeably more presence than the previous 5:4 without
   crowding the info column below it. The description is clamped to two
   lines so every card in a row ends at the same height regardless of how
   long a given room's copy runs — the biggest hidden cause of a grid
   looking unevenly "empty". Amenity chips pick up a faint gold tint so
   they read as part of the room's story rather than generic tags. ────── */
.hl-room-card__image-wrap {
  aspect-ratio: 4 / 3.6 !important;
}
.hl-rooms-grid--slider .hl-room-card {
  flex-basis: 360px !important;
}
.hl-room-card__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.hl-room-card__amenities li {
  background: color-mix(in oklab, var(--hl-gold) 12%, var(--hl-subtle)) !important;
}

/* Price + CTA were reading as two things sharing a border. Turning the
   footer into a filled bar — flush to the card's own rounded corners via
   the card's existing overflow:hidden — makes "from ₹X" and "View Room"
   read as one grounded action, the way a reservation strip does on the
   sites referenced in the brief (Aman, Four Seasons, Ritz-Carlton). The
   single-featured-room layout already reads as one composition on its
   own (large image + generous copy column) so it keeps its plain
   border-top rather than picking up a second treatment it doesn't need. */
.hl-room-card__footer {
  margin: 0.7rem -1.5rem -1.5rem !important;
  padding: 1.05rem 1.5rem !important;
  border-top: none !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--hl-gold) 5%, transparent), color-mix(in oklab, var(--hl-gold) 10%, var(--hl-subtle))) !important;
}
.hl-rooms-grid--single .hl-room-card__footer {
  margin: 1rem 0 0 !important;
  padding: 1.1rem 0 0 !important;
  background: none !important;
  border-top: 1px solid color-mix(in oklab, var(--hl-gold) 28%, var(--hl-border)) !important;
}

/* ── 8. EXPERIENCES: a designed emblem for the fallback (no-photo) state.
   Previously a no-image card was a flat gradient tile with only a title —
   the exact "placeholder color block" called out in the brief. This is a
   deliberate roundel using the icon already stored per-experience (set in
   Theme Settings → Experiences), inset top-left the way a badge sits on a
   photo, so the card reads as an intentionally styled tile rather than an
   empty swatch. It's cosmetic scaffolding only: the moment a real photo is
   uploaded, hl-exp-card--no-image no longer applies and this never renders. */
.hl-exp-card__emblem {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(6px);
}

/* ── 9. FLOATING BUTTONS: spacing, entrance animation and hover state now
   live entirely in main.css's consolidated "FLOATING CONTACT BUTTONS"
   block (single source of truth — equal gap, fixed edge offsets, no
   overlap at any width). The competing !important overrides that used to
   sit here duplicated and fought with that block, so they've been
   removed rather than layered further. ──────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   v4.0 — IMMERSIVE GALLERY & PREMIUM MICRO-INTERACTION PASS
   Targeted additions only: the gallery becomes the strongest visual section
   on the page (its brief-mandated top priority), the booking widget gets
   real hover/focus feedback, and a handful of tasteful, GPU-cheap
   micro-interactions round out the animation system already established
   above (fade-up, stagger, lift, zoom). Nothing here touches a section
   that already reads well; every rule maps to one named gap.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 10. GALLERY: the immersive carousel (large landscape frames, shadow,
   radius, nav arrows, dots + counter) is now fully specified once in
   main.css's consolidated "GALLERY — IMMERSIVE CAROUSEL" block, which is
   the single source of truth for this section. The overrides that used
   to live here (smaller radius, lighter shadow, smaller nav buttons)
   were an earlier, since-superseded pass and only fought the current
   design, so they've been removed instead of stacked on top. Autoplay
   with hover/focus-to-pause is handled in main.js (initGalleryAutoplay). */

/* ── 11. BOOKING WIDGET: real hover + focus feedback on every field, not
   just the submit button — the brief calls this out by name as the
   primary conversion component, so it should feel as responsive as one. */
.hl-search-bar__field {
  border-radius: var(--hl-radius);
  transition: background-color 0.25s ease;
}
.hl-search-bar__field:hover {
  background: color-mix(in oklab, var(--hl-gold) 6%, transparent);
}
.hl-search-bar__field:focus-within {
  background: color-mix(in oklab, var(--hl-gold) 10%, transparent);
}
.hl-search-bar__field:focus-within label {
  color: var(--hl-gold-dark);
}
.hl-search-bar__field input:focus-visible,
.hl-search-bar__field select:focus-visible {
  outline: none;
}
.hl-search-bar__inner {
  transition: box-shadow 0.4s ease;
}
.hl-search-bar__inner:focus-within {
  box-shadow: var(--hl-shadow-xl), 0 0 0 2px color-mix(in oklab, var(--hl-gold) 45%, transparent);
}
.hl-search-bar__btn {
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease !important;
}
.hl-search-bar__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--hl-gold) 60%, transparent);
}
.hl-search-bar__btn:active { transform: translateY(0); }

/* ── 12. BUTTONS: a warm gold glow on the primary/gold CTAs specifically,
   layered on top of the generic .hl-btn:hover lift already defined above,
   so the site's main conversion actions (Book Now, Search Rooms) read as
   slightly more inviting than a secondary outline/ghost button. ────────── */
.hl-btn--gold:hover,
.hl-btn--primary:hover {
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--hl-gold) 55%, transparent),
              0 8px 18px rgba(20, 15, 11, 0.16);
}

/* ── 13. FLOATING BUTTONS: entrance animation now lives once in main.css's
   consolidated block (fade + rise, staggered per button, off for reduced
   motion). The continuous "idle bob" that used to run here on top of it
   has been dropped — a premium floating action should stay calm at rest
   and only react to the visitor's hover, not compete for attention with
   a perpetual loop. ─────────────────────────────────────────────────── */

/* ── 14. NAVIGATION: mobile drawer links arrive one after another instead
   of all at once. Keyframes (not transitions) so this plays correctly
   regardless of the drawer's own display:none/block toggle — an
   animation always runs from its 0% state once the element is rendered,
   whereas a transition needs a prior rendered frame to interpolate from. */
@keyframes hlMobileNavIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hl-mobile-menu.is-open .hl-mobile-nav li {
  animation: hlMobileNavIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(1) { animation-delay: 0.06s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(2) { animation-delay: 0.11s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(3) { animation-delay: 0.16s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(4) { animation-delay: 0.21s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(5) { animation-delay: 0.26s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(6) { animation-delay: 0.31s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(7) { animation-delay: 0.36s; }
.hl-mobile-menu.is-open .hl-mobile-nav li:nth-child(8) { animation-delay: 0.41s; }

/* ── 15. HERO / CTA BANNER: will-change hints for the two new JS-driven
   scroll effects (initHeroContentFade, initCtaParallax in main.js) — both
   already gated behind desktop + !prefers-reduced-motion in JS; this just
   keeps the browser from having to promote the layer mid-scroll. ──────── */
@media (min-width: 901px) {
  .hl-hero__content { will-change: transform, opacity; }
  .hl-cta-banner__bg { will-change: transform; }
}

/* ── 16. Reduced motion: switch off every animation/keyframe added in this
   section, on top of the reduced-motion block already defined above. ──── */
@media (prefers-reduced-motion: reduce) {
  .hl-search-bar__btn,
  .hl-mobile-nav li {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9 — 6. PREMIUM UNIFIED EXPERIENCE CARDS
   Each card is a single tile: image fills the entire card, text overlays
   the bottom on a soft dark-to-transparent gradient. No white body strip
   under the image, no split layout — a single premium photo tile.
═══════════════════════════════════════════════════════════════════════════ */
#experiences .hl-exp-card,
body .hl-exp-card {
  aspect-ratio: 4 / 5 !important;
  min-height: 380px !important;
  overflow: hidden !important;
  background-color: #1a1410 !important;
  isolation: isolate !important;
  cursor: default !important;
}
#experiences .hl-exp-card__image,
body .hl-exp-card__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  background-size: cover !important;
  background-position: center !important;
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  z-index: 0 !important;
}
#experiences .hl-exp-card:hover .hl-exp-card__image,
body .hl-exp-card:hover .hl-exp-card__image {
  transform: scale(1.08) !important;
}
/* Full-tile gradient overlay: transparent top → deep near-black bottom.
   Sits above the image, below the text. */
#experiences .hl-exp-card__overlay,
body .hl-exp-card__overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 1.75rem 1.5rem 1.5rem !important;
  background: linear-gradient(
    to bottom,
    rgba(20, 15, 11, 0)    0%,
    rgba(20, 15, 11, 0)    38%,
    rgba(20, 15, 11, 0.55) 68%,
    rgba(20, 15, 11, 0.88) 100%
  ) !important;
  border-radius: 18px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#experiences .hl-exp-card__content,
body .hl-exp-card__content {
  width: 100% !important;
  gap: 0.5rem !important;
}
#experiences .hl-exp-card__title,
body .hl-exp-card__title {
  color: #fff !important;
  font-family: 'Cormorant Garamond', var(--font-serif), Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.15 !important;
  margin: 0 0 0.15rem !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
#experiences .hl-exp-card__desc,
body .hl-exp-card__desc {
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: 'Inter', var(--font-sans), system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
#experiences .hl-exp-card__emblem,
body .hl-exp-card__emblem {
  position: absolute !important;
  top: 1rem !important;
  left: 1.25rem !important;
  z-index: 2 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.4rem !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* No-image fallback: keep tone-based gradient over full card */
#experiences .hl-exp-card--no-image .hl-exp-card__image,
body .hl-exp-card--no-image .hl-exp-card__image {
  background: linear-gradient(135deg, #3d2b1f 0%, #7a5c3d 100%) !important;
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9 — 7. HOMEPAGE GALLERY FEATURED HOVER OVERLAY
   Featured tile fades in a soft dark gradient + title/caption on hover.
   Prev/next/edge slots never show the overlay.
═══════════════════════════════════════════════════════════════════════════ */
.hl-gallery-slot { position: relative; overflow: hidden; }
.hl-gallery-slot__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem 1.75rem 1.5rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(
    to bottom,
    rgba(20, 15, 11, 0)    0%,
    rgba(20, 15, 11, 0)    45%,
    rgba(20, 15, 11, 0.55) 72%,
    rgba(20, 15, 11, 0.85) 100%
  );
  border-radius: inherit;
  z-index: 2;
}
.hl-gallery-slot__frame { border-radius: inherit; overflow: hidden; }
.hl-gallery-slot--prev .hl-gallery-slot__caption,
.hl-gallery-slot--next .hl-gallery-slot__caption,
.hl-gallery-slot--edge .hl-gallery-slot__caption { display: none !important; }

.hl-gallery-slot--featured:hover .hl-gallery-slot__caption,
.hl-gallery-slot--featured:focus-visible .hl-gallery-slot__caption {
  opacity: 1;
}
.hl-gallery-slot__caption-title {
  display: block;
  font-family: 'Cormorant Garamond', var(--font-serif), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  transform: translateY(8px);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hl-gallery-slot__caption-desc {
  display: block;
  font-family: 'Inter', var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  transform: translateY(8px);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.hl-gallery-slot--featured:hover .hl-gallery-slot__caption-title,
.hl-gallery-slot--featured:hover .hl-gallery-slot__caption-desc,
.hl-gallery-slot--featured:focus-visible .hl-gallery-slot__caption-title,
.hl-gallery-slot--featured:focus-visible .hl-gallery-slot__caption-desc {
  transform: translateY(0);
}
.hl-gallery-slot__caption-desc:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   v3.9 — 8. PREMIUM LUXURY TYPOGRAPHY REFINEMENT
   Cormorant Garamond for display headings, Inter for body — subtly heavier
   and larger to feel confidently luxurious rather than delicate.
═══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', var(--font-sans), system-ui, -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.hl-heading,
.hl-section-header .hl-heading,
h1.hl-heading, h2.hl-heading, h3.hl-heading {
  font-family: 'Cormorant Garamond', var(--font-serif), Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.08 !important;
}
h1.hl-heading { font-size: clamp(2.75rem, 5.2vw, 4.5rem) !important; }
h2.hl-heading { font-size: clamp(2.15rem, 3.8vw, 3.25rem) !important; font-weight: 500 !important; }
h3.hl-heading { font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important; font-weight: 500 !important; }

.hl-eyebrow {
  font-family: 'Inter', var(--font-sans), system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hl-accent, #a58252) !important;
}
.hl-lead,
.hl-section-header p:not(.hl-eyebrow) {
  font-family: 'Inter', var(--font-sans), system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   ROOMS LISTING + ROOM DETAIL AVAILABILITY (fix pack)
   ══════════════════════════════════════════════════════════════════ */

/* Safety net: AJAX-injected cards must never stay invisible even if the
   reveal observer or JS reveal pass does not run. */
#rooms-results .hl-room-card { opacity: 1; transform: none; }
#rooms-results .hl-room-card.reveal-up:not(.revealed) { opacity: 1; transform: none; }

#rooms-results.hl-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 700px) {
  #rooms-results.hl-rooms-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

#rooms-results .hl-room-card__image-wrap {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #efe9e1;
}
#rooms-results .hl-room-card__image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
#rooms-results .hl-room-card:hover .hl-room-card__image { transform: scale(1.05); }
#rooms-results .hl-room-card__amenities {
  list-style: none; margin: .75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
#rooms-results .hl-room-card__amenities li {
  font-size: .74rem; letter-spacing: .02em; text-transform: uppercase;
  padding: .28rem .6rem; border: 1px solid rgba(0,0,0,.1); border-radius: 999px;
  color: #6b6157; background: rgba(0,0,0,.02);
}

.hl-availability-msg {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; margin: 0;
}
.hl-availability-msg--avail { color: #15803d; background: rgba(22,163,74,.1); }
.hl-availability-msg--na    { color: #b91c1c; background: rgba(220,38,38,.1); }

/* Booking widget availability */
.hl-avail-remaining {
  display: block; margin-top: .3rem;
  font-size: .78rem; color: #6b6157;
}
.hl-bw-avail-result {
  margin: 1rem 0; padding: .9rem 1rem;
  border-radius: 10px; border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02); font-size: .86rem;
}
.hl-bw-avail-result.is-ok   { border-color: rgba(22,163,74,.35);  background: rgba(22,163,74,.06); }
.hl-bw-avail-result.is-full { border-color: rgba(220,38,38,.35);  background: rgba(220,38,38,.06); }
.hl-bw-avail-result.is-warn { border-color: rgba(202,138,4,.4);   background: rgba(202,138,4,.08); }
.hl-bw-avail-result p { margin: 0; }
.hl-avail-headline { font-weight: 600; margin-bottom: .55rem !important; }
.hl-avail-headline.is-ok   { color: #15803d; }
.hl-avail-headline.is-full { color: #b91c1c; }
.hl-avail-breakdown { display: grid; gap: .3rem; margin: .6rem 0; }
.hl-avail-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: #4b443d;
}
.hl-avail-row strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.hl-avail-row--total { border-top: 1px solid rgba(0,0,0,.08); padding-top: .35rem; font-weight: 600; }
.hl-avail-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hl-avail-dot--free     { background: #16a34a; }
.hl-avail-dot--occupied { background: #dc2626; }
.hl-avail-dot--reserved { background: #d97706; }
.hl-avail-nights { font-size: .78rem; color: #6b6157; }

/* ══════════════════════════════════════════════════════════════
   ROOMS PAGE — EDITORIAL SHOWCASE LAYOUT
   ══════════════════════════════════════════════════════════════ */
.hl-rooms-showcase{display:block;opacity:1!important}
.hl-room-show{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(44px,7vw,96px) 0;border-bottom:1px solid rgba(0,0,0,.07);
}
.hl-room-show:last-child{border-bottom:0}
.hl-room-show--flip .hl-room-show__media{order:2}
.hl-room-show--flip .hl-room-show__body{order:1}

/* — Gallery — */
.hl-room-show__frame{
  position:relative;display:block;overflow:hidden;border-radius:14px;
  box-shadow:0 24px 60px -32px rgba(0,0,0,.45);
  height:clamp(280px,38vw,470px);background:#efe9e0;touch-action:pan-y;
}
.hl-room-show__slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.hl-room-show__slide.is-active{opacity:1}
.hl-room-show__frame:hover .hl-room-show__slide.is-active{transform:scale(1.04)}
.hl-room-show__ph{display:block;height:100%;background:linear-gradient(135deg,#efe9e0,#dfd5c7)}
.hl-room-show__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.86);color:#1c1a17;
  opacity:0;transition:opacity .3s ease,background .3s ease;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
}
.hl-room-show__nav.is-prev{left:14px}
.hl-room-show__nav.is-next{right:14px}
.hl-room-show__frame:hover .hl-room-show__nav,
.hl-room-show__nav:focus-visible{opacity:1}
.hl-room-show__nav:hover{background:#fff}
.hl-room-show__dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px}
.hl-room-show__dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .3s ease,transform .3s ease;
}
.hl-room-show__dot.is-active{background:var(--hl-gold,#c9a227);transform:scale(1.25)}

/* — Body — */
.hl-room-show__eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hl-gold,#c9a227);margin:0 0 .6rem;font-weight:600;
}
.hl-room-show__title{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0}
.hl-room-show__rule{display:flex;align-items:center;gap:8px;margin:16px 0 18px}
.hl-room-show__rule span{height:1px;width:56px;background:var(--hl-gold,#c9a227);opacity:.7}
.hl-room-show__rule i{width:6px;height:6px;border-radius:50%;background:var(--hl-gold,#c9a227)}
.hl-room-show__rule--soft{margin:18px 0}
.hl-room-show__desc{margin:0 0 20px;line-height:1.8;opacity:.85}
.hl-room-show__specs{
  list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;
}
.hl-room-show__specs li{
  display:flex;align-items:center;gap:8px;font-size:.85rem;letter-spacing:.03em;opacity:.9;
}
.hl-room-show__specs svg,.hl-room-show__strip-item svg{width:16px;height:16px;color:var(--hl-gold,#c9a227)}
.hl-room-show__list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.hl-room-show__list li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;animation:hlFadeIn .5s ease both}
.hl-room-show__list svg{flex:0 0 auto;margin-top:3px;color:var(--hl-gold,#c9a227)}
@keyframes hlFadeIn{from{opacity:0}to{opacity:1}}
.hl-room-show__foot{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hl-room-show__price span{font-size:.8rem;opacity:.7}
.hl-room-show__price strong{font-size:1.55rem;margin:0 4px;color:var(--hl-gold,#c9a227)}
.hl-room-show__stock{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.hl-room-show__stock.is-ok{background:rgba(34,139,84,.1);color:#1d7a4a}
.hl-room-show__stock.is-out{background:rgba(190,50,50,.1);color:#b13030}
.hl-room-show__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hl-room-show__actions .hl-btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hl-room-show__actions .hl-btn:hover{transform:translateY(-2px)}
.hl-room-show__more{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.85rem;letter-spacing:.04em;opacity:.75;transition:opacity .25s ease,color .25s ease;
}
.hl-room-show__more:hover{opacity:1;color:var(--hl-gold,#c9a227)}
.hl-room-show__more[aria-expanded="true"]{color:var(--hl-gold,#c9a227);opacity:1}
.hl-room-show__more-panel{animation:hlSlideUp .45s ease both}
.hl-room-show__facts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hl-room-show__facts li{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.05)}
.hl-room-show__note{margin:0;font-size:.85rem;line-height:1.7;opacity:.7}
@keyframes hlSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* — Amenity highlight strip — */
.hl-room-show__strip{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px clamp(20px,4vw,48px);
  margin-top:clamp(24px,4vw,44px);padding-top:22px;border-top:1px solid rgba(0,0,0,.07);
}
.hl-room-show__strip-item{
  display:flex;align-items:center;gap:9px;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.75;transition:opacity .3s ease;
}
.hl-room-show__strip-item:hover{opacity:1}

.hl-room-show__avail{
  margin-top:18px;padding:16px 18px;border:1px solid rgba(0,0,0,.09);
  border-radius:8px;background:rgba(0,0,0,.02);font-size:.9rem;
}
.hl-room-show__avail.is-ok{border-color:rgba(34,139,84,.35)}
.hl-room-show__avail.is-out,.hl-room-show__avail.is-error{border-color:rgba(190,50,50,.35)}
.hl-room-show__avail p{margin:0 0 6px}
.hl-avail__status{font-weight:600}
.hl-avail__nights{font-size:.8rem;opacity:.7}
.hl-avail__chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.hl-chip{font-size:.75rem;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.06)}
.hl-chip b{margin-right:4px}
.hl-chip--avail{background:rgba(34,139,84,.12);color:#1d7a4a}
.hl-chip--occ{background:rgba(190,50,50,.12);color:#b13030}
.hl-chip--res{background:rgba(201,162,39,.16);color:#8a6f14}
.hl-avail__quote{display:flex;justify-content:space-between;padding:4px 0;font-size:.85rem}
.hl-avail__quote--total{border-top:1px solid rgba(0,0,0,.1);margin-top:6px;padding-top:8px;font-weight:700}
.hl-room-show__avail .hl-btn{margin-top:12px}

@media (max-width:960px){
  .hl-room-show{grid-template-columns:1fr;gap:24px}
  .hl-room-show--flip .hl-room-show__media,
  .hl-room-show--flip .hl-room-show__body{order:initial}
  .hl-room-show__nav{opacity:1;background:rgba(255,255,255,.75)}
}
@media (max-width:640px){
  .hl-room-show__frame{height:clamp(240px,62vw,340px);border-radius:10px}
  .hl-room-show__actions{flex-direction:column;align-items:stretch}
  .hl-room-show__actions .hl-btn{width:100%;justify-content:center;text-align:center}
  .hl-room-show__more{align-self:center;padding:6px 0}
}
@media (prefers-reduced-motion:reduce){
  .hl-room-show__slide,.hl-room-show__more-panel,.hl-room-show__list li{transition:none;animation:none}
}


/* ── v3.17: per-room date selection + gated Book Now ─────────────────────── */
.hl-rooms-filter-bar--tabs-only { padding-block: 1rem; }
.hl-rooms-filter-bar--tabs-only .hl-room-type-tabs { margin-top: 0; }

.hl-room-show__book.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: auto;
  filter: grayscale(.35);
}
.hl-room-show__book.is-disabled:hover { transform: none; }

.hl-room-show__dates {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--hl-border, rgba(0,0,0,.1));
  border-radius: 10px;
  background: var(--hl-subtle, rgba(0,0,0,.02));
}
.hl-room-show__dates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: .75rem;
  align-items: end;
}
.hl-room-show__date-field { display: flex; flex-direction: column; gap: .3rem; }
.hl-room-show__date-field label {
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hl-text-muted, #7a7a7a);
}
.hl-room-show__date-field input,
.hl-room-show__date-field select {
  padding: .55rem .65rem;
  border: 1px solid var(--hl-border, rgba(0,0,0,.15));
  border-radius: 6px;
  background: #fff;
  font-size: .875rem;
  min-width: 0;
}
.hl-room-show__confirm-dates { white-space: nowrap; }
.hl-avail__hint { margin-top: .5rem; font-size: .85rem; font-weight: 600; }

@media (max-width: 860px) {
  .hl-room-show__dates-grid { grid-template-columns: 1fr 1fr; }
  .hl-room-show__dates-grid .hl-room-show__date-field:nth-child(3),
  .hl-room-show__confirm-dates { grid-column: 1 / -1; }
}