/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
 * /assets/ses-photo-tour.css   photo-tour v2.0.2 (2026-10-12)   v2.0.2: the desktop Rooms button keeps readable
 *   colours while the Rooms overview is open (it showed dark text on a dark background). v2.0: Part 4, the desktop viewer (Rooms overview, room list,
 *   larger photo, Expand photo). Phones unchanged. v1.1: Close button in the Rooms panel when it covers the viewer
 * Upload to: public_html/assets/ses-photo-tour.css    Loaded by includes/photo-tour.php (ses_photo_tour_head()).
 *
 * The property pages' photo tour. Part 1 is the desktop stage's base styles, moved here from each page's inline <style>;
 * from v2.0 Part 4 lays out the desktop viewer and overrides responsive-laptop.css section 8 (the old thumbnail rail). Part 2 is the phone tour, which applies when
 * /assets/ses-photo-tour.js puts .ses-tour-m on #sesModal: viewports up to 740px wide, and phones held sideways
 * (coarse pointer, up to 520px tall). Part 3 is the full-screen photo viewer and the Rooms overview.
 * Controls are at least 48 x 48 CSS px to tap; safe areas are respected (env(safe-area-inset-*)).
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Part 1: desktop stage (moved from the property pages, unchanged) ─────────────────────────────────────────── */
/* ── Photo Tour modal ──────────────────────────────────────────────── */
.ses-modal {
  position: fixed; inset: 0;
  background: rgba(8, 7, 5, .97);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 1000; display: none; flex-direction: column;
}
.ses-modal.open { display: flex; }
body.ses-modal-open { overflow: hidden !important; }
/* Hide texture overlay while modal is open (same fix as legacy lightbox) */
body.ses-modal-open::before { display: none !important; }

.ses-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid rgba(232,212,184,.12);
  flex-shrink: 0;
}
.ses-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem; letter-spacing: .18em; color: var(--sand);
}
.ses-modal-counter {
  font-family: 'Jost', sans-serif;
  font-size: .72rem; letter-spacing: .18em; color: var(--mesa);
  font-variant-numeric: tabular-nums;
}
.ses-modal-counter strong { color: var(--fire); font-weight: 600; }
.ses-modal-close {
  width: 40px; height: 40px;
  background: transparent; border: 1px solid rgba(232,212,184,.18);
  color: var(--sand);
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: all .25s ease;
}
.ses-modal-close:hover {
  border-color: var(--fire); color: var(--fire); transform: rotate(90deg);
}

.ses-modal-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ses-modal-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; padding: 2rem; min-height: 0;
}
.ses-modal-image-wrap {
  max-width: min(1100px, 100%); max-height: 100%;
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.ses-modal-image-wrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 3px;
}
.ses-modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px;
  background: rgba(20,17,13,.7); border: 1px solid rgba(232,212,184,.18);
  color: var(--sand);
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease; z-index: 2; font-size: 1.4rem; cursor: pointer;
}
.ses-modal-arrow:hover { background: var(--fire); border-color: var(--fire); color: #fff; }
.ses-modal-arrow.prev { left: 2rem; }
.ses-modal-arrow.next { right: 2rem; }

.ses-modal-caption {
  padding: .9rem 2rem; text-align: center; color: var(--sky);
  font-size: .82rem; line-height: 1.55; max-width: 800px;
  margin: 0 auto; min-height: 2.4rem;
}
.ses-modal-caption .room-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fire); font-weight: 600; margin-bottom: .4rem;
}

.ses-modal-pills {
  display: flex; gap: .45rem; overflow-x: auto;
  padding: .9rem 2rem; border-top: 1px solid rgba(232,212,184,.12);
  scrollbar-width: none; flex-shrink: 0;
}
.ses-modal-pills::-webkit-scrollbar { display: none; }
.ses-modal-pill {
  flex-shrink: 0; background: transparent;
  border: 1px solid rgba(232,212,184,.18);
  color: var(--mesa);
  padding: .45rem .95rem; border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: all .2s ease;
}
.ses-modal-pill:hover { color: var(--sand); }
.ses-modal-pill.active { background: var(--sand); border-color: var(--sand); color: var(--dusk); }
.ses-modal-pill .count { opacity: .55; margin-left: .35em; font-weight: 400; }

.ses-modal-thumbs {
  display: flex; gap: 4px; overflow-x: auto;
  padding: .8rem 2rem 1.2rem;
  scrollbar-width: none; flex-shrink: 0;
}
.ses-modal-thumbs::-webkit-scrollbar { display: none; }
.ses-modal-thumb {
  flex-shrink: 0; width: 76px; height: 56px;
  border-radius: 3px; overflow: hidden;
  border: 2px solid transparent; background: var(--dusk);
  padding: 0; cursor: pointer; transition: all .2s ease;
}
.ses-modal-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5; transition: opacity .2s ease;
}
.ses-modal-thumb:hover img { opacity: .8; }
.ses-modal-thumb.active { border-color: var(--fire); }
.ses-modal-thumb.active img { opacity: 1; }

/* Desktop: close button stays in modal header (flex justify-content: space-between
   puts it at top-right naturally). Just style it visibly. */
#sesModal .ses-modal-close {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(0, 0, 0, 0.1);
  color: #1a1714;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
#sesModal .ses-modal-close:hover {
  background: #d95f2b;
  color: white;
  border-color: #d95f2b;
  transform: rotate(90deg) scale(1.05);
}

/* v1.0: the header now holds a Rooms button (phone only) and wraps the title and counter; on desktop the wrapper
   is transparent to layout, so title, counter and close sit exactly as before. */
.ses-modal[hidden] { display: none !important; }
#sesModal .ses-modal-heading { display: contents; }
#sesModal:not(.ses-tour-m) .ses-modal-header .ses-tour-rooms, #sesModal .ses-modal-stream, #sesModal .ses-tour-rooms-panel, #sesModal .ses-tour-viewer { display: none; }
#sesModal .ses-modal-close:focus-visible, #sesModal .ses-tour-btn:focus-visible, #sesModal .ses-tour-nav:focus-visible,
#sesModal .ses-tour-photo:focus-visible, #sesModal .ses-tour-room-card:focus-visible, #sesModal .ses-modal-arrow:focus-visible,
#sesModal .ses-modal-pill:focus-visible, #sesModal .ses-modal-thumb:focus-visible { outline: 2px solid var(--ember, #F0A050); outline-offset: 2px; }
/* Floating page widgets never cover the tour */
body.ses-modal-open #mobileBookBar, body.ses-modal-open .crisp-client, body.ses-modal-open #sesJumpTop { visibility: hidden !important; }
#sesModal.open { z-index: 2147482000; }
/* Phone hero: the same Show all chip as the desktop grid (the grid is hidden on phones), in the photo's top-right
   corner so it never meets the home's name. 44px tall to tap. */
.hero-main > .ses-showall-m { display: none; }
@media (max-width: 768px) {   /* the pages hide the desktop hero grid at 768px */
  .hero-main > .ses-showall-m { display: inline-flex; align-items: center; gap: 6px; z-index: 3; min-height: 44px; padding-left: 14px; padding-right: 14px; top: 12px; right: 12px; bottom: auto; }
}

/* ── Part 2: phone tour (#sesModal.ses-tour-m) ────────────────────────────────────────────────────────────────── */
#sesModal.ses-tour-m {
  --tour-hdr: calc(56px + env(safe-area-inset-top, 0px));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  backdrop-filter: none; -webkit-backdrop-filter: none; background: #0b0906;
}
#sesModal.ses-tour-m.open { display: block; }
#sesModal.ses-tour-m .ses-modal-stage, #sesModal.ses-tour-m .ses-modal-caption, #sesModal.ses-tour-m .ses-modal-pills,
#sesModal.ses-tour-m .ses-modal-thumbs, #sesModal.ses-tour-m .ses-modal-arrow { display: none !important; }
#sesModal.ses-tour-m .ses-modal-body { display: block; overflow: visible; height: auto; }
#sesModal.ses-tour-m .ses-modal-body::before, #sesModal.ses-tour-m .ses-modal-body::after { content: none !important; display: none !important; }

#sesModal.ses-tour-m .ses-modal-header {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  height: var(--tour-hdr); min-height: var(--tour-hdr);
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  background: #0b0906; border-bottom: 1px solid rgba(232,212,184,.14);
}
#sesModal.ses-tour-m .ses-modal-heading { display: block; min-width: 0; text-align: center; }
/* the home's name stays the dialog's accessible label; on a phone the header shows where you are instead */
#sesModal.ses-tour-m .ses-modal-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#sesModal.ses-tour-m .ses-modal-counter { font: 400 .8rem/1.3 'Jost', system-ui, sans-serif !important; letter-spacing: .02em; color: var(--cream, #F4EDE2); }
#sesModal.ses-tour-m .ses-modal-counter .l1, #sesModal.ses-tour-m .ses-modal-counter .l2,
#sesModal .ses-tour-viewer-count .l1, #sesModal .ses-tour-viewer-count .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sesModal.ses-tour-m .ses-modal-counter strong { color: var(--fire, #D95F2B); font-weight: 600; }
#sesModal.ses-tour-m .ses-modal-counter .l2 { font-size: .7rem; letter-spacing: .06em; color: var(--mesa, #B79F84); margin-top: 1px; }

/* Buttons: 48 x 48 tap target, visible chip can be smaller */
#sesModal .ses-tour-btn {
  min-width: 48px; min-height: 48px; padding: 0 12px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(30,22,13,.92); color: var(--cream, #F4EDE2);
  border: 1px solid rgba(232,212,184,.28); border-radius: 999px;
  font: 600 .82rem/1 'Jost', system-ui, sans-serif; letter-spacing: .02em; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#sesModal .ses-tour-btn[aria-expanded="true"] { background: var(--sand, #E8D4B8); color: #1a1714; border-color: var(--sand, #E8D4B8); }
#sesModal.ses-tour-m .ses-tour-rooms { display: inline-flex; }
#sesModal.ses-tour-m #sesModalClose {
  position: static !important; width: 48px !important; height: 48px !important; min-width: 48px;
  font-size: 1.6rem !important; box-shadow: 0 2px 10px rgba(0,0,0,.5) !important; transform: none !important;
}

/* Stream: one section per room, sticky room heading under the fixed header */
#sesModal.ses-tour-m .ses-modal-stream { display: block; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
#sesModal.ses-tour-m .ses-modal-stream-section { scroll-margin-top: var(--tour-hdr); }
#sesModal.ses-tour-m .ses-modal-stream-header {
  position: sticky; top: var(--tour-hdr); z-index: 10;
  display: flex; align-items: baseline; gap: .6em;
  padding: .85rem max(1rem, env(safe-area-inset-right, 0px)) .85rem max(1rem, env(safe-area-inset-left, 0px));
  background: #0b0906; border-bottom: 1px solid rgba(232,212,184,.12);
  font: 600 .74rem/1.3 'Jost', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fire, #D95F2B);
}
#sesModal.ses-tour-m .ses-modal-stream-header h3 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; overflow-wrap: anywhere; }
#sesModal.ses-tour-m .ses-modal-stream-header .stream-count { color: var(--mesa, #B79F84); font-weight: 400; letter-spacing: .08em; white-space: nowrap; }
#sesModal.ses-tour-m .ses-modal-stream-photos {
  display: flex; flex-direction: column; gap: 6px;
  padding: .5rem max(.75rem, env(safe-area-inset-right, 0px)) 1.5rem max(.75rem, env(safe-area-inset-left, 0px));
}
#sesModal .ses-tour-photo {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: #1c150d; cursor: zoom-in; position: relative; aspect-ratio: 3 / 2;
  -webkit-tap-highlight-color: transparent;
}
#sesModal .ses-tour-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
#sesModal .ses-tour-photo.is-broken img, #sesModal .ses-tour-room-card .thumb.is-broken img { visibility: hidden; }
#sesModal .ses-tour-photo.is-broken::after, #sesModal .ses-tour-room-card .thumb.is-broken::after {
  content: 'Photo unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 500 .8rem 'Jost', system-ui, sans-serif; color: var(--mesa, #B79F84); letter-spacing: .06em;
}

/* ── Part 3a: Rooms overview (phone; overlays the tour so the tour keeps its place) ──────────────────────────── */
#sesModal.ses-tour-m .ses-tour-rooms-panel:not([hidden]) {
  display: block; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; top: var(--tour-hdr);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #0b0906;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
#sesModal.ses-tour-m.ses-tour-viewing .ses-tour-rooms-panel:not([hidden]) { z-index: 60; top: 0; padding-top: env(safe-area-inset-top, 0px); }
#sesModal .ses-tour-rooms-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; background: #0b0906;
}
/* v1.1: the panel's own Close, shown only when the panel covers the full-screen viewer (the header and viewer Close
   buttons are behind it then); over the tour, the header's Close stays visible above the panel */
#sesModal .ses-rooms-close { display: none; }
#sesModal.ses-tour-viewing .ses-tour-rooms-panel .ses-rooms-close {
  display: inline-flex; position: static !important; width: 48px !important; height: 48px !important; min-width: 48px;
  font-size: 1.6rem !important; transform: none !important; flex-shrink: 0;
}
#sesModal .ses-tour-rooms-head .ses-tour-rooms-done { margin-left: auto; }
#sesModal .ses-tour-rooms-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sesModal .ses-tour-rooms-title { margin: 0; font: 600 .8rem/1.3 'Jost', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sand, #E8D4B8); }
#sesModal .ses-tour-rooms-title .n { color: var(--mesa, #B79F84); font-weight: 400; letter-spacing: .06em; text-transform: none; }
#sesModal .ses-tour-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
#sesModal .ses-tour-room-card {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#sesModal .ses-tour-room-card .thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1c150d; }
#sesModal .ses-tour-room-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sesModal .ses-tour-room-card .name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 7px; font: 600 .9rem/1.3 'Jost', system-ui, sans-serif; color: var(--cream, #F4EDE2); overflow-wrap: anywhere;
}
#sesModal .ses-tour-room-card .count { display: block; margin-top: 2px; font: 400 .78rem/1.3 'Jost', system-ui, sans-serif; color: var(--mesa, #B79F84); }
#sesModal .ses-tour-room-card[aria-current="true"] .name { color: var(--fire, #D95F2B); }
#sesModal .ses-tour-room-card[aria-current="true"] .thumb { box-shadow: 0 0 0 2px var(--fire, #D95F2B); }

/* ── Part 3b: full-screen viewer ─────────────────────────────────────────────────────────────────────────────── */
#sesModal .ses-tour-viewer:not([hidden]) {
  display: block; position: fixed; inset: 0; z-index: 50; background: #000;
  height: 100vh; height: 100dvh;
}
#sesModal .ses-tour-viewer-bar {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back . rooms close" "count count count count";
  align-items: center; gap: 4px 8px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 10px max(8px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0));
}
#sesModal .ses-tour-back { grid-area: back; }
#sesModal .ses-tour-viewer-bar .ses-tour-rooms { grid-area: rooms; display: inline-flex; }
#sesModal .ses-viewer-close { grid-area: close; }
#sesModal .ses-tour-viewer-count { grid-area: count; min-width: 0; text-align: center; font: 500 .82rem/1.3 'Jost', system-ui, sans-serif; color: var(--cream, #F4EDE2); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#sesModal .ses-tour-viewer-count strong { color: var(--ember, #F0A050); font-weight: 600; }
#sesModal .ses-tour-viewer-count .l1 { display: inline; }
#sesModal .ses-tour-viewer-count .l2 { display: inline; margin-left: .6em; font-size: .74rem; color: var(--sand, #E8D4B8); opacity: .85; }
#sesModal .ses-viewer-close { position: static !important; width: 48px !important; height: 48px !important; font-size: 1.6rem !important; transform: none !important; }
#sesModal .ses-tour-viewer-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  touch-action: pan-x pan-y pinch-zoom;
}
#sesModal .ses-tour-viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#sesModal .ses-tour-viewer-fail { color: var(--mesa, #B79F84); font: 500 .9rem 'Jost', system-ui, sans-serif; }
#sesModal .ses-tour-nav {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,16,11,.66); color: #fff; border: 1px solid rgba(255,255,255,.28);
  font-size: 1.9rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#sesModal .ses-tour-nav.prev { left: max(6px, env(safe-area-inset-left, 0px)); }
#sesModal .ses-tour-nav.next { right: max(6px, env(safe-area-inset-right, 0px)); }
#sesModal .ses-tour-nav:disabled { opacity: .25; cursor: default; }
#sesModal .ses-tour-viewer-caption {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  font: 400 .84rem/1.45 'Jost', system-ui, sans-serif; color: var(--cream, #F4EDE2); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#sesModal .ses-tour-viewer-caption:empty { display: none; }
@media (max-height: 520px) {
  #sesModal .ses-tour-viewer-caption { display: none; }
  #sesModal.ses-tour-m { --tour-hdr: calc(52px + env(safe-area-inset-top, 0px)); }
}

/* ── Part 4 (v2.0): desktop viewer (#sesModal.ses-dt: everything that is not the phone tour, tablets included) ────
   Scoped to .ses-dt so the phone tour is untouched. Selectors start #sesModal.ses-dt so they outrank
   responsive-laptop.css section 8 (the old side rail of thumbnails above 900px), which is overridden here.
   Layout: header 56px; body = [room list 220px, wide screens only] + main photo / caption / thumbnails.
   The JS (dtWide) assumes header + caption (two lines) + thumbnails + stage padding = 172px, stage side padding 16px
   and list 220px; keep them in step. The arrows sit 16px in from the stage edges: in the margin beside a photo that is
   limited by height (most screens), over the photo's edge when it is limited by width. */
#sesModal .ses-dt-only, #sesModal .ses-dt-side, #sesModal .ses-dt-fail { display: none; }
#sesModal.ses-dt { background: rgba(8,7,5,.985); }
#sesModal.ses-dt .ses-modal-header { height: 56px; min-height: 56px; padding: 0 12px 0 12px; display: flex; align-items: center; gap: 10px; }
#sesModal.ses-dt .ses-modal-header .ses-tour-rooms { display: inline-flex; }
#sesModal.ses-dt .ses-tour-btn { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: .8rem; background: rgba(30,22,13,.92); }
#sesModal.ses-dt .ses-tour-btn:not([aria-expanded="true"]):not([aria-pressed="true"]):hover { border-color: var(--ember, #F0A050); color: #fff; }
/* v2.0.2: pressed state (Rooms open). The rule above sets the dark background, so the pressed colours must be restated
   here; v2.0 kept the dark background with the pressed dark text, and the Rooms button looked empty. */
#sesModal.ses-dt .ses-tour-btn[aria-expanded="true"], #sesModal.ses-dt .ses-tour-btn[aria-pressed="true"] { background: var(--sand, #E8D4B8); color: #1a1714; border-color: var(--sand, #E8D4B8); }
#sesModal.ses-dt .ses-modal-heading { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 auto; padding-left: 6px; }
#sesModal.ses-dt .ses-modal-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
#sesModal.ses-dt .ses-modal-counter { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; font: 400 .82rem/1.3 'Jost', system-ui, sans-serif; letter-spacing: .02em; color: var(--cream, #F4EDE2); }
#sesModal.ses-dt .ses-modal-counter .l1 { overflow: hidden; text-overflow: ellipsis; }
#sesModal.ses-dt .ses-modal-counter .l1 strong { color: var(--ember, #F0A050); font-weight: 600; }
#sesModal.ses-dt .ses-modal-counter .l2 { color: var(--mesa, #B79F84); font-size: .76rem; letter-spacing: .06em; }
#sesModal.ses-dt .ses-dt-only { display: inline-flex; }
#sesModal.ses-dt:not(.ses-dt-wide) .ses-dt-sidebtn, #sesModal.ses-dt.ses-dt-x .ses-dt-sidebtn { display: none; }
#sesModal.ses-dt .ses-dt-sidebtn[aria-expanded="true"] { background: var(--sand, #E8D4B8); color: #1a1714; border-color: var(--sand, #E8D4B8); }
#sesModal.ses-dt .ses-dt-expand .i-off, #sesModal.ses-dt .ses-dt-expand[aria-pressed="true"] .i-on { display: none; }
#sesModal.ses-dt .ses-dt-expand[aria-pressed="true"] .i-off { display: inline; }
#sesModal.ses-dt .ses-dt-expand[aria-pressed="true"] { background: var(--sand, #E8D4B8); color: #1a1714; border-color: var(--sand, #E8D4B8); }
#sesModal.ses-dt #sesModalClose { margin-left: 4px; }
@media (max-width: 1040px) {   /* tablets and small laptops: the counter keeps its room, the buttons go icon-only */
  #sesModal.ses-dt .ses-dt-expand .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #sesModal.ses-dt .ses-modal-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

#sesModal.ses-dt .ses-modal-body {
  display: grid; position: relative; overflow: hidden; min-height: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "stage" "cap" "thumbs";
}
#sesModal.ses-dt.ses-dt-side .ses-modal-body { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "side stage" "side cap" "side thumbs"; }
#sesModal.ses-dt .ses-modal-body::before, #sesModal.ses-dt .ses-modal-body::after { content: none !important; display: none !important; }
#sesModal.ses-dt .ses-modal-pills { display: none !important; }

/* Room list */
#sesModal.ses-dt.ses-dt-side .ses-dt-side { grid-area: side; position: static; width: auto; height: auto; z-index: auto; text-align: left; display: flex; flex-direction: column; min-height: 0; background: #0d0a07; border-right: 1px solid rgba(232,212,184,.12); }
#sesModal.ses-dt .ses-dt-side-head { padding: 12px 16px 6px; text-align: left; font: 600 .68rem/1.3 'Jost', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mesa, #B79F84); }
#sesModal.ses-dt .ses-dt-side-list { display: block; list-style: none; margin: 0; padding: 2px 8px 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(232,212,184,.25) transparent; }
#sesModal.ses-dt .ses-dt-side-list li { display: block; margin: 0 0 2px; padding: 0; list-style: none; }
#sesModal.ses-dt .ses-dt-room {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "th nm" "th ct"; align-content: center; column-gap: 10px;
  width: 100%; min-height: 54px; box-sizing: border-box; padding: 6px 8px 6px 6px; margin: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--cream, #F4EDE2); text-align: left; cursor: pointer;
}
#sesModal.ses-dt .ses-dt-room .th { grid-area: th; position: relative; width: 60px; height: 42px; border-radius: 5px; overflow: hidden; background: #1c150d; align-self: center; }
#sesModal.ses-dt .ses-dt-room .th img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }
#sesModal.ses-dt .ses-dt-room .th.is-broken img { visibility: hidden; }
#sesModal.ses-dt .ses-dt-room .nm { grid-area: nm; align-self: end; font: 600 .8rem/1.25 'Jost', system-ui, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
#sesModal.ses-dt .ses-dt-room .ct { grid-area: ct; align-self: start; font: 400 .72rem/1.3 'Jost', system-ui, sans-serif; color: var(--mesa, #B79F84); }
#sesModal.ses-dt .ses-dt-room:hover { background: rgba(232,212,184,.07); }
#sesModal.ses-dt .ses-dt-room:hover .th img, #sesModal.ses-dt .ses-dt-room[aria-current="true"] .th img { opacity: 1; }
#sesModal.ses-dt .ses-dt-room[aria-current="true"] { background: rgba(217,95,43,.16); box-shadow: inset 3px 0 0 var(--fire, #D95F2B); }
#sesModal.ses-dt .ses-dt-room[aria-current="true"] .nm { color: #fff; }

/* Main photo: whole, uncropped, as large as the stage allows */
#sesModal.ses-dt .ses-modal-stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; padding: 8px 16px 4px !important; display: flex; align-items: center; justify-content: center; }
#sesModal.ses-dt .ses-modal-image-wrap { max-width: none !important; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
#sesModal.ses-dt .ses-modal-image-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
#sesModal.ses-dt .ses-modal-image-wrap.is-broken img { display: none; }
#sesModal.ses-dt .ses-modal-image-wrap.is-broken .ses-dt-fail:not([hidden]) {
  display: flex; align-items: center; justify-content: center; height: 100%; max-width: 100%; aspect-ratio: 3 / 2;
  border: 1px dashed rgba(232,212,184,.25); border-radius: 6px; background: #17110b; color: var(--mesa, #B79F84); font: 500 .9rem 'Jost', system-ui, sans-serif; letter-spacing: .04em;
}
#sesModal.ses-dt .ses-modal-arrow { width: 48px; height: 48px; }
#sesModal.ses-dt .ses-modal-arrow.prev { left: 24px !important; }
#sesModal.ses-dt .ses-modal-arrow.next { right: 24px !important; }
#sesModal.ses-dt .ses-modal-arrow { background: rgba(14,11,8,.72); box-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* Caption: two lines, More for longer descriptions */
#sesModal.ses-dt .ses-modal-caption { grid-area: cap; min-height: 0 !important; max-width: 980px; width: 100%; margin: 0 auto; padding: 2px 24px 0 !important; box-sizing: border-box; text-align: center; font-size: .84rem; line-height: 1.5; color: var(--sky, #CDD9E5); }
#sesModal.ses-dt .ses-modal-caption[hidden] { display: none; }
#sesModal.ses-dt .ses-modal-caption .cap-in { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#sesModal.ses-dt .ses-modal-caption.is-open .cap-in { display: block; -webkit-line-clamp: unset; max-height: 28vh; overflow-y: auto; }
#sesModal.ses-dt .ses-modal-caption .cap-more { background: none; border: 0; padding: 2px 8px; min-height: 26px; color: var(--ember, #F0A050); font: 600 .74rem/1 'Jost', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
#sesModal.ses-dt .ses-modal-caption .cap-more:hover { color: #fff; }

/* Thumbnails of the current room, one compact row */
#sesModal.ses-dt .ses-modal-thumbs {
  grid-area: thumbs; position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
  width: auto !important; height: auto; gap: 6px; overflow-x: auto !important; overflow-y: hidden !important;
  padding: 6px 16px 8px !important; justify-content: safe center; background: transparent !important; border: 0 !important;
  scrollbar-width: thin; scrollbar-color: rgba(232,212,184,.25) transparent;
}
#sesModal.ses-dt .ses-modal-thumb { width: 66px !important; height: 44px !important; flex: 0 0 auto; border: 2px solid transparent; border-radius: 4px; box-shadow: none !important; position: relative; }
#sesModal.ses-dt .ses-modal-thumb.active { border-color: var(--fire, #D95F2B); }
#sesModal.ses-dt .ses-modal-thumb.is-broken img { visibility: hidden; }

/* Expanded: the photo takes the room list's and the thumbnails' space; header, arrows and Close stay */
#sesModal.ses-dt.ses-dt-x .ses-modal-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage" "cap"; }
#sesModal.ses-dt.ses-dt-x .ses-dt-side, #sesModal.ses-dt.ses-dt-x .ses-modal-thumbs { display: none !important; }
#sesModal.ses-dt.ses-dt-x .ses-modal-stage { padding: 4px 16px 2px !important; }
#sesModal.ses-dt.ses-dt-x .ses-modal-caption { padding-bottom: 8px !important; }

/* Rooms overview: room cards below the header */
#sesModal.ses-dt .ses-tour-rooms-panel:not([hidden]) {
  display: block; position: absolute; z-index: 20; top: 56px; left: 0; right: 0; bottom: 0;
  overflow-y: auto; overscroll-behavior: contain; background: #0b0906; padding: 0 clamp(16px, 3vw, 48px) 36px;
}
#sesModal.ses-dt .ses-tour-rooms-head { max-width: 1480px; margin: 0 auto; padding: 16px 0 12px; }
#sesModal.ses-dt .ses-tour-rooms-title { font-size: .78rem; }
#sesModal.ses-dt .ses-tour-rooms-grid { max-width: 1480px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px; }
#sesModal.ses-dt .ses-tour-room-card .thumb { aspect-ratio: 3 / 2; }
#sesModal.ses-dt .ses-tour-room-card .thumb img { transition: transform .35s ease; }
#sesModal.ses-dt .ses-tour-room-card:hover .thumb img { transform: scale(1.03); }
#sesModal.ses-dt .ses-tour-room-card:hover .name { color: #fff; }
#sesModal.ses-dt .ses-tour-room-card .name { font-size: .95rem; margin-top: 9px; }

#sesModal.ses-dt .ses-dt-room:focus-visible, #sesModal.ses-dt .cap-more:focus-visible { outline: 2px solid var(--ember, #F0A050); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #sesModal, #sesModal * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}