/*
 * Homepage redesign — phase 1 of a full site visual overhaul (see the
 * approved plan). A deliberately separate stylesheet from site-overrides.css:
 * this is a large, distinct visual system for one page right now (new
 * header/hero/footer, not just a few utility classes), kept apart so it's
 * easy to find/extend when the same system rolls out to other pages, or to
 * cleanly remove if the direction changes. Classes are all prefixed `hr-`
 * (home-redesign) so nothing here can collide with the ported theme's own
 * classes or site-overrides.css.
 *
 * Reuses the site's real brand tokens — --uxper-color-accent/--uxper-color-primary
 * (defined in theme-vars.css) — rather than inventing a new palette. The
 * near-black and off-white below are new names but the same real colors
 * already used elsewhere this project (Spa hero gradient, .review-order).
 */
:root {
  --hr-dark: #1f100d;
  --hr-cream: #faf8f7;
}

.hr-page {
  background-color: #fff;
  /* `overflow-x: hidden` alone silently promotes overflow-y from its
     default `visible` to `auto` too (the spec's "one axis non-visible, the
     other stays visible" rule doesn't exist — the visible one gets forced
     to auto), turning this page wrapper into a scroll container for
     `position: sticky` purposes even though it never actually scrolls
     itself (the document does). That mismatch silently broke every sticky
     descendant site-wide — Room Detail's booking card just scrolled away
     with the page instead of pinning (found while building the Menu page's
     sticky jump-nav, which hit the same bug). Setting `overflow-y:
     visible` explicitly doesn't dodge this — it's the "visible" axis that
     gets promoted. `clip` on both axes instead: still clips horizontal
     overflow (the original intent) but — unlike `hidden`, which is also a
     real, programmatically-scrollable box — provides no scrolling
     mechanism at all, so it isn't a scroll container and sticky
     descendants resolve against the real document scroller again. */
  overflow: clip;
}

/* ---------- Header ---------- */
/* `fixed` (not `absolute`) so it stays pinned to the viewport while
   scrolling — it needs to be able to *appear* mid-scroll (see `.is-scrolled`
   below) rather than scrolling away with the page like a plain overlay
   would. Three grid columns (logo / nav / cta) rather than flex — flex with
   only `margin-left: auto` on the cta left the nav row sitting right next
   to the logo instead of centered, since nothing was centering it within
   the *remaining* space; a `1fr` middle column does that regardless of how
   wide the logo or cta end up being. */
.hr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 28px clamp(20px, 4vw, 56px);
  background-color: transparent;
  transition: background-color 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}
.hr-header-logo {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}
.hr-header-logo img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.hr-header-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hr-header-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 10 links (was 9 before Health Club joined) no longer fit this row's
     natural width at common laptop widths (1280/1366px) with the old 28px
     gap/13px type — "Clarence House" and multi-word labels like "Health
     Club" were wrapping onto two lines mid-header. Tightened here instead
     of pushing the <=860px hamburger breakpoint way up, which would have
     handed the clean inline nav to only the widest screens. */
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A global theme rule (uxper-booking's _general.css) sets `li { margin-top:
   10px }` with a `:first-child` reset to 0, meant for vertical content
   lists — it was bleeding into this horizontal flex nav, leaving every item
   but the first one sitting 5px lower (align-items: center centers each
   item's full margin box, so the extra margin-top on 5 of 6 items shifted
   their visible text down relative to the unaffected first item). Reset
   explicitly rather than chasing/editing the global rule, which other,
   genuinely vertical lists elsewhere may still depend on. */
.hr-header-nav li,
.hr-header-mobile-panel li {
  margin: 0;
}
.hr-header-nav a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.hr-header-nav a:hover {
  color: #fff;
}
.hr-header-cta {
  grid-column: 3;
}

/* Hamburger toggle + the full-screen panel it opens — both hidden above
   860px (desktop keeps the inline link row instead), see the @media block
   below. `z-index` on the button keeps it clickable/visible above the
   panel's solid background once open (its own rule gives the panel a lower
   explicit z-index), since the panel otherwise paints over every other
   header child. */
.hr-header-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
/* Chrome lives here unconditionally (not inside the <=860px media query
   below) because this panel now also doubles as the top-of-page menu on
   wide screens — see the burger's `:not(.is-scrolled)` rule further down.
   `display: block` is safe as the permanent base state since opacity/
   visibility (toggled by `.menu-open`) are what actually hide it. */
.hr-header-mobile-panel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: var(--hr-dark);
  padding: 110px 28px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.hr-header.menu-open .hr-header-mobile-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hr-header-mobile-panel ul {
  display: flex;
  flex-direction: column;
  gap: 22px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.hr-header-mobile-panel a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Top-of-page state (default, no .is-scrolled yet): nav links hidden, logo
   centered as the hero's own focal point instead of pinned left. The nav is
   taken out of the flex flow (position: absolute, anchored below the
   header) rather than `display: none` — that lets it fade/slide in on
   scroll instead of snapping, and keeps its (invisible) box from affecting
   the logo/cta layout while hidden, including when it wraps to multiple
   lines on narrow screens. */
.hr-header:not(.is-scrolled) .hr-header-nav {
  /* `grid-column: auto` resets the explicit placement from the base rule —
     CSS Grid makes an abs-positioned item's containing block the grid AREA
     (not the whole grid container) when it has a non-auto grid-column,
     which silently off-centers `left: 0; right: 0` against just its own
     (much narrower) track instead of the full header. */
  grid-column: auto;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  justify-content: center;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hr-header:not(.is-scrolled) .hr-header-logo {
  /* Same reasoning as the nav rule above — without resetting this, `left:
     50%` centers within the logo's own grid column rather than the full
     header. */
  grid-column: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Hiding the nav row entirely at the top of the page (above) left desktop
   visitors with no visible sign there even is a menu before they scroll —
   surface the hamburger there instead, in the same centered column the nav
   row occupies once scrolled in, reusing the same full-screen panel the
   narrow-screen menu already opens. Scoped to the desktop breakpoint so it
   can't fight the mobile three-zone layout's own `grid-column: 1` below,
   which applies regardless of scroll position. */
@media (min-width: 861px) {
  .hr-header:not(.is-scrolled) .hr-header-burger {
    /* Column 1, not the centered column 2 — the top-state logo centers
       itself via `left: 50%` independent of the grid (see above), so a
       centered burger would sit directly on top of it. Column 1 is the
       logo's normal (scrolled-state) slot and sits empty while the logo is
       off centering itself, making it a clean, uncrowded spot — the same
       left-edge position the mobile burger already uses below. */
    display: inline-flex;
    grid-column: 1;
    justify-self: start;
  }
}

/* Scrolled state: a solid bar fades in and effectively covers the
   top-of-page centered logo — logo returns to its normal left slot (no
   longer absolutely positioned, since this selector is more specific and
   simply doesn't apply the rule above), the nav fades/slides into its
   normal in-flow position (a beat after the bar itself, so it reads as
   following the bar in rather than arriving at the same instant), and Book
   Now (see margin-left: auto above) stays exactly where it was. */
.hr-header.is-scrolled {
  background-color: var(--hr-dark);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.hr-header.is-scrolled .hr-header-nav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}

@media (max-width: 860px) {
  /* Below this width the 6-link row doesn't fit next to the centered logo
     and Book Now button — the inline nav is replaced by a hamburger and a
     full-screen panel instead, on both scroll states, not just reflowed. */
  .hr-header-nav {
    display: none !important;
  }
  .hr-header-burger {
    display: inline-flex;
  }

  /* Three fixed zones (hamburger / logo+wordmark / Book Now) instead of the
     desktop trick of centering the logo via `left: 50%` independent of its
     siblings — that math doesn't account for the hamburger+CTA widths next
     to it and is what caused the earlier overlap. A grid's `1fr` middle
     column centers the logo in whatever space is actually left over after
     the other two, which stays correct regardless of their widths. */
  .hr-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
  }
  .hr-header-burger {
    grid-column: 1;
  }
  .hr-header-logo,
  .hr-header:not(.is-scrolled) .hr-header-logo {
    grid-column: 2;
    justify-self: center;
    position: static;
    left: auto;
    transform: none;
  }
  .hr-header-cta {
    grid-column: 3;
    margin-left: 0;
  }
  /* Two classes (vs. the base `.hr-btn` rule's one) so this reliably wins
     regardless of source order — `.hr-btn`'s own padding/font-size rule
     sits later in this file and was silently winning the cascade over a
     single-class override here. Explicit request: Book Now was crowding
     the logo/hamburger at this width. `nowrap` keeps it one line instead of
     wrapping once the grid column shrinks to its content. */
  .hr-btn.hr-header-cta {
    padding: 9px 16px;
    font-size: 10.5px;
    white-space: nowrap;
  }
  .hr-header-logo span {
    font-size: 14px;
    white-space: nowrap;
  }

  /* Panel chrome itself now lives in the base (unconditional) rule above —
     it's reused by the desktop top-of-page menu too. */

  .hr-hero-actions {
    margin-bottom: 28px;
  }
}

/* ---------- Hero ---------- */
.hr-hero {
  position: relative;
  min-height: 100vh;
  /* `svh` tracks the browser's actual visible viewport on mobile (excludes
     the address bar), so the hero doesn't overshoot the real screen height
     there — falls back to the `vh` above on browsers that don't support it. */
  min-height: 100svh;
  display: flex;
  /* Title sits in the vertical middle of the hero on every breakpoint
     (explicit request) rather than bottom-aligned — same rule at mobile and
     desktop since nothing here needs to differ by width. */
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #8a4a3a, var(--hr-dark));
}
.hr-hero-media {
  position: absolute;
  inset: 0;
}
.hr-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 8, 0.35) 0%, rgba(20, 10, 8, 0.3) 45%, rgba(20, 10, 8, 0.86) 100%);
}
.hr-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Symmetric padding — asymmetric 160px/64px was sized to clear the old
     bottom-aligned layout; with the hero now vertically centered (see
     .hr-hero above), uneven padding would pull the visible text off true
     center. */
  padding: 0 clamp(20px, 4vw, 56px);
  color: #fff;
  /* Admin-set hero copy is centered on every breakpoint (not just stacked
     mobile) — the max-width children below get `margin: 0 auto` so they
     center as blocks within this full-width container, not just their own
     text runs. */
  text-align: center;
}
.hr-hero-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 820px;
  margin: 0 auto 20px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
  /* The theme's own global h1-h6 rule sets color:#1a1a1a directly on the
     element, which beats inheriting #fff from .hr-hero-content — every
     heading placed on a dark background in this file needs its own
     explicit color for the same reason, not just this one. */
  color: #fff;
}
/* Still used by the "Ready for your stay" CTA band further down the page
   (see HomePage.jsx) — the hero itself no longer renders a
   .hr-hero-actions block. */
.hr-hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Bottom-center scroll indicator — replaces the subtitle/buttons/stats
   block that used to fill this space. Bounces gently to draw the eye
   without being distracting. */
.hr-hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  animation: hr-scroll-cue-bounce 2s ease-in-out infinite;
}
.hr-hero-scroll-cue:hover {
  border-color: #fff;
}
@keyframes hr-scroll-cue-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

/* ---------- Buttons ---------- */
.hr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hr-btn:hover {
  transform: translateY(-1px);
}
.hr-btn-solid {
  background-color: var(--uxper-color-accent, #b95c47);
  color: #fff;
}
/* `color: #fff` is repeated here (not just inherited from `.hr-btn-solid`
   above) because the legacy theme's `a:hover, a:focus { color: ... }` rule
   (theme-vars.css, still loaded for the not-yet-redesigned ported pages)
   is MORE specific than a bare `.hr-btn-solid` — an element + pseudo-class
   selector outweighs a single class — so without its own `:hover` color,
   every `<a>`-based `.hr-btn` silently went dark-on-dark on hover
   site-wide. Same reasoning on `.hr-btn-outline`/`.hr-btn-dark` below. */
.hr-btn-solid:hover {
  background-color: #a3503e;
  color: #fff;
}
.hr-btn-outline {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.hr-btn-outline:hover {
  border-color: #fff;
  color: #fff;
}
.hr-btn-dark {
  background-color: var(--hr-dark);
  color: #fff;
}
.hr-btn-dark:hover {
  background-color: #35201b;
  color: #fff;
}
/* Header's "Book Now" CTA is squared off rather than the pill shape every
   other .hr-btn uses — explicit user request, scoped to just this button. */
.hr-header-cta {
  border-radius: 0;
}

/* ---------- Section shell ---------- */
.hr-section {
  padding: clamp(60px, 9vw, 120px) clamp(20px, 4vw, 56px);
}
.hr-section-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* Scroll-reveal — see useScrollReveal.js. Applied per-section (not a global
   rule on .hr-section) so the hero, which is already visible on load, is
   never hidden waiting for a scroll that already happened. */
.hr-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.hr-eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uxper-color-accent, #b95c47);
  margin-bottom: 14px;
}

/* ---------- Intro (two-column) ---------- */
.hr-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hr-intro-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--uxper-color-primary, #492723);
}
.hr-intro-text {
  color: #6a5f59;
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 420px;
}
.hr-intro-media {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}
.hr-intro-photo {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.hr-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-intro-cta-panel {
  border-radius: 14px;
  background-color: var(--hr-dark);
  color: #fff;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.hr-intro-cta-panel h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}
.hr-intro-cta-panel a {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 860px) {
  .hr-intro {
    grid-template-columns: 1fr;
  }
  .hr-intro-text {
    max-width: none;
  }
}

/* ---------- Amenities grid ---------- */
.hr-amenities-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hr-amenities-header h2 {
  font-size: clamp(26px, 3vw, 38px);
  margin: 0;
  color: var(--uxper-color-primary, #492723);
  max-width: 520px;
}
/* Modifier for sections that want a centered title instead of the
   Amenities section's left-aligned/space-between layout (Rooms, Gallery
   strip — see those components). */
.hr-centered-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.hr-centered-header h2 {
  max-width: none;
}
.hr-amenities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 18px;
}
/* Two explicit rows rather than loose auto-flow spans, so they always sum
   to the 6-column track cleanly: two tall hero tiles (3+3), then three
   even tiles (2+2+2) — no leftover gaps for the grid to fill awkwardly. */
.hr-amenity-tile {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
}
.hr-amenity-tile.is-large {
  grid-column: span 3;
  grid-row: span 3;
}
.hr-amenity-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hr-amenity-tile:hover img {
  transform: scale(1.06);
}
.hr-amenity-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 8, 0) 45%, rgba(20, 10, 8, 0.78) 100%);
}
.hr-amenity-label {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hr-amenity-label i {
  font-size: 13px;
  opacity: 0.8;
}

@media (max-width: 760px) {
  .hr-amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .hr-amenity-tile,
  .hr-amenity-tile.is-large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---------- Rooms showcase (room categories) ---------- */
/* Full-bleed photo cards — title sits on the photo itself over a gradient
   (same device as .hr-amenity-tile) instead of in a separate white panel
   below it — the "premium look" request, replacing the previous
   photo-plus-white-card treatment. */
/* Two large columns (not an auto-fill grid of small tiles) — explicit
   "large cards" request. Falls back to one column on narrow screens (see
   @media below) instead of letting a 2-up grid get cramped. */
.hr-rooms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.hr-room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Transparent + square-cornered secondary CTA (Rooms/Gallery "view all"
   links) — like the header's Book Now button, plus a small arrow. Two
   classes (vs. the base `.hr-btn`/`.hr-btn-dark` rules' one) so this
   reliably wins regardless of source order. */
.hr-btn.hr-outline-cta {
  background-color: transparent;
  color: var(--uxper-color-primary, #492723);
  border: 1px solid rgba(73, 39, 35, 0.35);
  border-radius: 0;
}
.hr-btn.hr-outline-cta:hover {
  background-color: transparent;
  border-color: var(--uxper-color-primary, #492723);
}
.hr-outline-cta i {
  font-size: 11px;
}

@media (max-width: 700px) {
  .hr-rooms-grid {
    grid-template-columns: 1fr;
  }
}
.hr-room-card-media {
  position: absolute;
  inset: 0;
}
.hr-room-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.hr-room-card:hover .hr-room-card-media img {
  transform: scale(1.06);
}
.hr-room-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 8, 0) 38%, rgba(20, 10, 8, 0.85) 100%);
}
.hr-room-card-body {
  position: relative;
  z-index: 2;
  padding: 30px 28px;
}
.hr-room-card-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  margin: 0;
  /* Needs its own explicit color (not inherited) — the theme's global
     h1-h6 rule sets color:#1a1a1a directly on the element, which beats
     inheriting #fff from this dark-overlay card (see the hero title's own
     comment for the same gotcha). */
  color: #fff;
}

/* ---------- Gallery strip ---------- */
/* A tight row of square photos (one per gallery category, real photos from
   the admin Gallery) — a lighter visual break between the two bigger photo
   grids (Amenities, Rooms) rather than another full showcase. Grid on
   desktop, horizontal scroll-snap row on mobile — the "Instagram strip"
   request. */
.hr-gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hr-gallery-strip-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}
.hr-gallery-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.hr-gallery-strip-item:hover img {
  transform: scale(1.08);
}

@media (max-width: 860px) {
  .hr-gallery-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .hr-gallery-strip-item {
    scroll-snap-align: start;
  }
}

/* ---------- CTA band ---------- */
.hr-cta-band {
  background-color: var(--hr-dark);
  color: #fff;
  text-align: center;
  padding: clamp(56px, 8vw, 96px) 24px;
}
.hr-cta-band h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  max-width: 640px;
  margin: 0 auto 28px;
  color: #fff;
}

/* ---------- Footer ---------- */
.hr-footer {
  background-color: var(--hr-dark);
  color: rgba(255, 255, 255, 0.78);
  padding: 56px clamp(20px, 4vw, 56px) 28px;
}
.hr-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hr-footer-brand {
  max-width: 320px;
}
.hr-footer-brand .hr-header-logo {
  color: #fff;
  margin-bottom: 14px;
}
.hr-footer-brand p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}
.hr-footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}
.hr-footer-col a,
.hr-footer-col p {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  margin-bottom: 10px;
  line-height: 1.5;
}
.hr-footer-col a:hover {
  color: #fff;
}
.hr-footer-social {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.hr-footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  margin: 0;
}
.hr-footer-bottom {
  max-width: 1240px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ========================================================================
   Sub-pages (phase 2+ of the rollout) — Accommodation is first; the
   .hr-page-hero pattern below is deliberately generic so the next page's
   turn can reuse it rather than inventing another banner style.
   ======================================================================== */

/* ---------- Page hero (shorter than the homepage's full-viewport one) ---------- */
.hr-page-hero {
  position: relative;
  min-height: 46vh;
  min-height: 46svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #8a4a3a, var(--hr-dark));
}
.hr-page-hero-media {
  position: absolute;
  inset: 0;
}
.hr-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 8, 0.55) 0%, rgba(20, 10, 8, 0.32) 55%, rgba(20, 10, 8, 0.68) 100%);
}
.hr-page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  padding: 140px 24px 40px;
}
.hr-page-hero-content h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  margin: 0 0 14px;
  color: #fff;
}
.hr-page-hero-content p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ---------- Floating search card (Accommodation) ---------- */
.hr-search-card-wrap {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}
.hr-search-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(31, 16, 13, 0.18);
  padding: 28px clamp(20px, 3vw, 36px);
}
/* Scoped reskin of AccommodationSearchWidget.jsx's existing theme-CSS
   classes (ux-booking-form/form-toggle/product-quantity/btn-submit etc.) —
   its field logic/markup is untouched, only overridden here so it matches
   the new palette/typography instead of the old theme's own look. */
.hr-search-card .ux-booking-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}
.hr-search-card .form-group {
  flex: 1 1 160px;
}
/* The theme's own `.ux-booking-form .form-group + .form-group` adds a 25px
   margin-top on top of the flex `gap` above — fine when fields sit
   side-by-side, but the two stack additively once fields wrap to their own
   row (and always do on mobile, see the column layout below), leaving a
   much bigger gap than intended. The gap already spaces them. */
.hr-search-card .form-group + .form-group {
  margin-top: 0;
}
.hr-search-card label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c8d85;
  margin-bottom: 8px;
}
/* `.ux-booking-form input.form-control` (two classes + a tag) in the old
   theme's own _general.css beats a plain `.hr-search-card .form-control`
   override at equal-or-lower specificity — matching that shape here
   (.hr-search-card .ux-booking-form input.form-control) is what actually
   wins regardless of file order. */
.hr-search-card .ux-booking-form input.form-control {
  width: 100%;
  border: 1px solid rgba(73, 39, 35, 0.18);
  border-radius: 4px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--uxper-color-primary, #492723);
  background-color: var(--hr-cream);
}
.hr-search-card .form-toggle {
  position: relative;
}
.hr-search-card .open-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.hr-search-card .show-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(73, 39, 35, 0.18);
  border-radius: 4px;
  padding: 11px 12px;
  background-color: var(--hr-cream);
  font-size: 14px;
  color: var(--uxper-color-primary, #492723);
}
.hr-search-card .show-data i {
  font-size: 11px;
  opacity: 0.6;
}
.hr-search-card .inner-toggle {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 3;
  background-color: #fff;
  border: 1px solid rgba(73, 39, 35, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(31, 16, 13, 0.14);
  padding: 18px;
}
.hr-search-card .form-toggle.active .inner-toggle {
  display: block;
}
.hr-search-card .adult,
.hr-search-card .children {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--uxper-color-primary, #492723);
  margin-bottom: 12px;
}
/* The theme's own `.form-toggle .inner-toggle span` sets its own color
   directly on the label text — beats the `.adult`/`.children` color above
   by inheritance alone, same "direct beats inherited" rule noted elsewhere
   in this file (see .hr-hero-title's comment). */
.hr-search-card .inner-toggle span {
  color: var(--uxper-color-primary, #492723);
}
.hr-search-card .adult:last-child,
.hr-search-card .children:last-child {
  margin-bottom: 0;
}
.hr-search-card .product-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The theme's own `.form-toggle .product-quantity .btn-quantity` (three
   classes) beats a plain `.hr-search-card .btn-quantity` override — matched
   here for the same reason as the .form-control fix above. */
.hr-search-card .product-quantity .btn-quantity {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(73, 39, 35, 0.25);
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--uxper-color-primary, #492723);
  font-size: 10px;
}
.hr-search-card .qty {
  width: 30px;
  text-align: center;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--uxper-color-primary, #492723);
}
.hr-search-card .bottom-form {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 100%;
}
/* The theme's own `.ux-booking-form button.btn-submit` (two classes + a
   tag) beats a plain `.hr-search-card .btn-submit` override — same fix as
   above. */
.hr-search-card .ux-booking-form button.btn-submit {
  padding: 13px 32px;
  background-color: var(--uxper-color-accent, #b95c47);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hr-search-card .ux-booking-form button.btn-submit:hover {
  background-color: #a3503e;
}
.hr-search-card .phone-number {
  font-size: 12.5px;
  color: #6a5f59;
  text-decoration: none;
}
.hr-search-card .phone-number:hover {
  color: var(--uxper-color-accent, #b95c47);
}

@media (max-width: 760px) {
  .hr-search-card .ux-booking-form {
    flex-direction: column;
    align-items: stretch;
  }
  /* `flex: 1 1 160px` (desktop's row layout) sets a 160px *basis on the
     main axis* — once the container switches to flex-direction: column
     above, that axis is height, not width, forcing every field to a 160px
     tall box regardless of its actual content. Reset to a natural height
     here. */
  .hr-search-card .form-group {
    flex: 1 1 auto;
  }
  .hr-search-card .bottom-form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Room filter pills ---------- */
.hr-room-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.hr-filter-pill {
  padding: 8px 18px;
  border: 1px solid rgba(73, 39, 35, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--uxper-color-primary, #492723);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hr-filter-pill:hover {
  border-color: var(--uxper-color-accent, #b95c47);
}
.hr-filter-pill.is-active {
  background-color: var(--uxper-color-primary, #492723);
  border-color: var(--uxper-color-primary, #492723);
  color: #fff;
}
.hr-filter-count {
  opacity: 0.6;
  margin-left: 4px;
}

.hr-room-search-summary,
.hr-room-status-message {
  text-align: center;
  font-size: 13.5px;
  color: #6a5f59;
  margin: 0 0 20px;
}

/* ---------- Room listing cards (Accommodation) ---------- */
/* Distinct from the homepage's full-bleed .hr-room-card teaser — this is
   the actual shopping page, so each card needs room for guest/bed/bath
   counts, a summary and a price, not just a photo + title. Responsive
   auto-fit grid rather than a fixed column count since the full listing
   can hold more than the homepage's curated 4. */
.hr-rooms-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.hr-listing-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(73, 39, 35, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hr-listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(73, 39, 35, 0.15);
}
.hr-listing-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--hr-cream);
}
.hr-listing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.hr-listing-card:hover .hr-listing-card-media img {
  transform: scale(1.05);
}
.hr-listing-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(73, 39, 35, 0.22);
  font-size: 38px;
}
.hr-listing-card-body {
  padding: 24px 24px 26px;
}
.hr-listing-card-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  margin: 0 0 12px;
  color: var(--uxper-color-primary, #492723);
}
.hr-listing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.hr-listing-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6a5f59;
}
.hr-listing-card-meta svg {
  width: 15px;
  height: 15px;
  opacity: 0.6;
}
.hr-listing-card-summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6a5f59;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hr-listing-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-listing-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
}
.hr-listing-card-price small {
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #9c8d85;
}
.hr-listing-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uxper-color-accent, #b95c47);
  white-space: nowrap;
}

/* ========================================================================
   Room Detail page (phase 3)
   ======================================================================== */

/* ---------- Hero / gallery ---------- */
.hr-room-hero {
  width: 100%;
}
.hr-room-hero img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  display: block;
}
.hr-room-hero-placeholder {
  width: 100%;
  height: 420px;
  background-color: var(--hr-cream);
}
.hr-room-hero-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  max-height: 560px;
  overflow: hidden;
}
.hr-gallery-large {
  height: 100%;
}
.hr-gallery-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-gallery-small {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  height: 100%;
}
.hr-gallery-small-item {
  position: relative;
  overflow: hidden;
}
.hr-gallery-small-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-gallery-see-more {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(20, 10, 8, 0.62);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hr-gallery-see-more span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 760px) {
  .hr-room-hero-gallery {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .hr-gallery-large img {
    max-height: 320px;
  }
  .hr-gallery-small {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    height: auto;
  }
  .hr-gallery-small-item {
    aspect-ratio: 1;
  }
}

/* ---------- Two-column layout ---------- */
.hr-room-detail-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 56px;
  align-items: start;
}
.hr-room-detail-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hr-room-detail-aside {
  position: sticky;
  top: 110px;
}

@media (max-width: 960px) {
  .hr-room-detail-layout {
    grid-template-columns: 1fr;
  }
  .hr-room-detail-aside {
    position: static;
  }
}

/* ---------- Heading ---------- */
/* Explicit "bold" request — bigger/heavier than the rest of the site's
   headings, since this is the single most important line on the page. */
.hr-detail-heading h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--uxper-color-primary, #492723);
}
.hr-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 20px;
}
.hr-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
}
.hr-detail-meta svg {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}
.hr-detail-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--uxper-color-accent, #b95c47);
}
.hr-detail-price small {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #9c8d85;
}
.hr-detail-status {
  font-size: 14px;
  color: #6a5f59;
}

/* ---------- Content sections (description/amenities/services/rules) ---------- */
.hr-detail-section {
  padding-top: 32px;
  border-top: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-room-detail-main > .hr-detail-section:first-child,
.hr-detail-heading + .hr-detail-section {
  padding-top: 0;
  border-top: none;
}
.hr-detail-section h3 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 14px;
  color: var(--uxper-color-primary, #492723);
}
/* Short accent-colored rule under every section heading — explicit "bold"
   request, a structural anchor rather than just bigger type. */
.hr-detail-section h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  background-color: var(--uxper-color-accent, #b95c47);
}
.hr-detail-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #4a413c;
  margin: 0;
}
.hr-amenities-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hr-amenities-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #4a413c;
}
.hr-amenities-list i {
  color: var(--uxper-color-accent, #b95c47);
  font-size: 15px;
  width: 18px;
  text-align: center;
}
.hr-detail-notes {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hr-detail-notes li {
  font-size: 13px;
  color: #6a5f59;
  line-height: 1.6;
}
.hr-services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.hr-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--hr-cream);
  border-radius: 6px;
}
.hr-service-item i {
  font-size: 18px;
  color: var(--uxper-color-accent, #b95c47);
}
.hr-service-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--uxper-color-primary, #492723);
  margin-bottom: 2px;
}
.hr-service-item span {
  font-size: 12px;
  color: #9c8d85;
}

@media (max-width: 500px) {
  .hr-amenities-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Availability calendar ---------- */
.hr-calendar {
  background-color: var(--hr-cream);
  border-radius: 8px;
  padding: 24px;
}
.hr-calendar-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.hr-calendar-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(73, 39, 35, 0.2);
  background: none;
  color: var(--uxper-color-primary, #492723);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hr-calendar-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.hr-calendar-months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.hr-calendar-month-header {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
  margin-bottom: 10px;
  text-align: center;
}
.hr-calendar-month table {
  width: 100%;
  border-collapse: collapse;
}
.hr-calendar-month th {
  font-size: 10.5px;
  color: #9c8d85;
  font-weight: 600;
  padding-bottom: 6px;
}
.hr-calendar-month td {
  text-align: center;
  padding: 4px 0;
}
.hr-calendar-month td span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  color: #4a413c;
}
.hr-calendar-month td span.is-today {
  border: 1px solid var(--uxper-color-accent, #b95c47);
}
.hr-calendar-month td span.is-disabled {
  color: #c9bfb9;
  text-decoration: line-through;
}
.hr-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 39, 35, 0.12);
}
.hr-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #6a5f59;
}
.hr-calendar-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d8cfc9;
}
.hr-calendar-swatch.is-today {
  background-color: transparent;
  border: 1px solid var(--uxper-color-accent, #b95c47);
}
.hr-calendar-swatch.is-disabled {
  background-color: #c9bfb9;
}

@media (max-width: 560px) {
  .hr-calendar-months {
    grid-template-columns: 1fr;
  }
}

/* ---------- Booking card (sticky aside) ---------- */
.hr-booking-card {
  background-color: #fff;
  border-top: 4px solid var(--uxper-color-accent, #b95c47);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(31, 16, 13, 0.12);
  padding: 28px;
}
.hr-booking-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--uxper-color-primary, #492723);
}
.hr-booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hr-booking-form .date-range-picker {
  margin-bottom: 0;
}
.hr-booking-form-row {
  display: flex;
  gap: 14px;
}
.hr-booking-form-field {
  flex: 1;
}
.hr-booking-form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9c8d85;
  margin-bottom: 6px;
}
.hr-booking-form-field select {
  width: 100%;
  border: 1px solid rgba(73, 39, 35, 0.18);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--uxper-color-primary, #492723);
  background-color: var(--hr-cream);
}
.hr-booking-form-note {
  font-size: 12px;
  color: #9c8d85;
  margin: -6px 0 0;
}
.hr-booking-form .hr-btn-solid {
  width: 100%;
  justify-content: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.hr-booking-form .hr-btn-solid:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================================================
   Checkout page (phase 4) — chrome swap + light touch-ups only. The
   existing .checkout-*/.review-order/.payment-method-wrap CSS (in
   site-overrides.css) was already built from the site's own
   --uxper-color-accent/--uxper-color-primary tokens, not the old WordPress
   theme, so it's already close to on-brand — this scopes a few bold/
   premium touches under .hr-checkout-page rather than rewriting it
   wholesale. Scoped (not editing those base rules in place) because
   BookingConfirmationPage.jsx shares the same classNames and still uses
   the old SimplePageShell chrome until its own turn — editing the shared
   rules directly would restyle it with new colors under old chrome, a
   mismatched combination.
   ======================================================================== */
.hr-checkout-page {
  /* Clears the fixed header — this page has no dark photo at the top (see
     NewHeader's forceSolid prop), so the header is always its solid bar,
     with a real height that needs clearance the way a transparent overlay
     wouldn't. */
  padding-top: 130px;
}
.hr-checkout-page .checkout-title {
  font-weight: 700;
}
.hr-checkout-page .checkout-section-title {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 16px;
}
.hr-checkout-page .checkout-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  background-color: var(--uxper-color-accent, #b95c47);
}
.hr-checkout-page .checkout-submit {
  border-radius: 0;
}
.hr-checkout-page .checkout-total {
  font-size: 26px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .hr-checkout-page {
    padding-top: 150px;
  }
}

/* ========================================================================
   Restaurant/Menu page (phase 5) — chrome swap (SimplePageShell ->
   NewHeader/NewFooter + the same `.hr-page-hero` banner pattern
   Accommodation/Spa already use) plus light touch-ups layered on top of
   the existing `.menu-*` card system in site-overrides.css, which was
   already built from the real brand tokens rather than the old WordPress
   theme — same reasoning Checkout's pass had, so no full card rebuild was
   needed. `.menu-*` has no other consumer (confirmed), but these stay a
   scoped overlay under `.hr-menu-page` rather than edits to the base rules
   in place, consistent with the rest of the rollout.
   ======================================================================== */
/* The hero never actually said the word "menu" — a first-time visitor
   landing here had no cue that the page below is Cloud 9's menu rather than
   a generic restaurant-info page. The base `.hr-eyebrow` (see Home's
   "About Clarence House"/Amenities) is accent-on-cream; this photo hero
   needs a lighter, higher-contrast variant to read over the dark overlay. */
.hr-menu-hero-eyebrow {
  color: #f3c7b8;
}

/* A short styled lead-in above the category list — the second half of the
   same fix: besides the hero now naming the menu up front, the page needed
   some actual wording of its own instead of dropping straight from the
   hero into the jump-nav/grid. */
.hr-menu-page .menu-intro {
  max-width: 560px;
  margin: 0 auto 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  color: #6b5950;
}

/* The base `.menu-nav` rule deliberately skipped `position: sticky` — the
   old theme header had its own sticky behavior and stacking this on top of
   it untested risked a visual collision. NewHeader's scrolled-state height
   is fixed and known (~80px), so that risk is gone, and a long single-page
   menu genuinely benefits from being able to jump sections without
   scrolling back up. */
.hr-menu-page .menu-nav {
  position: sticky;
  top: 90px;
  z-index: 10;
  /* The old near-white translucent strip (rgba(250,248,247,.94)) sat on
     top of `.hr-page`'s own #fff background and read as a flat, empty
     band once pinned. A soft gradient + a little lift gives it some depth
     instead of sitting dead flush with the page behind it. */
  background: linear-gradient(180deg, #fffdfb 0%, var(--hr-cream) 100%);
  box-shadow: 0 6px 18px rgba(31, 16, 13, 0.06);
  border-bottom: 1px solid rgba(185, 92, 71, 0.14);
  backdrop-filter: blur(6px);
  padding: 14px 0;
}
/* Base `.menu-nav a` (site-overrides.css) is a pill (border-radius: 999px)
   in plain uppercase sans — squared off into a rectangle, and the label
   swapped for the same italic serif used everywhere else a bit of flourish
   was wanted (the menu-item modal, Spa's intro) instead of the generic
   bold-caps tab-button look. */
.hr-menu-page .menu-nav a {
  border-radius: 2px;
  padding: 10px 26px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hr-menu-page .menu-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(31, 16, 13, 0.1);
}
.hr-menu-page .menu-category {
  scroll-margin-top: 150px;
}
.hr-menu-page .menu-category-title {
  font-size: 30px;
  font-weight: 600;
}

/* Click-to-expand — only cards whose description is actually clipped by
   the base `.menu-item-desc` 2-line clamp get this (see the
   `truncatedIds` measurement in MenuPage.jsx); a short description has
   nothing more to show in a popup, so its card stays inert. */
.hr-menu-page .menu-item-card.is-expandable {
  cursor: pointer;
}
.hr-menu-page .menu-item-card.is-expandable:focus-visible {
  outline: 2px solid var(--uxper-color-accent, #b95c47);
  outline-offset: 3px;
}
.hr-menu-page .menu-item-readmore {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--uxper-color-accent, #b95c47);
}

.hr-menu-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(31, 16, 13, 0.72);
  animation: hrMenuModalFade 0.2s ease;
}
@keyframes hrMenuModalFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hr-menu-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.hr-menu-modal-photo {
  width: 100%;
  height: 220px;
}
.hr-menu-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px 16px 0 0;
}
.hr-menu-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--uxper-color-primary, #492723);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hr-menu-modal-body {
  padding: 28px 26px 32px;
  text-align: center;
}
.hr-menu-modal-body h3 {
  margin: 0 0 8px;
  font-size: 23px;
}
.hr-menu-modal-body .menu-item-tags {
  justify-content: center;
  margin: 0 0 14px;
}
.hr-menu-modal-desc {
  color: #6b6058;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.hr-menu-modal-price {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--uxper-color-accent, #b95c47);
}

/* ========================================================================
   Spa page (phase 6) — chrome swap (SimplePageShell -> NewHeader/NewFooter,
   the bespoke old `.spa-hero` banner -> the shared `.hr-page-hero`) plus
   light touch-ups on top of the existing `.spa-feature`/`.spa-service-*`
   system in site-overrides.css, which — same as Menu/Checkout — was
   already built from the real brand tokens with real photos and
   non-clamped descriptions, so no card rebuild was needed here either.
   `.spa-*` has no other consumer (confirmed), but these stay a scoped
   overlay under `.hr-spa-page` rather than edits to the base rules in
   place, consistent with the rest of the rollout.

   Follow-up pass: explicitly "calm, relaxing, accommodating" rather than
   reusing the rest of the site's higher-contrast, bolder language —
   lighter type weights with more line-height/letter-spacing, a softer hero
   overlay, a warm cream field instead of stark white, circular icon badges
   instead of bare icons, and a short personalization line (the
   "accommodating" part) ahead of the features row.
   ======================================================================== */
.hr-spa-page .hr-page-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(31, 16, 13, 0.22) 0%,
    rgba(31, 16, 13, 0.1) 45%,
    rgba(31, 16, 13, 0.5) 100%
  );
}
.hr-spa-page .hr-page-hero-content h1 {
  font-weight: 500;
  letter-spacing: 0.015em;
}
.hr-spa-page .hr-page-hero-content p {
  font-size: 16.5px;
  line-height: 1.75;
}

.hr-spa-page .hr-section {
  background-color: var(--hr-cream);
}

.hr-spa-page .hr-spa-intro {
  max-width: 600px;
  margin: 0 auto 56px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  color: #6b5950;
}

.hr-spa-page .spa-features {
  gap: 48px;
  margin: 0 0 64px;
  padding-bottom: 0;
  border-bottom: none;
}
.hr-spa-page .spa-feature {
  gap: 16px;
}
.hr-spa-page .spa-feature-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(185, 92, 71, 0.1);
}
.hr-spa-page .spa-feature-icon i {
  font-size: 21px;
  color: var(--uxper-color-accent, #b95c47);
}
.hr-spa-page .spa-feature strong {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hr-spa-page .spa-feature span {
  font-size: 13px;
  line-height: 1.5;
}

/* Treatments — restyled after kempinski.com's spa pages: large, unboxed
   photography with quiet text underneath (no card chrome, no shadow, no
   button) rather than a dense grid of bordered product cards. Fewer,
   bigger items per row and generous gaps do the separating work that the
   card box used to. */
.hr-spa-page .hr-spa-menu-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uxper-color-accent, #b95c47);
  margin: 0 0 40px;
}
.hr-spa-page .spa-services-grid {
  /* `auto-fill` (not `auto-fit`) so a thin test menu — or any real one with
     just a couple of treatments — doesn't stretch a lone card to the full
     row width; it keeps its natural size and leaves the row short instead. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 52px 48px;
}
.hr-spa-page .spa-service-card {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.hr-spa-page .spa-service-card:hover {
  transform: none;
  box-shadow: none;
}
.hr-spa-page .spa-service-media {
  border-radius: 10px;
}
.hr-spa-page .spa-service-body {
  padding: 20px 2px 0;
}
.hr-spa-page .spa-service-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hr-spa-page .spa-service-desc {
  line-height: 1.75;
}

@media (max-width: 640px) {
  .hr-spa-page .hr-spa-intro {
    font-size: 19px;
    margin-bottom: 44px;
  }
}

/* ========================================================================
   Conferences page (phase 7) — full rebuild (see the approved plan): drops
   LazyPortedPage/the ported conferences.html mirror for the hr- design
   system, same approach as Accommodation/Room Detail. Reads bold and
   professional like those pages, not Spa's softened "calm" treatment —
   that was a deliberate one-page-only choice.
   ======================================================================== */
.hr-conf-intro {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 17px;
  line-height: 1.9;
  color: #4a413c;
}

/* A refined "stat strip" rather than plain meta text — the value leads in
   the same serif used for headings (quietly ties it to the rest of the
   page's type), with a thin vertical rule between facts standing in for
   the icons' old job of separating them, so there's visual structure even
   if an icon font glyph ever fails to load. */
.hr-conf-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0 0 72px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-conf-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
}
.hr-conf-fact + .hr-conf-fact {
  border-left: 1px solid rgba(73, 39, 35, 0.14);
}
.hr-conf-fact i {
  font-size: 22px;
  color: var(--uxper-color-accent, #b95c47);
  flex: 0 0 auto;
}
.hr-conf-fact-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c8d85;
}
.hr-conf-fact-value {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
  margin-top: 3px;
}

.hr-conferences-page .hr-amenities-header {
  margin-bottom: 52px;
}
.hr-conferences-page .hr-amenities-header h2 {
  position: relative;
  padding-bottom: 22px;
}
/* The accent-underline convention used under every other section heading
   on the redesigned pages (Room Detail, Menu's category titles) — this
   page's title was the one place still missing it. */
.hr-conferences-page .hr-amenities-header h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  background-color: var(--uxper-color-accent, #b95c47);
}
.hr-conferences-page .hr-amenities-header p {
  max-width: 560px;
  margin: 0;
  color: #857a74;
  font-size: 14.5px;
  line-height: 1.6;
}

.hr-conf-rooms {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-bottom: 72px;
}
.hr-conf-room {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
/* Alternate the photo side per room so a long list of rooms doesn't read
   as a monotonous repeating row. */
.hr-conf-room:nth-child(even) .hr-conf-room-media {
  order: 2;
}
/* Now a <button> (opens the room's photo lightbox below) rather than a
   plain <div> — reset its default button chrome before the photo-frame
   styling applies. */
.hr-conf-room-media {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hr-conf-room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hr-conf-room-media:hover img {
  transform: scale(1.04);
}
.hr-conf-room-media-count {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: rgba(31, 16, 13, 0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.hr-conf-room-body h3 {
  position: relative;
  display: inline-block;
  font-size: 29px;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 14px;
  color: var(--uxper-color-primary, #492723);
}
/* Same accent-underline language as Room Detail's section headings and the
   page title above — applied here too so a room name reads as a proper
   heading, not just bigger body text. */
.hr-conf-room-body h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--uxper-color-accent, #b95c47);
}
.hr-conf-room-capacity {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9c8d85;
  margin: 0 0 24px;
}
.hr-conf-facts-lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 26px;
}
.hr-conf-facts-list h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uxper-color-accent, #b95c47);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-conf-facts-list .hr-amenities-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.hr-conf-closing {
  max-width: 900px;
  margin: 0 auto;
}
.hr-conf-closing .elementor-widget-container img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.hr-conf-closing .widget-image-caption {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9c8d85;
}

@media (max-width: 820px) {
  .hr-conf-room {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hr-conf-room:nth-child(even) .hr-conf-room-media {
    order: 0;
  }
  .hr-conf-facts-lists {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* The `border-left` divider between facts (see .hr-conf-fact above) only
     makes sense in a horizontal row — once facts wrap to stack, it was
     rendering as a stray vertical line on whichever item happened to wrap
     to its own row. Switching to an intentional column layout with a
     horizontal rule between items instead avoids that. */
  .hr-conf-facts {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .hr-conf-fact {
    padding: 0;
  }
  .hr-conf-fact + .hr-conf-fact {
    border-left: none;
    padding-top: 24px;
    border-top: 1px solid rgba(73, 39, 35, 0.1);
  }
}

/* ========================================================================
   Shared photo lightbox (see components/Lightbox.jsx) — originally built
   for the Conferences page's per-room photo galleries (was `.hr-conf-
   lightbox-*`), generalized and renamed `.hr-lightbox-*` once the Gallery
   page needed the exact same viewer for its category grids.
   ======================================================================== */
.hr-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  background-color: rgba(10, 5, 4, 0.9);
  animation: hrMenuModalFade 0.2s ease;
}
/* A flex column — not just the photo — so the thumbnail strip and counter
   added below it sit under the photo instead of being squeezed into/
   overlapping its own max-height. */
.hr-lightbox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  max-height: 90vh;
  width: 100%;
}
.hr-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
}
/* The photo + its prev/next buttons, as their own positioning context —
   `top: 50%` on the nav buttons needs to center on just the photo, not the
   taller box that now also includes the counter/thumbnail strip below it.
   `touch-action: pan-y` (set here, not on the whole lightbox) lets the
   browser's own vertical scroll/zoom gestures through while still handing
   a horizontal swipe to the touchstart/touchend handlers below. */
.hr-lightbox-frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.hr-lightbox-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
.hr-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.hr-lightbox-nav.is-prev {
  left: -64px;
}
.hr-lightbox-nav.is-next {
  right: -64px;
}
.hr-lightbox-count {
  flex: 0 0 auto;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
/* Clickable thumbnail strip — the clearest "there's more to see, and
   here's how" cue a lightbox can give, doubling as a jump-to-any control.
   Scrolls horizontally on its own if there are enough photos to overflow
   the lightbox width. */
.hr-lightbox-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 2px 6px;
}
.hr-lightbox-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hr-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hr-lightbox-thumb:hover {
  opacity: 0.85;
}
.hr-lightbox-thumb.is-active {
  opacity: 1;
  border-color: #fff;
}

@media (max-width: 760px) {
  .hr-lightbox-overlay {
    padding: 20px;
  }
  .hr-lightbox-nav.is-prev {
    left: 4px;
  }
  .hr-lightbox-nav.is-next {
    right: 4px;
  }
  .hr-lightbox-close {
    top: -40px;
  }
  .hr-lightbox-thumb {
    width: 48px;
    height: 36px;
  }
}

/* ========================================================================
   Gallery page (phase 8) — full rebuild (see the approved plan): drops
   LazyPortedPage/the ported gallery.html mirror (an Elementor "Tabs"
   widget wrapping a vendor masonry-plugin grid whose own CSS never
   actually laid photos out — see Gallery.jsx's previous comment) for the
   hr- design system, same approach as Conferences.
   ======================================================================== */
/* Sticky, same reasoning as the Menu page's category jump-nav — a guest
   browsing a long photo grid shouldn't have to scroll back to the top to
   switch categories. */
.hr-gallery-tabs {
  position: sticky;
  top: 90px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 48px;
  padding: 14px 0;
  background-color: rgba(250, 248, 247, 0.94);
  backdrop-filter: blur(6px);
}
.hr-gallery-tab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(73, 39, 35, 0.18);
  background-color: #fff;
  color: var(--uxper-color-primary, #492723);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hr-gallery-tab:hover {
  border-color: var(--uxper-color-accent, #b95c47);
}
.hr-gallery-tab.is-active {
  background-color: var(--uxper-color-accent, #b95c47);
  border-color: var(--uxper-color-accent, #b95c47);
  color: #fff;
}

.hr-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
/* A <button>, not an <a>, now that a click opens the shared Lightbox
   in-page instead of the old target="_blank" raw-image link — reset its
   default chrome before the photo-frame styling applies. */
.hr-gallery-grid-item {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hr-gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hr-gallery-grid-item:hover img {
  transform: scale(1.05);
}
.hr-gallery-empty {
  text-align: center;
  color: #857a74;
  padding: 40px 0;
}

/* ========================================================================
   Reviews page (phase 9) — full rebuild (see the approved plan): drops
   SimplePageShell/the old `.content-page`/`.checkout-section` mash-up for
   the hr- design system. The old version opened the real review list, then
   immediately followed it with a full two-column "Share Your Experience"
   form (name/email row, rating, title, body) sitting right on the page —
   visually the form outweighed the reviews above it. This version leads
   with a rating-summary strip and a proper card grid; writing a review is
   now a single secondary button that opens a modal, same overlay/Escape/
   body-scroll-lock convention as the Menu page's description modal (reuses
   its `hrMenuModalFade` keyframe).
   ======================================================================== */
.hr-reviews-hero-eyebrow {
  color: #f3c7b8;
}

/* ---------- Rating summary ---------- */
.hr-reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-reviews-summary-score {
  font-size: 56px;
  line-height: 1;
  color: var(--uxper-color-primary, #492723);
}
.hr-reviews-summary-details {
  text-align: left;
}
.hr-reviews-summary-details p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #857a74;
}
.hr-review-stars {
  color: var(--uxper-color-accent, #b95c47);
  font-size: 15px;
  letter-spacing: 0.15em;
}
.hr-review-stars .fal {
  color: #ddd;
}

/* ---------- Toolbar ---------- */
.hr-reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}
.hr-reviews-toolbar h2 {
  font-size: 28px;
  margin: 0;
}
.hr-reviews-empty {
  text-align: center;
  color: #857a74;
  padding: 30px 0 60px;
}

/* ---------- Review card grid ---------- */
.hr-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding-bottom: 20px;
}
.hr-review-card {
  position: relative;
  background-color: var(--hr-cream);
  border-radius: 10px;
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
}
.hr-review-quote {
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 26px;
  color: rgba(185, 92, 71, 0.18);
}
.hr-review-card .hr-review-stars {
  margin-bottom: 12px;
}
.hr-review-title {
  font-size: 19px;
  margin: 0 0 8px;
}
.hr-review-body {
  flex: 1;
  color: #5c4f49;
  line-height: 1.65;
  margin: 0 0 20px;
}
.hr-review-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 39, 35, 0.1);
}
.hr-review-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--uxper-color-accent, #b95c47);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.hr-review-card-footer strong {
  display: block;
  font-size: 14.5px;
}
.hr-review-date {
  display: block;
  font-size: 12.5px;
  color: #857a74;
}

/* ---------- Write-a-review modal ---------- */
.hr-review-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(31, 16, 13, 0.72);
  animation: hrMenuModalFade 0.2s ease;
}
.hr-review-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 36px 32px 32px;
}
.hr-review-modal h3 {
  margin: 0 0 20px;
  font-size: 24px;
  text-align: center;
}
.hr-review-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 16px;
  color: #857a74;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hr-review-modal-close:hover {
  background-color: rgba(73, 39, 35, 0.08);
  color: var(--hr-dark);
}
.hr-review-field-row {
  display: flex;
  gap: 16px;
}
.hr-review-field-row .hr-review-field {
  flex: 1;
  min-width: 0;
}
.hr-review-field {
  display: block;
  margin-bottom: 16px;
}
.hr-review-field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #857a74;
  margin-bottom: 6px;
}
.hr-review-field input,
.hr-review-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hr-review-field textarea {
  padding: 12px 14px;
  min-height: 100px;
  resize: vertical;
}
.hr-review-field input:focus,
.hr-review-field textarea:focus {
  outline: none;
  border-color: var(--uxper-color-primary, #492723);
  box-shadow: 0 0 0 3px rgba(73, 39, 35, 0.12);
}
.hr-review-rating-picker {
  display: flex;
  gap: 8px;
}
.hr-review-rating-picker button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #ddd;
  line-height: 1;
  padding: 2px;
}
.hr-review-rating-picker button.is-filled {
  color: var(--uxper-color-accent, #b95c47);
}
.hr-review-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hr-review-modal .hr-btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.hr-review-modal-success {
  text-align: center;
  padding: 20px 0 10px;
}
.hr-review-modal-success i {
  font-size: 40px;
  color: #4a8a4a;
  margin-bottom: 14px;
}
.hr-review-modal-success h3 {
  margin-bottom: 8px;
}
.hr-review-modal-success p {
  color: #5c4f49;
  margin: 0 0 24px;
}
.hr-review-modal-success .hr-btn {
  display: inline-flex;
  width: auto;
}

@media (max-width: 640px) {
  .hr-reviews-summary {
    flex-direction: column;
    text-align: center;
  }
  .hr-reviews-summary-details {
    text-align: center;
  }
  .hr-review-field-row {
    flex-direction: column;
    gap: 0;
  }
  .hr-review-modal {
    padding: 30px 20px 26px;
  }
}

/* ========================================================================
   About Us page (phase 10) — full rebuild (see the approved plan): drops
   LazyPortedPage/the ported about-us.html mirror and its three
   AnimatedCounter portals (1 Bedroom/2 Bedroom/Total Rooms) for the hr-
   design system. Styled as an editorial brand story — full-bleed hero,
   alternating photo/text sections, generous whitespace — after Kempinski's
   own About Us page (large serif headlines, elegant body copy, photography
   doing the talking rather than stats or sales copy).
   ======================================================================== */
.hr-about-hero-eyebrow {
  color: #f3c7b8;
}

/* ---------- Alternating photo/text section ---------- */
.hr-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hr-about-split-reverse {
  direction: rtl;
}
.hr-about-split-reverse > * {
  direction: ltr;
}
.hr-about-split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.hr-about-split-copy h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 20px;
}
.hr-about-split-copy p {
  color: #5c4f49;
  line-height: 1.75;
  margin: 0 0 18px;
}
.hr-about-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--uxper-color-primary, #492723) !important;
  margin-bottom: 22px !important;
}
/* Plain tick-free list (explicit request) — a separate class from the
   shared `.hr-amenities-list` (Conferences/Room Detail), which keeps its
   check icons; this one leans on a hairline divider between items instead
   of an icon for rhythm. */
.hr-about-amenities-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 28px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.hr-about-amenities-list li {
  font-size: 14.5px;
  color: #4a413c;
  padding: 10px 0;
  border-bottom: 1px solid rgba(73, 39, 35, 0.1);
}

/* ---------- Welcome section sign-off (sig + name + title) ---------- */
.hr-about-signoff {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(73, 39, 35, 0.12);
}
.hr-about-signoff img {
  width: 70px;
  height: auto;
  flex-shrink: 0;
}
.hr-about-signoff strong {
  display: block;
  font-size: 16px;
}
.hr-about-signoff span {
  display: block;
  font-size: 13px;
  color: #857a74;
}

.hr-about-story-section {
  background-color: var(--hr-cream);
}

/* ---------- Client profile logo strip ---------- */
.hr-about-clients-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  margin-top: 20px;
}
.hr-about-clients-strip img {
  height: 38px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.hr-about-clients-strip img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.hr-cta-band-text {
  max-width: 540px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 860px) {
  .hr-about-split,
  .hr-about-split-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .hr-about-split-media {
    order: -1;
  }
}

/* ========================================================================
   FAQs page (phase 11) — full rebuild (see the approved "page by page"
   pattern): drops LazyPortedPage/the ported faqs.html mirror for the hr-
   design system. Faqs.jsx keeps its real open/close logic, now with new
   classNames and a real <button> per question; the sidebar photo stays
   the shared PageImage component (also used by the Conferences page's
   closing photo), just restyled in a new scoped wrapper.
   ======================================================================== */
.hr-faqs-hero-eyebrow {
  color: #f3c7b8;
}

.hr-faqs-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

/* ---------- Accordion ---------- */
.hr-faq-list {
  border-top: 1px solid rgba(73, 39, 35, 0.12);
}
.hr-faq-item {
  border-bottom: 1px solid rgba(73, 39, 35, 0.12);
}
.hr-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
  transition: color 0.2s ease;
}
.hr-faq-question:hover {
  color: var(--uxper-color-accent, #b95c47);
}
.hr-faq-question i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--uxper-color-accent, #b95c47);
  transition: transform 0.3s ease;
}
.hr-faq-item.is-open .hr-faq-question {
  color: var(--uxper-color-accent, #b95c47);
}
/* A "+" rotated 45° reads as "×" (close) — one icon, no swap needed, so it
   can rotate smoothly in step with the answer's reveal instead of the two
   states just abruptly replacing each other. */
.hr-faq-item.is-open .hr-faq-question .hr-faq-icon {
  transform: rotate(45deg);
}
.hr-faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.hr-faq-item.is-open .hr-faq-answer-wrap {
  grid-template-rows: 1fr;
}
.hr-faq-answer {
  overflow: hidden;
}
.hr-faq-answer p {
  margin: 0;
  padding: 0 32px 24px 0;
  color: #5c4f49;
  line-height: 1.7;
}

/* ---------- Sidebar photo ---------- */
.hr-faqs-media-col {
  position: sticky;
  top: 110px;
}
.hr-faqs-media img {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

@media (max-width: 860px) {
  .hr-faqs-split {
    grid-template-columns: 1fr;
  }
  .hr-faqs-media-col {
    position: static;
    order: -1;
  }
  .hr-faqs-media img {
    aspect-ratio: 16 / 9;
  }
}

/* ========================================================================
   Contact Us page (phase 12) — full rebuild (see the approved "page by
   page" pattern): drops the generic ported-page render (App.jsx's
   `pages.map` loop) for the hr- design system. The original page never had
   an actual message-send form — just call/email text and a map — so one
   wasn't invented here either; `contact_phone`/`contact_email`/
   `contact_address` are pre-existing PageContent keys, now finally
   consumed (see ContactUsPage.jsx's comment).
   ======================================================================== */
.hr-contact-hero-eyebrow {
  color: #f3c7b8;
}

.hr-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.hr-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 24px;
  background-color: var(--hr-cream);
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hr-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 16, 13, 0.08);
}
.hr-contact-card i {
  font-size: 26px;
  color: var(--uxper-color-accent, #b95c47);
  margin-bottom: 6px;
}
.hr-contact-card-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #857a74;
}
.hr-contact-card-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
}

.hr-contact-map-header {
  margin-top: 0;
}
.hr-contact-map {
  border-radius: 6px;
  overflow: hidden;
}
.hr-contact-map iframe {
  width: 100%;
  height: 420px;
  display: block;
  border: none;
}

@media (max-width: 760px) {
  .hr-contact-cards {
    grid-template-columns: 1fr;
  }
  .hr-contact-map iframe {
    height: 320px;
  }
}

/* ========================================================================
   Legal/policy pages (phase 13) — Cancellation & Refund, Privacy (see
   LegalPage.jsx). Full rebuild off the generic ported-page render, same
   hr- chrome as every other page; the document body itself renders from
   one admin-editable PageContent block via RichText.jsx's markdown-lite
   parser instead of hardcoded markup.
   ======================================================================== */
.hr-legal-hero {
  min-height: 34vh;
  min-height: 34svh;
}
.hr-legal-hero-eyebrow {
  color: #f3c7b8;
}

.hr-legal-body-wrap {
  max-width: 760px;
}
.hr-legal-body h2 {
  font-size: 23px;
  margin: 44px 0 14px;
  position: relative;
  padding-bottom: 12px;
}
.hr-legal-body h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--uxper-color-accent, #b95c47);
}
.hr-legal-body h2:first-child {
  margin-top: 0;
}
.hr-legal-body p {
  color: #4a413c;
  line-height: 1.8;
  margin: 0 0 18px;
}
.hr-legal-body ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.hr-legal-body ul li {
  position: relative;
  padding-left: 22px;
  color: #4a413c;
  line-height: 1.8;
  margin-bottom: 6px;
}
.hr-legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--uxper-color-accent, #b95c47);
}

/* ========================================================================
   Health Club page (phase 14) — full rebuild (see the approved "page by
   page" pattern): drops the generic ported-page render for the hr- design
   system. Reuses `.hr-about-split` (About Us) for the About section and
   `.hr-contact-map`/`.hr-amenities-list` (Contact Us/Conferences) rather
   than rebuilding those patterns a third time.
   ======================================================================== */
.hr-health-club-hero-eyebrow {
  color: #f3c7b8;
}

/* ---------- Training & Classes ---------- */
.hr-health-club-classes-section {
  background-color: var(--hr-cream);
}
.hr-health-club-classes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hr-health-club-class-pill {
  padding: 10px 22px;
  border: 1px solid rgba(73, 39, 35, 0.2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--uxper-color-primary, #492723);
  background-color: #fff;
}

/* ---------- Our Process ---------- */
.hr-health-club-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.hr-health-club-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hr-health-club-process-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  color: rgba(185, 92, 71, 0.3);
  line-height: 1;
}
.hr-health-club-process-step span:last-child {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--uxper-color-primary, #492723);
}

/* ---------- Membership ---------- */
.hr-health-club-membership-section {
  background-color: var(--hr-cream);
}
.hr-health-club-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 56px;
}
.hr-health-club-package {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
}
.hr-health-club-package.is-recommended {
  box-shadow: 0 16px 36px rgba(31, 16, 13, 0.1);
  border: 1px solid rgba(185, 92, 71, 0.3);
}
.hr-health-club-package-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--uxper-color-accent, #b95c47);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}
.hr-health-club-package h3 {
  font-size: 22px;
  margin: 0 0 8px;
}
.hr-health-club-package-price {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--uxper-color-accent, #b95c47);
  margin-bottom: 24px;
}
.hr-health-club-package-features.hr-amenities-list {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
}

/* ---------- Rate table ---------- */
.hr-health-club-rate-table-wrap {
  overflow-x: auto;
}
.hr-health-club-rate-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.hr-health-club-rate-table th,
.hr-health-club-rate-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(73, 39, 35, 0.12);
  font-size: 14px;
}
.hr-health-club-rate-table th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #857a74;
}
.hr-health-club-rate-table td:first-child {
  font-weight: 600;
  color: var(--uxper-color-primary, #492723);
}

/* ---------- Trainers ---------- */
.hr-health-club-trainers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  max-width: 820px;
  margin: 0 auto;
}
.hr-health-club-trainer {
  text-align: center;
}
.hr-health-club-trainer-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}
.hr-health-club-trainer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-health-club-trainer-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hr-cream);
  color: #c9b8b2;
  font-size: 32px;
}
.hr-health-club-trainer h3 {
  font-size: 18px;
  margin: 0 0 2px;
}
.hr-health-club-trainer span {
  font-size: 12.5px;
  color: #857a74;
}

@media (max-width: 760px) {
  .hr-health-club-process {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .hr-health-club-packages {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Manage Booking page (ManageBookingPage.jsx) — full rebuild off
   SimplePageShell + the old checkout-page/* classes. No hero photo, like
   Checkout: a task-focused lookup tool, not a marketing page, so
   NewHeader's `forceSolid` is used the same way Checkout uses it instead
   of a banner.
   ======================================================================== */
.hr-mb-section {
  padding-top: calc(clamp(60px, 9vw, 120px) + 56px);
}
.hr-mb-inner {
  max-width: 620px;
}
.hr-mb-card {
  background-color: #fff;
  border: 1px solid rgba(31, 16, 13, 0.08);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(31, 16, 13, 0.07);
  padding: clamp(32px, 5vw, 52px);
}
.hr-mb-title {
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 14px;
  color: var(--uxper-color-primary, #492723);
}
.hr-mb-subtitle {
  color: #6a5f59;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px;
}

.hr-mb-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hr-mb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hr-mb-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hr-mb-field span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #857a74;
}
.hr-mb-field input {
  border: 1px solid rgba(31, 16, 13, 0.16);
  border-radius: 6px;
  padding: 13px 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hr-dark);
  background-color: #fff;
  transition: border-color 0.2s ease;
}
.hr-mb-field input:focus {
  outline: none;
  border-color: var(--uxper-color-accent, #b95c47);
}
.hr-mb-submit {
  align-self: flex-start;
}
.hr-mb-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.hr-mb-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a3372a;
  font-size: 13.5px;
  margin: 0;
}

/* ---------- Found-booking summary ---------- */
.hr-mb-summary {
  background-color: var(--hr-cream);
  border-radius: 8px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.hr-mb-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.hr-mb-summary-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #857a74;
  flex: 0 0 auto;
}
.hr-mb-summary-value {
  font-size: 15px;
  color: var(--hr-dark);
  text-align: right;
}
.hr-mb-summary-total {
  border-top: 1px solid rgba(31, 16, 13, 0.1);
  padding-top: 14px;
}
.hr-mb-total-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--uxper-color-accent, #b95c47);
}

.hr-mb-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hr-mb-status-positive {
  background-color: var(--hr-dark);
  color: #fff;
}
.hr-mb-status-pending {
  background-color: #f3e3d2;
  color: #8a5a22;
}
.hr-mb-status-muted {
  background-color: #ece7e5;
  color: #857a74;
}
.hr-mb-status-negative {
  background-color: #f3dcd8;
  color: #a3372a;
}

.hr-mb-note {
  color: #6a5f59;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.hr-mb-note a {
  color: var(--uxper-color-accent, #b95c47);
}

.hr-mb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
/* Neutral/secondary and destructive actions get their own flavors rather
   than reusing .hr-btn-outline (built for dark hero overlays — white
   border/text that would vanish against this page's plain white card). */
.hr-mb-btn-ghost {
  background-color: transparent;
  color: var(--hr-dark);
  border: 1px solid rgba(31, 16, 13, 0.2);
}
.hr-mb-btn-ghost:hover {
  border-color: var(--hr-dark);
  color: var(--hr-dark);
}
.hr-mb-btn-danger {
  background-color: #a3372a;
  color: #fff;
}
.hr-mb-btn-danger:hover {
  background-color: #8a2e22;
  color: #fff;
}

.hr-mb-panel {
  background-color: var(--hr-cream);
  border-radius: 8px;
  padding: 24px 26px;
  margin-bottom: 20px;
}
.hr-mb-panel h3 {
  margin: 0 0 14px;
  font-size: 19px;
  color: var(--uxper-color-primary, #492723);
}
.hr-mb-panel p {
  color: #6a5f59;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.hr-mb-panel-danger {
  background-color: #fbf1ef;
}

.hr-mb-lookup-another {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #857a74;
  cursor: pointer;
}
.hr-mb-lookup-another:hover {
  color: var(--hr-dark);
}

@media (max-width: 560px) {
  .hr-mb-field-row {
    grid-template-columns: 1fr;
  }
  .hr-mb-card {
    padding: 28px 22px;
  }
}