/* Public booking pages use the accepted landing page's visual vocabulary.
   This layer follows app CSS. Booking states, gates and calculations stay app-owned. */
html:has(body.booking-public) { --host-scale: 1.25; font-size: 125%; }
body.booking-public {
  --gutter: clamp(22px,4vw,76px);
  --muted: #b8b3a7;
  --line: rgba(244,239,227,.19);
  --fs-display: clamp(34px,4.2vw,58px);
  --fs-h2: clamp(26px,2.8vw,38px);
  --fs-h3: 24px;
  --fs-body: 20px;
  --fs-body-sm: 18px;
  --fs-label: 15px;
  --ls-label: .1em;
  --text-primary: var(--cream);
  --text-secondary: var(--muted);
  --sbv-text-primary: var(--cream);
  --sbv-text-secondary: var(--muted);
  --sbv-text-tertiary: var(--muted);
  --sbv-text-muted: var(--muted);
  --sbv-surface-1: var(--ink-2);
  --sbv-surface-2: #211e18;
  --sbv-surface-3: var(--ink);
  --sbv-surface-strong: var(--ink-2);
  --booking-panel: var(--ink-2);
  --card-bg: #211e18;
  background: var(--ink);
  color: var(--cream);
  font: 20px/1.5 var(--sans);
}
.booking-public::before, .booking-public::after, .booking-public > .grain { display: none; }
.site-shell.booking-public > .masthead { position: relative; inset: auto; }
.booking-public :is(h1,h2,h3) { font-weight: 400; text-transform: none; text-wrap: balance; letter-spacing: -.025em; color: var(--cream); }
.booking-public h1 { font-size: var(--fs-display); line-height: 1.06; max-width: none; }
.booking-public h2 { font-size: var(--fs-h2); line-height: 1.15; }
.booking-public h3 { font-size: var(--fs-h3); }
.booking-public p { text-wrap: pretty; }
.booking-public :is(.hero-copy,.intro-lead,.intro-header p,.booking-highlights,.help-text) { max-width: none; }
.booking-public main > .container { width: 100%; max-width: none; margin: 0; padding: 30px var(--gutter) 56px; }
.booking-public .main { gap: 40px; }
.booking-public :is(.section-kicker,.step-kicker,.intro-tag,.page-hero-badge) {
  font-size: 15px; font-weight: 400; letter-spacing: .1em; text-transform: none;
  background: transparent; color: var(--gold); padding: 0; border: 0; border-radius: 0;
}
.booking-public .step-kicker { margin-bottom: 12px; }
.booking-public :is(.form-section,.menu-section,.summary-panel,.booking-confirmation,.booking-hub-panel) {
  background: var(--ink-2); color: var(--cream);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 28px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.booking-public :is(.form-section,.menu-section,.summary-panel) { margin: 28px 0; }
.booking-public :is(.form-section,.menu-section,.summary-panel) h2 { font-size: 28px; font-weight: 400; color: var(--cream); }
.booking-public .intro-section { padding: 0; margin: 24px 0 40px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.booking-public .intro-lead { font-size: 20px; line-height: 1.55; color: var(--muted); }
.booking-public .intro-ctas { gap: 12px; margin-top: 24px; }
.booking-public .intro-help { background: transparent; border: 0; padding: 0; color: var(--muted); box-shadow: none; }
.booking-public :is(.intro-header,.intro-header h1) { text-align: left; padding: 0; }
.booking-public .intro-header h1 { margin: 16px 0 22px; }
/* PHOTOGRAPHIC OPENERS ARE ONE FULL-BLEED PHOTOGRAPH WITH THE COPY ON TOP (owner, 15-09-2026:
   "still an image in a square format instead of the agreed faded background"). What stood here
   was a two-column override — copy left, photo right — which is exactly the composition the
   public subpages moved away from earlier that day. The app's own `.page-hero` in belevingen.css
   is already the backdrop band; this layer only lends it the site's ink and type, it no longer
   rebuilds the layout. The gradient is copied from `.hero-editorial.is-backdrop` in pages.css so
   the brouwerij hero and a BBQ page fade identically. */
/* The BAND centres the copy, not the copy itself: `.page-hero-content` asks for `height: 100%`,
   and a percentage height against a parent that only has `min-height` resolves to auto — so the
   block sat at the top however its own justify-content was set. The image and the overlay are
   absolutely positioned, so the copy is the only item this flex box lays out. */
.booking-public .page-hero {
  position: relative;
  display: flex; align-items: center;
  height: auto; min-height: clamp(320px,38vw,420px); margin: 0; overflow: hidden;
  border-radius: 0; background: transparent; box-shadow: none;
}
.booking-public .page-hero-overlay {
  background: linear-gradient(90deg,rgba(15,14,11,.96) 0%,rgba(15,14,11,.78) 46%,rgba(15,14,11,.3) 100%),
              linear-gradient(0deg,var(--ink),transparent 45%);
}
/* Centred in the band and on the container's own gutter — the copy of `is-backdrop` on the public
   subpages sits the same way. No horizontal padding here: the band already starts at the gutter,
   and adding it twice indents the headline past every other h1 on the site. */
.booking-public .page-hero-content { max-width: 640px; height: 100%; justify-content: center; padding: 0; gap: 22px; }
.booking-public .page-hero-title { font-size: var(--fs-display); font-weight: 400; }
.booking-public .page-hero-facts { gap: 12px 22px; }
.booking-public .page-hero-fact { font-size: 17px; color: var(--muted); }
.booking-public .page-hero-fact--fire { color: var(--gold); }
.booking-public .tasting-intro { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 5%; margin-top: 0; }
.booking-public .tasting-intro img { width: 100%; height: 360px; display: block; object-fit: cover; }
/* The contact step stays ONE column at every width. A two-column grid stood here (15-09-2026)
   and the owner rejected it on 29-09: the date field carries the date note and the weather
   card, so column one grew tall while column two sat half empty beside it. */
.booking-public .form-group { --field-font-size: 18px; }
.booking-public .form-group label { font-size: 18px; font-weight: 400; }
.booking-public .form-group :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) {
  background-color: var(--ink); color: var(--cream); border-radius: 4px;
  font-family: var(--sans); font-size: 18px;
}
.booking-public select, .booking-public option { background-color: var(--ink); color: var(--cream); }
.booking-public input::placeholder, .booking-public textarea::placeholder { color: var(--muted); opacity: 1; }
.booking-public .package-card {
  background: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  padding: 24px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.booking-public .package-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: none; }
.booking-public .package-card.selected { border-color: var(--gold); background: var(--ink); box-shadow: inset 0 3px var(--gold); }
.booking-public .package-name { font-size: 26px; font-weight: 400; }
.booking-public .package-price { font-size: 32px; }
.booking-public .package-features { color: var(--muted); }
.booking-public .package-badge { font-size: 15px; }
.booking-public .package-check { color: var(--ink); }
.booking-public .timeline-inloop { background: #39362d; }
.booking-public .timeline-bbq { background: var(--gold); }
.booking-public .timeline-extra { background: #66c98c; }
.booking-public .timeline-label { color: var(--ink); text-shadow: none; }
.booking-public .timeline-inloop .timeline-label { color: var(--cream); }
.booking-public #meat_vega_vega_display { color: var(--ink); }
.booking-public .menu-section > .section-header { border-color: var(--line); }
.booking-public .menu-section .card { border-radius: 4px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.booking-public .card.selected { border-color: var(--gold); }
.booking-public :is(.snack-choice-option,.menu-fact,.price-summary,.modal-content,.extra-dish-modal-content) { border-radius: 4px; }
.booking-public .booking-confirmation { text-align: left; margin-block: 28px; }
.booking-public .booking-confirmation h2 { font-size: 32px; font-weight: 400; }
.booking-public .booking-confirmation-mark { margin-left: 0; }
.booking-public :is(.booking-confirmation-code,.booking-confirmation-notice) { border-radius: 4px; }
.booking-public .booking-confirmation-actions { justify-content: flex-start; align-items: flex-start; }
.booking-public .foot { text-align: left; }
.booking-public .foot-meta { font-size: 14px; color: var(--muted); letter-spacing: 0; }
.booking-public .foot-legal { font-size: 13px; color: var(--muted); letter-spacing: 0; }
/* The hub photograph spans the hero and fades into the copy's dark canvas.
   Keep the veil above both rotating images so it never flashes during a crossfade. */
.booking-hub main > .container { padding-top: 0; }
.booking-hub .hero-panel { position: relative; isolation: isolate; grid-template-columns: 1.05fr 1fr; gap: 5%; min-height: 560px; margin-inline: calc(-1 * var(--gutter)); padding: 48px var(--gutter) 64px; background: var(--ink); border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.booking-hub .hero-content { padding: 0; order: 0; z-index: 4; }
.booking-hub .hero-content > .cbtn { align-self: flex-start; }
.booking-hub .hero-title { margin-bottom: 22px; }
.booking-hub .hero-copy { font-size: 20px; line-height: 1.55; margin-bottom: 24px; }
.booking-hub .hero-visual { position: absolute; inset: 0 0 0 28%; min-height: 0; border-radius: 0; order: 1; }
.booking-hub .hero-visual::after { background: linear-gradient(90deg,var(--ink),rgba(15,14,11,.94) 12%,rgba(15,14,11,.55) 38%,rgba(15,14,11,.08) 75%), linear-gradient(0deg,var(--ink),transparent 35%,transparent 80%,var(--ink)); }
.booking-hub .hero-photo { box-shadow: none; object-position: center; filter: saturate(.7) sepia(.12) contrast(1.06) brightness(.9); }
.booking-hub .hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.booking-hub .booking-highlights { gap: 12px; margin-bottom: 28px; }
.booking-hub .booking-highlight { min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 17px; }
.booking-hub .booking-highlight span { white-space: normal; text-wrap: pretty; }
.booking-hub .card { padding: 28px; border-radius: 4px; background: var(--ink-2); border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.booking-hub #experience-section { padding: 30px 0 0; background: transparent; border: 0; border-top: 1px solid var(--line); }
.booking-hub .section-heading { margin-bottom: 26px; }
.booking-hub .section-heading > p { color: var(--muted); font-size: 18px; }
.booking-hub .section-heading > .section-kicker { color: var(--gold); font-size: 15px; }
.booking-hub .experience-grid { gap: 22px; }
.booking-hub .experience-btn { border-radius: 4px; background: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.booking-hub .experience-btn:hover, .booking-hub .experience-btn[aria-pressed=true] { border-color: var(--gold); box-shadow: none; }
.booking-hub .experience-media { height: 195px; }
.booking-hub .experience-body { padding: 22px; gap: 16px; }
.booking-hub .experience-title { font-size: 26px; font-weight: 400; }
.booking-hub .experience-meta, .booking-hub .experience-desc { font-size: 18px; color: var(--muted); }
.booking-hub .experience-icon { display: none; }
.booking-hub .experience-label { font-size: 14px; }
.booking-hub .experience-cta { justify-self: start; align-self: flex-start; width: fit-content; margin-top: 4px; }
.booking-hub .reviews-section { border-top: 1px solid var(--line); padding-top: 30px; }
.booking-hub .review-card { border-radius: 0; background: transparent; border: 0; border-left: 1px solid var(--line); box-shadow: none; }
.booking-hub .review-text { font-size: 20px; }
/* THE MONTH READS AT THE SAME SIZE AS ITS TWO BUTTONS (review, 15-09-2026). The month sat at
   24px against 16px buttons, which on a tablet made the middle pill shout at the two controls
   beside it. One size for the whole row; the buttons are the reference, not the month. */
.booking-hub .calendar-nav .btn { border-radius: 999px; font-size: 16px; }
/* THE MONTH IS THE SAME PILL AS ITS TWO BUTTONS (review, 15-09-2026). It was a 12px-rounded box
   between two 999px pills, which read as a different kind of control. Radius, background, padding
   and weight are copied from `.btn` + `.btn-secondary` in the app's styles.css. */
.booking-hub .month-label {
  font-size: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.62rem 0.8rem;
  font-weight: 700;
}
.booking-hub .fallback-experiences { display: flex; flex-wrap: wrap; gap: 20px; }
.booking-hub .fallback-experiences a { color: var(--gold); }
@media(max-width:900px) {
  .booking-public .package-tiers { column-gap: 16px; }
  .booking-public .package-card { padding: 20px; }
  .booking-hub .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-hub .hero-panel { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  body.booking-public { --gutter: 22px; --fs-display: 38px; --fs-body: 18px; --fs-label: 14px; --ls-label: .07em; font-size: 18px; }
  .booking-public main > .container { padding-top: 28px; }
  /* `.page-hero` is out of this list since 15-09-2026: it is a backdrop band, not a two-column
     grid, so stacking its "columns" put the photograph back in a box under the copy. */
  .booking-public .tasting-intro, .booking-hub .hero-panel { grid-template-columns: 1fr; gap: 26px; }
  .booking-public .page-hero { min-height: clamp(300px,64vw,380px); }
  .booking-public .tasting-intro img { height: 250px; }
  .booking-public .page-hero-facts { gap: 10px 16px; }
  .booking-public .page-hero-fact { font-size: 16px; }
  .booking-public :is(.form-section,.menu-section,.summary-panel,.booking-confirmation), .booking-hub .card { padding: 22px; }
  .booking-public :is(.form-section,.menu-section,.summary-panel) h2 { font-size: 26px; }
  .booking-public .intro-lead, .booking-hub .hero-copy { font-size: 18px; }
  .booking-public .intro-help { width: auto; font-size: 16px; }
  .booking-public .package-tiers { grid-template-columns: 1fr; }
  .booking-hub .hero-panel { min-height: 0; padding-top: 200px; padding-bottom: 30px; }
  .booking-hub .hero-visual { inset: 0 0 auto; height: 350px; min-height: 0; }
  .booking-hub .hero-visual::after { background: linear-gradient(0deg,var(--ink),rgba(15,14,11,.92) 15%,rgba(15,14,11,.3) 55%,rgba(15,14,11,.12)), linear-gradient(180deg,var(--ink),transparent 22%), linear-gradient(90deg,rgba(15,14,11,.25),transparent 70%); }
  .booking-hub .experience-grid { grid-template-columns: 1fr; }
  .booking-hub #experience-section { padding-inline: 0; }
  .booking-hub .experience-media { height: 220px; }
  .booking-hub .calendar-nav { gap: 10px; }
}