/* Universal booking-engine overlay
   Injected on every final/<slug>/*.html page. Uses CSS variables
   --brand-bg / --brand-fg / --brand-accent / --brand-accent-fg set
   per-template by inline <style> in each page's <head>.

   Defaults assume a dark accent on light bg.
*/
:root {
  --booking-bg: var(--brand-bg, #ffffff);
  --booking-fg: var(--brand-fg, #1a1a1a);
  --booking-accent: var(--brand-accent, #164753);
  --booking-accent-fg: var(--brand-accent-fg, #ffffff);
  /* Phase C 2026-05-14 — finer brand tokens: card surfaces + secondary
     button + explicit button label color. Fall back to legacy vars so
     pre-C renders stay visually identical until a customer overrides. */
  --booking-card-bg: var(--brand-card-bg, #ffffff);
  --booking-card-border: var(--brand-card-border, rgba(0, 0, 0, 0.12));
  --booking-button-text: var(--brand-button-text, var(--booking-accent-fg));
  --booking-secondary-bg: var(--brand-secondary-bg, #f4f4f5);
  --booking-muted: rgba(0, 0, 0, 0.55);
  --booking-border: rgba(0, 0, 0, 0.12);
  --booking-radius: 12px;
  --booking-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --booking-shadow-strong: 0 8px 36px rgba(0, 0, 0, 0.16);
}

/* Phase C 2026-05-14 — card + secondary-button theming. These rules sit
   above template-specific overrides so per-template selectors can override
   them by specificity. */
.resort-col-item,
.resort-book-col,
.kiyo-unified-reserve-card,
.kiyo-room-card,
.reserve-card,
.hotel-room-content-inner-wrap {
  background-color: var(--booking-card-bg);
  border-color: var(--booking-card-border);
}
.main-button.secondary,
.kiyo-pill-cta.secondary,
.btn-outline,
.button.is-secondary {
  background-color: var(--booking-secondary-bg);
}
.main-button,
.primary-button-block,
.kiyo-pill-cta,
.w-commerce-commercecartcheckoutbutton {
  color: var(--booking-button-text);
}

/* ─── Sticky search bar (catalog header) ────────────────────────── */
.booking-search-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--booking-bg);
  color: var(--booking-fg);
  border-bottom: 1px solid var(--booking-border);
  padding: 12px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
/* Reserve space for the fixed bar so template content is not hidden underneath */
body.has-booking-bar { padding-top: 88px; }
@media (max-width: 900px) { body.has-booking-bar { padding-top: 108px; } }
/* Push down any template nav that uses position:fixed at top */
body.has-booking-bar .navbar.w-nav,
body.has-booking-bar .header,
body.has-booking-bar header[role="banner"] { top: 88px !important; }
@media (max-width: 900px) {
  body.has-booking-bar .navbar.w-nav,
  body.has-booking-bar .header,
  body.has-booking-bar header[role="banner"] { top: 108px !important; }
}
.booking-search-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  /* 5 tracks: currency, language, date-range picker, guests, search button.
     Was `auto auto 1fr 1fr auto auto` (6 tracks) for two separate native
     date <input>s (B-ENGINE-DATEPICKER-UI merged them into one picker —
     dropping a track here keeps grid auto-placement mapping the remaining
     children to the columns they actually visually belong in; leaving 6
     tracks for 5 children would shift every column after currency/language
     over by one and leave an empty trailing track). */
  grid-template-columns: auto auto 1fr auto auto;
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .booking-search-bar { padding: 10px 12px; }
  .booking-search-inner {
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: 40px 40px;
    gap: 6px;
    align-items: stretch;
  }
  .booking-search-inner > #booking-currency,
  .booking-search-inner > #booking-language { display: none !important; }
  .booking-search-inner > #booking-guests-pill {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    min-width: 0;
  }
  .booking-search-inner > .booking-search-button {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    min-height: 0 !important;
    height: auto;
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .booking-search-inner > .booking-field {
    grid-row: 1;
    padding: 4px 10px !important;
    min-height: 0;
    height: 40px;
    max-height: 40px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .booking-search-inner > .booking-field:nth-of-type(1) { grid-column: 1; }
  .booking-search-inner > .booking-field:nth-of-type(2) { grid-column: 2; }
  /* B-ENGINE-DATEPICKER-UI — the merged date-range picker takes the same
     row-1, both-columns spot the two native date fields used to jointly
     occupy (.booking-field rules above are now dead/unused but left in
     place — nothing in the search bar matches that class any more). */
  .booking-search-inner > .booking-daterange-picker {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-width: 0;
  }
  .booking-search-inner > .booking-daterange-picker .booking-daterange-trigger {
    padding: 4px 10px !important;
    min-height: 0;
    height: 40px;
    max-height: 40px;
    box-sizing: border-box;
    min-width: 0;
  }
  .booking-search-inner > .booking-daterange-picker .booking-field-label {
    font-size: 8px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .booking-search-inner > .booking-daterange-picker .booking-daterange-display {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .booking-search-inner .booking-field-label {
    display: block !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
    height: auto !important;
  }
  .booking-search-inner .booking-field-value {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
  }
  .booking-pill-dropdown {
    padding: 4px 22px 4px 10px !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    justify-content: center;
  }
  .booking-pill-dropdown .booking-field-label {
    font-size: 8px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .booking-pill-dropdown .booking-field-display {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-pill-dropdown::after { right: 6px; font-size: 8px; }
}
.booking-field {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-radius);
  padding: 8px 14px;
  cursor: pointer;
  min-width: 0;
}
.booking-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--booking-muted);
}
.booking-field-value {
  font-size: 14px;
  line-height: 1.3;
  font-family: inherit;
  color: var(--booking-fg);
  background: transparent;
  border: 0;
  padding: 2px 0;
  outline: none;
}
.booking-field-value::placeholder { color: var(--booking-muted); }
.booking-field input,
.booking-field select {
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  line-height: 1.3;
  font-family: inherit;
  color: inherit;
}
.booking-search-bar input[type="date"]::-webkit-calendar-picker-indicator {
  position: static !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  opacity: 0.55 !important;
  cursor: pointer;
}
.booking-search-bar input[type="date"]::-webkit-datetime-edit { font-size: 14px !important; }

/* Pill-style dropdown trigger (matches the USD pill look) */
.booking-pill-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-radius);
  padding: 8px 38px 8px 14px;
  cursor: pointer;
  min-width: 110px;
  user-select: none;
}
.booking-pill-dropdown::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.55;
  pointer-events: none;
}
.booking-pill-dropdown .booking-field-label { pointer-events: none; }
.booking-pill-dropdown .booking-field-display {
  font-size: 14px;
  color: var(--booking-fg);
  font-weight: 500;
}
.booking-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 100%;
  background: white;
  border: 1px solid var(--booking-border);
  border-radius: 10px;
  box-shadow: var(--booking-shadow-strong);
  padding: 6px;
  display: none;
  z-index: 110;
}
.booking-pill-dropdown.open .booking-dropdown-menu { display: block; }
.booking-dropdown-menu button {
  display: flex;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  color: var(--booking-fg);
  font: 13px / 1 system-ui, sans-serif;
}
.booking-dropdown-menu button:hover { background: rgba(0, 0, 0, 0.05); }
.booking-dropdown-menu button.on { background: var(--booking-accent); color: var(--booking-accent-fg); }

/* ─── 2-month date-range picker (B-ENGINE-DATEPICKER-UI) ────────────────
   Mirrors .booking-pill-dropdown's trigger + floating-panel look. Used in
   both the sticky search bar and the detail-page reserve widget — see
   _universal.js buildDateRangePicker(). */
.booking-daterange-picker {
  position: relative;
}
.booking-daterange-trigger {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  background: white;
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-radius);
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  /* No hard min-width floor — the two native <input type=date> fields this
     replaces both had min-width:0 (.booking-field), free to shrink on a
     cramped desktop/tablet width above the 900px mobile breakpoint where
     .booking-search-inner's `auto auto 1fr auto auto` grid can get tight.
     .booking-daterange-display already has text-overflow:ellipsis, so this
     degrades to truncated text instead of forcing an overflow. */
  min-width: 0;
}
.booking-daterange-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.booking-daterange-display {
  font-size: 14px;
  color: var(--booking-fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-daterange-display.is-placeholder { color: var(--booking-muted); font-weight: 400; }
.booking-daterange-arrow {
  align-self: center;
  opacity: 0.4;
  font-size: 13px;
}
.booking-daterange-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: white;
  border: 1px solid var(--booking-border);
  border-radius: 10px;
  box-shadow: var(--booking-shadow-strong);
  padding: 14px;
  display: none;
  z-index: 110;
  width: max-content;
  max-width: calc(100vw - 24px);
}
.booking-daterange-picker.open .booking-daterange-panel { display: block; }
.booking-daterange-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.booking-daterange-nav-btn {
  background: transparent;
  border: 1px solid var(--booking-border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 13px;
  color: var(--booking-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-daterange-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.booking-daterange-months {
  display: flex;
  gap: 20px;
}
.booking-daterange-month { width: 230px; }
.booking-daterange-month-title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--booking-fg);
}
.booking-daterange-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.booking-daterange-dow span {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--booking-muted);
  text-transform: uppercase;
}
.booking-daterange-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.booking-daterange-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  color: var(--booking-fg);
  cursor: pointer;
}
.booking-daterange-day.is-empty { cursor: default; visibility: hidden; }
.booking-daterange-day:not(.is-empty):not(.is-disabled):hover { background: rgba(0, 0, 0, 0.06); }
.booking-daterange-day.is-disabled { color: var(--booking-muted); opacity: 0.35; cursor: not-allowed; }
.booking-daterange-day.is-today { font-weight: 700; text-decoration: underline; }
.booking-daterange-day.is-in-range { background: rgba(0, 0, 0, 0.06); border-radius: 0; }
.booking-daterange-day.is-start,
.booking-daterange-day.is-end {
  background: var(--booking-accent);
  color: var(--booking-accent-fg);
  font-weight: 700;
}
.booking-daterange-footer {
  margin-top: 10px;
  font-size: 11px;
  color: var(--booking-muted);
  text-align: center;
}
@media (max-width: 560px) {
  .booking-daterange-panel {
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 24px));
  }
  .booking-daterange-months { flex-direction: column; gap: 16px; }
  .booking-daterange-month { width: 100%; }
}
/* Inside the theme-dark reserve widget the popup must stay a legible light
   surface — `.booking-widget.theme-dark *` (below) forces white text on
   every descendant, which would make this white popup unreadable. Winning
   specificity needs the extra .booking-widget.theme-dark prefix (matches
   this file's existing theme-dark override convention, e.g. the reserve
   button rule a few lines down). */
.booking-widget.theme-dark .booking-daterange-panel,
.booking-widget.theme-dark .booking-daterange-panel * {
  color: #1a1a1a !important;
}
.booking-widget.theme-dark .booking-daterange-day.is-start,
.booking-widget.theme-dark .booking-daterange-day.is-end {
  color: var(--booking-accent-fg) !important;
}
/* The inline trigger itself (not the popup) should follow the widget's own
   field styling — same translucent-dark treatment .booking-widget-field
   gets — so it doesn't look like a plain white hole punched into a dark
   widget. */
#booking-widget .booking-daterange-trigger {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 4px 10px;
  min-height: 42px;
  box-sizing: border-box;
}
#booking-widget .booking-daterange-trigger .booking-field-label {
  font-size: 10px;
  color: var(--booking-fg) !important;
  opacity: 0.85;
}
#booking-widget .booking-daterange-display { font-size: 13px; }
.booking-widget.theme-dark #booking-widget .booking-daterange-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.booking-search-button {
  height: 100%;
  min-height: 56px;
  padding: 0 28px;
  background: var(--booking-accent);
  color: var(--booking-accent-fg);
  border: 0;
  border-radius: var(--booking-radius);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s;
}
.booking-search-button:hover { filter: brightness(1.08); }

/* (date presets removed) */

/* ─── WhatsApp floating button ───────────────────────────────── */
.booking-whatsapp {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: var(--booking-shadow-strong);
  transition: transform 0.15s;
}
.booking-whatsapp:hover { transform: scale(1.06); }
.booking-whatsapp svg { width: 28px; height: 28px; fill: white; }

/* ─── Inline booking widget (detail page right rail) ─────────── */
.booking-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--booking-fg);
}
.booking-widget,
.booking-widget * { color: var(--booking-fg); }
.booking-widget .booking-reserve-button { color: var(--booking-accent-fg); }
.booking-widget-microcopy { color: var(--booking-muted) !important; }

/* Dark surface theme: white text, white reserve button with black text. */
.booking-widget.theme-dark,
.booking-widget.theme-dark * { color: #fff !important; }
.booking-widget.theme-dark .booking-widget-field { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.booking-widget.theme-dark .booking-widget-field input,
.booking-widget.theme-dark .booking-widget-field select { color: #fff; }
.booking-widget.theme-dark .booking-widget-field input::-webkit-datetime-edit { color: #fff; }
.booking-widget.theme-dark .booking-widget-math { border-color: rgba(255,255,255,0.3); }
.booking-widget.theme-dark .booking-widget-math-total { border-color: rgba(255,255,255,0.3); }
.booking-widget.theme-dark .booking-reserve-button {
  background: #fff !important;
  color: #1a1a1a !important;
}
.booking-widget.theme-dark .booking-widget-microcopy { color: rgba(255,255,255,0.6) !important; }
.booking-widget.theme-dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.booking-widget-standalone {
  margin: 24px 0 32px;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-radius);
  max-width: 480px;
}
.booking-widget-standalone .booking-widget { padding: 0; }
.booking-widget-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.booking-widget-field {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--booking-border);
  border-radius: 8px;
  padding: 4px 10px;
  min-height: 42px;
  min-width: 0;
  justify-content: center;
  box-sizing: border-box;
}
.booking-widget-row > .booking-widget-field { min-width: 0; }
.booking-widget-field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--booking-fg) !important;
  opacity: 0.85;
}
.booking-widget-field input,
.booking-widget-field select {
  background: transparent;
  border: 0;
  outline: none;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.3;
  font-family: inherit;
  color: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.booking-widget-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: static !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  opacity: 0.55 !important;
  cursor: pointer;
}
.booking-widget-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* (detail-page widget date presets removed) */
.booking-widget-math {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.booking-widget-math-row { display: flex; justify-content: space-between; }
.booking-widget-math-total { font-weight: 700; font-size: 16px; padding-top: 4px; border-top: 1px solid currentColor; margin-top: 4px; }
/* ─── Rate-plan picker (Phase 10C-1b, detail page, flag-gated) ─────────── */
.booking-rate-plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--booking-border);
}
.booking-rate-plans-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.booking-rate-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--booking-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.booking-rate-plan:hover { background: rgba(0, 0, 0, 0.03); }
.booking-rate-plan.is-selected {
  border-color: var(--booking-accent);
  box-shadow: inset 0 0 0 1px var(--booking-accent);
  background: rgba(0, 0, 0, 0.02);
}
.booking-rate-plan-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.booking-rate-plan-name { font-size: 13px; font-weight: 600; }
.booking-rate-plan-meal { font-size: 11px; opacity: 0.75; }
.booking-rate-plan-price { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.booking-rate-plan-tag {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
.booking-rate-plan-tag-free { color: #0f7a4d; background: rgba(16, 122, 77, 0.12); }
.booking-rate-plan-tag-partial { color: #9a6700; background: rgba(154, 103, 0, 0.12); }
.booking-rate-plan-tag-none { color: var(--booking-muted); background: rgba(0, 0, 0, 0.06); }
/* Dark surface theme: lighten borders + hover so the picker reads on dark. */
.booking-widget.theme-dark .booking-rate-plan { border-color: rgba(255, 255, 255, 0.25); }
.booking-widget.theme-dark .booking-rate-plan:hover { background: rgba(255, 255, 255, 0.06); }
.booking-widget.theme-dark .booking-rate-plan.is-selected { background: rgba(255, 255, 255, 0.05); }
.booking-widget.theme-dark .booking-rate-plan-tag-free { background: rgba(52, 211, 153, 0.22); }
.booking-widget.theme-dark .booking-rate-plan-tag-partial { background: rgba(251, 191, 36, 0.22); }
.booking-widget.theme-dark .booking-rate-plan-tag-none { background: rgba(255, 255, 255, 0.12); }
.booking-widget-microcopy {
  font-size: 12px;
  opacity: 1;
  text-align: center;
  color: var(--booking-fg) !important;
  font-weight: 500;
}

/* Earlier wrapper-content-cms grid override removed 2026-05-12 — the
 * mockup parity pass in `kiyo-template-processors.ts` injects
 * `.kiyo2-detail-stack > .kiyo-unified-detail-grid` for the 2-col
 * layout, and the appended `body.kiyo-editor-template-kiyo-2` CSS
 * block below handles wrapper sizing + stack grid. Keeping the old
 * override caused a 2-col layout on the WRONG container (the
 * wrapper itself), squeezing the stack to ~400px.
 *
 * The detail page also gets a CSS-only fallback: hide the natively
 * injected `#booking-widget` (from _universal.js) since the new
 * unified reserve card replaces it. */
.kiyo-unified-reserve-card ~ #booking-widget,
.kiyo-editor-template-kiyo-2 #booking-widget,
.kiyo-editor-template-kiyo-2 .booking-widget-standalone {
  display: none !important;
}

/* ─── Subtitle paragraphs dark instead of #666 gray ──────────────── */
.paragraph-large,
.paragraph-large.center,
.paragraph-large.left,
.paragraph-regular,
.paragraph-regular.left,
.paragraph-regular.center,
.paragraph-regular.left.process,
.paragraph-regular.process {
  color: #1a1a1a !important;
}

/* More-rooms cross-sell cards (rendered by _universal.js#buildMoreRooms)
 * — name + price were inheriting muted colors. Force dark. */
.booking-more-rooms-card,
.booking-more-rooms-card-name,
.booking-more-rooms-card-price {
  color: #1a1a1a !important;
  opacity: 1 !important;
}

/* Card bed/bath badges (`.badge.two`) inherit a 52px text size from
 * the Webflow base — shows a giant "2" next to a tiny icon. Bring
 * the visible digit down to match the tittle-badge font size. */
.badge.two {
  font-size: 14px !important;
  line-height: 1 !important;
  gap: 6px !important;
}

.booking-reserve-button {
  width: 100%;
  padding: 14px 32px;
  background: var(--booking-accent);
  color: var(--booking-accent-fg);
  border: 0;
  border-radius: var(--booking-radius);
  font: 15px / 1 system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.booking-reserve-button:hover { filter: brightness(1.08); }
/* Disabled state (sold out, or a multi-plan room with no rate picked —
   B-RESERVE-NOT-GATED-NO-RATE-PLAN). Mirrors the .is-unavailable greying so a
   gated Reserve reads as inactive regardless of WHY it's disabled. */
.booking-reserve-button:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* Mobile-only collapsed bottom bar — desktop hides it. */
.booking-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--booking-bg);
  color: var(--booking-fg);
  border-top: 1px solid var(--booking-border);
  padding: 12px 16px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (max-width: 900px) {
  .booking-sticky-bar { display: flex; }
}
.booking-sticky-summary { display: flex; flex-direction: column; }
.booking-sticky-math { font-size: 12px; color: var(--booking-muted); font-variant-numeric: tabular-nums; }
.booking-sticky-total { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.booking-sticky-bar .booking-reserve-button { padding: 10px 20px; font-size: 13px; width: auto; }

/* ─── More rooms cross-sell strip (detail page) ──────────────── */
.booking-more-rooms {
  max-width: 1200px;
  margin: 60px auto 80px;
  padding: 0 24px;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.booking-more-rooms h2 {
  font-size: 28px;
  margin: 0 0 24px;
  font-weight: 600;
}
.booking-more-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .booking-more-rooms-grid { grid-template-columns: 1fr; }
}
.booking-more-rooms-card {
  background: white;
  border-radius: var(--booking-radius);
  overflow: hidden;
  border: 1px solid var(--booking-border);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.booking-more-rooms-card:hover { transform: translateY(-3px); box-shadow: var(--booking-shadow); }
.booking-more-rooms-card img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.booking-more-rooms-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.booking-more-rooms-card-name { font-weight: 600; font-size: 15px; }
.booking-more-rooms-card-price { font-size: 13px; opacity: 0.7; }

/* ─── Availability badges on catalog cards (hidden globally) ─────── */
.booking-badge { display: none !important; }

/* ─── Soft-hold banner (detail page after Reserve clicked) ──── */
.booking-hold-banner {
  margin: 12px 0;
  padding: 12px 16px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: var(--booking-radius);
  font: 14px / 1.4 system-ui, sans-serif;
  display: none;
}
.booking-hold-banner.visible { display: block; }
.booking-hold-banner b { font-variant-numeric: tabular-nums; }

/* (currency menu lives inside the search bar pill dropdown) */

/* Hide Webflow "Made in Webflow" badge in final mode */
html body .w-webflow-badge,
html body a.w-webflow-badge,
.w-webflow-badge,
.purchase-badge,
a.purchase-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* Staylo cta-section: hide on mobile only. Desktop uses original Webflow IX2 animation. */
@media (max-width: 900px) {
  .cta-section { display: none !important; }
}

/* Cruise: push hero down so sticky bar doesn't crop the photo */
body.has-booking-bar .hero { margin-top: 16px; }
/* Cruise detail widget: keep CHECK IN/OUT row inside the same width as math/Reserve below */
.room-right .booking-widget { box-sizing: border-box; padding-left: 0; padding-right: 0; }
.room-right .booking-widget-row { width: 100%; }
    .w-webflow-badge {
      display: none !important;
    }
    .kiyo-editor-hidden {
      display: none !important;
      visibility: hidden !important;
    }
    .purchase-badge,
    .w-webflow-badge {
      display: none !important;
      visibility: hidden !important;
    }
    .kiyo-unified-footer-shell {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      background: #0c0e10 !important;
      color: #f5f5f5 !important;
    }
    .kiyo-unified-footer {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 1180px !important;
      margin: 0 auto !important;
      padding: 56px 32px !important;
      color: #f5f5f5 !important;
      font-family: inherit !important;
    }
    .kiyo-unified-footer-grid {
      display: grid !important;
      grid-template-columns: minmax(220px, 1.35fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(190px, 1fr) !important;
      gap: 28px !important;
      align-items: start !important;
    }
    .kiyo-unified-footer-block {
      display: grid !important;
      gap: 10px !important;
      min-width: 0 !important;
    }
    .kiyo-unified-footer-heading {
      margin: 0 !important;
      color: inherit !important;
      font-family: inherit !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      letter-spacing: 0 !important;
      line-height: 1.3 !important;
      opacity: 0.74 !important;
      text-transform: uppercase !important;
    }
    .kiyo-unified-footer-address,
    .kiyo-unified-footer-email,
    .kiyo-unified-footer-phone {
      margin: 0 !important;
      color: inherit !important;
      font-family: inherit !important;
      font-size: 16px !important;
      line-height: 1.55 !important;
      text-decoration: none !important;
      white-space: pre-line !important;
    }
    .kiyo-unified-socials {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      align-items: center !important;
    }
    .kiyo-unified-social-link {
      display: inline-flex !important;
      width: 36px !important;
      height: 36px !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      opacity: 1 !important;
      text-decoration: none !important;
      background: transparent !important;
    }
    .kiyo-unified-social-link svg {
      display: block !important;
      width: 18px !important;
      height: 18px !important;
      fill: currentColor !important;
    }
    .kiyo-unified-social-icon-img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      border-radius: 8px !important;
      /* PF 2026-05-14: scale up the inner glyph so any baked-in soft-shadow
         halo / white drop shadow on the brand .webp gets clipped by the parent
         link's overflow:hidden. sharp .trim() only catches solid-color borders;
         this handles the 3D-rendered logos (TikTok, Facebook, Pinterest) that
         ship with semi-transparent shadow padding. */
      transform: scale(1.22) !important;
      transform-origin: center center !important;
    }
    /* PG 2026-05-14 — Floating WhatsApp CTA (Intercom-style).
       Fixed bottom-right, 56px round, WA brand green (#25D366), drop shadow.
       Hidden via `display:none` inline style by bridge applyLink when URL
       is empty; visible otherwise. */
    .kiyo-whatsapp-cta {
      position: fixed !important;
      bottom: 24px !important;
      right: 24px !important;
      width: 56px !important;
      height: 56px !important;
      border-radius: 999px !important;
      background: #25D366 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 9999 !important;
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
      text-decoration: none !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    }
    .kiyo-whatsapp-cta:hover {
      transform: scale(1.05) !important;
      box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0, 0, 0, 0.18) !important;
    }
    .kiyo-whatsapp-cta img {
      width: 36px !important;
      height: 36px !important;
      object-fit: contain !important;
      border-radius: 0 !important;
    }
    @media (max-width: 480px) {
      .kiyo-whatsapp-cta {
        bottom: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
      }
      .kiyo-whatsapp-cta img {
        width: 30px !important;
        height: 30px !important;
      }
    }
    .kiyo-live-logo-mark {
      display: inline-flex !important;
      width: 34px !important;
      height: 34px !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 10px !important;
      border-radius: 8px !important;
      background: ${editor.style.primary_color} !important;
      color: #fff !important;
      font-family: Arial, sans-serif !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      vertical-align: middle !important;
    }
    .kiyo-live-logo-text {
      color: inherit !important;
      font-family: Arial, sans-serif !important;
      font-size: 18px !important;
      font-weight: 800 !important;
      line-height: 1.1 !important;
      vertical-align: middle !important;
    }
    body.kiyo-editor-template-kiyo-4 .hotel-location-and-review {
      display: none !important;
      visibility: hidden !important;
    }
    @media (max-width: 820px) {
      .kiyo-unified-footer {
        padding: 42px 22px !important;
      }
      .kiyo-unified-footer-grid {
        grid-template-columns: 1fr !important;
      }
    }
    /* ---- Unified reserve card (shared across Kiyo 2/3/4 — matches Kiyo 1 pattern) ---- */
    .kiyo-unified-detail-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 360px !important;
      gap: 32px !important;
      align-items: start !important;
      max-width: 1180px !important;
      margin: 24px auto !important;
      padding: 0 20px !important;
      box-sizing: border-box !important;
    }
    .kiyo-unified-detail-left {
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 24px !important;
    }
    .kiyo-unified-detail-right {
      position: sticky !important;
      top: 24px !important;
    }
    .kiyo-unified-reserve-card {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 18px !important;
      padding: 24px 26px !important;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
      color: #0f172a !important;
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
      box-sizing: border-box !important;
    }
    .kiyo-unified-reserve-card * {
      box-sizing: border-box !important;
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    }
    .ku-reserve-heading {
      margin: 0 0 12px 0 !important;
      color: #0f172a !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      letter-spacing: -0.01em !important;
    }
    .ku-reserve-label {
      margin: 0 0 6px 0 !important;
      color: #6b7280 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1.3 !important;
    }
    .ku-reserve-price {
      margin: 0 0 18px 0 !important;
      color: #0f172a !important;
      font-size: 26px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
    }
    .ku-reserve-price-amount {
      color: #0f172a !important;
      font-weight: 700 !important;
    }
    .ku-reserve-price-night {
      margin-left: 4px !important;
      color: #6b7280 !important;
      font-size: 15px !important;
      font-weight: 500 !important;
    }
    .ku-reserve-fields {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      margin-bottom: 14px !important;
    }
    .ku-reserve-fields .ku-reserve-field-guests {
      grid-column: 1 / -1 !important;
    }
    .ku-reserve-field {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      padding: 12px 14px !important;
      background: #f9fafb !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 10px !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
    .ku-reserve-field label {
      color: #6b7280 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      line-height: 1 !important;
    }
    .ku-reserve-field input,
    .ku-reserve-field select {
      background: transparent !important;
      border: 0 !important;
      color: #0f172a !important;
      font-size: 14px !important;
      padding: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      outline: none !important;
      box-sizing: border-box !important;
      font-family: inherit !important;
      line-height: 1.2 !important;
      appearance: none !important;
      -webkit-appearance: none !important;
    }
    .ku-reserve-field input[type="date"]::-webkit-calendar-picker-indicator {
      cursor: pointer !important;
      opacity: 0.6 !important;
    }
    .ku-reserve-field select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236b7280' d='M6 8L0 0h12z'/%3e%3c/svg%3e") !important;
      background-repeat: no-repeat !important;
      background-position: right 0 center !important;
      background-size: 10px 7px !important;
      padding-right: 18px !important;
    }
    @media (max-width: 1100px) {
      .ku-reserve-fields {
        grid-template-columns: 1fr !important;
      }
      .ku-reserve-fields .ku-reserve-field-checkin,
      .ku-reserve-fields .ku-reserve-field-checkout {
        grid-column: auto !important;
      }
    }
    .ku-reserve-divider {
      height: 1px !important;
      margin: 14px 0 12px 0 !important;
      background: #e5e7eb !important;
    }
    .ku-reserve-total {
      display: flex !important;
      align-items: baseline !important;
      justify-content: space-between !important;
      color: #0f172a !important;
      font-size: 16px !important;
      font-weight: 600 !important;
    }
    .ku-reserve-total-night {
      color: #6b7280 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
    }
    .ku-reserve-helper {
      margin: 4px 0 16px 0 !important;
      color: #6b7280 !important;
      font-size: 12px !important;
    }
    .ku-reserve-button {
      width: 100% !important;
      padding: 14px 16px !important;
      background: #0f172a !important;
      color: #ffffff !important;
      border: 0 !important;
      border-radius: 12px !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      letter-spacing: 0.01em !important;
      cursor: pointer !important;
      transition: background 0.15s ease !important;
    }
    .ku-reserve-button:hover {
      background: #1e293b !important;
    }
    .ku-reserve-microcopy {
      margin-top: 10px !important;
      color: #6b7280 !important;
      font-size: 12px !important;
      text-align: center !important;
    }
    /* Left column property highlights (Kiyo 4 + reusable) */
    .kiyo-unified-highlights {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      padding: 20px 24px !important;
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 16px !important;
    }
    .kiyo-unified-highlight {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      color: #0f172a !important;
      font-size: 15px !important;
      line-height: 1.4 !important;
    }
    .kiyo-unified-highlight-dot {
      flex: 0 0 8px !important;
      width: 8px !important;
      height: 8px !important;
      border-radius: 999px !important;
      background: #0f172a !important;
    }
    @media (max-width: 720px) {
      .kiyo-unified-detail-grid {
        grid-template-columns: 1fr !important;
      }
      .kiyo-unified-detail-right {
        position: static !important;
      }
    }
    /* Hide native booking widget on templates 2/3/4 (replaced by unified reserve card) */
    body.kiyo-editor-template-kiyo-2 .booking-widget-standalone,
    body.kiyo-editor-template-kiyo-2 #booking-widget:not(.kiyo-unified-reserve-card #booking-widget),
    body.kiyo-editor-template-kiyo-3 .booking-widget-standalone,
    body.kiyo-editor-template-kiyo-3 #booking-widget:not(.kiyo-unified-reserve-card #booking-widget),
    body.kiyo-editor-template-kiyo-4 .booking-widget-standalone,
    body.kiyo-editor-template-kiyo-4 #booking-widget:not(.kiyo-unified-reserve-card #booking-widget) {
      display: none !important;
    }
    /* Kiyo 2 detail: widen parent so 2-col layout has room */
    body.kiyo-editor-template-kiyo-2 .wrapper-content-cms,
    body.kiyo-editor-template-kiyo-2 .container-medium {
      max-width: 1180px !important;
      width: 100% !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-detail-stack {
      display: block !important;
      width: 100% !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-detail-stack .kiyo-unified-detail-grid {
      max-width: none !important;
      width: 100% !important;
      margin: 24px 0 !important;
      padding: 0 !important;
    }
    /* Kiyo 3 detail: pin right card width, give amenities/rules breathing room in left */
    body.kiyo-editor-template-kiyo-3 .room-wrap {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 380px !important;
      gap: 40px !important;
      align-items: start !important;
    }
    body.kiyo-editor-template-kiyo-3 .room-left,
    body.kiyo-editor-template-kiyo-3 .room-right {
      width: auto !important;
      max-width: none !important;
      min-width: 0 !important;
    }
    body.kiyo-editor-template-kiyo-3 .room-right {
      position: sticky !important;
      top: 24px !important;
    }
    body.kiyo-editor-template-kiyo-3 .room-right .kiyo-unified-reserve-card {
      width: 100% !important;
    }
    /* Kiyo 3 amenities + room rules: compact 2-col grid sized to left column */
    body.kiyo-editor-template-kiyo-3 .room-left .w-dyn-items,
    body.kiyo-editor-template-kiyo-3 .room-left .w-layout-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 14px !important;
    }
    body.kiyo-editor-template-kiyo-3 .room-left .amenity-card,
    body.kiyo-editor-template-kiyo-3 .room-left [class*="amenity"][class*="card"],
    body.kiyo-editor-template-kiyo-3 .room-left .room-rule-card,
    body.kiyo-editor-template-kiyo-3 .room-left .w-dyn-item {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 14px !important;
      box-sizing: border-box !important;
    }
    body.kiyo-editor-template-kiyo-3 .room-left h2,
    body.kiyo-editor-template-kiyo-3 .room-left h3 {
      font-size: 22px !important;
      margin-top: 24px !important;
      margin-bottom: 12px !important;
    }
    /* Kiyo 2 reserve-card heading sometimes inherits template letter-spacing — force tight */
    body.kiyo-editor-template-kiyo-2 .kiyo-unified-reserve-card,
    body.kiyo-editor-template-kiyo-2 .kiyo-unified-reserve-card * {
      letter-spacing: normal !important;
      word-spacing: normal !important;
    }
    .kiyo-unified-reserve-card .ku-reserve-heading {
      text-align: left !important;
      word-break: normal !important;
      overflow-wrap: anywhere !important;
    }
    body.kiyo-editor-template-kiyo-1 .navbar,
    body.kiyo-editor-template-kiyo-1 .search-pop-up,
    body.kiyo-editor-template-kiyo-1 .footer-brand,
    body.kiyo-editor-template-kiyo-1 .footer-divider,
    body.kiyo-editor-template-kiyo-1 .footer-copy,
    body.kiyo-editor-template-kiyo-1 .footer-bottom-flex,
    body.kiyo-editor-template-kiyo-2 .header,
    body.kiyo-editor-template-kiyo-2 .background-effect,
    body.kiyo-editor-template-kiyo-2 .column-footer-logo > .menu,
    body.kiyo-editor-template-kiyo-2 .column-footer-logo > .navbar-brand,
    body.kiyo-editor-template-kiyo-2 .container-menu-footer,
    body.kiyo-editor-template-kiyo-2 .column-footer > .paragraph-regular.left {
      display: none !important;
      visibility: hidden !important;
    }
    body.kiyo-editor-template-kiyo-1 .footer-grid {
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) !important;
      align-items: start !important;
    }
    body.kiyo-editor-template-kiyo-1 .kiyo1-footer-address-text {
      white-space: pre-line !important;
      line-height: 1.45 !important;
      cursor: pointer !important;
    }
    body.kiyo-editor-template-kiyo-2 .section.top {
      margin-top: 0 !important;
      padding-top: 56px !important;
      min-height: auto !important;
    }
    body.kiyo-editor-template-kiyo-2 .tumbnail-wrapper,
    body.kiyo-editor-template-kiyo-2 .slide {
      position: relative !important;
    }
    body.kiyo-editor-template-kiyo-2 .item-cms .badge.price,
    body.kiyo-editor-template-kiyo-2 .slider .badge.price,
    body.kiyo-editor-template-kiyo-2 .slider .badge.price._2 {
      position: absolute !important;
      inset: 18px auto auto 18px !important;
      z-index: 8 !important;
      background: rgba(255, 255, 255, 0.88) !important;
      color: var(--_color-guide---global-style--content, #6d6d6d) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
      transform: none !important;
    }
    body.kiyo-editor-template-kiyo-2 .item-cms .badge.price .icon,
    body.kiyo-editor-template-kiyo-2 .slider .badge.price .icon {
      width: 22px !important;
      height: 22px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-detail-stack {
      display: block !important;
      width: 100% !important;
      margin-top: 28px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-room-sections {
      display: grid !important;
      gap: 18px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-info-card,
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-panel {
      border-radius: var(--_size-guide---border--border-small, 28px) !important;
      background: var(--_color-guide---global-style--base-card, #fff) !important;
      padding: 24px !important;
      box-shadow: inset 0 2px 4px 3px rgba(178, 190, 196, 0.08) !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-info-card h2,
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-panel h2 {
      color: var(--_color-guide---global-style--title, #252525) !important;
      font-family: var(--type-font--headings, "Playfair Display", serif) !important;
      font-size: 32px !important;
      font-weight: 300 !important;
      line-height: 1.15 !important;
      margin: 0 0 16px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-info-card ul {
      display: grid !important;
      gap: 10px !important;
      margin: 0 !important;
      padding-left: 18px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-info-card li,
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-label,
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-control {
      color: var(--_color-guide---global-style--content, #6d6d6d) !important;
      font-family: var(--type-font--content, Inter, sans-serif) !important;
      font-size: 16px !important;
      line-height: 1.55 !important;
    }
    /* B-ENGINE-DESC-SPACING — split out of the shared rule above (was
       grouped with .kiyo2-info-card li / .kiyo2-booking-label /
       .kiyo2-booking-control) so only the description body gets
       white-space:pre-line; the editor preview should match the live-site
       rule (.kiyo2-overview-copy, outside this @media block) rather than
       showing the description collapsed while the public site shows it
       spaced. */
    body.kiyo-editor-template-kiyo-2 .kiyo2-overview-copy {
      color: var(--_color-guide---global-style--content, #6d6d6d) !important;
      font-family: var(--type-font--content, Inter, sans-serif) !important;
      font-size: 16px !important;
      line-height: 1.55 !important;
      white-space: pre-line !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-price {
      color: var(--_color-guide---global-style--title, #252525) !important;
      display: block !important;
      font-size: 34px !important;
      line-height: 1.1 !important;
      margin: 6px 0 20px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-fields {
      display: grid !important;
      grid-template-columns: 1fr 90px !important;
      gap: 12px !important;
      margin-bottom: 18px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-field {
      display: grid !important;
      gap: 7px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-booking-control {
      border: 1px solid var(--_color-guide---global-style--outline, #e4e4e4) !important;
      border-radius: 999px !important;
      background: #fff !important;
      min-height: 46px !important;
      padding: 0 14px !important;
      width: 100% !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-book-now-button {
      width: 100% !important;
      text-align: center !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-gallery-price-overlay {
      position: absolute !important;
      inset: 18px auto auto 18px !important;
      z-index: 12 !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-currency-mark {
      color: var(--_color-guide---global-style--content, #6d6d6d) !important;
      font-family: var(--type-font--content, Inter, sans-serif) !important;
      font-size: 16px !important;
      line-height: 1 !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-original-book-button {
      display: none !important;
    }
    @media (max-width: 900px) {
      body.kiyo-editor-template-kiyo-2 .kiyo2-detail-stack,
      body.kiyo-editor-template-kiyo-2 .kiyo2-booking-fields {
        grid-template-columns: 1fr !important;
      }
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-footer-address {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      align-items: center !important;
      text-align: center !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-footer-address-heading {
      color: var(--_color-guide---global-style--title, #222) !important;
      font-weight: 500 !important;
      margin: 0 !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-footer-address-text {
      max-width: 320px !important;
      margin: 0 !important;
      text-align: center !important;
      white-space: pre-line !important;
      cursor: pointer !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-extra-social svg {
      width: 45px !important;
      height: 45px !important;
      display: block !important;
    }
    /* LIVE SITE FIX 2026-05-14 — every outline rule below is scoped to
       `body.kiyo-editor-body` so customer-facing renders (/site/<slug> with
       no ?editor=1) get a CLEAN page with zero blue rings. The editor mode
       wraps body with that class in slot-filler; customer mode does not. */
    body.kiyo-editor-mode [data-kiyo-slot] {
      position: relative !important;
      cursor: pointer !important;
      outline: 2px solid rgba(45, 108, 223, 0.55) !important;
      outline-offset: 3px !important;
      transition: outline-color 0.12s ease, box-shadow 0.12s ease !important;
    }
    body.kiyo-editor-mode [data-kiyo-slot]:hover {
      outline-color: rgba(45, 108, 223, 1) !important;
      box-shadow: 0 0 0 6px rgba(45, 108, 223, 0.12) !important;
    }
    body.kiyo-editor-mode [data-kiyo-status="locked"] {
      outline: 2px dashed rgba(217, 119, 6, 0.8) !important;
    }
    /* Active state — set by `_editor-overlay.js` on iframe-side click AND by
       `_editor-bridge.js` when the parent dashboard sets selectedSlot.
       Treated identically to legacy `data-kiyo-selected="true"` so local-mode
       overlay and server-mode bridge converge on the same visual. */
    body.kiyo-editor-mode [data-kiyo-slot].kiyo-editor-active,
    body.kiyo-editor-mode [data-kiyo-loop].kiyo-editor-active,
    body.kiyo-editor-mode [data-kiyo-selected="true"] {
      outline: 3px solid #2d6cdf !important;
      outline-offset: 4px !important;
      box-shadow: 0 0 0 7px rgba(45, 108, 223, 0.22) !important;
      z-index: 20 !important;
    }
    body.kiyo-editor-mode [data-kiyo-slot].kiyo-editor-active[data-kiyo-status="locked"],
    body.kiyo-editor-mode [data-kiyo-selected="true"][data-kiyo-status="locked"] {
      outline-color: #d97706 !important;
      box-shadow: 0 0 0 7px rgba(217, 119, 6, 0.16) !important;
    }

    /* View All Rooms button — template-agnostic class, used by kiyo-3 + kiyo-4. */
    body.kiyo-editor-template-kiyo-3 .kiyo-view-all-rooms,
    body.kiyo-editor-template-kiyo-4 .kiyo-view-all-rooms {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 12px 24px !important;
      border: 1px solid #1a1a1a !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: #1a1a1a !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      cursor: pointer !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-3 .kiyo-view-all-rooms:hover,
    body.kiyo-editor-template-kiyo-4 .kiyo-view-all-rooms:hover {
      background: #1a1a1a !important;
      color: #fff !important;
    }
    body.kiyo-editor-template-kiyo-3 .kiyo-view-all-rooms::after,
    body.kiyo-editor-template-kiyo-4 .kiyo-view-all-rooms::after {
      content: "↗" !important;
      font-size: 14px !important;
    }

    /* kiyo-4 More Rooms cards — paper-rip beige cards matching the
       homepage catalog (.hotel-single-item-block). Side-by-side grid
       capped at 3 columns. Native `.hotel-single-item-block` CSS in the
       webflow.shared.css already paints the beige paper-rip background +
       padding; we just lay them out in a grid and tune the price
       treatment which the native card doesn't have. */
    body.kiyo-editor-template-kiyo-4 .kiyo4-more-rooms-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 32px !important;
      margin-top: 32px !important;
    }
    @media (max-width: 1100px) {
      body.kiyo-editor-template-kiyo-4 .kiyo4-more-rooms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 720px) {
      body.kiyo-editor-template-kiyo-4 .kiyo4-more-rooms-grid {
        grid-template-columns: 1fr !important;
      }
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-more-card-link {
      display: block !important;
      text-decoration: none !important;
      color: inherit !important;
      transition: transform 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-more-card-link:hover {
      transform: translateY(-3px) !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-more-card-price {
      margin-top: 18px !important;
      font-size: 18px !important;
      color: #1a1a1a !important;
      font-weight: 500 !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-more-card-price span {
      font-size: 13px !important;
      color: #6b6b6b !important;
      font-weight: 400 !important;
    }
    body.kiyo-editor-template-kiyo-4 .more-room-wrap {
      display: block !important;
    }
    body.kiyo-editor-template-kiyo-4 .more-room-wrap > h2,
    body.kiyo-editor-template-kiyo-4 .more-room-wrap > h3 {
      display: inline-flex !important;
      align-items: center !important;
      width: 100% !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 16px !important;
    }
    /* Heading + injected View-All button laid out on one row. */
    body.kiyo-editor-template-kiyo-3 .rooms .section-title {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 16px !important;
    }
    /* Similar-rooms cards (simplified — photo + title only). */
    body.kiyo-editor-template-kiyo-3 .rooms .room-list .room-block {
      display: block !important;
      text-decoration: none !important;
      color: inherit !important;
    }
    body.kiyo-editor-template-kiyo-3 .rooms .room-list .room-img {
      border-radius: 16px !important;
      overflow: hidden !important;
      aspect-ratio: 4 / 3 !important;
    }
    body.kiyo-editor-template-kiyo-3 .rooms .room-list .room-img img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }
    body.kiyo-editor-template-kiyo-3 .rooms .room-list .room-title {
      margin: 16px 0 0 !important;
      font-size: 20px !important;
      font-weight: 500 !important;
      color: #1a1a1a !important;
    }

    /* kiyo-5 More rooms at this property — uses same .rooms-holder.dark
       structure as homepage `.special-offer-grid` so native Webflow CSS
       paints the cards identically. Section spacing + heading layout. */
    body.kiyo-editor-template-kiyo-5 .kiyo5-more-rooms-section {
      padding: 64px 0 80px !important;
    }
    body.kiyo-editor-template-kiyo-5 .kiyo5-more-rooms-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 28px !important;
      margin-top: 40px !important;
    }
    @media (max-width: 1100px) {
      body.kiyo-editor-template-kiyo-5 .kiyo5-more-rooms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 720px) {
      body.kiyo-editor-template-kiyo-5 .kiyo5-more-rooms-grid {
        grid-template-columns: 1fr !important;
      }
    }
    /* All inner-element styling deferred to native `.rooms-holder.dark` rules
       in the kiyo-5 webflow shared CSS — keeps the detail-page More rooms
       cards visually identical to the homepage Rooms To Look cards. Only
       the grid layout above is custom. */

    /* kiyo-5 View All Rooms button — placed next to More-Rooms heading and
       cloned to homepage Rooms To Look when total > 3. */
    body.kiyo-editor-template-kiyo-5 .kiyo5-view-all {
      display: inline-block !important;
      margin-top: 16px !important;
      padding: 10px 22px !important;
      border: 1px solid #1a1a1a !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      color: #1a1a1a !important;
      text-decoration: none !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-5 .kiyo5-view-all:hover {
      background: #1a1a1a !important;
      color: #ffffff !important;
    }

    /* kiyo-5 checkout-box highlights — Property highlights panel sits on a
       dark teal #164753 bg, so highlight text must be white. */
    body.kiyo-editor-template-kiyo-5 .kiyo5-checkout-highlight,
    body.kiyo-editor-template-kiyo-5 .checkout-box .room-feature-text-checkout,
    body.kiyo-editor-template-kiyo-5 .checkout-box .room-feature-text-wrapper {
      font-size: 14px !important;
      line-height: 1.4 !important;
      color: #ffffff !important;
    }

    /* kiyo-2 More rooms at this property — uses native .item-cms card DOM
       from the homepage so native CSS paints the card. Grid layout + heading
       row are custom. */
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-section {
      padding: 80px 0 100px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-section .container-medium {
      max-width: 1200px !important;
      margin: 0 auto !important;
      padding: 0 24px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-heading-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 16px !important;
      margin-bottom: 32px !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-title {
      margin: 0 !important;
      font-family: 'Playfair Display', 'Times New Roman', serif !important;
      font-size: 36px !important;
      font-weight: 500 !important;
      color: #1a1a1a !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 24px !important;
    }
    @media (max-width: 1100px) {
      body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 720px) {
      body.kiyo-editor-template-kiyo-2 .kiyo2-more-rooms-grid {
        grid-template-columns: 1fr !important;
      }
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-view-all {
      display: inline-block !important;
      padding: 10px 22px !important;
      border: 1px solid #1a1a1a !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      color: #1a1a1a !important;
      text-decoration: none !important;
      transition: background 0.15s ease, color 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-view-all:hover {
      background: #1a1a1a !important;
      color: #ffffff !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-card-link {
      text-decoration: none !important;
      color: inherit !important;
      transition: transform 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-2 .kiyo2-more-card-link:hover {
      transform: translateY(-3px) !important;
    }

    /* kiyo-5 More rooms card — defer to native `.rooms-holder.dark` styling
       (border + flex column + 350px photo holder) so the detail-page cards
       render identically to the homepage Rooms To Look cards. Only
       customizations: anchor decoration off + clipped corners + room-overlay
       hidden (CTA-less context). */
    body.kiyo-editor-template-kiyo-5 .kiyo5-more-card .kiyo5-more-card-link {
      text-decoration: none !important;
      color: inherit !important;
      overflow: hidden !important;
      transition: transform 0.15s ease, border-color 0.15s ease !important;
    }
    body.kiyo-editor-template-kiyo-5 .kiyo5-more-card .kiyo5-more-card-link:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(8, 8, 8, 1) !important;
    }
    body.kiyo-editor-template-kiyo-5 .kiyo5-more-card .room-overlay {
      display: none !important;
    }

    /* kiyo-5 homepage bg consistency — apply teal #164753 ONLY to the
       about-us "Whether you are seeking..." band (the hero-equivalent for
       the home page). Everything below it (Rooms To Look, footer) keeps the
       native beige body bg. Matches the two-tone feel of the detail page
       (teal hero + beige body). */
    body.kiyo-editor-template-kiyo-5.kiyo5-home-page .section:has(.about-us-section),
    body.kiyo-editor-template-kiyo-5.kiyo5-home-page .about-us-section {
      background-color: #164753 !important;
    }
    body.kiyo-editor-template-kiyo-5.kiyo5-home-page .about-us-content .title {
      color: #d2cbc4 !important;
    }
    body.kiyo-editor-template-kiyo-5.kiyo5-home-page .about-us-section {
      padding: 80px 0 100px !important;
    }

    /* kiyo-4 detail: constrain photo gallery to match content width
       (was spilling past the unified-detail-grid below it because the
       parent .main-container max-width was 1830px). Also tighten gallery
       inner aspect so 1 big left + 2 stacked right read as one unit. */
    body.kiyo-editor-template-kiyo-4 .room-details-section .main-container {
      max-width: 1200px !important;
      padding: 0 24px !important;
      margin: 0 auto !important;
    }
    body.kiyo-editor-template-kiyo-4 .room-details-image-wrap {
      max-width: 1200px !important;
      margin: 24px auto 0 !important;
      gap: 12px !important;
    }
    body.kiyo-editor-template-kiyo-4 .room-details-image {
      border-radius: 12px !important;
    }
    /* Shrink the date-input calendar picker indicator (was huge default
       webkit icon). Apply both to native date inputs in the unified
       reserve card and to the general filter date fields. */
    body.kiyo-editor-template-kiyo-4 .ku-reserve-field input[type="date"]::-webkit-calendar-picker-indicator,
    body.kiyo-editor-template-kiyo-4 .ku-reserve-checkin::-webkit-calendar-picker-indicator,
    body.kiyo-editor-template-kiyo-4 .ku-reserve-checkout::-webkit-calendar-picker-indicator {
      width: 14px !important;
      height: 14px !important;
      padding: 0 !important;
      margin: 0 !important;
      opacity: 0.55 !important;
      cursor: pointer !important;
      filter: none !important;
      background-size: 14px 14px !important;
    }
    body.kiyo-editor-template-kiyo-4 .ku-reserve-field input[type="date"] {
      font-size: 13px !important;
      padding-right: 4px !important;
    }

    /* kiyo-4 unified detail layout — Room Overview / Features / Amenities
       headings + bullet lists rendered inside .room-details-rich-text-wrap
       by `applyKiyo4DetailLayout`. Matches mockup screenshot 6. */
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-section {
      margin: 0 0 32px 0 !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-section:last-child {
      margin-bottom: 0 !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-heading {
      margin: 0 0 12px 0 !important;
      color: #1a1a1a !important;
      font-family: 'Gilda Display', 'Times New Roman', serif !important;
      font-size: 26px !important;
      font-weight: 400 !important;
      line-height: 1.2 !important;
      letter-spacing: -0.01em !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-overview {
      margin: 0 !important;
      color: #1a1a1a !important;
      font-size: 15px !important;
      line-height: 1.65 !important;
      /* B-ENGINE-DESC-SPACING — match the live-site rule below this
         @media block, so the editor preview doesn't show the description
         collapsed while the public site shows it spaced. */
      white-space: pre-line !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-bullets {
      margin: 0 !important;
      padding: 0 0 0 18px !important;
      list-style: disc outside !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-bullet {
      margin: 0 0 8px 0 !important;
      color: #1a1a1a !important;
      font-size: 15px !important;
      line-height: 1.5 !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo4-detail-bullet:last-child {
      margin-bottom: 0 !important;
    }

    /* kiyo-4 unified detail grid sizing — wider left col, sticky right col. */
    body.kiyo-editor-template-kiyo-4 .kiyo-unified-detail-grid {
      grid-template-columns: minmax(0, 1fr) 360px !important;
      max-width: 1200px !important;
      padding: 0 24px !important;
      margin: 32px auto 64px !important;
    }
    body.kiyo-editor-template-kiyo-4 .kiyo-unified-detail-left {
      gap: 32px !important;
    }
    @media (max-width: 880px) {
      body.kiyo-editor-template-kiyo-4 .kiyo-unified-detail-grid {
        grid-template-columns: 1fr !important;
      }
    }

/* ── Photo overlay (A4 / B1 / E5) ──────────────────────────────── */
.kiyo-photo-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.kiyo-photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
/* B-HERO-PHOTO-PARTIAL fix (2026-06-19): when the photo wrapper sits inside the
   hero hold (inserted by slot-filler.ts:1058 when the dark-text overlay is
   enabled — editor preview AND public render), it must FILL the hold, not
   shrink-wrap to the image's natural width. Without this, narrow/portrait hero
   photos leave a grey gap on the right (guest-facing). */
.hero-bg-image-hold > .kiyo-photo-wrapper {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── Amenity icon grid (A6) ────────────────────────────────────── */
.kiyo-amenity-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  font-size: 14px;
  color: var(--booking-fg, #1a1a1a);
}
.kiyo-amenity-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--booking-accent, #1f3a4d);
  flex-shrink: 0;
}
.kiyo-amenity-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Sections (A5 / Q2) ────────────────────────────────────────── */
.kiyo-section {
  margin-bottom: 24px;
}
.kiyo-section h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--booking-fg, #1a1a1a);
}
.kiyo-section > div {
  font-size: 15px;
  line-height: 1.6;
  color: var(--booking-muted, rgba(0,0,0,0.55));
  /* B-ENGINE-DESC-SPACING (2026-07-20) — kiyo-1/kiyo-3's detail-page
     Overview body (slot-filler.ts seedRoomSections()) renders the raw
     room_types.description as one unbroken block. See the dedicated
     .kiyo2-overview-copy/.kiyo4-detail-overview/.kiyo5-detail-overview
     rule below for the fuller explanation — same fix, same reasoning,
     just the other 2 of the 5 templates (they go through slot-filler.ts's
     sections loop, not kiyo-template-processors.ts). */
  white-space: pre-line;
}

/* B-ENGINE-DESC-SPACING (2026-07-20) — kiyo-2/4/5 detail-page Overview
   paragraphs (kiyo-template-processors.ts applyKiyo2RoomDetailAdditions /
   applyKiyo4DetailLayout / applyKiyo5DetailLayout) render the raw scraped/
   AI-generated room_types.description as one <p>. escapeHtml() (shared with
   slot-filler.ts's unescaped sections-loop body — see .kiyo-section > div
   above) only entity-escapes & < > " ' — it does not strip real newline
   characters, so a description that already contains blank lines reaches
   the DOM intact; the browser just collapses them by default. white-space:
   pre-line renders them as real paragraph breaks instead. Confirmed via a
   prod spot-check (room_types.description, read-only SELECT) that live
   descriptions do contain \n — this is not a no-op fix. Safe/no-op on any
   description that has no newlines. */
.kiyo2-overview-copy,
.kiyo4-detail-overview,
.kiyo5-detail-overview {
  white-space: pre-line;
}

/* ── Description truncation (B3 / E6) ──────────────────────────── */
.kiyo-truncate-3 {
  display: block;
}

/* ── Description 5-line cap on room cards (all templates) ──────── */
[data-kiyo-slot*=".description"],
.resort-col-item .para,
.room-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Amenity item: icon + label side by side (all templates) ───── */
.kiyo-amenity-item > span:not(.kiyo-amenity-icon) {
  display: inline;
  font-size: 14px;
  color: var(--booking-fg, #1a1a1a);
}

/* "+N more" pill closes/opens the overflow amenities. Overflow items are
   rendered server-side but hidden until the pill is clicked (handled in
   _universal.js). Pill itself is interactive even though it sits inside a
   read-only block in the editor — the overlay click handler explicitly
   allows it via data-kiyo-action="amenity-expand". */
.kiyo-amenity-item.kiyo-amenity-overflow {
  display: none;
}
.kiyo-amenity-list.kiyo-amenity-expanded .kiyo-amenity-item.kiyo-amenity-overflow {
  display: inline-flex;
}
.kiyo-amenity-item.kiyo-amenity-more {
  cursor: pointer;
  background: var(--brand-accent, #1f3a4d);
  color: var(--brand-accent-fg, #fff);
}
/* W8: the pill stays visible when expanded — _universal.js flips its label to
   "Show less" so the user can collapse the overflow again. Previously this
   rule hid the pill on expand, leaving no collapse affordance. */

/* ── Room card names: capitalize (safety net for lowercase DB data) ── */
[data-kiyo-slot*="room."][data-kiyo-slot*=".name"],
.resort-col-item .h3-heading,
.resort-col-item .h4-heading {
  text-transform: capitalize;
}

/* ── Pill CTA buttons (F2 — View all photos / View All Rooms / etc) ─── */
.kiyo-pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--brand-accent, #1f3a4d);
  color: var(--brand-accent-fg, #ffffff) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.kiyo-pill-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.kiyo-pill-cta:active {
  transform: translateY(0);
}
.kiyo-pill-cta .primary-button-text {
  color: inherit;
  background: transparent;
  font: inherit;
}

/* ── Hide any heading overlaid on room-card photos ────────────────────
   Kiyo-1 spec: room name lives in card body (bottom-left), never on the
   photo. Webflow demo + client-side editor inject occasionally drops a
   large heading inside .resort-col-image-hold; mute it here. Wave 5 R6
   2026-05-14 — broadened to descendant selectors (was direct child only)
   to catch wrapped headings. Includes .hero-bg-image-hold for the Room
   Detail hero so the giant slug/name text Jason saw bleeding through
   the curtains photo also disappears. */
.resort-col-image-hold h1,
.resort-col-image-hold h2,
.resort-col-image-hold h3,
.resort-col-image-hold h4,
.resort-col-image-hold .h2-heading,
.resort-col-image-hold .h3-heading,
.resort-col-image-hold .h2-resort-name,
.hero-bg-image-hold h1,
.hero-bg-image-hold h2,
.hero-bg-image-hold h3,
.hero-bg-image-hold .h2-heading,
.hero-bg-image-hold .h2-resort-name {
  display: none !important;
}

/* ── Hero photo overlay heading on Room Detail (.h2-resort-name) ──────
   Spec moves the room title out of the hero overlay; the manifest slot
   "Room detail title" renders the proper About-{Room} heading below the
   hero. Hide the inline overlay element to remove the huge floating
   name. Keep capitalize transform in case any template still renders it
   for accessibility. */
.h2-resort-name {
  text-transform: capitalize;
}
.hero-section .h2-resort-name,
.resort-lb-col-image-hold .h2-resort-name {
  display: none !important;
}

/* ── Hero ↔ Rooms section separation (kiyo-1 walk-and-fix 2026-05-14) ──
   Jason's brief: clicking "Checkout Our Resorts" inside the hero photo
   overlay opens the Rooms-section editor — confusing because the user
   thinks it's a hero-overlay element. Force the .title-top headline to
   sit clearly below the hero photo by clamping its z-index + adding
   top padding so it cannot bleed into the hero overlay area. */
.title-top {
  position: relative !important;
  z-index: 1 !important;
  padding-top: 48px !important;
  margin-top: 0 !important;
}
.hero-section {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
}
.hero-section + section .title-top,
.hero-section ~ section .title-top {
  padding-top: 64px !important;
}

/* ── Editor preview cleanup (Jason 2026-05-14) ────────────────────────
   Jason wants NOTHING visible of the old Webflow template in editor
   preview. When DB fields are empty, the cloned Webflow card shells
   were showing broken-image icons, empty $0/night labels, and dead
   "Book Now" buttons — confusing the user about which slot is which.

   Strategy: keep the customer view untouched (these rules are scoped
   to body.kiyo-editor-body which only exists in ?editor=1 mode). In
   editor mode:
     • Hide broken-image icons on placeholder srcs
     • Collapse empty room cards (.resort-col-item with empty .name h3)
     • Mute the dotted blue rings around empty text slots until selected
   ──────────────────────────────────────────────────────────────────── */

/* 1. Broken-image icons → invisible but keep layout space so editor
   chrome doesn't reflow when a photo lands. */
body.kiyo-editor-body img[src=""],
body.kiyo-editor-body img:not([src]),
body.kiyo-editor-body img[src$="_blank-1x1.svg"] {
  visibility: hidden !important;
}
/* The hero IMG sits inside .hero-bg-image-hold with a gradient
   placeholder — keep the gradient visible but kill the broken icon. */
body.kiyo-editor-body .hero-bg-image-hold > .hero-bg-image[src$="_blank-1x1.svg"] {
  visibility: hidden !important;
}

/* 2. Empty room cards → fully collapse so editor doesn't show
   "$0/night" + "Book Now" shells for rooms with no name. The :has()
   selector picks card whose name H3 has no children AND no text.
   :empty matches an element with zero children — `<h3></h3>` is :empty.
   Supported Chrome 105+, Safari 15.4+, Firefox 121+. */
body.kiyo-editor-body .resort-col-item:has(h3[data-kiyo-slot$=".name"]:empty),
body.kiyo-editor-body .resort-col-item:has(.h3-heading[data-kiyo-slot$=".name"]:empty) {
  display: none !important;
}

/* 3. Mute the editor's selection ring on empty slots until the user
   clicks one. The bridge adds .kiyo-editor-selected to the currently
   active element — keep that obvious. Everything else with an
   editable ring fades to a subtle dashed outline.

   PK 2026-05-14 fix: scoped to `kiyo-editor-mode` (editor only) not
   `kiyo-editor-body` (which leaks to public renders too). The dashed
   slot outlines were appearing on /site/<slug> live pages. */
body.kiyo-editor-mode [data-kiyo-slot]:empty:not(.kiyo-editor-selected) {
  outline: 1px dashed rgba(96, 165, 250, 0.25) !important;
  outline-offset: 2px !important;
  min-height: 1.5em !important;
}
body.kiyo-editor-mode [data-kiyo-slot]:not(:empty):not(.kiyo-editor-selected) {
  outline: 1px dashed rgba(96, 165, 250, 0.35) !important;
}

/* 4. Hide the alt-text fallback ("Hero BG Image") that browsers render
   when an IMG has no src. font-size:0 collapses the alt text without
   touching layout. */
body.kiyo-editor-body img[src=""],
body.kiyo-editor-body img:not([src]),
body.kiyo-editor-body img[src$="_blank-1x1.svg"] {
  font-size: 0 !important;
  color: transparent !important;
}

/* ── Kiyo-1 hero responsive (PA + PO 2026-05-14) ──────────────────────────
   Predictable hero framing regardless of uploaded image dimensions. Industry-
   standard pattern: fixed aspect-ratio + `object-fit:cover`. Crops to fill,
   never stretches, no gray bands.

   PO 2026-05-14: also targets `.section.resort-hero-section` so the Room
   Detail page hero gets the same treatment. Room Detail wrapper carries
   both `.hero-section` AND `.resort-hero-section`; original PA only matched
   the former, leaving Room Detail to inherit the broken Webflow height. */
.template-kiyo-1 .section.hero-section,
.template-kiyo-1 .section.resort-hero-section,
.kiyo-editor-template-kiyo-1 .section.hero-section,
.kiyo-editor-template-kiyo-1 .section.resort-hero-section,
body[data-template="kiyo-1"] .section.hero-section,
body[data-template="kiyo-1"] .section.resort-hero-section {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  aspect-ratio: 21 / 9 !important;
  max-height: 80vh !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.template-kiyo-1 .section.hero-section .hero-bg-image-hold,
.template-kiyo-1 .section.resort-hero-section .hero-bg-image-hold,
.kiyo-editor-template-kiyo-1 .section.hero-section .hero-bg-image-hold,
.kiyo-editor-template-kiyo-1 .section.resort-hero-section .hero-bg-image-hold,
body[data-template="kiyo-1"] .section.hero-section .hero-bg-image-hold,
body[data-template="kiyo-1"] .section.resort-hero-section .hero-bg-image-hold {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.template-kiyo-1 .section.hero-section .hero-bg-image,
.template-kiyo-1 .section.resort-hero-section .hero-bg-image,
.kiyo-editor-template-kiyo-1 .section.hero-section .hero-bg-image,
.kiyo-editor-template-kiyo-1 .section.resort-hero-section .hero-bg-image,
body[data-template="kiyo-1"] .section.hero-section .hero-bg-image,
body[data-template="kiyo-1"] .section.resort-hero-section .hero-bg-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.template-kiyo-1 .section.hero-section .hero-bg-grad,
.template-kiyo-1 .section.resort-hero-section .hero-bg-grad,
body[data-template="kiyo-1"] .section.hero-section .hero-bg-grad,
body[data-template="kiyo-1"] .section.resort-hero-section .hero-bg-grad {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.template-kiyo-1 .section.hero-section .container,
.template-kiyo-1 .section.resort-hero-section .container,
.kiyo-editor-template-kiyo-1 .section.hero-section .container,
.kiyo-editor-template-kiyo-1 .section.resort-hero-section .container,
body[data-template="kiyo-1"] .section.hero-section .container,
body[data-template="kiyo-1"] .section.resort-hero-section .container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.template-kiyo-1 .section.hero-section .hero-content,
.template-kiyo-1 .section.resort-hero-section .hero-content,
.kiyo-editor-template-kiyo-1 .section.hero-section .hero-content,
.kiyo-editor-template-kiyo-1 .section.resort-hero-section .hero-content,
body[data-template="kiyo-1"] .section.hero-section .hero-content,
body[data-template="kiyo-1"] .section.resort-hero-section .hero-content {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  padding: 24px !important;
}

/* ── Kiyo-1 brand token cascade plug (PD 2026-05-14) ──────────────────────
   8 brand tokens × every surface that should adopt them. Without this, only
   the booking widget reflected changes (Jason: "Background only changes top
   strip"). Scoped under `.template-kiyo-1` so other templates untouched.

   Inline `style.color !important` (set by slot-filler + bridge for per-text
   overrides) still beats these rules — inline-important > author-important. */
.template-kiyo-1,
body.template-kiyo-1,
body.template-kiyo-1 .page-wrapper,
body.template-kiyo-1 .main-wrapper {
  background-color: var(--booking-bg) !important;
  color: var(--booking-fg) !important;
}
body.template-kiyo-1 .section.light-bg,
body.template-kiyo-1 .section.light-bg .container,
/* W10: the Room Detail content + gallery sections were left on the Webflow
   white default, so the page-background colour showed on Home but not on
   Room Detail. Extend the brand-bg rule to every Room Detail body section. */
body.template-kiyo-1 .section.resort-content-section,
body.template-kiyo-1 .section.resort-content-section .container,
body.template-kiyo-1 .kiyo1-photo-gallery-section {
  background-color: var(--booking-bg) !important;
  color: var(--booking-fg) !important;
}
body.template-kiyo-1 .title-top .h2-heading,
body.template-kiyo-1 .title-top .para,
body.template-kiyo-1 .resort-col-content .h3-heading,
body.template-kiyo-1 .resort-col-content .para,
body.template-kiyo-1 .resort-col-content .rcc-rg-text {
  color: var(--booking-fg) !important;
}
body.template-kiyo-1 .resort-col-item {
  background-color: var(--booking-card-bg) !important;
  border-color: var(--booking-card-border) !important;
}
/* W10: kill the thin white strip above the home room-card photo. The
   `applyPhotoOverlays` wrapper is injected inline-block and the Webflow
   `.resort-col-link` is `w-inline-block`, so baseline whitespace let the
   white card background show through above the image. Block-level the whole
   photo chain so the photo sits flush to the card's rounded top. */
body.template-kiyo-1 .resort-col-item .resort-col-link,
body.template-kiyo-1 .resort-col-item .resort-col-image-hold,
body.template-kiyo-1 .resort-col-item .resort-col-image-hold .kiyo-photo-wrapper,
body.template-kiyo-1 .resort-col-item .resort-col-image-hold img {
  display: block !important;
}
body.template-kiyo-1 .resort-col-item .resort-col-image-hold .kiyo-photo-wrapper {
  width: 100% !important;
}
body.template-kiyo-1 .main-button,
body.template-kiyo-1 .w-button:not(.is-secondary):not(.secondary),
body.template-kiyo-1 .w-commerce-commerceaddtocartbutton {
  background-color: var(--booking-accent) !important;
  color: var(--booking-button-text) !important;
  border-color: var(--booking-accent) !important;
}
body.template-kiyo-1 .main-button.secondary,
body.template-kiyo-1 .w-button.is-secondary {
  background-color: var(--booking-secondary-bg) !important;
  color: var(--booking-fg) !important;
}
body.template-kiyo-1 .nav-button,
body.template-kiyo-1 .small-book-button button {
  background-color: var(--booking-accent) !important;
  color: var(--booking-button-text) !important;
}
body.template-kiyo-1 .h1-heading,
body.template-kiyo-1 .h2-heading:not(.h2-white):not(.h2-resort-name),
body.template-kiyo-1 .h3-heading:not(.h3-white),
body.template-kiyo-1 .para:not(.para-white):not(.h1-white) {
  color: var(--booking-fg) !important;
}

/* ── Kiyo-1 room card image (PP 2026-05-14 flush) ──────────────────────────
   Image flush inside the card. No lift, no shadow, no margin trickery — the
   PE layered look ("card on card") confused Jason. Industry default (Airbnb
   / Booking.com): photo clipped to the card top with the same border-radius
   as the card itself, body padded below. Single integrated card shape. */
body.template-kiyo-1 .resort-col-item {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
body.template-kiyo-1 .resort-col-link {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
body.template-kiyo-1 .resort-col-image-hold {
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.template-kiyo-1 .resort-col-image-hold > .resort-col-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
}
body.template-kiyo-1 .resort-col-content {
  position: relative !important;
  padding: 18px !important;
}

/* PN 2026-05-14 — Room Detail stats block (2 Guests / 2 Rooms / 2 Bathrooms)
   stripped server-side. CSS safety net so any cached / re-rendered version
   stays hidden. */
body.template-kiyo-1 .rcc-rg-flex {
  display: none !important;
}

/* ── PM 2026-05-14 — Room Detail photo gallery (horizontal scroll + arrows) */
body.template-kiyo-1 .kiyo1-photo-gallery-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 32px 0;
  background: var(--booking-bg, #ffffff);
}
body.template-kiyo-1 .kiyo1-photo-gallery-wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
body.template-kiyo-1 .kiyo1-photo-gallery {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scrollbar-width: none;
}
body.template-kiyo-1 .kiyo1-photo-gallery::-webkit-scrollbar {
  display: none;
}
body.template-kiyo-1 .kiyo1-photo-gallery-slide {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  background: var(--booking-secondary-bg, #f4f4f5);
  position: relative;
}
body.template-kiyo-1 .kiyo1-photo-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Wave 6 W6-F 2026-05-14 — gallery slides are now `uploaded + 1 upload target`
   (not a fixed 10). Slot-filler tags the upload-target slide with
   `data-kiyo-empty="true"`; public site hides it; editor keeps it visible so
   the user can click to add another photo. Up to 9 gallery slides max. */
body.template-kiyo-1:not(.kiyo-editor-mode) .kiyo1-photo-gallery-slide[data-kiyo-empty="true"] {
  display: none !important;
}
/* Hide entire gallery section on public site when ALL slides are empty (room
   has zero gallery photos uploaded). */
body.template-kiyo-1:not(.kiyo-editor-mode) .kiyo1-photo-gallery-section:not(:has(.kiyo1-photo-gallery-slide:not([data-kiyo-empty="true"]))) {
  display: none !important;
}
/* Upload-target slide in editor mode: dashed border + faint icon so it reads
   as an action rather than a broken image. */
body.kiyo-editor-mode .kiyo1-photo-gallery-slide[data-kiyo-empty="true"] {
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background:
    linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.04) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.kiyo-editor-mode .kiyo1-photo-gallery-slide[data-kiyo-empty="true"] .kiyo1-photo-gallery-img {
  opacity: 0;
}
body.kiyo-editor-mode .kiyo1-photo-gallery-slide[data-kiyo-empty="true"]::after {
  content: "+ Add photo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.48);
  pointer-events: none;
}
/* Wave 5 PM 2026-05-14 — arrow buttons removed per Jason. Native horizontal
   scroll only. Slides are smaller (200px vs prior 380px) so more fit in view
   and the scroll affordance is obvious without dedicated controls. */
body.template-kiyo-1 .kiyo1-photo-gallery-arrow {
  display: none !important;
}
@media (max-width: 768px) {
  body.template-kiyo-1 .kiyo1-photo-gallery-wrap {
    padding: 0 24px;
  }
  body.template-kiyo-1 .kiyo1-photo-gallery-slide {
    width: 160px;
  }
}

/* ── W8 — Room Detail gallery lightbox ──────────────────────────────────────
   Live site only. Gallery photos get a zoom-in cursor; clicking opens a
   full-screen overlay (built in _universal.js). Editor mode is excluded so
   clicks still select the slot. */
body.template-kiyo-1:not(.kiyo-editor-mode) .kiyo1-photo-gallery-slide:not([data-kiyo-empty="true"]) .kiyo1-photo-gallery-img {
  cursor: zoom-in;
}
.kiyo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 5vh 4vw;
}
.kiyo-lightbox.kiyo-lightbox-open {
  display: flex;
}
.kiyo-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.kiyo-lightbox-close,
.kiyo-lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: background 0.15s ease;
  font-family: inherit;
}
.kiyo-lightbox-close:hover,
.kiyo-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.kiyo-lightbox-close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}
.kiyo-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 32px;
  line-height: 1;
}
.kiyo-lightbox-prev {
  left: 24px;
}
.kiyo-lightbox-next {
  right: 24px;
}
@media (max-width: 768px) {
  .kiyo-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
  .kiyo-lightbox-prev {
    left: 8px;
  }
  .kiyo-lightbox-next {
    right: 8px;
  }
  .kiyo-lightbox-close {
    top: 10px;
    right: 12px;
  }
}

/* PQ 2026-05-14 — Suppress Webflow hover transforms on room cards so the
   live site reads as a clean card grid rather than a hover-twitchy Webflow
   demo. Editor preview keeps full interaction; public render is calm.
   Targets the inline `transform: translate3d(...)`, `will-change`, and
   opacity tween Webflow ships on `.resort-col-item` and inner `<a>`. */
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-link,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-image-hold,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-image {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  transition: none !important;
  cursor: pointer !important;
}
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item:hover,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-link:hover,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-image-hold:hover,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-image:hover {
  transform: none !important;
}
/* Strip the Webflow `data-nce-hover-card` overlay arrow that flips in on
   hover (the floating right-arrow inside the photo). Confuses users on a
   booking grid.

   2026-05-15 fix: dropped `[data-nce-hover-card]` from this list — that
   attribute lives on the PARENT `<a.resort-col-link>` (the card anchor
   itself), so `pointer-events:none` was killing every card click.
   `[data-nce-hover-card-img]` (the image-hold wrapper) + `[data-nce-hover-nav]`
   stay disabled — click bubbles through them to the parent anchor. The
   visual overlay arrows are `.nce-hover-card` / `.nce-hover-img` and are
   `display:none`-hidden below — that's the real "strip the arrow" rule. */
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item [data-nce-hover-card-img],
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item [data-nce-hover-nav] {
  pointer-events: none !important;
}
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item .nce-hover-card,
body.template-kiyo-1:not(.kiyo-editor-mode) .resort-col-item .nce-hover-img {
  display: none !important;
}

/* ── Wave 6 W6-A/B 2026-05-14 — Price chip overlay on room card photo ─
   Top-left position (was bottom-left and getting clipped at photo edge
   per Jason's screenshot). Industry pattern (Airbnb, Booking, Vrbo) puts
   the price chip on the photo so the card body can give the name + body
   + CTA full width. Plain text rendering — single span only for "/night"
   so a stripped sub-span can't make the chip look like a bare amount. */
body.template-kiyo-1 .resort-col-image-hold {
  position: relative;
  overflow: hidden;
}
body.template-kiyo-1 .kiyo-price-chip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #18181b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
body.template-kiyo-1 .kiyo-price-chip-suffix {
  font-weight: 500;
  opacity: 0.65;
  font-size: 11px;
  margin-left: 2px;
}
@media (max-width: 768px) {
  body.template-kiyo-1 .kiyo-price-chip {
    font-size: 12px;
    padding: 5px 10px;
  }
}
/* When the chip lives inside the editor's clickable surface we still want
   selection feedback — overlay/click routing already runs at .resort-col-item
   level; the chip's pointer-events:none makes the photo click-through. */

/* ─────────────────────────────────────────────────────────────────────────
   Booking-engine Session 2 — sold-out / unavailable card + Reserve states.
   Applied by `_universal.js updateAvailabilityHints()` after each search
   based on the /api/site/<slug>/availability response. Kept low-specificity
   so the editor's ring-overlay rules win on hover/active.
   ───────────────────────────────────────────────────────────────────────── */
.resort-col-item.is-sold-out {
  opacity: 0.55;
}
.resort-col-item.is-sold-out .main-button,
.resort-col-item.is-sold-out .resort-col-link {
  pointer-events: none;
  cursor: not-allowed;
}
/* B-ENGINE-SOLDOUT-BUTTON (2026-07-20) — .booking-card-sold-out is the
   template-agnostic twin of .is-sold-out above. .is-sold-out only has CSS
   for kiyo-1's own card markup (.resort-col-item / .main-button /
   .resort-col-link); the other 4 templates use completely different
   per-template class names for their card link/CTA — kiyo-2 .item-cms,
   kiyo-3 .room-block, kiyo-4 three separate <a> tags (.hotel-title-link /
   .hotel-image-link / .hotel-location-block, no button element at all),
   kiyo-5 .button.w-button — verified against each template's real card
   markup; a hardcoded class list would miss 4 of the 5 templates and
   silently leave a live, full-color, clickable CTA on a sold-out room.
   Target every anchor/button inside the card generically instead, so this
   works for the current 5 templates and any future one with no more edits. */
.booking-card-sold-out {
  opacity: 0.55;
}
.booking-card-sold-out a,
.booking-card-sold-out button {
  pointer-events: none;
  cursor: not-allowed;
}
body.kiyo-editor-mode .booking-card-sold-out { opacity: 1; }
body.kiyo-editor-mode .booking-card-sold-out a,
body.kiyo-editor-mode .booking-card-sold-out button {
  pointer-events: auto;
}
.booking-room-status-note {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #c0392b;
  letter-spacing: 0.02em;
}
.booking-widget.is-unavailable .booking-reserve-button {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.booking-widget-status-note {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #c0392b;
}
/* Editor preview should never apply the live sold-out state — server
   render leaves it off, but defensively reset here in case JS short-circuit
   ever drifts. */
body.kiyo-editor-mode .resort-col-item.is-sold-out { opacity: 1; }
body.kiyo-editor-mode .resort-col-item.is-sold-out .main-button,
body.kiyo-editor-mode .resort-col-item.is-sold-out .resort-col-link {
  pointer-events: auto;
}
