/* ==========================================================================
   Londonist v2 — literal port of the supplied portobello.html / room.html
   mockup CSS, scoped under .lnd2 so it can never leak into or collide with
   the rest of the site (which keeps its own header/footer untouched).
   Class names are kept IDENTICAL to the mockup on purpose for 1:1 fidelity —
   only the leading ".lnd2 " ancestor scope was added to every rule.
   ========================================================================== */
.lnd2{
  --orange: #F57E35;
  --orange-2: #FF9A5C;
  --orange-dark: #D9631D;
  --navy: #0B0E14;
  --navy-2: #14161B;
  --navy-soft: #1B1F2A;
  --blue: #18458B;
  --ink: #171A21;
  --ink-soft: #565C6B;
  --paper: #FFFFFF;
  --mist: #F5F6F9;
  --mist-2: #EEF0F4;
  --line: #E6E8EE;
  --green: #21C17C;
  --pink: #FF5FA2;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 10px rgba(15,17,23,.06);
  --shadow: 0 12px 30px rgba(15,17,23,.10);
  --shadow-lg: 0 24px 60px rgba(15,17,23,.16);
  --glow-orange: 0 0 0 1px rgba(245,126,53,.35), 0 8px 30px rgba(245,126,53,.35);

  --font-head: 'Space Grotesk', 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container: 1240px;

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  text-align: left; /* the site's global body{text-align:center} would otherwise be inherited everywhere in here */
  display: flow-root; /* establishes a clean block formatting context so this scope's layout
    can't be disturbed by (or leak into) the rest of the page's old float-based CSS */
}
.lnd2 *,.lnd2 *::before,.lnd2 *::after{ box-sizing: border-box; }
/* Reused legacy partials (residence-weeks-table, room-price-table, residence-rooms)
   ship with the old theme's .fl-wrap helper (float:left) baked into their markup.
   Floats collapse their parent's height/width whenever we lay them out with flex/grid
   instead of the old float-based system — neutralize float everywhere in this scope
   rather than patching every collapse site one at a time. */
.lnd2 .fl-wrap{ float:none; }
/* Same float-collapse problem, different legacy helper class: the modal <form>
   itself carries the base theme's .custom-form{float:left} — with no float
   containment its parent (.p-3 inside .main-enquiry/.main-viewing) collapses
   to near-zero height, so the modal card's white background stops short and
   every field below it renders directly over the page behind the modal. */
.lnd2 .custom-form{ float:none; }
/* The submit button itself also carries the legacy .float-btn{float:left}
   helper — floated with nothing to clear it, it hangs below the form's own
   (now correctly-contained) box instead of sitting inside the modal card. */
.lnd2 .float-btn{ float:none; }
/* .p-3 (the modal body wrapper around the form) is a Bootstrap utility class
   — Bootstrap's utility CSS isn't loaded on this page, so it silently does
   nothing, leaving the first field sitting right under the modal's title bar
   with no breathing room. */
.lnd2 .p-3{ padding: 1rem !important; }
.lnd2 img{ max-width:100%; display:block; }
.lnd2 a{ color:inherit; text-decoration:none; }
.lnd2 ul{ margin:0; padding:0; list-style:none; }
.lnd2 button{ font-family:inherit; cursor:pointer; }
.lnd2 h1,.lnd2 h2,.lnd2 h3,.lnd2 h4{ font-family: var(--font-head); margin:0; line-height:1.15; letter-spacing:-.01em; }
.lnd2 p{ margin:0; }
.lnd2 .container{ max-width: var(--container); width:100%; margin:0 auto; padding:0 24px; position:static; z-index:auto; float:none; }

.lnd2 .reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.lnd2 .reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Buttons ---------- */
.lnd2 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 999px; font-weight:600; font-size:.95rem;
  border: 1px solid transparent; transition: all .25s ease; white-space:nowrap;
}
/* Legacy buttons (Enquire Now / Book Viewing Now) still carry a FontAwesome
   arrow icon styled by the base theme's ".btn i{ position:absolute;
   right:20px }" — that only worked with the base theme's own asymmetric
   padding (55px reserved on the right). Our flex layout above uses
   symmetric padding + gap instead, so the icon's fixed absolute position no
   longer has that reserved space and lands on top of the text. Let it flow
   as a normal flex child instead — gap already spaces it from the text. */
.lnd2 .btn i{ position:static; width:auto; height:auto; margin-top:0; line-height:inherit; }
.lnd2 .btn-primary{ background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color:#fff; box-shadow: 0 10px 24px rgba(245,126,53,.35); }
.lnd2 .btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--glow-orange); color:#fff; }
.lnd2 .btn-outline{ background:#fff; border-color: var(--line); color: var(--ink); }
.lnd2 .btn-outline:hover{ border-color: var(--orange); color: var(--orange); }
.lnd2 .btn-dark{ background: var(--navy-2); color:#fff; }
.lnd2 .btn-dark:hover{ background:#000; }
.lnd2 .btn-block{ width:100%; }
.lnd2 .btn-sm{ padding: 9px 18px; font-size:.85rem; }
.lnd2 .btn[disabled],.lnd2 .btn.disabled{ opacity:.55; pointer-events:none; }

/* ---------- Chips / badges ---------- */
.lnd2 .chip{
  display:inline-flex; align-items:center; gap:6px; padding: 6px 14px; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.lnd2 .chip-orange{ background: rgba(245,126,53,.12); color: var(--orange-dark); }

.lnd2 .price-pill{
  position:absolute; top:20px; right:20px; z-index:2;
  background: rgba(11,14,20,.72); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff; padding: 12px 20px; border-radius: var(--radius);
  text-align:right;
}
.lnd2 .price-pill .lbl{ display:block; font-size:.68rem; opacity:.75; text-transform:uppercase; letter-spacing:.06em; }
.lnd2 .price-pill .amt{ display:block; font-family: var(--font-head); font-size:1.25rem; font-weight:700; color: var(--orange-2); }

.lnd2 .badge{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 13px; border-radius:999px; font-size:.72rem; font-weight:700;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color:#fff;
  box-shadow: 0 6px 16px rgba(245,126,53,.4);
}
.lnd2 .badge-limited{ top:44px; background: linear-gradient(135deg, var(--pink), #C23B77); box-shadow:0 6px 16px rgba(255,95,162,.4); }
.lnd2 .room-specs [role="button"]{ cursor:pointer; }
.lnd2 .room-specs [role="button"]:hover{ color: var(--orange-dark); }

/* ==========================================================================
   Detail hero (Residence Detail)
   ========================================================================== */
.lnd2 .detail-hero{ position:relative; height: 68vh; min-height:480px; overflow:hidden; background: var(--navy); }
.lnd2 .detail-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lnd2 .detail-hero-video{
  position:absolute; top:50%; left:50%; z-index:0;
  width:100vw; height:56.25vw; min-height:100%; min-width:177.77%;
  transform: translate(-50%, -50%);
  border:none; opacity:0; visibility:hidden; transition: opacity .5s ease; pointer-events:none;
}
.lnd2 .detail-hero-video.is-active{ opacity:1; visibility:visible; }
.lnd2 .detail-hero-video.is-active ~ img{ opacity:0; }
.lnd2 .detail-hero::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(5,7,10,.85)); }
.lnd2 .detail-hero-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 0 0 28px; color:#fff; }
.lnd2 .detail-hero-content .breadcrumb{ margin-bottom: 130px; font-size:.85rem; color: rgba(255,255,255,.6); }
.lnd2 .detail-hero-content .breadcrumb a{ color: rgba(255,255,255,.8); }
.lnd2 .detail-hero-content .breadcrumb a:hover{ color:#fff; }
.lnd2 .detail-hero-content h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
.lnd2 .detail-hero-content .addr{ margin-top:10px; color: rgba(255,255,255,.75); display:flex; align-items:center; gap:8px; }

/* ==========================================================================
   Gallery tabs / media panel (Images · Videos · Floor Plans · Fact Sheet)
   ========================================================================== */
.lnd2 .guide-tabs{ display:flex; width:100%; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.lnd2 .guide-tabs .nav.nav-tabs.border-0{ margin-top:36px; width:100%; display:flex; gap:8px; flex-wrap:wrap; }
.lnd2 .guide-tabs button,.lnd2 .guide-tabs a.nav-link{
  padding:10px 18px; border-radius: var(--radius-sm); border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:.85rem; color: var(--ink); display:inline-flex; align-items:center;
}
.lnd2 .guide-tabs button.active{ background: var(--orange); color:#fff; border-color: var(--orange); }
.lnd2 .guide-list{ display:flex; flex-direction:column; gap:10px; }
.lnd2 .guide-row{ display:flex; justify-content:space-between; padding:14px 18px; background: var(--mist); border-radius: var(--radius); font-size:.92rem; }
.lnd2 .guide-row b{ color: var(--orange-dark); }

.lnd2 .media-scroll-wrap{ position:relative; }
.lnd2 .media-scroll{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.lnd2 .media-scroll::-webkit-scrollbar{ display:none; }
.lnd2 .m-item{
  flex:0 0 calc(25% - 12px); scroll-snap-align:start; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 1400 / 1000; background: var(--mist);
}
.lnd2 .m-item img{ width:100%; height:100%; object-fit:cover; cursor:pointer; transition: transform .3s ease; display:block; }
.lnd2 .m-item img:hover{ transform: scale(1.04); }
.lnd2 .media-scroll-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; opacity:1;
  width:38px; height:38px; box-shadow: var(--shadow-sm); border-radius:50%; border:none; cursor:pointer;
  background:#fff; display:grid; place-items:center; font-size:1.1rem;
}
/* These buttons also carry .slider-arrow (shared with the room-card sliders
   further down, which default that class to opacity:0 and only reveal it on
   :hover of their own .room-media/.room-slider ancestor). Same-specificity
   tie, later rule wins — .slider-arrow's opacity:0 was silently winning here
   and hiding these arrows outright, since .media-scroll-wrap never triggers
   that hover rule. Force them visible regardless of source order. */
.lnd2 .media-scroll-wrap .media-scroll-nav{ opacity:1; }
.lnd2 .media-scroll-nav.prev{ left:-14px; }
.lnd2 .media-scroll-nav.next{ right:-14px; }
.lnd2 .video-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); max-width:720px; }
.lnd2 .video-frame video,.lnd2 .video-frame iframe{ width:100%; aspect-ratio:16/9; display:block; background:#000; border:none; }
.lnd2 .video-caption{ margin-top:10px; font-size:.85rem; color: var(--ink-soft); }
.lnd2 .floorplan-photo{ width:100%; height:auto; border-radius: var(--radius-sm); display:block; cursor:pointer; transition: transform .2s ease; }
.lnd2 .floorplan-photo:hover{ transform: scale(1.02); }
.lnd2 .factsheet-flyer{ display:flex; justify-content:center; }
.lnd2 .factsheet-flyer img{ max-width:520px; width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); cursor:pointer; }
.lnd2 .novideo-note,.lnd2 .empty-media-note{ color: var(--ink-soft); padding:40px 0; text-align:center; width:100%; }
.lnd2 #nav-tabContent{ margin-top:24px; }
.lnd2 .video-frame{ margin:0 auto; }
.lnd2 .video-thumb{ cursor:pointer; border:2px solid transparent; border-radius: var(--radius); }
.lnd2 .video-thumb.active{ border-color: var(--orange); }
.lnd2 .video-thumb img{ border-radius: var(--radius); }
.lnd2 .factsheet-flyer img{ cursor: zoom-in; }

/* ==========================================================================
   Detail page layout
   ========================================================================== */
.lnd2 .detail-layout{ display:grid; width:100%; grid-template-columns: minmax(0,1fr) 380px; gap:40px; padding: 48px 0; align-items:start; }
.lnd2 .detail-main h2.h-sub{ font-size:1.3rem; margin-bottom:14px; }
.lnd2 .detail-block{ margin-bottom:44px; }
.lnd2 .detail-block-wide{ margin-top:8px; }
/* The Available Rooms block already ends with its own room-card visuals —
   the generic 44px block gap on top of that reads as an oversized jump
   before Local Guide. */
.lnd2 .detail-block:has(+ #guide){ margin-bottom:8px; }
.lnd2 .about-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.lnd2 .about-header .h-sub{ margin-bottom:0; }
/* flexbox align-items:center matches box centers, not text baselines — the
   heading font's metrics leave the chip looking a few px low next to it. */
.lnd2 .about-header .chip{ margin-top:-6px; }
.lnd2 .about-text{ color: var(--ink-soft); line-height:1.75; font-size:1.02rem; }
.lnd2 .readmore{ color: var(--orange); font-weight:700; font-size:.9rem; margin-top:14px; display:inline-block; cursor:pointer; background:none; border:none; }
.lnd2 .about-more{ margin-top:18px; color: var(--ink-soft); line-height:1.75; font-size:1rem; }
.lnd2 .about-more p{ margin-bottom:14px; }
.lnd2 .about-more h4{ font-family: var(--font-head); font-size:1.02rem; color: var(--ink); margin: 22px 0 10px; }
.lnd2 .about-more ul{ margin:0 0 14px; padding-left:0; }
.lnd2 .about-more li{ list-style:none; padding-left:24px; position:relative; margin-bottom:9px; }
.lnd2 .about-more li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--green); font-weight:700; }

/* Raw CRM rich-text content (residence description, FAQ answers) ships with
   its own <ul>/<li>/<p> — .lnd2's blanket list reset would otherwise strip
   bullets/indentation from it and make lists unreadable. */
.lnd2 .about-text ul,.lnd2 .accordion-inner ul{ list-style: disc; padding-left:20px; margin:10px 0 16px; }
.lnd2 .about-text li,.lnd2 .accordion-inner li{ margin-bottom:6px; list-style:disc; }
.lnd2 .about-text p,.lnd2 .accordion-inner p{ margin-bottom:12px; }
.lnd2 .about-text p:last-child,.lnd2 .accordion-inner p:last-child{ margin-bottom:0; }

.lnd2 .facility-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.lnd2 .facility-chip{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius: var(--radius-sm);
  border:1px solid var(--line); font-size:.88rem; font-weight:600; color: var(--ink); background:#fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lnd2 .facility-chip:hover{ border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.lnd2 .facility-chip .fi-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background: var(--orange); color:#fff; font-size:.85rem; font-weight:700;
}

.lnd2 .mock-map,.lnd2 .map-container{ position:relative; border-radius: var(--radius-lg); overflow:hidden; height:340px; background: linear-gradient(135deg,#dfe7f5,#eef2f9); margin-top:20px; border:none; }
.lnd2 .map-container > div{ width:100%; height:100%; }
.lnd2 .guide-tabs a.single-map-filter{
  width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--line); background:#fff;
  color: var(--ink-soft) !important; display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lnd2 .guide-tabs a.single-map-filter i{ font-size:1.05rem; line-height:1; }
.lnd2 .guide-tabs a.single-map-filter:hover{ border-color: var(--orange); color: var(--orange) !important; }
.lnd2 .guide-tabs a.single-map-filter.menu-filters-active{ background: var(--orange) !important; color:#fff !important; border-color: var(--orange); }

/* ---------- FAQ accordion ---------- */
.lnd2 .accordion .toggle{
  display:block; border:1px solid var(--line) !important; border-radius: var(--radius) !important; background:#fff !important;
  color: var(--ink) !important; font-weight:600; padding:16px 20px !important; margin-bottom:10px !important; position:relative;
}
.lnd2 .accordion .toggle.act-accordion,.lnd2 .accordion .toggle:hover{ border-color: var(--orange) !important; }
.lnd2 .accordion .accordion-inner{ color: var(--ink-soft); padding:0 20px 16px; margin-top:-10px; }

/* ---------- Room grid (Available Rooms) ---------- */
/* .listing-filters (legacy) styles this as a single-row fused tab-strip:
   negative margin so adjacent pills' borders overlap, border-right removed
   except on the true last child, rounded corners only at the true first/last
   child. That only holds together on one row — once our flex-wrap sends
   pills onto a second row (mobile), the "last of row 1"/"first of row 2"
   aren't the true first/last child, so they keep the fused-middle look
   (missing border-right, square corners) instead of reading as complete
   independent chips — reset the per-pill box model explicitly. */
.lnd2 .room-type-filters{ display:flex !important; flex-wrap:wrap; gap:8px; margin-bottom:20px; border:none; overflow:visible; }
.lnd2 .room-type-filters .gallery-filter{
  padding:9px 16px; border-radius:999px !important; border:1px solid var(--line) !important; font-size:.82rem; font-weight:600;
  color: var(--ink-soft) !important; background:#fff; margin:0 !important;
}
.lnd2 .room-type-filters .gallery-filter-active{ background: var(--navy-2) !important; color:#fff !important; border-color: var(--navy-2); }
.lnd2 .room-type-filters .filter-count{ margin-left:4px; opacity:.7; }
/* Available Rooms: kept at "2 per view" but as a horizontally-sliding row
   instead of wrapping into extra static rows — nav arrows page through pairs. */
/* .room-type-filters and .room-grid both carry the legacy .fl-wrap (float:left)
   helper class — without float containment, #rooms and .room-slider-wrap collapse
   to height:0 and the next section (Local Guide) renders on top of the room cards. */
.lnd2 #rooms{ display:flow-root; }
.lnd2 .room-slider-wrap{ position:relative; display:flow-root; }
.lnd2 .room-grid{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; align-items:start;
  scrollbar-width:none; -ms-overflow-style:none;
  /* overflow-x:auto forces the browser to compute overflow-y as auto too
     (can't have one axis scroll and the other stay visible), which clips the
     hover-lift shadow below top/bottom-edge cards — pad the track so it has
     room to render, and use a tighter shadow (see .room-grid .room-card:hover)
     that actually fits inside that padding. */
  padding: 14px 2px 34px;
}
.lnd2 .room-grid::-webkit-scrollbar{ display:none; }
.lnd2 .room-grid .gallery-item{ flex:0 0 calc(50% - 12px); max-width:calc(50% - 12px); scroll-snap-align:start; }
.lnd2 .room-grid-nav{
  position:absolute; top:38%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color: var(--navy-2); box-shadow: var(--shadow); font-size:1.2rem; display:grid; place-items:center;
}
.lnd2 .room-grid-nav.prev{ left:-18px; } .lnd2 .room-grid-nav.next{ right:-18px; }
/* Beat the page's own legacy inline <style> block (pushed after ours, and
   #rooms there carries ID specificity) which was written for the old
   narrow-sidebar layout — #rooms{height:755px;overflow-y:scroll} and
   .gallery-item{width:50%!important} would otherwise clip/shrink this grid. */
.lnd2 #rooms{ height:auto !important; max-height:none !important; overflow:visible !important; }
.lnd2 .gallery-item{ width:auto !important; }
.lnd2 .gallery-item .geodir-category-img{ height:auto !important; }
.lnd2 .gallery-item-holder{ width:auto !important; height:auto !important; }
.lnd2 .room-card{ border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background:#fff; transition: all .25s ease; height:100%; }
.lnd2 .room-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-4px); }
/* Inside the horizontally-scrolling slider, --shadow-lg's 60px blur doesn't
   fit the padding above without also blowing up the track's rhythm — a
   tighter shadow here fits cleanly instead. */
.lnd2 .room-grid .room-card:hover{ box-shadow: 0 14px 28px rgba(15,17,23,.2); }
.lnd2 .room-media{ position:relative; height:260px; overflow:hidden; }
/* Legacy custom.css has an unconditional `.gallery-item img{transform:scale(1.12)}`
   rule (meant for an old gallery layout) that this markup also happens to sit
   inside of — it oversizes each slide so its edge overlaps the next slide,
   showing a sliver of it at the corner. Neutralise it here. */
.lnd2 .room-media img{ width:100%; height:100%; object-fit:cover; transform:none; }
.lnd2 .room-slider-track{ display:flex; height:100%; transition: transform .4s ease; }
.lnd2 .room-slide{ flex:0 0 100%; height:100%; display:block; }
.lnd2 .room-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.lnd2 .slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(11,14,20,.55); color:#fff; font-size:1.1rem; line-height:1;
  display:grid; place-items:center; opacity:0; transition: opacity .2s ease, background .2s ease;
}
.lnd2 .room-slider:hover .slider-arrow,.lnd2 .room-media:hover .slider-arrow{ opacity:1; }
.lnd2 .slider-arrow:hover{ background: rgba(11,14,20,.8); }
.lnd2 .slider-arrow.prev{ left:10px; }
.lnd2 .slider-arrow.next{ right:10px; }
.lnd2 .slider-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:3; display:flex; justify-content:center; gap:6px; }
.lnd2 .slider-dots .dot{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.55); cursor:pointer; transition: background .2s ease, transform .2s ease; }
.lnd2 .slider-dots .dot.active{ background:#fff; transform: scale(1.25); }
.lnd2 .room-body{ padding:18px 20px; }
.lnd2 .room-body h4{ font-family: var(--font-head); font-size:1.05rem; }
.lnd2 .room-specs{ display:flex; gap:14px; margin:10px 0 14px; font-size:.8rem; color: var(--ink-soft); flex-wrap:wrap; }
.lnd2 .room-specs span{ display:flex; align-items:center; gap:5px; }
.lnd2 .room-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--line); gap:10px; flex-wrap:wrap; }
.lnd2 .room-foot-actions{ display:flex; align-items:center; gap:8px; }
.lnd2 .room-cat-card.open:hover{ transform:none; }
.lnd2 .room-cat-card.open{ box-shadow: var(--shadow); border-color: var(--orange); }
.lnd2 .room-cat-title-link{ color: var(--ink) !important; }
.lnd2 .room-cat-title-link:hover{ color: var(--orange-dark) !important; }
.lnd2 .room-cat-chevron{ display:inline-block; transition: transform .25s ease; }
.lnd2 .room-cat-card.open .room-cat-chevron{ transform: rotate(180deg); }
.lnd2 .room-cat-options{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.lnd2 .room-cat-card.open .room-cat-options{ max-height:248px; overflow-y:auto; }
.lnd2 .room-cat-options::-webkit-scrollbar{ width:6px; }
.lnd2 .room-cat-options::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.lnd2 .room-cat-options-inner{ padding:6px 20px 18px; border-top:1px solid var(--line); }
.lnd2 .room-option-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 8px; margin:0 -8px; border-radius: var(--radius-sm); border-bottom:1px dashed var(--line); font-size:.86rem;
  cursor:pointer; transition: background .18s ease;
}
.lnd2 .room-option-row:hover{ background: var(--mist); }
.lnd2 .room-option-row.selected{ background: rgba(245,126,53,.1); }
.lnd2 .room-option-row.selected .room-option-label{ color: var(--orange-dark); font-weight:700; }
.lnd2 .room-option-row:last-child{ border-bottom:none; }
.lnd2 .room-option-row.room-option-unavailable{ opacity:.55; }
.lnd2 .room-option-label{ color: var(--ink); font-weight:500; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.lnd2 .room-option-available-from{
  display:inline-block; font-size:.68rem; font-weight:700; color: var(--blue);
  background: rgba(24,69,139,.08); border-radius:999px; padding:2px 8px; width:fit-content; white-space:nowrap;
}
.lnd2 .room-option-price{ font-weight:700; color: var(--orange-dark); white-space:nowrap; }
.lnd2 .room-option-price .pwk{ font-weight:500; color: var(--ink-soft); font-size:.76rem; margin-left:3px; }
.lnd2 .res-price .from{ font-size:.72rem; color: var(--ink-soft); display:block; }
.lnd2 .res-price .amt{ font-family: var(--font-head); font-weight:700; font-size:1.15rem; color: var(--navy-2); }
.lnd2 .res-price .amt span{ font-size:.75rem; color: var(--ink-soft); font-weight:500; }

/* ---------- Residence cards (Similar Residences) ---------- */
.lnd2 .res-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; }
.lnd2 .res-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform .3s ease, box-shadow .3s ease; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column;
}
.lnd2 .res-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.lnd2 .res-media{ position:relative; height:210px; overflow:hidden; }
.lnd2 .res-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.lnd2 .res-card:hover .res-media img{ transform: scale(1.07); }
.lnd2 .res-body{ padding: 20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.lnd2 .res-body h3{ font-size:1.2rem; }
.lnd2 .res-loc{ display:flex; align-items:center; gap:6px; font-size:.85rem; color: var(--ink-soft); }
.lnd2 .res-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }

/* ---------- Booking sidebar ---------- */
.lnd2 .booking-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:24px;
  position:sticky; top:96px; align-self:start;
}
/* room-detail.blade.php's own title/sub-line above the date fields (the
   residence page's booking card doesn't have these) — never had spacing of
   their own, so with h1-h4's sitewide margin:0 they sat flush against
   whatever followed. */
.lnd2 .booking-card h3{ font-size:1.1rem; margin-bottom:6px; }
.lnd2 .booking-card .sub{ color: var(--ink-soft); font-size:.85rem; margin-bottom:20px; }
/* The shared layout's #wrapper > .content has overflow:hidden, which breaks
   position:sticky for any descendant (sticky tracks the nearest scrolling/
   overflow ancestor). Only relax it on pages that use .lnd2. */
body:has(.lnd2) .content{ overflow:visible !important; }
.lnd2 .booking-tabs{ display:flex; gap:10px; margin-bottom:18px; }
.lnd2 .booking-tabs button,.lnd2 .booking-tabs a{
  flex:1; padding:12px; border-radius: var(--radius-sm); border:1px solid var(--line); background:#fff;
  font-weight:700; font-size:.85rem; text-align:center; color: var(--ink) !important; cursor:pointer;
}
.lnd2 .booking-tabs button.active,.lnd2 .booking-tabs a.active{ background: var(--navy-2) !important; color:#fff !important; border-color: var(--navy-2); }
.lnd2 .date-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.lnd2 .date-row label{ font-size:.72rem; text-transform:uppercase; color: var(--ink-soft); font-weight:700; display:block; margin-bottom:6px; }
.lnd2 .date-row input{ width:100%; border:1px solid var(--line); border-radius: var(--radius-sm); padding:11px 12px; font-family:inherit; }

/* Price-table refresh feedback: room/date/AY changes can take several seconds
   (live CRM pricing lookup) — without this the panel just sits there with no
   sign anything is happening. Sibling selector keyed off the .is-loading-prices
   class that's already toggled everywhere price fetches start/finish, so no
   extra JS wiring is needed. */
.lnd2 .price-table-wrap{ position:relative; }
/* residence-weeks-table.blade.php / room-price-table.blade.php's root markup uses the
   legacy .fl-wrap (float:left) helper — with no float containment #residece_weekly_prices_table
   collapses to height:0, which made the overlay above only cover a sliver of the real content.
   #roomPriceTable (room-detail.blade.php) reuses the exact same partial/behaviour. */
.lnd2 #residece_weekly_prices_table,
.lnd2 #roomPriceTable{ display:flow-root; }
.lnd2 .price-loading-overlay{
  display:none; position:absolute; inset:0; z-index:20; border-radius: var(--radius);
  background: #fff; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:150px;
}
.lnd2 #residece_weekly_prices_table.is-loading-prices ~ .price-loading-overlay,
.lnd2 #roomPriceTable.is-loading-prices ~ .price-loading-overlay{ display:flex; }
/* While loading, the price table collapses to ~150px (see the max-height rule
   below), so the card's own drop-shadow — always there, normally unnoticeable
   against a tall card full of content — ends up sitting right under the
   spinner with nothing else on screen to contextualise it, reading as stray
   dark smudges at the bottom corners. Suspend it only while that collapse is
   in effect; it returns once real content is back. */
.lnd2 .booking-card:has(.is-loading-prices){ box-shadow:none; }
/* Without this, the stale (about-to-be-replaced) content stays at its old,
   often-tall height while loading, so the spinner ends up centered far down
   the card instead of near the top. Collapse the box while loading, then let
   it grow back to fit the real content once the class is removed. */
.lnd2 #residece_weekly_prices_table.is-loading-prices,
.lnd2 #roomPriceTable.is-loading-prices{ max-height:150px; overflow:hidden; }
.lnd2 .price-loading-spinner{
  width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color: var(--orange);
  animation: lnd2-spin .7s linear infinite;
}
.lnd2 .price-loading-text{ font-size:.8rem; font-weight:600; color: var(--ink-soft); }
@keyframes lnd2-spin{ to{ transform: rotate(360deg); } }

.lnd2 .year-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.lnd2 .year-tabs button{
  flex:1; padding:10px 8px; border-radius: var(--radius-sm); border:1px solid var(--line); background:#fff;
  font-weight:700; font-size:.82rem; text-align:center; line-height:1.3;
}
.lnd2 .year-tabs button small{ display:block; font-weight:500; font-size:.68rem; color: var(--ink-soft); }
.lnd2 .year-tabs button.active{ background: var(--navy-2); color:#fff; border-color: var(--navy-2); }
.lnd2 .year-tabs button.active small{ color: rgba(255,255,255,.65); }
.lnd2 .discount-strip{ display:flex; align-items:center; gap:8px; background: rgba(33,193,124,.1); color:#149962; font-size:.8rem; font-weight:700; padding:9px 14px; border-radius: var(--radius-sm); margin-bottom:14px; }

.lnd2 .tier{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px;
  border:1px solid var(--line); border-radius: var(--radius); margin-bottom:10px; cursor:pointer; transition: all .2s ease;
}
.lnd2 .tier:hover{ border-color: var(--orange); }
.lnd2 .tier.active{ background: rgba(245,126,53,.08); border-color: var(--orange); }
.lnd2 .tier .tw{ display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:600; }
.lnd2 .tier .tp{ font-weight:700; color: var(--navy-2); }
.lnd2 .tier .tp .was{ display:block; font-size:.72rem; color: var(--ink-soft); text-decoration:line-through; font-weight:500; }
.lnd2 .tier .radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; flex-shrink:0; }
.lnd2 .tier.active .radio{ border-color: var(--orange); }
.lnd2 .tier.active .radio::after{ content:""; width:9px; height:9px; border-radius:50%; background: var(--orange); }

.lnd2 .room-type-picker{ position:relative; }
.lnd2 .room-type-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); border-radius: var(--radius); padding:13px 14px; margin-bottom:16px;
  cursor:pointer; background:#fff; font-size:.86rem; font-weight:700; color: var(--navy-2); transition: border-color .2s ease;
}
.lnd2 .room-type-trigger:hover{ border-color: var(--orange); }
.lnd2 .room-type-trigger .rtt-chevron{ color: var(--ink-soft); flex-shrink:0; transition: transform .2s ease; }
.lnd2 .room-type-picker.open .room-type-trigger .rtt-chevron,
.lnd2 .room-type-picker.open .selected-room-banner .srb-chevron{ transform: rotate(180deg); }

.lnd2 .selected-room-banner{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  background: rgba(245,126,53,.08); border:1px solid rgba(245,126,53,.3);
  border-radius: var(--radius); padding:12px 14px; margin-bottom:16px; cursor:pointer;
}
.lnd2 .selected-room-banner .srb-text{ font-size:.85rem; line-height:1.4; }
.lnd2 .selected-room-banner .srb-cat{ font-weight:700; color: var(--navy-2); display:block; }
.lnd2 .selected-room-banner .srb-price{ color: var(--orange-dark); font-weight:700; }
.lnd2 .selected-room-banner .srb-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.lnd2 .selected-room-banner .srb-chevron{ color: var(--ink-soft); font-size:.85rem; transition: transform .2s ease; }
.lnd2 .selected-room-banner .srb-clear{ background:none; border:none; color: var(--ink-soft); font-size:1rem; cursor:pointer; line-height:1; flex-shrink:0; }
.lnd2 .selected-room-banner .srb-clear:hover{ color: var(--ink); }

.lnd2 .room-type-dropdown{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding:8px; max-height:300px; overflow-y:auto;
}
.lnd2 .room-type-picker.open .room-type-dropdown{ display:block; }
.lnd2 .rtd-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:8px; cursor:pointer; font-size:.85rem; color: var(--ink);
}
.lnd2 .rtd-option:hover{ background: var(--mist); }
.lnd2 .rtd-option.selected{ background: rgba(245,126,53,.1); font-weight:700; color: var(--orange-dark); }
.lnd2 .rtd-option.unavailable{ opacity:.45; cursor:not-allowed; }
.lnd2 .rtd-option .rtd-name{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.lnd2 .rtd-available-from{
  display:inline-block; font-size:.68rem; font-weight:700; color: var(--blue);
  background: rgba(24,69,139,.08); border-radius:999px; padding:2px 8px; width:fit-content; white-space:nowrap;
}
.lnd2 .rtd-option .rtd-price{ font-weight:700; color: var(--navy-2); white-space:nowrap; }
.lnd2 .rtd-option.selected .rtd-price{ color: var(--orange-dark); }

/* Reskin of the reused residence-weeks-table.blade.php / room-price-table.blade.php
   partials (Bootstrap AY tabs, nice-select, weekly-price-card, cart list, CTA) so the
   real pricing/promotions/VAT logic renders inside a .tier-like look without any of
   that PHP changing. */
.lnd2 .booking-card #nav-ay-tab{ display:flex; gap:8px; background:transparent !important; border:none !important; padding:0; margin-bottom:16px !important; }
.lnd2 .booking-card .ay-tab-link{
  flex:1; padding:10px 8px !important; border-radius: var(--radius-sm) !important; border:1px solid var(--line) !important;
  background:#fff !important; font-weight:700 !important; font-size:.82rem !important; color: var(--ink) !important; text-align:center;
}
.lnd2 .booking-card .ay-tab-link.active{ background: var(--navy-2) !important; color:#fff !important; border-color: var(--navy-2) !important; }
.lnd2 .booking-card .select-room-type-from-weeks-table{ display:none !important; }
.lnd2 .booking-card .nice-select{
  width:100%; height:auto; line-height:normal; padding:11px 38px 11px 16px;
  border:1px solid var(--line) !important; border-radius: var(--radius-sm) !important;
  font-family:inherit; font-size:.88rem; font-weight:600; color: var(--navy-2); background:#fff;
}
.lnd2 .booking-card .nice-select .list{ width:100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border:1px solid var(--line); padding:6px; max-height:280px; overflow-y:auto; }
.lnd2 .booking-card .nice-select .option{ border-radius:8px; font-size:.86rem; padding:9px 12px; }
.lnd2 .booking-card .nice-select .option.selected{ font-weight:700; color: var(--orange-dark); background:transparent; }
.lnd2 .booking-card .nice-select .option:hover{ background: var(--mist); }
.lnd2 .booking-card .weekly-price-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px !important;
  border:1px solid var(--line) !important; border-radius: var(--radius) !important; margin-bottom:10px !important; background:#fff;
}
.lnd2 .booking-card .weekly-price-card.selected-week-card{ background: rgba(245,126,53,.08) !important; border-color: var(--orange) !important; }
.lnd2 .booking-card .weekly-price-card .primary-color{ color: var(--orange-dark) !important; }
.lnd2 .booking-card .weekly-price-card .tier-was-price{ color: var(--ink-soft); text-decoration:line-through; font-size:.82rem; font-weight:500; margin-right:2px; }
.lnd2 .booking-card .weekly-price-card .tier-promo-badge{
  display:block; margin-top:3px; font-size:.68rem; font-weight:700; color: var(--green);
  background: rgba(33,193,124,.12); border-radius:999px; padding:2px 8px; width:fit-content;
}
.lnd2 .booking-card ul.cart_list{ display:flex; flex-direction:column; margin:0 0 16px; }
.lnd2 .booking-card ul.cart_list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.88rem; color: var(--ink-soft); }
.lnd2 .booking-card ul.cart_list li:last-child{ border-bottom:none; }
.lnd2 .booking-card ul.cart_list li > span{ font-weight:700; color: var(--navy-2); font-family: var(--font-head); }
.lnd2 .booking-card ul.cart_list li.green-gradient-bg{ background: rgba(33,193,124,.1) !important; color: var(--green) !important; font-weight:700; border-radius: var(--radius-sm); padding:10px 12px; border-bottom:none; margin:4px 0; }
.lnd2 .booking-card ul.cart_list li.green-gradient-bg > span{ color: var(--green) !important; }
.lnd2 .booking-card ul.cart_list.cart-summary-primary li{ font-size:.95rem; color: var(--ink); }
.lnd2 .booking-card ul.cart_list.cart-summary-primary li > span{ font-size:1rem; }
/* Collapsed by default on mobile — the full line-by-line breakdown (weekly
   price, room price, fees, VAT) is one tap away via "View Details" instead
   of always taking over the sheet; check-in/check-out + total price + the
   deposit note stay visible either way. Always expanded on wider screens,
   where there's room and no tap-through flow to protect. */
.lnd2 .booking-card .cart-details-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:2px 0 14px;
  padding:9px; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist);
  color: var(--ink-soft); font-size:.82rem; font-weight:700; cursor:pointer;
}
.lnd2 .booking-card .cart-details-toggle .cdt-chevron{ transition: transform .2s ease; }
.lnd2 .booking-card .cart-details-toggle.open .cdt-chevron{ transform: rotate(180deg); }
.lnd2 .booking-card ul.cart_list.cart-details-collapsible{ display:none; }
.lnd2 .booking-card ul.cart_list.cart-details-collapsible.show{ display:flex; }
@media (min-width: 761px){
  .lnd2 .booking-card .cart-details-toggle{ display:none; }
  .lnd2 .booking-card ul.cart_list.cart-details-collapsible{ display:flex; }
}
.lnd2 .booking-card .bedding-fee-toggle{ border:1px solid var(--orange); color: var(--orange-dark); background:#fff; border-radius:999px; padding:3px 12px; font-size:.72rem; font-weight:700; }
.lnd2 .booking-card .cart-total.color2-bg{
  display:flex !important; align-items:center; justify-content:space-between; gap:10px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  border-radius: var(--radius) !important; padding:16px 20px !important; margin:0 0 16px !important;
}
.lnd2 .booking-card .cart-total .cart-total_item_title{ color:#fff !important; font-weight:600; font-size:.85rem; }
.lnd2 .booking-card .cart-total strong{ color:#fff !important; font-family: var(--font-head); font-size:1.3rem; }
.lnd2 .booking-card .deposit-note{
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap;
  font-size:.8rem; color: var(--ink-soft); margin:-6px 0 12px; text-align:center;
}
.lnd2 .booking-card .deposit-note strong{ color: var(--green); font-family: var(--font-head); }
.lnd2 .booking-card .btn.color2-bg,
.lnd2 .booking-card a.color2-bg{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 26px;
  border-radius:999px !important; border:none !important; font-weight:600; font-size:.95rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important; color:#fff !important;
  box-shadow: 0 10px 24px rgba(245,126,53,.3); transition: all .25s ease;
}
.lnd2 .booking-card .btn.color2-bg:hover{ transform: translateY(-2px); box-shadow: var(--glow-orange); }
.lnd2 .booking-card #residece_weekly_prices_table .modal-enquiry-open{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 26px; margin-top:10px;
  border-radius:999px; font-weight:600; font-size:.95rem; background: var(--mist); color: var(--navy-2);
  border:1px solid var(--line); transition: all .2s ease;
}
.lnd2 .booking-card #residece_weekly_prices_table .modal-enquiry-open:hover{ border-color: var(--orange); color: var(--orange-dark); }
/* Superseded by .price-loading-overlay, which is already shown/hidden in lockstep
   with every price fetch — these legacy square, un-rounded overlays only added a
   second, conflicting loading indicator whose corners peeked out (dark triangles)
   past our rounded one. */
.lnd2 .booking-card .booking-detail-overlay,
.lnd2 .booking-card .weekly-room-overlay{ display:none !important; }

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.lnd2 .sticky-cta{
  display:none; position: fixed; left:0; right:0; bottom:0; z-index:250; background:#fff; border-top:1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08); padding: 14px 0;
}
.lnd2 .sticky-cta .container{ display:block; }
.lnd2 .sticky-cta-action{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:none; border-radius:999px; padding:14px 22px; cursor:pointer; text-align:left;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color:#fff;
  box-shadow: 0 10px 24px rgba(245,126,53,.3); transition: transform .15s ease;
}
.lnd2 .sticky-cta-action:active{ transform: scale(.98); }
.lnd2 .sticky-cta-info{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; overflow:hidden; }
.lnd2 .sticky-cta-label{ font-size:.68rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lnd2 .sticky-cta-price{ font-weight:700; font-family:var(--font-head); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lnd2 .sticky-cta-cta{ font-weight:700; font-size:.95rem; white-space:nowrap; flex-shrink:0; }

/* The Verbaflo chat bubble (injected sitewide, fixed bottom-right) sits low
   enough to land on top of our Book Now bar on mobile. Nudge it up just on
   pages that actually have the bar — no change to Verbaflo's own script/config.
   Verbaflo's widget bundle sets its own "bottom" INLINE via
   node.style.setProperty('bottom', value, 'important') (confirmed by reading
   widget.dev.js's set_style() helper) on BOTH .verbaflo-widget-container and
   .verbaflo-widget-parent-container — an inline !important beats any external
   stylesheet rule, !important or not, so overriding "bottom" can never win.
   "transform" is a different property they don't touch here, so shifting via
   translateY stacks on top of whatever bottom value they end up with instead
   of fighting it. --sticky-cta-h is kept in sync with the bar's real rendered
   height by syncStickyCtaHeight() in both pages' own JS. */
@media (max-width:760px){
  body:has(.lnd2 .sticky-cta) #vfwidget .verbaflo-widget-container,
  body:has(.lnd2 .sticky-cta) #vfwidget .verbaflo-widget-parent-container{
    transform: translateY(calc(-1 * (var(--sticky-cta-h, 90px) + 14px))) !important;
  }
}

/* While the sheet is open, fuse the bar to it: flush, edge-to-edge, square
   corners, no shadow/border of its own — reads as the sheet's own attached
   action footer rather than a separate floating pill. */
.lnd2 .sticky-cta.sheet-mode{ border-top:none; box-shadow:none; padding:0; }
.lnd2 .sticky-cta.sheet-mode .container{ padding:0; max-width:none; }
.lnd2 .sticky-cta.sheet-mode .sticky-cta-action{ border-radius:0; box-shadow:none; padding:16px 22px; }

/* Backdrop + expandable bottom sheet: tapping "Book Now" slides the mobile
   booking card (#sec3 — dates, AY tabs, room type, price) up from behind the
   sticky bar instead of scrolling the page to it. Re-parents nothing; it's
   the same #sec3 element, just repositioned via .sheet-expanded (see the
   max-width:760px block below for the actual fixed-position rule). */
.lnd2 .sheet-backdrop{ display:none; position:fixed; inset:0; background:rgba(10,12,16,.45); z-index:240; }
.lnd2 .sheet-backdrop.show{ display:block; }
.lnd2 .sheet-close-btn{ display:none; }
/* #sec3 sits inside a bare <section> (legacy sitewide rule: section{
   position:relative; z-index:1 }), which creates its own stacking context —
   #sec3's own z-index is only ever compared against siblings INSIDE that
   section, never against .sheet-backdrop (z-index:240, outside it entirely),
   so the whole section rendered capped at rank 1 and the backdrop covered
   the sheet regardless of #sec3's own z-index. Raise that one ancestor's
   rank above the backdrop while the sheet is open — no DOM movement needed,
   :has() reacts automatically to the .sheet-expanded class already toggled
   in JS. */
section:has(#sec3.sheet-expanded){ z-index: 246 !important; }

/* ==========================================================================
   Enquiry / Viewing / Room-detail modals (reused across the site — scoped
   so out-of-london/show.blade.php, which shares these classes, is untouched)
   ========================================================================== */
.lnd2 .main-enquiry,
.lnd2 .main-viewing,
.lnd2 .main-room-detail{
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important;
  /* Base theme reserves only 40px top padding for the absolutely-positioned
     title bar, which is actually 54px tall — the title overlaps the first
     14px of the form content instead of clearing it. */
  padding-top: 70px;
}
.lnd2 .main-enquiry_title,
.lnd2 .main-viewing_title,
.lnd2 .main-room-detail_title{
  background: var(--navy-2) !important; color:#fff !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-family: var(--font-head); font-size:1rem !important;
}
.lnd2 .close-enquiry,.lnd2 .close-viewing,.lnd2 .close-room-detail{ color:#fff !important; border-left-color: rgba(255,255,255,.15) !important; }
.lnd2 .custom-form input[type="text"],
.lnd2 .custom-form input[type="password"],
.lnd2 .custom-form textarea{ border:1px solid var(--line) !important; border-radius: var(--radius-sm) !important; background:#fff !important; }
.lnd2 .custom-form .chosen-select,
.lnd2 .custom-form .nice-select{ border:1px solid var(--line) !important; border-radius: var(--radius-sm) !important; }
.lnd2 .submit-booking-request,
.lnd2 .submit-viewing-request{
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important; border-radius:999px !important;
  box-shadow: 0 10px 24px rgba(245,126,53,.3); transition: all .25s ease;
}
.lnd2 .submit-booking-request:hover,
.lnd2 .submit-viewing-request:hover{ transform: translateY(-2px); box-shadow: var(--glow-orange); }
.lnd2 .waves-holder{ display:none; }

/* ==========================================================================
   Lightbox / misc
   ========================================================================== */
.lnd2 .lightbox{ position:fixed; inset:0; background:rgba(5,7,10,.9); z-index:320; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .2s ease; }
.lnd2 .lightbox.open{ opacity:1; visibility:visible; }
.lnd2 .lightbox img{ max-width:90vw; max-height:88vh; border-radius: var(--radius); }
.lnd2 .lightbox .lb-close{ position:absolute; top:24px; right:28px; background:rgba(255,255,255,.12); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.3rem; cursor:pointer; z-index:2; }

@media (max-width: 1080px){
  .lnd2 .res-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lnd2 .detail-layout{ grid-template-columns: minmax(0,1fr); }
  .lnd2 .booking-card{ position:static; }
}
@media (max-width: 760px){
  .lnd2 .res-grid{ grid-template-columns: 1fr; }
  .lnd2 .room-grid .gallery-item{ flex:0 0 100%; max-width:100%; }
  .lnd2 .room-grid-nav{ display:none; }
  /* The 34px bottom padding on .room-grid exists to fit the desktop
     hover-lift shadow — irrelevant on touch, and on mobile it just adds
     to the (already tight-feeling) gap before Local Guide. */
  .lnd2 .room-grid{ padding-bottom:14px; }
  .lnd2 .detail-block:has(+ #guide){ margin-bottom:0; }
  .lnd2 .sticky-cta{ display:block; }
  .lnd2 .m-item{ flex:0 0 calc(85% - 10px); }
  .lnd2 .year-tabs{ flex-direction:column; }
  .lnd2 .date-row{ grid-template-columns: 1fr; }

  /* ---- App-like mobile pass: denser rhythm, no wasted scroll ---- */
  .lnd2 .detail-hero{ height:20vh; min-height:200px; }
  .lnd2 .detail-hero-content .breadcrumb{ margin-bottom:22px; font-size:.75rem; }
  .lnd2 .detail-hero-content h1{ font-size:1.35rem; }
  .lnd2 .detail-hero-content{ padding-bottom:16px; }
  .lnd2 .detail-hero-content .addr{ font-size:.8rem; }
  .lnd2 .price-pill{ padding:8px 14px; }
  .lnd2 .price-pill .amt{ font-size:1.1rem; }

  .lnd2 .container{ padding:0 16px; }
  .lnd2 .detail-layout{ padding:24px 0; gap:24px; }
  .lnd2 .detail-block{ margin-bottom:28px; }
  .lnd2 .detail-main h2.h-sub{ font-size:1.15rem; }

  .lnd2 .facility-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .lnd2 .facility-chip{ padding:11px 10px; gap:8px; font-size:.8rem; }
  .lnd2 .facility-chip .fi-icon{ width:22px; height:22px; font-size:.72rem; }

  .lnd2 .room-media{ height:200px; }
  .lnd2 .room-body{ padding:14px 16px; }
  .lnd2 .booking-card{ padding:18px; }
  .lnd2 .booking-tabs button,.lnd2 .booking-tabs a{ padding:12px 8px; font-size:.8rem; }

  /* #sec3 as an expandable bottom sheet — same element, just repositioned;
     collapses back into the normal in-flow card when .sheet-expanded is off.
     Edge-to-edge with a flat bottom, sitting with zero gap directly on top of
     the (also flush/square, see .sheet-mode) sticky bar below, so the two
     read as one continuous panel rather than a floating card + floating pill. */
  .lnd2 #sec3.sheet-expanded{
    /* top/bottom/height are pinned explicitly by positionBookingSheet() in JS
       — #sec3 also carries .booking-card, whose base rule sets
       position:sticky; top:96px for the desktop sidebar, and that leftover
       top fights a CSS-only bottom+max-height resolution instead of
       reliably sitting flush against the bar below. */
    position:fixed !important; left:0; right:0; overflow-y:auto;
    z-index:245; border-radius: 20px 20px 0 0 !important; box-shadow: var(--shadow-lg) !important;
    animation: lnd2-sheet-up .25s ease;
  }
  .lnd2 #sec3.sheet-expanded .sheet-close-btn{
    display:flex; align-items:center; justify-content:center; margin:-4px -4px 10px auto;
    width:32px; height:32px; border-radius:50%; border:none; background: var(--mist);
    color: var(--ink-soft); font-size:1rem; cursor:pointer;
  }
  @keyframes lnd2-sheet-up{ from{ transform:translateY(30px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }

  /* While the booking sheet is expanded it covers most of the viewport —
     Verbaflo's launcher sits at z-index:2147483647 (the max possible), so no
     z-index of ours could ever put the sheet above it. Hide the widget
     outright for the duration instead; it reappears once the sheet closes
     (.sheet-expanded is removed). */
  body:has(.lnd2 #sec3.sheet-expanded) #vfwidget{ visibility:hidden !important; pointer-events:none !important; }

  .lnd2 .related-card{ flex:0 0 82vw; }

  /* Comfortable min touch target everywhere, matching a native-app feel */
  .lnd2 .room-cat-card [data-toggle-cat],
  .lnd2 .btn.color2-bg, .lnd2 a.color2-bg,
  .lnd2 .modal-enquiry-open{ min-height:44px; }

  /* room-detail.blade.php's title row: the h1 at full clamp() size plus the
     view-tabs pill wrapping onto a second row (4 buttons rarely fit one
     line at 390px) made for a very tall block before the gallery even
     starts. Smaller title, and a rounded-rect (not full capsule) shape for
     the tab group once it wraps. */
  .lnd2 .room-title-row{ margin: 20px 0 16px; flex-direction:column; align-items:flex-start; }
  .lnd2 .room-title-row h1{ font-size:1.4rem; }
  .lnd2 .room-title-text{ flex:0 0 auto; min-width:0; width:100%; }
  .lnd2 .view-tabs{ border-radius: var(--radius); }
}

/* ==========================================================================
   Room Detail page (room.html port)
   ========================================================================== */
.lnd2-container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.lnd2 .crumb-bar{ background: var(--mist); border-bottom:1px solid var(--line); padding:14px 0; }
.lnd2 .crumb-bar .crumb{ font-size:.85rem; color: var(--ink-soft); }
.lnd2 .crumb-bar .crumb a{ color: var(--orange-dark); font-weight:600; }
.lnd2 .crumb-bar .crumb a:hover{ text-decoration: underline; }
.lnd2 .crumb-bar .crumb span{ color: var(--ink); font-weight:600; }

.lnd2 .room-title-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin: 28px 0 20px; }
.lnd2 .room-title-row h1{ font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.lnd2 .room-title-text{ flex:1 1 0%; min-width:0; }
.lnd2 .room-sub-addr{ margin-top:6px; color: var(--ink-soft); font-size:.9rem; display:flex; align-items:center; gap:6px; }

.lnd2 .view-tabs{ display:inline-flex; gap:6px; padding:4px; border-radius:999px; background: var(--mist-2); flex-wrap:wrap; }
.lnd2 .view-tabs button{ padding:9px 18px; border-radius:999px; border:none; background:transparent; font-weight:600; font-size:.85rem; color: var(--ink-soft); transition: all .2s ease; }
.lnd2 .view-tabs button.active{ background: var(--navy-2); color:#fff; }

.lnd2 .gallery-panel{ position:relative; width:100%; aspect-ratio:16/10; border-radius: var(--radius-lg); overflow:hidden; background: var(--mist-2); }
.lnd2 .room-hero-track{ display:flex; height:100%; transition: transform .45s ease; }
.lnd2 .room-hero-slide{ flex:0 0 100%; height:100%; }
.lnd2 .room-hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; cursor: zoom-in; }
.lnd2 .gallery-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(11,14,20,.55); color:#fff; font-size:1.3rem; display:grid; place-items:center; transition: background .2s ease;
}
.lnd2 .gallery-arrow:hover{ background: rgba(11,14,20,.85); }
.lnd2 .gallery-arrow.prev{ left:16px; }
.lnd2 .gallery-arrow.next{ right:16px; }
.lnd2 .gallery-dots{ position:absolute; left:0; right:0; bottom:16px; z-index:3; display:flex; justify-content:center; gap:7px; }
.lnd2 .gallery-dots .dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.5); cursor:pointer; transition: all .2s ease; }
.lnd2 .gallery-dots .dot.active{ background:#fff; transform: scale(1.25); }
.lnd2 .floorplan-panel{ display:none; height:100%; align-items:center; justify-content:center; background:#fff; }
.lnd2 .floorplan-panel img{ max-height:100%; max-width:90%; cursor: zoom-in; }
.lnd2 .gallery-panel.show-floorplan .room-hero-track,
.lnd2 .gallery-panel.show-floorplan .gallery-arrow,
.lnd2 .gallery-panel.show-floorplan .gallery-dots{ display:none; }
.lnd2 .gallery-panel.show-floorplan .floorplan-panel{ display:flex; }
.lnd2 .media-placeholder{ display:none; height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: var(--navy-2); color:#fff; gap:14px; padding:24px; }
.lnd2 .media-placeholder .mp-icon{ width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; font-size:1.6rem; }
.lnd2 .media-placeholder h3{ font-family: var(--font-head); font-size:1.15rem; }
.lnd2 .virtualtour-panel{ position:relative; background-size:cover; background-position:center; cursor:pointer; }
.lnd2 .virtualtour-panel::before{ content:''; position:absolute; inset:0; background:rgba(15,23,42,.55); }
.lnd2 .virtualtour-panel .mp-icon, .lnd2 .virtualtour-panel h3, .lnd2 .virtualtour-panel p{ position:relative; z-index:1; }
.lnd2 .media-placeholder p{ color: rgba(255,255,255,.65); font-size:.88rem; max-width:360px; }
.lnd2 .gallery-panel.show-videos .room-hero-track,.lnd2 .gallery-panel.show-videos .gallery-arrow,.lnd2 .gallery-panel.show-videos .gallery-dots,
.lnd2 .gallery-panel.show-virtualtour .room-hero-track,.lnd2 .gallery-panel.show-virtualtour .gallery-arrow,.lnd2 .gallery-panel.show-virtualtour .gallery-dots{ display:none; }
.lnd2 .gallery-panel.show-videos .videos-panel{ display:flex; }
.lnd2 .gallery-panel.show-virtualtour .virtualtour-panel{ display:flex; }

.lnd2 .thumb-strip{ display:flex; gap:10px; margin:16px 0 28px; flex-wrap:wrap; }
.lnd2 .thumb-strip img{ width:88px; height:64px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; opacity:.75; transition: all .2s ease; }
.lnd2 .thumb-strip img:hover,.lnd2 .thumb-strip img.active{ opacity:1; border-color: var(--orange); }

.lnd2 .option-list{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; position:relative; }
.lnd2 .option-list-scroll{ max-height: 340px; overflow-y: auto; position:relative; scrollbar-width: thin; scrollbar-color: var(--orange) var(--mist-2); }
.lnd2 .option-list.has-more::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:28px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.95));
  pointer-events:none; border-radius:0 0 var(--radius) var(--radius);
}
.lnd2 .option-count-note{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px; font-size:.78rem; color: var(--ink-soft); background: var(--mist-2); border-bottom:1px solid var(--line); }
.lnd2 .option-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:.92rem; cursor:pointer; transition: background .15s ease; position:relative; }
.lnd2 .option-row:last-child{ border-bottom:none; }
.lnd2 .option-row:nth-child(odd){ background: var(--mist); }
.lnd2 .option-row:hover{ background: rgba(245,126,53,.08); }
.lnd2 .option-row.selected{ background: rgba(245,126,53,.12) !important; box-shadow: inset 3px 0 0 var(--orange); }
.lnd2 .option-row .lbl{ font-weight:600; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.lnd2 .option-row .price{ font-family: var(--font-head); font-weight:700; color: var(--navy-2); white-space:nowrap; }
.lnd2 .option-row .price span{ font-size:.72rem; font-weight:500; color: var(--ink-soft); }
.lnd2 .option-row.unavailable{ opacity:.45; cursor:not-allowed; }

.lnd2 .location-map{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
.lnd2 .location-map > div{ width:100%; height:100%; }
.lnd2 .location-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; font-size:.88rem; color: var(--ink-soft); }
.lnd2 .location-footer a{ color: var(--orange-dark); font-weight:700; white-space:nowrap; }
.lnd2 .location-footer a:hover{ text-decoration: underline; }

.lnd2 .booking-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:18px; }
.lnd2 .booking-price .amt{ font-family: var(--font-head); font-weight:700; font-size:1.8rem; color: var(--navy-2); }
.lnd2 .booking-price .unit{ color: var(--ink-soft); font-size:.85rem; }

.lnd2 .related-rooms{ margin: 8px 0 80px; }
.lnd2 .related-slider-wrap{ position:relative; margin-top:20px; }
.lnd2 .related-grid{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none; }
.lnd2 .related-grid::-webkit-scrollbar{ display:none; }
.lnd2 .related-card{ flex:0 0 280px; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; cursor:pointer; }
.lnd2 .related-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.lnd2 .related-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--mist-2); }
.lnd2 .related-card-img img{ width:100%; height:100%; object-fit:cover; }
.lnd2 .related-card-body{ padding:18px; }
.lnd2 .related-card-body h4{ font-family: var(--font-head); font-size:1.05rem; margin-bottom:6px; }
.lnd2 .related-card-price{ font-weight:700; color: var(--navy-2); margin-bottom:14px; }
.lnd2 .related-card-price span{ font-weight:500; color: var(--ink-soft); font-size:.8rem; }
.lnd2 .related-nav{
  position:absolute; top:38%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color: var(--navy-2); box-shadow: var(--shadow); font-size:1.2rem; display:grid; place-items:center;
}
.lnd2 .related-nav.prev{ left:-18px; } .lnd2 .related-nav.next{ right:-18px; }

.lnd2 .fallback-wrap{ padding:120px 24px; text-align:center; }
.lnd2 .fallback-wrap h1{ font-size:1.6rem; margin-bottom:12px; }
.lnd2 .fallback-wrap p{ color: var(--ink-soft); margin-bottom:24px; }

@media(max-width:900px){
  .lnd2 .detail-layout{ grid-template-columns:minmax(0,1fr); }
  .lnd2 .booking-card{ position:static; }
  .lnd2 .gallery-panel{ aspect-ratio:4/3; }
  .lnd2 .related-nav{ display:none; }
}