/* bookbask — venue detail.
   Assumes css/bookbask.css and css/home.css (nav + footer) are loaded.
   Reusing .search-crumbs from css/search.css is deliberately NOT done: this
   page defines its own so it does not depend on a sibling page's stylesheet.

   Layout: one full-width column (owner request, 2026-08-14; the earlier
   side booking card is gone — the Availability section is the booking
   surface). Photos on top, a pinned section nav under them, then
   Overview → Times → Availability → Rules → featured reviews → FAQ →
   Reviews, and the related venues underneath. */

/* No inline padding: every block inside carries its own .bb-column, the hero
   included (it is wrapped in one), so the gutter is applied once, there. */
.venue-page { padding: 18px 0 80px; }

.search-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--bb-w-medium) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-crumbs a { color: var(--bb-ink-soft); }

/* ---------- title block ----------
   Name on paper, above the photographs. The 2026-08-25 export moved it off
   the picture: a venue name is the one line a traveler reads to decide, and
   on a photograph it competes with whatever the photograph is doing. */

.venue-title { padding-block: 4px 14px; }

.venue-title__marks {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
/* The place, with the rust dot that means "specifically here". */
.venue-title__where {
  display: flex;
  align-items: center;
  gap: 7px;
  font: var(--bb-w-semibold) 12px/1.4 var(--bb-font);
  color: var(--bb-ink-mid);
}
.venue-title__where::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bb-urgency);
}

.venue-h1 {
  margin: 0 0 14px;
  font: var(--bb-w-semibold) clamp(30px, 3.5vw, 40px)/1.08 var(--bb-font);
  letter-spacing: -1.4px;
  color: var(--bb-ink);
  text-wrap: balance;
}

/* ---------- the scorecard ----------
   Score, verdict and dots, then the aspect subscores, then the review count
   and the rank pushed to the far end. One strip on the card surface: it is a
   single reading of the venue, not four separate facts. */

.venue-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 9px 18px;
}

.venue-score__lead { display: flex; align-items: center; gap: 9px; }
.venue-score__n {
  font: var(--bb-w-semibold) 26px/1 var(--bb-font);
  letter-spacing: -1px;
  color: var(--bb-trust);
  font-variant-numeric: tabular-nums;
}
.venue-score__stack { display: flex; flex-direction: column; gap: 3px; }
.venue-score__word {
  font: var(--bb-w-semibold) 12px/1 var(--bb-font);
  color: var(--bb-ink);
}
.venue-score__rule { width: 1px; align-self: stretch; background: var(--bb-hairline); }

/* One aspect: "Therapists 4.9". Label soft, number ink — the label is ours,
   the number is the travellers'. */
.venue-score__aspect {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font: var(--bb-w-regular) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-mid);
  white-space: nowrap;
}
.venue-score__aspect b {
  font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
}

.venue-score__end {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: var(--bb-w-regular) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-mid);
  white-space: nowrap;
}
.venue-score__reviews {
  font-weight: var(--bb-w-semibold);
  color: var(--bb-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- photo mosaic ----------
   2.05fr / 1fr over two rows at a fixed 560px: one tall frame carrying the
   photograph that matters and two stacked beside it. Fixed rather than a
   ratio so the block below always starts at the same place. */

.venue-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  height: 560px;
}
.venue-mosaic:empty { display: none; }

/* Fewer photographs, fewer cells — never an empty tinted rectangle where a
   second or third frame would have gone. */
.venue-mosaic--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
.venue-mosaic--2 { grid-template-rows: 1fr; }
.venue-mosaic--1 .venue-photo:first-child,
.venue-mosaic--2 .venue-photo:first-child { grid-row: auto; }

.venue-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-r-card);
  background: var(--bb-tint-blue);
  background-size: cover;
  background-position: center;
}
.venue-photo:first-child { grid-row: span 2; }

/* Scarcity on the main frame. Solid rust — this is the one place the system
   lets urgency be a fill rather than plain text, because on a photograph
   coloured text has nothing to hold it. */
.venue-photo__heat {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bb-urgency);
  color: var(--bb-on-navy-ink);
  border-radius: var(--bb-r-chip);
  padding: 6px 13px;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
}

/* The way into the rest of the gallery, on the lower right frame. */
.venue-photo__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--bb-r-chip);
  padding: 8px 14px;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-primary);
  box-shadow: 0 2px 10px rgba(28, 26, 23, 0.18);
  cursor: pointer;
  white-space: nowrap;
}


/* ---------- section nav ----------
   A single row of plain text labels over one continuous page — no pills, no
   boxes, no fill. The active item carries a short underline. Pins to the top
   once the photos scroll past (the site header is static and has already
   scrolled away), and every section's scroll-margin clears the pinned bar. */

/* The bar spans the page; the row of labels inside it is the column. Without
   that split the sticky rule paints its background only as wide as the column
   and the page shows through on either side once it pins. */
.venue-nav {
  position: sticky;
  top: 0;
  margin-top: 26px;
  z-index: 5;
  background: var(--bb-page);
  border-bottom: 1px solid var(--bb-hairline);
}
.venue-nav__in {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Save and Write a review, pushed to the far end of the bar. */
.venue-nav__acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The heart mounts here rather than onto a photograph, so it drops the
   absolute placement .bb-save carries by default. */
.venue-nav__acts .bb-save {
  position: static;
  border-color: transparent;
  background: transparent;
}

.venue-nav a[data-sec] {
  position: relative;
  display: inline-block;
  padding: 17px 0 15px;
  font: var(--bb-w-semibold) 12.5px/1.2 var(--bb-font);
  color: var(--bb-ink);
  text-decoration: none;
}
.venue-nav a[data-sec]:hover { color: var(--bb-primary); text-decoration: none; }
.venue-nav a[data-sec]:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* The export marks the active tab with a full-width navy rule under it, not a
   26px stub under a grey label — the tab is where you are, so it reads at the
   same weight as the thing it points at. */
.venue-nav a[data-sec][aria-current] {
  color: var(--bb-primary);
  font-weight: var(--bb-w-semibold);
  box-shadow: inset 0 -2px 0 var(--bb-primary);
}

/* ---------- overview panels ----------
   Two cards under the blurb, from the reference. They are what stop the
   reading column being a pair of table rows: what the venue sells, and how
   being here works. */
.venue-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.venue-panel {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: 9px;
  padding: 17px 20px 18px;
}
.venue-panel__h {
  font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
  margin-bottom: 11px;
}
.venue-panel__body { display: flex; flex-direction: column; gap: 9px; }

.venue-panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: var(--bb-w-regular) 12px/1.5 var(--bb-font);
  color: var(--bb-ink);
}
.venue-panel__row + .venue-panel__row {
  padding-top: 9px;
  border-top: 1px solid var(--bb-hairline);
}
.venue-panel__svc { min-width: 0; }
.venue-panel__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.venue-panel__mins { color: var(--bb-ink-soft); font-size: 11px; }
.venue-panel__price b { font-weight: var(--bb-w-semibold); }

.venue-panel__note {
  position: relative;
  padding-left: 14px;
  font: var(--bb-w-regular) 12px/1.55 var(--bb-font);
  color: var(--bb-ink);
}
.venue-panel__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bb-trust);
}

/* ---------- the split ----------
   Reading column and booking column. 352px is the reference's card width; the
   left column takes what is left and never less than zero, so a wide table
   inside it cannot push the card off the row. */
.venue-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 44px;
  align-items: start;
}
.venue-split__main { min-width: 0; }

/* Pinned below the section nav, so the price and the CTA are on screen for
   the whole length of the reading column. */
.venue-book {
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Same top as the first section beside it, so the card and the reading
     column start on one line. */
  margin-top: 30px;
}

.venue-book__card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 4px 18px rgba(28, 26, 23, 0.06);
}

.venue-book__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.venue-book__from,
.venue-book__unit { font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.venue-book__amt {
  font: var(--bb-w-semibold) 26px/1.1 var(--bb-font);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--bb-ink);
}
.venue-book__fx {
  flex: 1 0 100%;
  font: var(--bb-w-regular) 12px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
}

.venue-book__cta { width: 100%; padding: 15px 0; font-size: 14.5px; }

/* Scarcity, when it is real: plain rust text under the button, never a badge
   and never a countdown. */
.venue-book__urgency {
  margin: 10px 0 0;
  text-align: center;
  font: var(--bb-w-semibold) 12px/1.4 var(--bb-font);
  color: var(--bb-urgency);
}

/* What the traveler is agreeing to, in the order they worry about it. */
.venue-book__policies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.venue-book__policy {
  display: flex;
  gap: 10px;
  font: var(--bb-w-regular) 12px/1.5 var(--bb-font);
  color: var(--bb-ink);
}
.venue-book__policy b { font-weight: var(--bb-w-semibold); }
/* A jade tick, drawn as the character rather than as an outlined shape. The
   export opens every reassurance line with one, and the doc's "pure geometry,
   no icon fonts" rule is about pictograms — a ✓ inside a sentence is the same
   mark the ✓ Verified pill already carries. The three variants that used to
   distinguish circle / square / dashed are gone with it: they were drawing a
   distinction the sentences beside them already make. */
.venue-book__mark {
  flex: none;
  color: var(--bb-trust-ink);
  font: var(--bb-w-semibold) 13px/1.35 var(--bb-font);
}
.venue-book__mark::before { content: "\2713"; }

.venue-book__facts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-hairline);
  font: var(--bb-w-regular) 12px/1.45 var(--bb-font);
  color: var(--bb-ink);
}
.venue-book__fact { display: flex; align-items: center; gap: 9px; }
.venue-book__fact::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--bb-ink-soft);
}
.venue-book__fact.is-live { color: var(--bb-ink); }
.venue-book__fact.is-live::before { background: var(--bb-trust); border-color: var(--bb-trust); }
.venue-book__fact.is-soft { color: var(--bb-ink-soft); }

/* A stand-in for a policy the schema cannot state yet. Dashed, quiet, and
   gated to localhost in js/venue.js — a traveler is never shown a policy
   nobody has written. */
.venue-book__stub {
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px dashed var(--bb-hairline);
  border-radius: var(--bb-r-field);
  font: var(--bb-w-regular) 11px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* Sections inside the split own their own rhythm; the first one does not need
   a top margin because the column already starts at the nav. */
.venue-split__main > .venue-sec:first-child { margin-top: 30px; }

@media (max-width: 980px) {
  .venue-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The card stops being a rail and becomes a block above the reading column:
     on a phone the price and the CTA belong near the top, not after the FAQ. */
  .venue-book { position: static; order: -1; margin-top: 30px; }
  .venue-split__main > .venue-sec:first-child { margin-top: 36px; }
}

.venue-sec {
  margin-top: 36px;
  scroll-margin-top: 58px;
}
.venue-sec .bb-sub { margin-bottom: 14px; }

/* A section head with an action on the right: heading and count on the
   left, the section's own control on the right (Reviews: "Write a review").
   Top-aligned so the button sits beside the heading, not beside the count. */
.venue-sec__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.venue-sec__lead { min-width: 0; }
.venue-sec__acts { flex: none; padding-top: 2px; }

.venue-blurb { margin: 14px 0 6px; }

.venue-facts { max-width: 560px; margin-top: 6px; }
.venue-facts .bb-list__item {
  display: flex;
  gap: 14px;
  font: var(--bb-w-regular) 13px/1.5 var(--bb-font);
}
.venue-facts b {
  flex: 0 0 148px;
  font: var(--bb-w-semibold) 13px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* "Open now" is a factual reading of the venue's own clock against its own
   hours — jade only when it is actually open, per the trust rule. */
.venue-open { font: var(--bb-w-semibold) 13px/1.5 var(--bb-font); color: var(--bb-ink-soft); }
.venue-open--now { color: var(--bb-trust-ink); }

/* ---------- opt-in map ---------- */
.venue-map {
  width: 100%;
  margin-top: 22px;
}
.venue-map__placeholder,
.venue-map__frame {
  min-height: 310px;
  border-radius: var(--bb-r-card);
  overflow: hidden;
  background: var(--bb-tint-blue);
}
.venue-map__placeholder {
  position: relative;
  display: flex;
  align-items: stretch;
  background-position: center;
  background-size: cover;
}
.venue-map__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 62, 105, .94) 0%, rgba(20, 62, 105, .78) 52%, rgba(20, 62, 105, .18) 100%);
}
.venue-map__shade {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(460px, 100%);
  padding: 34px;
  color: var(--bb-on-navy-ink);
}
.venue-map__eyebrow {
  margin-bottom: 8px;
  color: rgba(251, 247, 240, .76);
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.venue-map__h {
  margin: 0;
  color: var(--bb-on-navy-ink);
  font: var(--bb-w-semibold) 24px/1.18 var(--bb-font);
  letter-spacing: -.45px;
}
.venue-map__sub {
  margin: 9px 0 0;
  color: rgba(251, 247, 240, .86);
  font: var(--bb-w-regular) 13px/1.5 var(--bb-font);
}
.venue-map__privacy {
  max-width: 390px;
  margin: 18px 0 20px;
  color: rgba(251, 247, 240, .72);
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
}
.venue-map__load { min-width: 132px; }
.venue-map__frame {
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  background: var(--bb-surface);
  box-shadow: inset 0 0 0 1px var(--bb-hairline);
}
.venue-map__iframe {
  display: block;
  width: 100%;
  min-height: 310px;
  border: 0;
}
.venue-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  background: var(--bb-surface);
}
.venue-map__bar-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.venue-map__bar-copy b { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); }
.venue-map__status { color: var(--bb-ink-soft); font: var(--bb-w-regular) 11.5px/1.45 var(--bb-font); }
.venue-map__directions { flex: none; white-space: nowrap; }

@media (max-width: 620px) {
  .venue-map__placeholder { min-height: 340px; }
  .venue-map__shade { padding: 26px 22px; }
  .venue-map__placeholder::before { background: rgba(20, 62, 105, .86); }
  .venue-map__bar { align-items: stretch; flex-direction: column; }
  .venue-map__directions { text-align: center; }
}

/* ---------- featured reviews ---------- */


.venue-feature__quote {
  font: var(--bb-w-regular) 13px/1.6 var(--bb-font);
  font-style: italic;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.venue-feature__quote:lang(lo) { font-family: var(--bb-font-lao); }
.venue-feature__quote:lang(th) { font-family: var(--bb-font-thai); }

.venue-feature__more {
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
}

/* ---------- FAQ ----------
   Hairline-divided rows; every question stays visible as a heading and every
   answer is in the DOM, collapsed behind a native disclosure. */

.venue-faq { margin-top: 6px; max-width: 640px; }

.venue-faq__item { border-top: 1px solid var(--bb-hairline); }
.venue-faq__item:first-child { border-top: 0; }

.venue-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font: var(--bb-w-semibold) 13.5px/1.4 var(--bb-font);
}
.venue-faq__q::-webkit-details-marker { display: none; }
.venue-faq__q:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.venue-faq__chev {
  width: 12px;
  flex: none;
  color: var(--bb-ink-soft);
  transition: transform .15s ease-out;
}
.venue-faq__item[open] .venue-faq__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .venue-faq__chev { transition: none; }
}

.venue-faq__a {
  padding: 0 24px 14px 0;
  font: var(--bb-w-regular) 13px/1.6 var(--bb-font);
  color: var(--bb-ink);
  max-width: 58ch;
}

/* ---------- reviews ---------- */

/* ---------- reviews: the empty state ----------
   Every venue on the marketplace shows this today, so it is built like a
   panel a traveler learns something from — the invitation on the left, and
   on the right the three things that make a review here worth reading. All
   three are enforced by the schema, not claimed by marketing. */
.venue-rempty {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--bb-hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bb-page);
}
.venue-rempty__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 26px 26px;
}
.venue-rempty__seal { align-self: flex-start; }
.venue-rempty__h {
  margin: 0;
  font: var(--bb-w-semibold) 17px/1.3 var(--bb-font);
  letter-spacing: -0.4px;
}
.venue-rempty__p {
  margin: 0;
  max-width: 46ch;
  font: var(--bb-w-regular) 12.5px/1.6 var(--bb-font);
  color: var(--bb-ink-soft);
}
.venue-rempty__trust {
  padding: 24px 26px 26px;
  background: var(--bb-tint-jade);
}
.venue-rempty__trustH {
  margin: 0 0 10px;
  font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
}
.venue-rempty__trustP {
  position: relative;
  margin: 0 0 7px;
  padding-left: 14px;
  font: var(--bb-w-regular) 12px/1.55 var(--bb-font);
  color: var(--bb-ink);
}
.venue-rempty__trustP::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bb-trust);
}
.venue-rempty__trustP:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .venue-rempty { grid-template-columns: minmax(0, 1fr); }
}
.venue-rempty .bb-sub { max-width: 46ch; }

.venue-rsum { display: flex; align-items: center; }
.venue-rsum__score { display: flex; align-items: center; gap: 14px; }
/* The export sets the panel's score in the deep green at poster size — it is
   unambiguously a headline here, not a chip, so it takes the ink green rather
   than the fill green. */
.venue-rsum__num {
  font: var(--bb-w-semibold) 44px/1 var(--bb-font);
  letter-spacing: -1.5px;
  color: var(--bb-trust-ink);
}
.venue-rsum__word { display: flex; flex-direction: column; gap: 2px; }
.venue-rsum__word b { font: var(--bb-w-semibold) 14.5px/1.3 var(--bb-font); }

/* Summary band: score | aspects | distribution. The export makes this one
   bordered panel with hairline column dividers rather than three loose
   columns between two rules — a scorecard reads as a single object, and the
   dividers are what say "these three things are one reading". */
.venue-rband {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
  margin-bottom: 22px;
}
.venue-rband > * {
  padding: 22px 26px;
  min-width: 0;
}
.venue-rband > * + * { border-left: 1px solid var(--bb-hairline); }

@media (max-width: 980px) {
  .venue-rband { grid-template-columns: 1fr 1fr; }
  .venue-rband > .venue-rsum { grid-column: 1 / -1; border-bottom: 1px solid var(--bb-hairline); }
  .venue-rband > .venue-rsum + * { border-left: 0; }
}
@media (max-width: 620px) {
  .venue-rband { grid-template-columns: 1fr; }
  .venue-rband > * + * { border-left: 0; border-top: 1px solid var(--bb-hairline); }
  .venue-rband > .venue-rsum { border-bottom: 0; }
}

.venue-pstrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .venue-pstrip { grid-template-columns: repeat(3, 1fr); } }
.venue-pstrip__tile {
  position: relative; padding: 0; border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-thumb); overflow: hidden; cursor: pointer;
  background: var(--bb-tint-blue); aspect-ratio: 4 / 3;
}
.venue-pstrip__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-pstrip__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(28, 26, 23, 0.45); color: var(--bb-on-navy-ink);
  font: var(--bb-w-semibold) 15px/1 var(--bb-font); font-variant-numeric: tabular-nums;
}

.venue-lb {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(28, 26, 23, 0.82);
}
.venue-lb__img { max-width: min(92vw, 1000px); max-height: 84vh; border-radius: var(--bb-r-card); background: var(--bb-tint-blue); }
.venue-lb__img--broken { min-width: 320px; min-height: 220px; }
.venue-lb__btn {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--bb-page); color: var(--bb-ink);
  font: var(--bb-w-semibold) 19px/1 var(--bb-font); cursor: pointer;
}
.venue-lb__close { top: 18px; right: 18px; }
.venue-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.venue-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.venue-lb__count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--bb-on-navy-ink); font: var(--bb-w-medium) 12px/1 var(--bb-font);
  font-variant-numeric: tabular-nums;
}

.venue-pstrip__tile:focus-visible,
.venue-lb__btn:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .venue-lb { animation: venue-lb-in .16s ease-out; }
  @keyframes venue-lb-in { from { opacity: 0; } to { opacity: 1; } }
}

.venue-rsub {
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 0 0 10px;
}

/* Distribution rows are BUTTONS: the bar is the filter. */
.venue-dist { display: flex; flex-direction: column; gap: 2px; }

.venue-dist__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  /* No horizontal padding: under subgrid it would inset the row's first and
     last tracks, squeezing the label and the count out of their columns.
     Vertical only, so the label lines up with the "Ratings" heading. */
  padding: 5px 0;
  border: 0;
  border-radius: var(--bb-r-field);
  background: transparent;
  cursor: pointer;
  font-family: var(--bb-font);
}
.venue-dist__row:hover:not(:disabled) { background: var(--bb-surface); }
.venue-dist__row:disabled { cursor: default; opacity: .55; }
.venue-dist__row:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 1px;
}
.venue-dist__row.is-on { background: var(--bb-tint-jade); }

.venue-dist__word {
  font: var(--bb-w-regular) 12px/1 var(--bb-font);
  color: var(--bb-ink);
  white-space: nowrap;
  text-align: left;
}
/* Each row is its own grid, so a plain `auto` word column sizes per row and
   the bars come out ragged. Subgrid hands the rows the LIST's columns, so the
   word column is measured once across all five and every bar starts at the
   same x — in Lao and Thai too, which set narrower than English here. Measured
   rather than pinned to a pixel width, for the same reason fitNavCats()
   measures: the widest label moves with the language and the font.
   Without subgrid this block is skipped and the rows keep the ragged-but-
   working layout above. */
@supports (grid-template-columns: subgrid) {
  .venue-dist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 34px;
    row-gap: 2px;
  }
  .venue-dist__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .venue-dist__none { grid-column: 1 / -1; }
}
/* The line either column shows while nothing is verified (2026-09-03): the
   column's own state, under its heading, never a cell beside it. */
.venue-dist__none,
.venue-aspects__none { margin: 0 0 6px; }
.venue-dist__track {
  display: block;
  height: 6px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-hairline);
  overflow: hidden;
}
.venue-dist__fill {
  display: block;
  height: 100%;
  border-radius: var(--bb-r-pill);
  background: var(--bb-trust);
}
.venue-dist__n {
  font: var(--bb-w-medium) 11.5px/1 var(--bb-font);
  color: var(--bb-ink-soft);
  text-align: right;
}

.venue-aspects { display: flex; flex-direction: column; gap: 7px; }
.venue-aspects__row {
  display: grid;
  grid-template-columns: 92px 1fr 30px;
  align-items: center;
  gap: 10px;
}
.venue-aspects__label { font: var(--bb-w-regular) 12px/1.3 var(--bb-font); }
.venue-aspects__n {
  font: var(--bb-w-semibold) 12px/1 var(--bb-font);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mention chips: the tags travelers use most, same filter state as the
   rail's tag checkboxes. */
.venue-mentions { margin-top: 20px; }
.venue-mentions__row { display: flex; flex-wrap: wrap; gap: 8px; }
/* .bb-chip is inline-flex with no gap, so the two spans (label, count) sit
   flush -- a leading space in the count's own text does not help, since
   flex collapses whitespace at the start of an item's box. Give the chip
   the same 5px gap .bb-pill already uses for this exact label+trailing-bit
   shape, rather than inventing a new spacing value. */
.venue-mention { padding: 7px 13px; gap: 5px; }
.venue-mention__n { opacity: .75; }

/* Controls row: showing-count left, sort chips right. */
.venue-rctl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.venue-rsorts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.venue-rsorts .bb-chip { padding: 7px 13px; }

/* Two columns: review list left, side column right. The side column collapses
   above the list under 900px, and the rail inside it becomes a <details>
   disclosure. */
.venue-rcols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; margin-top: 14px; }
/* Rail + trust panel stacked, at the rail's own 16px internal rhythm. They
   share a wrapper rather than both being grid children: a third grid child
   lands in the grid's SECOND ROW, which is a full review-list height below
   the rail — the promises would have been visible but effectively buried.

   The two stay SEPARATE cards. Welding them into one bordered block was
   tried on 2026-08-15 and the owner compared both and kept this one. Do not
   re-attach them. */
.venue-rside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.venue-rail { border: 1px solid var(--bb-hairline); border-radius: var(--bb-r-card); background: var(--bb-surface); }
.venue-rail__summary { display: none; padding: 12px 16px; cursor: pointer; font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); }
.venue-rail__box { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.venue-rail__h { font: var(--bb-w-semibold) 14.5px/1.3 var(--bb-font); margin: 0; }
.venue-rail__group { display: flex; flex-direction: column; gap: 7px; }
.venue-rail__opt { display: flex; align-items: center; gap: 8px; font: var(--bb-w-regular) 13px/1.5 var(--bb-font); cursor: pointer; }
.venue-rail__opt .bb-meta { margin-left: auto; }
.venue-rail__months { display: flex; flex-wrap: wrap; gap: 6px; }
.venue-rail__month { padding: 5px 9px; font-size: 11px; }
.venue-rail__month:disabled { opacity: .4; cursor: default; }
/* Own class, not the retired venue-rctl__search: that carried a fixed
   200px written for the old inline control row and reads wrong at 300px
   rail width. .bb-input already gives 100% width; this just says so. */
.venue-rail__search { width: 100%; }
@media (max-width: 900px) {
  .venue-rcols { grid-template-columns: 1fr; }
  /* The whole side column moves above the list, carrying the trust panel with
     it — the panel reads before the reviews, and the rail's collapsed
     <details> can no longer hide it. */
  .venue-rside { order: -1; }
  .venue-rail__summary { display: block; }
}

.venue-trust {
  background: var(--bb-tint-jade);
  border-radius: var(--bb-r-card);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.venue-trust__h { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); color: var(--bb-trust-ink); margin: 0; }
.venue-trust__line { font: var(--bb-w-regular) 12.5px/1.55 var(--bb-font); margin: 0; }

/* Review cards are hairline-divided rows, not boxes. */
.venue-rlist { max-width: 640px; }

.venue-review {
  padding: 20px 0;
  border-top: 1px solid var(--bb-hairline);
}
.venue-review:first-child { border-top: 0; }

.venue-review__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
.venue-review__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--bb-w-semibold) 13px/1 var(--bb-font);
  flex: none;
}
.venue-review__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.venue-review__name b { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); }
.venue-review__vpill { margin-left: auto; flex: none; }

.venue-rrating { margin: 2px 0 6px; }

.venue-review__title {
  font: var(--bb-w-semibold) 13.5px/1.4 var(--bb-font);
  margin: 0 0 5px;
}
.venue-review__title:lang(lo) { font-family: var(--bb-font-lao); }
.venue-review__title:lang(th) { font-family: var(--bb-font-thai); }

.venue-review__body {
  font: var(--bb-w-regular) 13px/1.6 var(--bb-font);
  margin: 0;
  max-width: 62ch;
}
.venue-review__body:lang(lo) { font-family: var(--bb-font-lao); }
.venue-review__body:lang(th) { font-family: var(--bb-font-thai); }
.venue-review__body--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.venue-review__more {
  border: 0;
  background: none;
  padding: 4px 0 0;
  cursor: pointer;
  font: var(--bb-w-semibold) 12px/1.4 var(--bb-font);
  color: var(--bb-primary);
}
.venue-review__more:hover { text-decoration: underline; }

/* The owner's reply, nested and indented under the review it answers. */
.venue-review__reply {
  margin: 12px 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--bb-hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.venue-review__replyhead { font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font); }
.venue-review__replybody {
  font: var(--bb-w-regular) 12.5px/1.6 var(--bb-font);
  margin: 0;
  max-width: 58ch;
}

.venue-review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
}
.venue-review__vote {
  border: 1px solid var(--bb-hairline);
  background: transparent;
  border-radius: var(--bb-r-btn);
  padding: 7px 14px;
  cursor: pointer;
  font: var(--bb-w-medium) 11.5px/1.2 var(--bb-font);
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
}
.venue-review__vote:hover:not(:disabled) { border-color: var(--bb-primary); }
.venue-review__vote:disabled { cursor: default; color: var(--bb-ink-soft); }

.venue-review__photos { display: flex; gap: 8px; margin-top: 10px; }
.venue-review__photo {
  width: 84px; height: 64px; padding: 0; border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-thumb); overflow: hidden; cursor: pointer;
  background: var(--bb-tint-blue);
}
.venue-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue-review__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.venue-review__visit {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  background: var(--bb-page);
  max-width: 28rem;
}
.venue-review__visit dt {
  font: var(--bb-w-semibold) 10.5px/1.3 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 0 0 2px;
}
.venue-review__visit dd {
  font: var(--bb-w-semibold) 13px/1.4 var(--bb-font);
  margin: 0 0 8px;
}
.venue-review__visit dd:last-child { margin-bottom: 0; }
.venue-review__share { margin-left: 10px; }
.venue-review__copied { margin-left: 8px; }
.venue-review--hit { outline: 2px solid var(--bb-primary); outline-offset: 4px; }

.venue-rmore { margin-top: 18px; }

/* ---------- availability: per-service day bars ----------
   Controls row, seven day cards with open counts, then one hairline row per
   service — info left, its time-block bar right. Blocks are absolutely
   positioned percentages of open->close, exactly like the dashboard's
   editor, so what the owner lays is what the traveler sees. */

 /* One joined strip rather than three loose fields — the reference's search
   control, and the thing that tells a traveler these three answers belong
   together. Navy edge because it is the live query, not a panel. */
.avail-ctl {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border: 1px solid var(--bb-primary);
  border-radius: 8px;
  background: var(--bb-surface);
  overflow: hidden;
  padding: 0;
  margin: 16px 0 18px;
}
.avail-ctl__f {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 20px;
  min-width: 190px;
}
.avail-ctl__f + .avail-ctl__f { border-left: 1px solid var(--bb-hairline); }
.avail-ctl__lbl {
  font: var(--bb-w-semibold) 10.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.avail-ctl__val { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); }
/* The date is a button opening a calendar; the dotted underline says so.
   The real input hides beneath it purely to anchor the native picker. */
.avail-ctl__date {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--bb-ink);
  border-bottom: 1px dotted var(--bb-ink-soft);
}
.avail-ctl__date:hover { border-bottom-color: var(--bb-primary); }
.avail-ctl__date:hover .avail-ctl__val { color: var(--bb-primary); }
.avail-ctl__datein {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}
.avail-ctl__sel {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  background: var(--bb-page);
  padding: 7px 10px;
  font: var(--bb-w-medium) 12px/1.4 var(--bb-font);
  color: var(--bb-ink);
}

.avail-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.avail-day i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: var(--bb-w-medium);
  color: var(--bb-trust-ink);
  font-variant-numeric: tabular-nums;
}
.avail-day__n--full { color: var(--bb-urgency); }
.venue-day[aria-pressed="true"] .avail-day__n,
.venue-day[aria-pressed="true"] i { color: var(--bb-page); }

.avail-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font: var(--bb-w-medium) 10.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
/* "Bar width = how long it runs" — the reference puts the one thing the
   strip does not say about itself at the far end of its own legend. */
.avail-legend__hint { margin-left: auto; }
.avail-key { display: inline-flex; align-items: center; gap: 6px; }
.avail-key::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid var(--bb-hairline);
}
.avail-key--open::before { background: var(--bb-tint-blue); }
.avail-key--taken::before {
  background: repeating-linear-gradient(45deg,
    var(--bb-surface), var(--bb-surface) 2px,
    var(--bb-hairline) 2px, var(--bb-hairline) 4px);
}
.avail-key--passed::before { background: var(--bb-surface); }

/* A card per service, not a table row: the info panel and the day strip are
   two halves of one object, divided rather than floating. */
.avail-svc {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid var(--bb-hairline);
  border-radius: 9px;
  background: var(--bb-page);
  overflow: hidden;
  transition: border-color .15s ease-out;
}
.avail-svc:hover { border-color: var(--bb-ink-soft); }
.avail-svc__info {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-right: 1px solid var(--bb-hairline);
  background: var(--bb-surface);
}
.avail-svc__info .avail-svc__from { margin-top: auto; padding-top: 10px; }
.avail-svc__main { padding: 18px 22px; min-width: 0; }
.avail-svc__name { font: var(--bb-w-semibold) 14.5px/1.3 var(--bb-font); margin: 0 0 3px; }
.avail-svc__meta { display: block; margin-bottom: 8px; }
.avail-svc__from {
  margin: 0;
  font: var(--bb-w-medium) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.avail-svc__from b {
  font: var(--bb-w-semibold) 15px/1.2 var(--bb-font);
  color: var(--bb-ink);
  font-variant-numeric: tabular-nums;
}
.avail-svc__stat {
  margin: 0 0 8px;
  font: var(--bb-w-medium) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* Now, on the venue's clock — a rust hairline with the time above it. Only
   drawn on today, and only inside opening hours. */
.avail-now {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--bb-urgency);
  z-index: 3;
  pointer-events: none;
}
.avail-now__t {
  position: absolute;
  top: 2px;
  left: 4px;
  font: var(--bb-w-semibold) 9.5px/1.2 var(--bb-font);
  font-style: normal;
  color: var(--bb-urgency);
  white-space: nowrap;
}

.avail-bar {
  position: relative;
  /* The reference's strip is a band you read times off, not a progress bar:
     tall enough that a block is a target, with its own label at a size you
     can read without leaning in. */
  height: 84px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  overflow: hidden;
}
.avail-tick { position: absolute; top: 0; bottom: 22px; border-left: 1px solid var(--bb-hairline); }
.avail-tick i {
  position: absolute;
  left: 4px; bottom: -14px;
  font-style: normal;
  font: var(--bb-w-medium) 9.5px/1 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avail-blk {
  position: absolute;
  top: 10px; bottom: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--bb-w-semibold) 13px/1 var(--bb-font);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}
button.avail-blk--open {
  background: var(--bb-tint-blue);
  border: 1px solid transparent;
  color: var(--bb-primary);
  cursor: pointer;
  font-family: var(--bb-font);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
/* An open time answers the pointer — the one bit of motion in the table, and
   what makes a row of rectangles read as something you can take. */
button.avail-blk--open:hover {
  border-color: var(--bb-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(18, 58, 99, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  button.avail-blk--open { transition: none; }
  button.avail-blk--open:hover { transform: none; }
}
.avail-blk--sel,
button.avail-blk--open.avail-blk--sel {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-page);
}
/* A multi-block period reads as one chosen span: only its outer corners
   stay rounded, the shared edges square off. */
.avail-blk--sel-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.avail-blk--sel-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.avail-blk--sel-mid { border-radius: 0; }
.avail-blk--taken {
  background: repeating-linear-gradient(45deg,
    var(--bb-surface), var(--bb-surface) 4px,
    var(--bb-hairline) 4px, var(--bb-hairline) 8px);
  border: 1px solid var(--bb-hairline);
  color: var(--bb-ink-soft);
}
/* A taken box chosen as the stopping point: hatch kept, navy outline —
   an end marker, not a bookable block. */
.avail-blk--taken.avail-blk--endmark {
  border-color: var(--bb-primary);
  color: var(--bb-primary);
}
.avail-blk--passed {
  background: var(--bb-surface);
  border: 1px dashed var(--bb-hairline);
  color: var(--bb-hairline);
}

/* End-time caps: the tappable boundaries block labels cannot say — the end
   of each unbroken run, closing time included. */
.avail-cap {
  position: absolute;
  top: 10px; bottom: 30px;
  width: 38px;
  border: 1px dashed var(--bb-hairline);
  border-radius: 6px;
  background: var(--bb-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--bb-w-semibold) 9.5px/1 var(--bb-font);
  font-variant-numeric: tabular-nums;
  color: var(--bb-ink-soft);
  cursor: pointer;
}
.avail-cap:hover { border-color: var(--bb-primary); color: var(--bb-primary); }
.avail-cap--sel {
  border-style: solid;
  border-color: var(--bb-primary);
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
}

.avail-svc__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.avail-svc__range { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); }
.avail-svc__total {
  font: var(--bb-w-medium) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
}
.avail-svc__cta { margin-left: auto; }
.avail-svc__cta:disabled { opacity: .55; cursor: default; }

.avail-svc--ticket {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.avail-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
}

/* Live availability is a trust signal, so it is jade and only shown when
   the data really is coming from the venue. It closes the section under
   the last service row, with the pay-at-venue fine print beneath it. */
.avail-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bb-hairline);
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
}
.avail-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bb-trust);
  flex: none;
}

.avail-fine {
  margin: 12px 0 0;
  font: var(--bb-w-regular) 11px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* ---------- stay / park availability header and booking bar ---------- */
.avail-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.avail-head .bb-h2 { margin-bottom: 4px; }
.avail-head .bb-sub { margin: 0; }
.avail-head__note {
  margin-left: auto;
  padding-bottom: 1px;
  font: var(--bb-w-regular) 12px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  text-align: right;
}

.bookbar {
  margin-bottom: 22px;
  border: 1px solid var(--bb-hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bb-page);
}
.bookbar__row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.bookbar__f {
  min-width: 0;
  padding: 11px 15px;
  border-right: 1px solid var(--bb-hairline);
}
.bookbar__f--wide {
  flex: 1 1 148px;
  min-width: 148px;
  padding-right: 14px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bookbar__lbl {
  margin-bottom: 3px;
  font: var(--bb-w-semibold) 10.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bookbar__date {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.bookbar__val {
  display: block;
  min-width: 44px;
  font: var(--bb-w-semibold) 13.5px/1.4 var(--bb-font);
}
.bookbar__date .bookbar__val { white-space: nowrap; }
.bookbar__note {
  margin-top: 2px;
  font: var(--bb-w-regular) 10.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bookbar__step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bookbar__step .bookbar__val { text-align: center; }
.bookbar__step button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--bb-hairline);
  border-radius: 50%;
  background: var(--bb-page);
  color: var(--bb-primary);
  font: var(--bb-w-semibold) 13px/1 var(--bb-font);
  cursor: pointer;
}
.bookbar__money {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.bookbar__amt {
  white-space: nowrap;
  font: var(--bb-w-semibold) 15px/1.3 var(--bb-font);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.bookbar__amtn {
  font: var(--bb-w-regular) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bookbar__update {
  align-self: stretch;
  margin-left: auto;
  padding: 14px 20px;
  border: 0;
  background: var(--bb-primary);
  color: var(--bb-page);
  font: var(--bb-w-semibold) 13px/1.4 var(--bb-font);
  white-space: nowrap;
  cursor: pointer;
}
.bookbar__try {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 20px;
  border-top: 1px solid var(--bb-hairline);
  background: var(--bb-surface);
}
.bookbar__tryl {
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bookbar__chip {
  padding: 5px 13px;
  border: 1px solid var(--bb-hairline);
  border-radius: 999px;
  background: var(--bb-page);
  color: var(--bb-primary);
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  cursor: pointer;
}
.bookbar__chip:hover { border-color: var(--bb-primary); }
.bookbar__promise {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
}
.bookbar__promise::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--bb-trust);
}
.venue-sec--bookbar #av-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.venue-sec--bookbar .bookrow { margin: 0; }

@media (max-width: 760px) {
  .avail-head { align-items: flex-start; flex-direction: column; }
  .avail-head__note { margin-left: 0; text-align: left; }
  .bookbar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookbar__f { border-bottom: 1px solid var(--bb-hairline); }
  .bookbar__f--wide { grid-column: 1 / -1; }
  .bookbar__update { grid-column: 1 / -1; min-height: 48px; margin-left: 0; }
  .bookbar__promise { width: 100%; margin-left: 0; }
}

@media (max-width: 460px) {
  .bookbar__row { grid-template-columns: minmax(0, 1fr); }
  .bookbar__f--wide, .bookbar__update { grid-column: auto; }
}

/* ---------- the booking row ----------
   Copied value-for-value from the 2026-08-25 export's stay and park rows.
   Both screens draw it identically and only the two column headings differ
   ("IN THE RATE / THE ROOM" against "IN THE PASS / THE DAY"), so bookRow()
   builds both from one config.

   Two owner overrides on top of the file, 2026-08-27:
     - the photo track is 300px, not the file's 216. At 216 against a 268px
       row the picture is a vertical sliver.
     - the price column splits instead of centring: rate through terms sits at
       the TOP, scarcity through the note at the BOTTOM. Centred (the file's
       own rule) left a sparse column floating in the middle of a 300px row. */

.bookrow {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 248px;
  min-height: 300px;
  background: var(--bb-page);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
}

/* ---- the photograph ---- */
.bookrow__art {
  position: relative;
  min-height: 268px;
  border-right: 1px solid var(--bb-hairline);
  background: var(--bb-tint-blue);
  background-size: cover;
  background-position: center;
}
.bookrow__badge,
.bookrow__shots {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--bb-r-chip);
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  box-shadow: 0 2px 8px rgba(28, 26, 23, 0.16);
}
.bookrow__badge { left: 10px; top: 10px; padding: 5px 11px; color: var(--bb-ink); }
.bookrow__shots { right: 10px; bottom: 10px; padding: 5px 10px; color: var(--bb-primary); cursor: pointer; }

/* ---- the middle column ---- */
.bookrow__body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  border-right: 1px solid var(--bb-hairline);
  min-width: 0;
}

.bookrow__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bookrow__name { font: var(--bb-w-semibold) 16px/1.25 var(--bb-font); }
.bookrow__fits {
  background: var(--bb-tint-jade-strong);
  color: var(--bb-trust-deep);
  border-radius: var(--bb-r-chip);
  padding: 3px 10px;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
}
.bookrow__sub {
  margin: 4px 0 0;
  font: var(--bb-w-regular) 11.5px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
}

.bookrow__chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  min-height: 46px;
  align-content: flex-start;
}
.bookrow__chip {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-chip);
  padding: 4px 9px;
  font: var(--bb-w-regular) 11px/1.4 var(--bb-font);
  color: var(--bb-ink);
}

.bookrow__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 4px 24px;
  border-top: 1px solid var(--bb-hairline);
  padding-top: 12px;
}
.bookrow__col { display: flex; flex-direction: column; gap: 7px; }
/* Caps, per the file. The doc's ALL-CAPS ban is about marketing eyebrows on a
   page; these are column headings inside a dense data row, and the export
   sets them uppercase with 0.3px tracking. Local exception, deliberate. */
.bookrow__colh {
  font: var(--bb-w-semibold) 10.5px/1.4 var(--bb-font);
  letter-spacing: 0.3px;
  color: var(--bb-ink-soft);
  text-transform: uppercase;
}
.bookrow__inc {
  display: flex;
  gap: 8px;
  font: var(--bb-w-regular) 12px/1.45 var(--bb-font);
  color: var(--bb-ink);
}
.bookrow__inc::before {
  content: "\2713";
  color: var(--bb-trust);
  font-weight: var(--bb-w-semibold);
  flex: none;
}
.bookrow__fact { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.bookrow__factk { font: var(--bb-w-regular) 10.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.bookrow__factv { font: var(--bb-w-regular) 12px/1.4 var(--bb-font); min-width: 0; }

.bookrow__foot {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bookrow__more {
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-primary);
  text-decoration: underline;
  cursor: pointer;
}
.bookrow__live {
  display: flex;
  align-items: center;
  gap: 7px;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
}
.bookrow__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-trust);
  flex: none;
}

/* ---- the price column ----
   Two groups, pushed apart: what it costs at the top, what you do about it at
   the bottom. */
.bookrow__price {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
}
.bookrow__priceTop,
.bookrow__priceEnd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.bookrow__rate { display: flex; align-items: baseline; gap: 6px; }
.bookrow__amt {
  font: var(--bb-w-semibold) 21px/1.2 var(--bb-font);
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.bookrow__unit { font: var(--bb-w-regular) 11.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.bookrow__total {
  margin-top: 3px;
  font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink);
}
.bookrow__total b { font-weight: var(--bb-w-semibold); }
.bookrow__total span { color: var(--bb-ink-soft); }
.bookrow__rule {
  width: 100%;
  border-top: 1px solid var(--bb-hairline);
  margin: 12px 0 10px;
}
.bookrow__terms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font: var(--bb-w-regular) 11.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
/* Scarcity: plain rust text, never a filled badge and never red. */
.bookrow__left {
  margin-top: 10px;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-urgency);
}
.bookrow__cta {
  width: 100%;
  margin-top: 16px;
  justify-content: center;
  padding: 12px 0;
  font-size: 12.5px;
}
.venue-stepper.bookrow__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
  width: auto;
  min-width: 104px;
  gap: 12px;
  padding-left: 0;
  padding-right: 0;
}
.bookrow__note {
  margin-top: 8px;
  font: var(--bb-w-regular) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}

/* Workbench only (js/venue.js gates it to localhost): the slots the design
   has and the schema does not. Dashed so it can never be read as real. */
.bookrow__stub {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--bb-hairline);
  border-radius: var(--bb-r-field);
  font: var(--bb-w-medium) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bookrow--stub .bookrow__chip,
.bookrow--stub .bookrow__inc,
.bookrow--stub .bookrow__factv { opacity: .72; font-style: italic; }

@media (max-width: 980px) {
  .bookrow { grid-template-columns: 240px minmax(0, 1fr); }
  .bookrow__price {
    grid-column: 1 / -1;
    align-items: stretch;
    text-align: left;
    border-top: 1px solid var(--bb-hairline);
    gap: 14px;
  }
  .bookrow__priceTop, .bookrow__priceEnd { align-items: flex-start; }
  .bookrow__terms { align-items: flex-start; }
}
@media (max-width: 620px) {
  .bookrow { grid-template-columns: minmax(0, 1fr); }
  .bookrow__art { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--bb-hairline); }
  .bookrow__body { border-right: 0; }
  .bookrow__detail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}


/* ---------- house rules ---------- */

.venue-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
  margin-top: 16px;
}
.venue-rule { display: flex; gap: 14px; align-items: flex-start; }
.venue-rule__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.venue-rule__icon svg { width: 18px; height: 18px; }
.venue-rule__title { font: var(--bb-w-semibold) 13px/1.4 var(--bb-font); margin: 0 0 4px; }
.venue-rule__body {
  font: var(--bb-w-regular) 12.5px/1.6 var(--bb-font);
  color: var(--bb-ink);
  margin: 0;
  max-width: 52ch;
}

.venue-day {
  border: 1px solid var(--bb-hairline);
  background: var(--bb-surface);
  border-radius: var(--bb-r-field);
  padding: 9px 4px;
  text-align: center;
  cursor: pointer;
  font-family: var(--bb-font);
  line-height: 1.25;
}
.venue-day span { display: block; font-size: 11px; color: var(--bb-ink-soft); font-weight: var(--bb-w-medium); }
.venue-day b { display: block; font-size: 12px; font-weight: var(--bb-w-semibold); font-variant-numeric: tabular-nums; }
.venue-day[aria-pressed="true"] { background: var(--bb-primary); border-color: var(--bb-primary); }
.venue-day[aria-pressed="true"] span,
.venue-day[aria-pressed="true"] b { color: var(--bb-page); }
/* A whole-day closure (venue_closures): shown struck, never hidden — an
   absent tile reads as a bug, a struck one reads as a closed door. */
.venue-day--closed { opacity: .5; cursor: not-allowed; }
.venue-day--closed b { text-decoration: line-through; }

.venue-stepper { display: flex; align-items: center; gap: 12px; }
.venue-stepper button {
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 1px solid var(--bb-hairline);
  background: var(--bb-surface);
  color: var(--bb-ink);
  cursor: pointer;
  font: var(--bb-w-medium) 13.5px/1 var(--bb-font);
}
.venue-stepper button:hover { border-color: var(--bb-primary); }

/* ---------- other recommended venues ----------
   Full width, spanning both columns of the grid above. */

.venue-related { margin-top: 56px; }
.venue-related .bb-grid-4 { gap: 18px; }
.venue-related__head { align-items: flex-end; margin-bottom: 20px; }
.venue-related__all {
  color: var(--bb-primary);
  font: var(--bb-w-semibold) 12.5px/1.3 var(--bb-font);
  white-space: nowrap;
}

.venue-relcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--bb-ink);
  transition: box-shadow .16s ease-out;
}
.venue-relcard:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(28,26,23,.08); }

.venue-relcard__photo {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bb-tint-blue);
  background-size: cover;
  background-position: center;
}
.venue-relcard__body { padding: 14px 16px 16px; gap: 7px; flex: 1; }
.venue-relcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.venue-relcard__name { font: var(--bb-w-semibold) 14px/1.35 var(--bb-font); }
.venue-relcard__where {
  min-height: 35px;
  font: var(--bb-w-regular) 12.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.venue-relcard .bb-rating { margin: 0; gap: 9px; }
.venue-relcard .bb-score { font-size: 21px; }
.venue-relcard .bb-rating__rule { height: 22px; }
.venue-relcard .bb-rating__stack { gap: 3px; }
.venue-relcard .bb-dot { width: 8px; height: 8px; }
.venue-relcard .bb-count { font-size: 11.5px; }
.venue-relcard__price {
  font: var(--bb-w-regular) 12px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  font-variant-numeric: tabular-nums;
}
.venue-relcard__price b { color: var(--bb-ink); font-size: 14px; font-weight: var(--bb-w-semibold); }

.venue-relcard__art { position: relative; display: block; aspect-ratio: 5 / 4; }
.venue-relcard__verified {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--bb-tint-jade);
  color: var(--bb-trust-deep);
  font: var(--bb-w-semibold) 11.5px/1.2 var(--bb-font);
}
.venue-relcard__quote {
  min-height: 36px;
  font: italic var(--bb-w-regular) 12px/1.5 var(--bb-font);
  color: var(--bb-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.venue-relcard__quote .bb-meta { font-style: normal; }
.venue-relcard__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.venue-relcard__tag {
  padding: 4px 11px;
  border-radius: 4px;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  font: var(--bb-w-semibold) 12px/1.3 var(--bb-font);
}
.venue-relcard__foot .venue-relcard__price { white-space: normal; }
.venue-save { position: static; border: 1px solid var(--bb-hairline); }

/* The empty state sits at the content column's left edge like every other
   page. Putting the 46ch measure on the block itself fought .bb-column's
   `margin: 0 auto`, which then centred the narrow box in the viewport. The
   measure belongs on the paragraph, not on the column. */
.venue-missing { padding: 81px 27px 108px; }

.venue-missing h1 {
  font: var(--bb-w-semibold) 23.5px/1.2 var(--bb-font);
  letter-spacing: -0.6px;
  margin: 0 0 10px;
}

.venue-missing p {
  font: var(--bb-w-regular) 14.5px/1.6 var(--bb-font);
  color: var(--bb-ink-soft);
  max-width: 46ch;
  margin: 0 0 24px;
}

/* Country picker + national number. The select uses the shared .bb-select
   token so it matches every other field; the grid keeps them on one row. */
.avail-svc__phone {
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) 1fr;
  gap: 8px;
}
@media (max-width: 620px) {
  .avail-svc__phone { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .avail-svc { grid-template-columns: 1fr; gap: 12px; }
  .venue-rules { grid-template-columns: 1fr; }
  /* The mosaic gives up its second column before it gives up its height. */
  .venue-mosaic { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; height: 380px; }
  .venue-mosaic .venue-photo:nth-child(n+2) { display: none; }
  .venue-mosaic .venue-photo:first-child { grid-row: auto; }
}

@media (max-width: 620px) {
  .venue-h1 { font-size: 26px; letter-spacing: -0.7px; }
  .venue-mosaic { height: 280px; }
  .venue-score { gap: 10px; padding: 10px 14px; }
  .venue-score__end { margin-left: 0; }
  .venue-facts b { flex-basis: 110px; }
  .avail-days { grid-template-columns: repeat(4, 1fr); }
  .avail-days .venue-day:nth-child(n+5) { display: none; }
  .avail-ctl { gap: 16px; }
  .venue-nav__in {
    gap: 20px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .venue-nav__in::-webkit-scrollbar { display: none; }
  .venue-review__head { flex-wrap: wrap; }
}

/* ---------- reserve ----------
   The last step of a booking, not a form: numbered steps on the left, and on
   the right a summary of exactly what is being confirmed. The traveler should
   never have to scroll back up to check what they picked. */
.bk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bb-booking-card);
  gap: 44px;
  align-items: start;
  margin-top: 24px;
}
.bk__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Card white, not page: the page is warm off-white now, so a step on
   --bb-page would have nothing but its hairline to sit against. */
.bk__step {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 22px 24px;
}
.bk__stepH { display: flex; align-items: center; gap: 10px; }
.bk__num {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  font: var(--bb-w-semibold) 11.5px/22px var(--bb-font);
  text-align: center;
}
.bk__stepT { font: var(--bb-w-semibold) 15px/1.3 var(--bb-font); }
.bk__stepSub {
  margin: 7px 0 14px;
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

.bk__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.bk__wide { grid-column: 1 / -1; }

/* The payment step states what actually happens: nothing. It is a jade
   reassurance panel rather than a card form, because there is no payment
   provider and a card form that goes nowhere is the one thing a booking flow
   must never show. */
.bk__pay {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 7px;
  background: var(--bb-tint-jade);
}
.bk__payMark {
  flex: none;
  width: 14px; height: 14px;
  margin-top: 2px;
  border: 2px solid var(--bb-trust);
  border-radius: 3px;
}
.bk__payH { font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font); color: var(--bb-trust-ink); }
.bk__payBody {
  margin: 5px 0 0;
  font: var(--bb-w-regular) 12px/1.55 var(--bb-font);
  color: var(--bb-ink);
}

.bk__err { margin: 0; }
.bk__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bk__go { padding: 15px 34px; font-size: 14.5px; }
.bk__fine {
  flex: 1 1 26ch;
  margin: 0;
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

.bk__side { position: sticky; top: 74px; }
.bk__sum {
  background: var(--bb-page);
  border: 1px solid var(--bb-hairline);
  border-radius: 9px;
  padding: 18px 20px;
}
.bk__sumH {
  font: var(--bb-w-medium) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  margin-bottom: 4px;
}
.bk__sumV { font: var(--bb-w-semibold) 14px/1.35 var(--bb-font); margin-bottom: 14px; }
.bk__sumRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font: var(--bb-w-regular) 12px/1.5 var(--bb-font);
}
.bk__sumK { color: var(--bb-ink-soft); }
.bk__sumVal { font-weight: var(--bb-w-semibold); text-align: right; }
.bk__sumFree { color: var(--bb-trust-ink); font-weight: var(--bb-w-semibold); }
.bk__money {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bb-hairline);
}
.bk__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--bb-hairline);
  font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font);
}
.bk__total b { font: var(--bb-w-semibold) 16px/1.2 var(--bb-font); font-variant-numeric: tabular-nums; }

/* ---------- confirmed ----------
   The reference number is the object here — it is what gets held up at a
   door — so it is set like one: large, tabular, on its own card. */
.bkok { margin-top: 14px; }
.bkok__head { display: flex; gap: 12px; align-items: center; }
/* The export writes the confirmation tick on the badge tint rather than on
   solid jade — a filled green disc at the top of the page reads as a system
   alert, and this is a piece of good news, not a status. */
.bkok__tick {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bb-tint-jade-strong);
  color: var(--bb-trust-deep);
  font: var(--bb-w-semibold) 15px/30px var(--bb-font);
  text-align: center;
}
.bkok__h {
  font: var(--bb-w-semibold) clamp(22px, 2.4vw, 30px)/1.2 var(--bb-font);
  letter-spacing: -1px;
  margin: 0;
}
.bkok__lead {
  margin: 8px 0 0;
  max-width: 60ch;
  font: var(--bb-w-regular) 13.5px/1.6 var(--bb-font);
  color: var(--bb-ink-soft);
}

.bkok__body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}
/* "Show this at the door" is a jade panel in the export, not a dashed blue
   one: the reference is the proof your booking is real, and proof is jade's
   whole job in this system. */
.bkok__ticket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  background: var(--bb-tint-jade);
}
/* Jade is earned. A waiting hold is rust's job — Peek/Agoda put "not
   confirmed" in the first line and never dress a pending number as a pass. */
.bkok__banner {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  background: var(--bb-tint-rust);
}
.bkok__bannerP {
  margin: 8px 0 0;
  max-width: 62ch;
  font: var(--bb-w-regular) 13.5px/1.55 var(--bb-font);
  color: var(--bb-ink);
}
.bkok--wait .bkok__ticket {
  /* --bb-card is not a token in this system (surfaces are --bb-page and
     --bb-surface), so this resolved to nothing and the pending ticket kept
     the jade tint the rule above is written to remove. --bb-surface is the
     neutral card colour the comment is reaching for. */
  background: var(--bb-surface);
}
.bkok--wait .bkok__door,
.bkok--wait .bkok__copy {
  color: var(--bb-urgency);
}
.bkok__pass {
  margin: 4px 0 0;
  max-width: 36ch;
  font: var(--bb-w-regular) 11.5px/1.45 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bkok__door {
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
}
/* Booking references are long (JNG- plus a uuid), so this wraps rather than
   runs out of its own card — at 26px a real reference simply did not fit. */
.bkok__ref {
  margin: 0;
  max-width: 100%;
  font: var(--bb-w-semibold) 20px/1.35 var(--bb-font);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--bb-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bkok__copy {
  padding: 0;
  border: 0;
  background: none;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  color: var(--bb-trust-ink);
  cursor: pointer;
  text-decoration: underline;
}
.bkok__offline { font: var(--bb-w-regular) 11px/1.5 var(--bb-font); color: var(--bb-ink-soft); }

.bkok__visit {
  padding: 18px 20px;
  border: 1px solid var(--bb-hairline);
  border-radius: 9px;
  background: var(--bb-page);
}
.bkok__visitH { font: var(--bb-w-medium) 11px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.bkok__when {
  margin-top: 5px;
  font: var(--bb-w-semibold) 16px/1.3 var(--bb-font);
  font-variant-numeric: tabular-nums;
}
.bkok__what { margin-top: 3px; font: var(--bb-w-regular) 12px/1.5 var(--bb-font); color: var(--bb-ink-soft); }
.bkok__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bb-hairline);
}
.bkok__fact { display: flex; flex-direction: column; gap: 3px; }
.bkok__factK { font: var(--bb-w-medium) 11px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.bkok__factV { font: var(--bb-w-regular) 12px/1.5 var(--bb-font); }

.bkok__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bkok__note {
  margin: 12px 0 0;
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}

@media (max-width: 860px) {
  .bk { grid-template-columns: minmax(0, 1fr); }
  .bk__side { position: static; order: -1; }
  .bk__fields { grid-template-columns: 1fr; }
  .bkok__body { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- availability, the lively bits ----------
   Sunset is the fact that turns a row of times into a day: a traveler picking
   between 16:00 and 18:30 is choosing between afternoon and dusk. It is read
   from the venue's own city and drawn on every strip. */
.avail-dusk {
  position: absolute;
  top: 0; bottom: 22px;
  right: 0;
  background: linear-gradient(90deg,
    rgba(154, 74, 28, 0) 0%,
    rgba(154, 74, 28, 0.07) 45%,
    rgba(154, 74, 28, 0.16) 100%);
  pointer-events: none;
  z-index: 0;
}
.avail-sunset {
  position: absolute;
  top: 0; bottom: 22px;
  width: 1px;
  background: var(--bb-urgency);
  opacity: .75;
  z-index: 2;
  pointer-events: none;
}
.avail-sunset i {
  position: absolute;
  top: 3px;
  left: 5px;
  font-style: normal;
  font: var(--bb-w-semibold) 9.5px/1.2 var(--bb-font);
  color: var(--bb-urgency);
  white-space: nowrap;
}
.avail-key--sunset::before {
  width: 2px;
  height: 11px;
  border: 0;
  border-radius: 0;
  background: var(--bb-urgency);
}
.avail-key--sunset { color: var(--bb-urgency); }

/* "3 of them after sunset" — the note that makes the count mean something. */
.avail-svc__after {
  margin-left: 8px;
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-urgency);
}

/* Three plain facts about the service, from its own data. */
.avail-svc__facts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.avail-svc__fact {
  position: relative;
  padding-left: 11px;
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink);
}
.avail-svc__fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bb-trust);
}

/* A service with a live selection is the one being acted on — it takes the
   navy edge, exactly as in the reference. */
.avail-svc.is-picked { border-color: var(--bb-primary); }


/* ---------- confirmed: the parts that make it a plan, not a receipt ---------- */

/* The place you just booked, at the top of its own confirmation. */
.bkok__cover {
  height: 190px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: var(--bb-tint-blue) center/cover no-repeat;
  border: 1px solid var(--bb-hairline);
}

.bkok__next { margin-top: 26px; }
.bkok__nextH {
  margin: 0 0 12px;
  font: var(--bb-w-semibold) 15px/1.3 var(--bb-font);
  letter-spacing: -0.3px;
}
.bkok__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
.bkok__step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font: var(--bb-w-regular) 12.5px/1.55 var(--bb-font);
  color: var(--bb-ink);
}
.bkok__stepN {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bb-tint-blue);
  color: var(--bb-primary);
  font: var(--bb-w-semibold) 11px/20px var(--bb-font);
  text-align: center;
}

/* The venue's own rules, on the screen a traveler actually reads them. */
.bkok__rules { margin-top: 28px; }
.bkok__rulesSub {
  margin: -6px 0 14px;
  font: var(--bb-w-regular) 12px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}
.bkok__ruleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.bkok__rule {
  display: flex;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid var(--bb-hairline);
  border-radius: 9px;
  background: var(--bb-surface);
}
.bkok__ruleMark {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  background: var(--bb-tint-blue);
}
.bkok__ruleT { font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font); }
.bkok__ruleB {
  margin-top: 3px;
  font: var(--bb-w-regular) 12px/1.55 var(--bb-font);
  color: var(--bb-ink-soft);
}

.venue-relcard__does {
  font: var(--bb-w-regular) 11.5px/1.5 var(--bb-font);
  color: var(--bb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop interval picker. One shared axis, including its closing boundary. */
@media(min-width:721px){
  .slot-picker{margin:0 0 18px;padding:24px 28px 20px;border:1px solid var(--bb-hairline);border-radius:12px;background:var(--bb-surface);color:var(--bb-ink)}
  .slot-picker.is-picked{border-color:#a5affc}
  .slot-picker__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
  .slot-picker__name{margin:0;font:600 19px/1.4 var(--bb-font)}
  .slot-picker__meta{margin:5px 0 0;color:var(--bb-ink-soft);font:400 13px/1.5 var(--bb-font)}
  .slot-picker__price{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
  .slot-picker__price strong{font:600 17px/1.5 var(--bb-font);font-variant-numeric:tabular-nums}
  .slot-picker__price span{font:400 12px/1.5 var(--bb-font);color:var(--bb-ink-soft)}
  .slot-picker__scroll{margin-top:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;border-radius:8px;background:#f7f9fc}
  .slot-picker__axis{padding:10px 38px 0}
  .slot-picker__rail{position:relative;height:84px}
  .slot-picker__segment{position:absolute;top:49px;height:6px;background:#dfe4ec;pointer-events:none}
  .slot-picker__segment.is-open{background:#cce8de}
  .slot-picker__segment.is-selected{background:var(--bb-primary)}
  .slot-picker__segment.is-preview{background:#aeb8fc}
  .slot-picker__point{position:absolute;top:0;width:66px;transform:translateX(-50%);text-align:center}
  .slot-picker__point::after{content:'';position:absolute;top:47px;left:28px;width:10px;height:10px;box-sizing:border-box;border:2px solid #c4ccd8;border-radius:50%;background:#f7f9fc;pointer-events:none}
  .slot-picker__point.is-available::after{border-color:var(--bb-trust);background:#fff}
  .slot-picker__point.is-start::after,.slot-picker__point.is-end::after,.slot-picker__point.is-inside::after{border-color:var(--bb-primary);background:var(--bb-primary)}
  .slot-picker__time{display:block;width:66px;min-height:36px;padding:8px 4px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--bb-ink);font:500 14px/1.2 var(--bb-font);font-variant-numeric:tabular-nums;cursor:pointer}
  .slot-picker__time:hover:not(:disabled){background:#e9edf9;border-color:#cbd3ef}
  .slot-picker__time:disabled{color:#9aa4b5;cursor:default}
  .slot-picker__point.is-start .slot-picker__time,.slot-picker__point.is-end .slot-picker__time{background:var(--bb-primary);border-color:var(--bb-primary);color:#fff}
  .slot-picker__point.is-inside .slot-picker__time{color:var(--bb-primary)}
  .slot-picker__point-label{display:block;min-height:17px;margin-top:28px;white-space:nowrap;color:var(--bb-ink-soft);font:400 11px/1.5 var(--bb-font)}
  .slot-picker__point.is-start .slot-picker__point-label,.slot-picker__point.is-end .slot-picker__point-label{color:var(--bb-primary);font-weight:500}
  .slot-picker__footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;margin-top:16px;padding-top:16px;border-top:1px solid var(--bb-hairline)}
  .slot-picker__summary{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:48px}
  .slot-picker__instruction{font:500 14px/1.5 var(--bb-font)}
  .slot-picker__range{display:flex;align-items:center;gap:8px;font:600 16px/1.5 var(--bb-font);font-variant-numeric:tabular-nums}
  .slot-picker__edit{padding:0;border:0;border-radius:3px;background:none;color:var(--bb-ink);font:inherit;cursor:pointer;text-underline-offset:4px}
  .slot-picker__edit:hover:not(:disabled){text-decoration:underline;color:var(--bb-primary)}
  .slot-picker__edit:not(:disabled){text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:#b5bdcc}
  .slot-picker__edit:disabled{cursor:default}
  .slot-picker__duration{padding-left:6px;color:var(--bb-ink-soft);font-size:13px;font-weight:400}
  .slot-picker__total{font:400 12px/1.5 var(--bb-font);color:var(--bb-ink-soft)}
  .slot-picker__reset{padding:0;border:0;border-radius:3px;background:none;color:var(--bb-primary);font:400 12px/1.5 var(--bb-font);cursor:pointer}
  .slot-picker__reset:hover{text-decoration:underline}
  .slot-picker__cta{flex-shrink:0;min-height:44px;border-radius:8px;padding:10px 20px;font-size:13px}
  .slot-picker__cta:disabled{background:#eef0f6;color:#929caf;border-color:#eef0f6;box-shadow:none;cursor:default;opacity:1}
}

/* Optional offer entry shares the payment step; the summary shows the saved total. */
.rsv-promo{margin-top:24px;padding-top:22px;border-top:1px solid var(--bb-line,#e1e6ef)}.rsv-promo__row{display:flex;gap:12px;align-items:center;margin-top:8px}.rsv-promo__row input{min-width:0;max-width:300px;text-transform:uppercase}.rsv-promo__applied{color:var(--bb-trust-ink,#147a60);font-size:14px;font-weight:600;margin:0 0 12px}