/* ROYAL COURT — OUR HOMES
   Minimal. Name, photograph, price. Everything else waits until asked.
   Each house owns the whole surface it occupies: the ground changes hue. */

:root {
  --paper: #f1eadf;
  --ink: #211f1a;
  --ink-2: #4b443a;
  --ink-3: #766c5e;
  --hair: #d4c7b5;
  --flame: #c8552f;
  --bumper: clamp(18px, 5vw, 96px);
  --bar-h: 58px;

  /* the three grounds — macro hue, not a stripe of accent colour */
  --g-m51: #f1eadf;   /* THE HOTEL · the house paper */
  --g-m29: #cdd0bb;   /* THE SUITE HOUSE · garden olive */
  --g-v38: #e4cfb5;   /* THE APARTMENT · wood */
  --d-m51: #7d2f24;
  --d-m29: #4a5233;
  --d-v38: #7d5a3e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* author display rules must not outrank it */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 14px/1.5 Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, not hidden: sticky keeps working */ }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; }
.stamp { font: 9px/1.1 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }

/* ── shell ─────────────────────────────────────────────────────────── */
.rc-bar { position: sticky; top: 0; z-index: 60; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: var(--bar-h); padding: 0 clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--ground, var(--paper)) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .6s ease; }
.bar-brand { font: 400 17px/1 Georgia, serif; white-space: nowrap; }
.bar-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.bar-nav a { font: 9px/1 Arial, sans-serif; letter-spacing: .18em; padding: 6px 0;
  border-bottom: 1px solid transparent; white-space: nowrap; }
.bar-nav a:hover, .bar-nav a[aria-current="page"] { border-color: currentColor; }
.bar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  padding: 0 16px; border: 1px solid currentColor; border-radius: 999px;
  font: 9px/1 Arial, sans-serif; letter-spacing: .18em; white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease; }
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-book { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-book:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.mobile-actions, .bar-menu { display: none; }
.menu-book, .menu-contact { display: none; }
section[id], article[id] { scroll-margin-top: 76px; }
.footer-pending { line-height: 1.5 !important; letter-spacing: .05em !important; }
.dates, .sheet { overflow-y: auto; max-height: 100dvh; }
.dates-close, .sheet-close { min-height: 44px; padding: 10px; }
.mk-body { visibility: hidden; }
.mk.is-open .mk-body { visibility: visible; }

/* ── OUR HOMES ─────────────────────────────────────────────────────── */
.homes { padding: clamp(26px, 4vh, 54px) var(--bumper) clamp(40px, 7vh, 90px); }
.homes h1 { margin: 0; font: 400 clamp(48px, 6.4vw, 104px)/.88 Georgia, serif; letter-spacing: -.05em; }
.homes .lede { max-width: 30ch; margin: 16px 0 0; font: 17px/1.5 Georgia, serif; color: var(--ink-2); }

/* the frame is the drawing's own proportion, so a label can never drift off
   the building it points at */
.map { position: relative; aspect-ratio: 737 / 377;
  width: min(100%, calc(70svh * 737 / 377)); margin: clamp(10px, 2vh, 26px) auto 0; }
.map picture, .map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


/* the label does the naming; the building only has to be findable */
/* The pin IS the card. Closed it names the house; open it says what the house
   is and offers the way in. Nothing about the three houses needs a row of its
   own further down the page. */
/* The head is anchored, so opening a card grows it DOWN and OUT: the title
   never moves out from under the cursor that just touched it. */
.mk { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%);
  margin-top: calc(-1 * (var(--head-h) + 18px));
  width: max-content; min-width: 0; max-width: min(320px, 78vw); border-radius: 20px;
  background: rgba(255,253,249,.95); box-shadow: 0 6px 22px rgba(70,52,34,.18);
  backdrop-filter: blur(6px);
  transition: min-width .4s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.mk.is-open { min-width: min(300px, 78vw); }
.mk.is-open { box-shadow: 0 16px 44px rgba(70,52,34,.3); z-index: 5; }
.mk { --head-h: 46px; }
.mk-head { display: grid; grid-auto-flow: column; justify-content: start; align-items: center;
  gap: 9px; padding: 9px 15px 9px 12px; white-space: nowrap; width: 100%; min-height: var(--head-h); }
.mk-head i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.mk-head span { display: grid; gap: 2px; text-align: left; }
.mk b { font: 400 16px/1 Georgia, serif; letter-spacing: -.02em; }
.mk em { font: 8px/1 Arial, sans-serif; letter-spacing: .16em; font-style: normal; color: var(--ink-3); }
.mk::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px;
  background: linear-gradient(var(--dot), transparent); transition: opacity .25s ease; }
.mk.is-open::after { opacity: 0; }
/* the body hangs below the head instead of sitting inside it, so a closed pin
   is exactly as wide as its title and the card grows down, never up */
.mk-body { position: absolute; top: 100%; left: 0; width: 100%;
  display: grid; gap: 12px; max-height: 0; overflow: hidden; padding: 0 15px;
  background: rgba(255,253,249,.95); border-radius: 0 0 20px 20px;
  backdrop-filter: blur(6px);
  transition: max-height .4s cubic-bezier(.2,.8,.3,1), padding .4s ease; }
.mk.is-open .mk-body { max-height: 240px; padding: 2px 15px 14px;
  box-shadow: 0 18px 40px rgba(70,52,34,.22); }
.mk.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mk-body p { margin: 0; font: 14px/1.45 Georgia, serif; color: var(--ink-2); text-align: left; }
.mk-go { justify-self: start; display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 15px; border-radius: 999px; background: var(--dot); color: #fffdf9;
  font: 8px/1 Arial, sans-serif; letter-spacing: .17em; }
.mk-go:hover { background: var(--ink); }

.mk-termini { position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, 42px); display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(255,253,249,.92);
  box-shadow: 0 5px 18px rgba(70,52,34,.16);
  font: 8px/1 Arial, sans-serif; letter-spacing: .18em; color: var(--ink-2); white-space: nowrap; }
.mk-termini i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

.compass { position: absolute; right: 3%; top: 6%; display: grid; justify-items: center; gap: 4px;
  font: 8px/1 Arial, sans-serif; letter-spacing: .2em; color: var(--ink-3); opacity: .75; }
.compass svg { width: 20px; height: 28px; transform: rotate(-50deg); }
.map-note { margin: 16px 0 0; text-align: center;
  font: 8px/1.5 Arial, sans-serif; letter-spacing: .16em; color: var(--ink-3); }

/* three homes, stated once, under the map */
.homes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(30px, 5vh, 64px); }
.homes-row a { display: grid; gap: 8px; align-content: start; padding-top: 18px;
  border-top: 1px solid var(--hair); }
.homes-row i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.homes-row h2 { margin: 2px 0 0; font: 400 clamp(22px, 2vw, 30px)/1 Georgia, serif; letter-spacing: -.03em; }
.homes-row p { margin: 0; font: 8px/1.6 Arial, sans-serif; letter-spacing: .16em; color: var(--ink-3); }
.homes-row span { font: 14px/1.5 Georgia, serif; color: var(--ink-2); max-width: 30ch; }

/* ── A HOUSE ───────────────────────────────────────────────────────── */
.house { --ground: var(--g-m51); --deep: var(--d-m51);
  background: var(--ground); padding: clamp(56px, 9vh, 120px) var(--bumper) clamp(56px, 9vh, 120px);
  transition: background .6s ease; }
.house[data-house="m29"] { --ground: var(--g-m29); --deep: var(--d-m29); }
.house[data-house="v38"] { --ground: var(--g-v38); --deep: var(--d-v38); }

.house-head { margin-bottom: clamp(44px, 9vh, 120px); }
.house-head h2 { margin: 0; font: 400 clamp(38px, 5.2vw, 82px)/.92 Georgia, serif; letter-spacing: -.045em; }
.house-head p { margin: 18px 0 0; max-width: 40ch; font: 16px/1.5 Georgia, serif; color: var(--ink-2); }
.house-head .addr { display: block; margin-bottom: 14px; font: 9px/1 Arial, sans-serif;
  letter-spacing: .2em; color: var(--deep); }

/* ── ROOMS · floating objects ──────────────────────────────────────
   Small, spaced, drifting down the page. Name, photograph, price.
   The whole object is the control: touching it tells you more. */
/* the trailing row keeps the rhythm without leaving a hole before the next house */
.rooms { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 32px);
  margin-bottom: calc(-1 * var(--drift, clamp(42px, 7vh, 96px))); }
.room { grid-column: 2 / 6; margin-bottom: var(--drift, clamp(42px, 7vh, 96px)); }
.room:nth-child(2) { grid-column: 8 / 12; margin-top: clamp(-40px, -6vh, 0px); }
.room:nth-child(3) { grid-column: 4 / 8; }
.room:nth-child(4) { grid-column: 9 / 13; margin-top: clamp(-60px, -9vh, 0px); }
.room:nth-child(5) { grid-column: 2 / 5; }


.room-hit { display: grid; gap: 14px; width: 100%; }
.room-shot { display: block; }

.room-name { margin: 0; font: 400 clamp(24px, 2.4vw, 38px)/1 Georgia, serif; letter-spacing: -.035em; }
.room-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.room-hit:hover .room-shot { transform: translateY(-5px); }
.room-shot img { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  filter: saturate(.86) contrast(1.03); }
.room-shot img.on { opacity: 1; }
.room-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; min-height: 30px; }
.room-price { margin: 0; font: 15px/1.3 Georgia, serif; color: var(--ink-2); }
.room-cat { font: 8px/1.3 Arial, sans-serif; letter-spacing: .16em; color: var(--ink-3); }

.g-btn { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,253,249,.82); font: 13px/1 Georgia, serif; opacity: 0;
  transition: opacity .25s ease; }
.room-shot:hover .g-btn, .g-btn:focus-visible { opacity: 1; }
.g-prev { left: 9px; } .g-next { right: 9px; }
.g-btn[disabled] { opacity: 0 !important; }
.g-ticks { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; gap: 3px; }
.g-ticks i { width: 12px; height: 2px; background: rgba(255,253,249,.5); }
.g-ticks i.on { background: #fffdf9; }

/* ── more, only when asked ─────────────────────────────────────────── */
/* The detail already owns its space before anyone clicks: it is there, and it
   is invisible. Opening fills room that was always allotted, so no other object
   on the page can move — on any screen size. */
.room-more { min-height: var(--more-h, 112px); margin-top: 16px; }
.more-in { opacity: 0; transform: translateY(10px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
.room.is-open .more-in { opacity: 1; transform: none; }
.room-more p { margin: 0 0 13px; font: 15px/1.55 Georgia, serif; color: var(--ink-2); }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.room-more dl { display: flex; gap: 4px 24px; margin: 0; flex-wrap: wrap; }
.room-more dl div { display: grid; gap: 2px; }
.room-more dt { font: 8px/1 Arial, sans-serif; letter-spacing: .15em; color: var(--ink-3); }
.room-more dd { margin: 0; font: 14px/1.3 Georgia, serif; }
.room-more .go { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 18px; border-radius: 999px; background: var(--deep); color: #fffdf9;
  font: 9px/1 Arial, sans-serif; letter-spacing: .18em; white-space: nowrap; }
.room-more .go:hover { background: var(--ink); }
body.shopping .room-more .go { visibility: hidden; pointer-events: none; }

/* unverified until Royal Court confirms it */
.footnote { margin: 0; padding: 26px var(--bumper) 40px; background: var(--paper);
  font: 8px/1.7 Arial, sans-serif; letter-spacing: .14em; color: var(--ink-3); max-width: 90ch; }

/* ── mobile ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --bumper: 20px; }
  .bar-nav, .bar-actions .pill-contact, .bar-actions .pill-book { display: none; }
  .bar-menu { display: inline-flex; }
  .rc-bar { grid-template-columns: 1fr auto; gap: 10px; padding: 0 16px; }
  .mobile-actions { position: fixed; z-index: 60; inset: auto 0 0; display: grid;
    grid-template-columns: 1fr 1.3fr; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ground, var(--paper)) 94%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .mobile-actions .pill { min-height: 46px; }
  body { padding-bottom: 74px; }

  .homes h1 { font-size: clamp(46px, 15vw, 70px); }
  /* phones get their own camera: the three houses stack instead of stringing
     out across a strip 200px tall */
  .map { margin-inline: calc(var(--bumper) * -1); aspect-ratio: 333 / 481; width: 100%; }
  .homes .map { width: calc(100% + var(--bumper) * 2); }
  .mk { left: var(--mx); top: var(--my); }
  .mk:hover, .mk:focus-visible { transform: translateX(-50%); }
  .mk-termini { left: var(--mx); top: var(--my); transform: translate(-50%, 30px); }
  .mk-head { padding: 7px 12px 7px 9px; gap: 7px; }
  .mk b { font-size: 13px; } .mk em { font-size: 7px; }
  .mk-head i { width: 9px; height: 9px; }
  /* an opened card centres itself in the map rather than hanging off the edge;
     it still carries the address, so the anchor is never in doubt */
  .mk.is-open { left: 50%; max-width: 88%; min-width: min(300px, 84vw); }
  .mk.is-open::after { display: none; }
  .mk-body p { font-size: 13px; }
  .homes-row { grid-template-columns: 1fr; gap: 26px; }

  .house-head p { font-size: 15px; }
  .rooms { display: block; }
  /* the falling column: alternating inset, never full width twice running */
  .room { width: 82%; margin: 0 0 clamp(52px, 9vh, 90px); }
  .room:nth-child(even) { margin-left: 18%; }
  .room:nth-child(3n) { width: 72%; margin-left: 10%; }
  .room-more { --more-h: 196px; }
  .g-btn { opacity: .9; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHOPPING — the same page, in the context of dates.
   Browsing never becomes a search-results page: the houses, the order and
   the spacing hold; only what each object says about itself changes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the dates sheet ── */
.dates { position: fixed; z-index: 80; inset: 0; display: grid; align-items: start;
  background: rgba(33,31,26,.32); backdrop-filter: blur(3px); }
.dates-in { position: relative; background: var(--paper); padding: clamp(28px, 5vh, 54px) var(--bumper) clamp(26px, 4vh, 44px);
  box-shadow: 0 20px 60px rgba(70,52,34,.22); animation: drop .45s cubic-bezier(.2,.8,.3,1); }
@keyframes drop { from { transform: translateY(-100%); } }
.dates-title { margin: 0 0 22px; font: 400 clamp(26px, 3vw, 44px)/1 Georgia, serif; letter-spacing: -.035em; }
.dates-row { display: flex; align-items: flex-end; gap: clamp(14px, 2.5vw, 38px); flex-wrap: wrap; }
.dates-row label { display: grid; gap: 7px; font: 8px/1 Arial, sans-serif; letter-spacing: .18em; color: var(--ink-3); }
.dates-row input, .dates-row select { border: 0; border-bottom: 1px solid var(--ink); background: none;
  padding: 6px 2px; font: 400 18px/1.2 Georgia, serif; color: var(--ink); min-width: 140px; }
.dates-row .pill { min-height: 42px; }
.dates-close { position: absolute; right: var(--bumper); top: clamp(22px, 3vh, 34px);
  font: 8px/1 Arial, sans-serif; letter-spacing: .18em; color: var(--ink-3); }

/* ── the criteria, once they exist: compact, always visible, always editable ── */
.slot { display: flex; align-items: center; min-width: 0; }
.crit { display: none; align-items: center; gap: 9px; padding: 6px 8px 6px 13px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px;
  font: 8px/1 Arial, sans-serif; letter-spacing: .16em; white-space: nowrap; }
.slot .crit { display: inline-flex; }

.crit b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.crit em { font-style: normal; color: var(--ink-3); }
.crit button { padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 7px/1 Arial, sans-serif; letter-spacing: .16em; }
/* the way back out of shopping, always present once dates exist */
.crit .crit-off { background: none; color: var(--ink-3); padding: 4px 6px; font-size: 11px; }
.crit .crit-off:hover { color: var(--ink); }
/* the selection takes the same place: no second bar, no second question */
.crit-pick { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.crit-pick b, .crit-pick em { color: var(--paper); }
.crit-pick em { opacity: .6; }
.crit-pick .crit-off { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.crit-pick .crit-go { background: var(--paper); color: var(--ink); padding: 7px 14px; font-size: 8px; }
.crit-pick .crit-go:hover { background: var(--flame); color: #fff; }

/* ── what a room says when dates exist ── */
.room-state { font: 8px/1.3 Arial, sans-serif; letter-spacing: .16em; }
body.shopping .room-cat { display: none; }
.room-pick { display: inline-flex; align-items: center; min-height: 30px; padding: 0 15px;
  border: 1px solid currentColor; border-radius: 999px; font: 8px/1 Arial, sans-serif;
  letter-spacing: .17em; transition: background .25s ease, color .25s ease; }
.room-pick:hover { background: var(--deep); color: #fffdf9; border-color: var(--deep); }
.room.is-picked .room-pick { background: var(--deep); color: #fffdf9; border-color: var(--deep); }
.room.is-picked .room-shot { outline: 2px solid var(--deep); outline-offset: 6px; }

/* Unavailable rooms stay in the composition and stay inspectable. Opacity is
   never the only signal: the line says so, and the control is plainly gone. */
.room.is-gone .room-shot img { filter: brightness(.42) saturate(.72); }
.room.is-gone .room-name, .room.is-gone .room-price { opacity: .5; }
.room.is-gone .room-state { color: var(--ink-3); }

/* ── the selection, once made ── */
.picked { position: fixed; z-index: 70; inset: auto 0 0; background: var(--ink); color: var(--paper);
  animation: rise .45s cubic-bezier(.2,.8,.3,1); }
@keyframes rise { from { transform: translateY(100%); } }
.picked-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; align-items: center;
  gap: clamp(12px, 2.4vw, 34px); padding: 14px var(--bumper); }
.picked-what b { display: block; font: 400 19px/1.1 Georgia, serif; }
.picked-what span, .picked-when span { font: 8px/1.5 Arial, sans-serif; letter-spacing: .16em;
  color: color-mix(in srgb, var(--paper) 62%, transparent); }
.picked-when { display: grid; gap: 3px; }
.picked-when b { font: 400 19px/1.1 Georgia, serif; }
.picked-go { display: flex; align-items: center; justify-content: flex-end; }
.picked-drop { font: 8px/1 Arial, sans-serif; letter-spacing: .16em;
  color: color-mix(in srgb, var(--paper) 62%, transparent); }
.picked-drop:hover { color: var(--paper); }
.picked .pill-book { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.picked .pill-book:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
body.has-picked { padding-bottom: 84px; }

@media (max-width: 860px) {
  .dates-row { gap: 14px; }
  .dates-row label { flex: 1 1 42%; }
  .dates-row input, .dates-row select { min-width: 0; width: 100%; }
  .dates-row .pill { flex: 1 1 100%; min-height: 46px; }
  /* on a phone the one control lives in the thumb bar, never in the header */
  .rc-bar .slot { display: none; }
  .mobile-actions { grid-template-columns: auto minmax(0, 1fr); }
  .mobile-actions .slot { justify-content: stretch; }
  .mobile-actions .slot > * { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .mobile-actions .pill-book { min-height: 46px; }
  .mobile-actions .crit { min-height: 46px; border-radius: 999px; }
  .mobile-actions .crit em { display: none; }
  .mobile-actions .crit b { flex: 1 1 auto; min-width: 0; }
  /* the phone stacks it: what, then when, then one full-width action */
  /* a column, not a grid: no track can be widened by its content, so the bar
     can never be wider than the phone */
  .picked-in { display: flex; flex-direction: column; align-items: stretch; gap: 9px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .picked-what { position: relative; padding-right: 62px; min-width: 0; }
  .picked-what b, .picked-what span { display: block; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .picked-what b { font-size: 17px; }
  .picked-when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .picked-drop { position: absolute; right: 16px; top: 13px; }
  .picked-go { display: block; }
  .picked .pill-book { width: 100%; min-height: 46px; }
  body.has-picked .mobile-actions { display: none; }
  body.has-picked { padding-bottom: 112px; }
  .crit { font-size: 7px; padding: 5px 6px 5px 10px; }
}

/* Keep the existing navigation usable when the booking context widens. */
@media (max-width: 1180px) and (min-width: 861px) {
  .rc-bar { grid-template-columns: 1fr auto; }
  .bar-nav { display: none; }
  .bar-menu { display: inline-flex; }
}
@media (max-width: 1180px) {
  .bar-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 16px 24px 24px; background: var(--paper);
    box-shadow: 0 16px 24px #211f1a18; }
  .bar-nav.is-open a { padding: 17px 0; font-size: 11px; }
  .bar-nav.is-open .menu-book, .bar-nav.is-open .menu-contact { display: block; text-align: left;
    padding: 17px 0; font: 11px/1 Arial, sans-serif; letter-spacing: .18em; }
  .bar-nav.is-open .menu-book { border-top: 1px solid var(--hair); margin-top: 8px; }
}
@media (max-width: 860px) {
  .room-foot { flex-wrap: wrap; gap: 8px; }
  .crit button, .g-btn { min-width: 44px; min-height: 44px; }
  .mobile-actions:has(.crit-pick) { grid-template-columns: 1fr; }
  .mobile-actions:has(.crit-pick) > .pill-contact { display: none; }
  body:has(.crit-pick) .bar-actions .pill-contact { display: inline-flex; }
  .mobile-actions .crit-pick { flex-wrap: wrap; border-radius: 18px; gap: 4px 8px; }
  .mobile-actions .crit-pick em { display: block; flex-basis: 100%; order: 4; text-align: center; padding-bottom: 5px; }
  .dates-in, .sheet-in { padding-top: 65px; }
}

/* Give selected dates and room actions room to breathe without changing the composition. */
body.shopping .room-foot { gap: 14px 20px; padding-top: 16px; align-items: center; }
body.shopping .room-pick { min-height: 44px; padding-inline: 20px; font-size: 9px; }
body.shopping .room-state { line-height: 1.6; }
@media (max-width: 860px) {
  body.home { padding-bottom: 0; }
  body.shopping { padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
  body.shopping .mobile-actions { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  body.shopping .mobile-actions > .pill-contact { display: none; }
  body.shopping .mobile-actions .crit:not(.crit-pick) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px 10px; width: 100%; border-radius: 16px; padding: 12px 10px 12px 16px; }
  body.shopping .mobile-actions .crit:not(.crit-pick) b { grid-column: 1; grid-row: 1;
    font-size: 11px; line-height: 1.5; letter-spacing: .05em; white-space: normal; }
  body.shopping .mobile-actions .crit:not(.crit-pick) em { display: block; grid-column: 1; grid-row: 2;
    font-size: 8px; line-height: 1.5; letter-spacing: .1em; }
  body.shopping .mobile-actions .crit:not(.crit-pick) [data-edit] { grid-column: 2; grid-row: 1 / 3; font-size: 9px; }
  body.shopping .mobile-actions .crit:not(.crit-pick) [data-exit] { grid-column: 3; grid-row: 1 / 3; font-size: 18px; }
  body.shopping .room-foot { align-items: flex-start; }
  body.shopping .room-price { line-height: 1.5; }
}