(its iframe was sanitized out); scoping to
[data-lat] keeps those collapsed instead of showing an empty grey box. */
.bd-map[data-lat] {
position: relative;
height: clamp(280px, 32vw, 460px); /* fluid map height, still a definite height for Leaflet (Fluid Slice 2b) */
border-radius: 12px;
overflow: hidden;
border: 1px solid #ebebeb;
background: #e8eef4; /* placeholder tint while map tiles load */
z-index: 0; /* keep Leaflet panes beneath page chrome */
}
.bd-map-location {
font-size: 1rem;
color: var(--text);
margin: 0 0 1rem;
}
.bd-map-note {
font-size: 0.8rem;
color: var(--text); color: color-mix(in srgb, var(--text) 62%, var(--bg));
margin: 0.6rem 0 0;
}
/* Sidebar booking card */
.bd-sidebar {
position: sticky;
top: 2rem;
}
/* The booking card switched off ('Show the booking card', George 29 Oct) compiles to nothing, leaving its column empty: drop
the column so the content spans the row. A column that holds anything else never collapses. */
.bd-layout:has(> .bd-sidebar:empty) { grid-template-columns: minmax(0, 1fr); }
.bd-layout > .bd-sidebar:empty { display: none; }
/* ...and the same for the content column (6 Nov 2026: every block drags, so a host can empty either column): the sidebar spans the row. */
.bd-layout:has(> .bd-main:empty) { grid-template-columns: minmax(0, 1fr); }
.bd-layout > .bd-main:empty { display: none; }
/* The card wears the site's Colours (Andy via George, 13 Oct: it must "handle colour changes from the
site manager"): its surface is the page background lifted a shade towards white, its text is the
site's text, and everything else is mixed from those two; the brand colour (Reserve, the picked
dates, a hovered stepper) is the site's button colour. No colour of its own, so no contrast guard. */
.bd-booking-card {
--bd-card: color-mix(in srgb, var(--bg, #fff) 92%, #fff);
border: 1px solid var(--bd-card-line);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
background: var(--bd-card);
color: var(--text);
}
/* Mixed per element, so a .bd-pay-panel that re-points --text / --bd-card (site-chrome.css, the guard)
gets its own lines and fills. Muted text is 70% text: 4.5:1 on the card for any theme whose text is. */
.bd-booking-card, .bd-pay-panel {
--bd-card-line: color-mix(in srgb, var(--text) 14%, var(--bd-card));
--bd-card-fill: color-mix(in srgb, var(--text) 6%, var(--bd-card));
--bd-card-muted: color-mix(in srgb, var(--text) 70%, var(--bd-card));
--bd-card-faint: color-mix(in srgb, var(--text) 30%, var(--bd-card));
}
.bd-price-line {
font-size: 1.375rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.bd-price-line span {
font-size: 1rem;
font-weight: 400;
color: var(--bd-card-muted);
}
.bd-price-sub {
font-size: 0.875rem;
color: var(--bd-card-muted);
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--bd-card-line);
}
/* Divider utility */
.bd-divider {
height: 1px;
background: #ebebeb;
margin: 0;
border: none;
}
/* Booking card overrides — constrain components to card width */
.bd-booking-card .bd-picker {
max-width: 100%;
}
.bd-booking-card .bd-picker-months {
grid-template-columns: 1fr; /* stack the two months on mobile */
gap: 1rem;
}
@media (min-width: 640px) {
.bd-booking-card .bd-picker-months {
grid-template-columns: 1fr 1fr;
}
}
.bd-booking-card .bd-picker-title {
font-size: 0.9rem;
}
.bd-booking-card .bd-weekdays {
font-size: 0.65rem;
}
.bd-booking-card .bd-day {
font-size: 0.8rem;
}
.bd-booking-card .bd-picker-header button {
width: 30px;
height: 30px;
font-size: 0.95rem;
}
.bd-booking-card .bd-booking {
max-width: 100%;
}
.bd-booking-card .bd-guests {
grid-template-columns: 1fr !important;
gap: 0.5rem;
}
.bd-booking-card .bd-guest-group label {
font-size: 0.95rem;
font-weight: 600;
color: var(--text, #1e293b);
}
.bd-booking-card .bd-guest-counter {
padding: 0.25rem 0.4rem;
}
.bd-booking-card .bd-guest-counter button {
width: 28px;
height: 28px;
font-size: 1rem;
}
.bd-booking-card .bd-guest-counter span {
font-size: 0.95rem;
min-width: 24px;
}
.bd-booking-card .bd-booking-section h3 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.bd-booking-card .bd-field label {
font-size: 0.75rem;
}
.bd-booking-card .bd-field input {
padding: 0.5rem 0.65rem;
font-size: 0.875rem;
}
.bd-booking-card .bd-submit {
padding: 0.75rem;
font-size: 0.95rem;
}
.bd-booking-card .bd-picker-info {
padding: 0.75rem;
font-size: 0.85rem;
}
.bd-booking-card .bd-picker-info .bd-price {
font-size: 1.1rem;
}
/* Booking card, WIDE (George, 13 Oct: "on desktop it needs to use the full width and have stuff in
multiple columns, can stay the same for mobile" / "shouldn't be fixed size, should be responsive";
Andy via George, 17:21: month | month | guests over "Your stay").
The card fills whatever holds it, and lays itself out by that width: the holder is a size container,
and once three columns fit, the card becomes the calendar across two of them (its months side by side,
"Select dates" above) and Guests over "Your stay" in the third. The columns are
proportional; their only floors are what their content needs:
a month 15rem = seven usable day cells (2rem each) + the six 2px gaps
the right 13rem = Guests (the widest label + the − n + stepper) and Your stay (its rows, the
Reserve label with a price, the three trust badges)
so the threshold is two months + the 2rem between them + the right column + the 2rem column gap + the
card's padding and border.
booking.js builds the dates heading, the summary and the trust line hidden; only this block shows them.
Narrower holders (the home sidebar, every phone) never reach it and keep the card exactly as it was,
and so does a card that cannot take bookings (its notice in place of the form; no booking UI to lay
out). Template 4 is out: its card carries the whole checkout form (booking.js mode 'full'). */
body:not(.tpl-onepage) :has(> .bd-booking-card) { container: bd-booking / inline-size; }
@container bd-booking (min-width: calc(2 * 15rem + 2rem + 13rem + 2rem + 2 * 1.75rem + 2px)) {
.bd-booking-card:has(> #booking-section > .bd-stay) {
display: grid;
grid-template-columns: minmax(calc(2 * 15rem + 2rem), 2fr) minmax(13rem, 1fr);
grid-template-rows: auto 1fr; /* the last row takes the height the right column needs */
grid-template-areas: "head book" "cal book";
column-gap: 2rem;
align-items: start;
}
/* No price / fee / min-nights lines on the wide card (Andy via George, 18:12): "Your stay" carries the price.
Still rendered, so a narrow card shows them as before. The two column titles are centred. */
.bd-booking-card:has(> #booking-section > .bd-stay) > :is(.bd-price-line, .bd-price-sub) { display: none; }
.bd-booking-card > .bd-dates-head { grid-area: head; display: block; text-align: center; }
.bd-booking-card:has(> #booking-section > .bd-stay) .bd-booking-section h3 { text-align: center; }
.bd-booking-card > #booking-dates { grid-area: cal; margin-inline: 0; } /* the picker's own auto margins would shrink it to fit */
.bd-booking-card > #booking-section:has(> .bd-stay) { grid-area: book; margin-top: 0 !important; } /* Guests, then Your stay; the mount's inline 1rem off */
.bd-booking-card:has(> #booking-section > .bd-stay) .bd-picker-months { grid-template-columns: 1fr 1fr; gap: 2rem; } /* month | month */
.bd-booking-card:has(> #booking-section > .bd-stay) .bd-picker-info:has(.bd-price) { display: none; } /* the price moves to "Your stay"; loading + errors stay */
/* The three column titles sit on title bars (George, 18:24: variant B): the site's button colour tinted into the card,
or the booking module's own Title bars colour (--bd-head-bg, inline on the card) with the ink booking.php chose for
it (--bd-head-fg: the site's text or page colour, whichever reads on it). Your stay's bar is its panel's top edge. */
.bd-booking-card .bd-dates-head, .bd-booking-card:has(> #booking-section > .bd-stay) .bd-booking-section > h3, .bd-booking-card .bd-stay__panel > h3 {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.5;
margin: 0 0 0.85rem;
padding: 0.55rem 1rem;
border-radius: 12px;
text-align: center;
background: var(--bd-head-bg, color-mix(in srgb, var(--btn-bg) 14%, var(--bd-card)));
color: var(--bd-head-fg, var(--text));
}
.bd-booking-card:has(> #booking-section > .bd-stay) .bd-booking-section > h3 .bd-guests-max { color: inherit; opacity: 0.8; } /* reads on any bar */
.bd-booking-card .bd-stay__panel {
display: block;
padding: 0 1.1rem 1rem;
border: 1px solid var(--bd-card-line);
border-radius: 12px;
overflow: hidden; /* its corners round the title bar */
}
.bd-booking-card .bd-stay__panel > h3 { margin: 0 -1.1rem 0.75rem; border-radius: 0; }
.bd-booking-card .bd-stay__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.2rem 0;
font-size: 0.9rem;
color: color-mix(in srgb, var(--text) 85%, var(--bd-card));
}
.bd-booking-card .bd-stay__row--total {
margin-top: 0.4rem;
padding-top: 0.6rem;
border-top: 1px solid var(--bd-card-line);
font-weight: 700;
color: var(--text);
}
.bd-booking-card .bd-stay__hint {
margin: 0;
font-size: 0.875rem;
color: var(--bd-card-muted);
}
.bd-booking-card .bd-stay__trust {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
margin-top: 1rem;
text-align: center;
font-size: 0.75rem;
line-height: 1.3;
color: var(--bd-card-muted);
}
.bd-booking-card .bd-stay__badge svg {
display: block;
width: 1.4rem;
height: 1.4rem;
margin: 0 auto 0.35rem;
}
}
/* Lightbox — full-viewport image viewer.
Layout uses fixed top/bottom bars with safe-area-inset padding so iOS
notches and the address bar can't cover the close button or the counter.
The image sits in the middle with calc()-aware max-height that accounts
for both bars. */
.bd-lb-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
/* Block touchmove from scrolling the underlying page on iOS. */
touch-action: none;
overscroll-behavior: contain;
}
.bd-lb-overlay.bd-lb-open {
opacity: 1;
pointer-events: auto;
}
.bd-lb-img {
max-width: calc(100vw - 32px);
/* Image height respects both bars + safe area insets so it never overlaps. */
max-height: calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
object-fit: contain;
border-radius: 8px;
user-select: none;
}
.bd-lb-topbar {
position: absolute;
top: 0; left: 0; right: 0;
padding: 0.5rem 0.75rem;
padding-top: calc(0.5rem + env(safe-area-inset-top));
padding-left: calc(0.75rem + env(safe-area-inset-left));
padding-right: calc(0.75rem + env(safe-area-inset-right));
display: flex;
justify-content: flex-end;
align-items: center;
background: linear-gradient(rgba(0,0,0,0.55), transparent);
z-index: 2;
}
.bd-lb-bottombar {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1rem 0.75rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
padding-left: calc(0.75rem + env(safe-area-inset-left));
padding-right: calc(0.75rem + env(safe-area-inset-right));
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(transparent, rgba(0,0,0,0.55));
z-index: 2;
pointer-events: none;
}
.bd-lb-close {
background: rgba(0, 0, 0, 0.35);
border: none;
font-size: 2rem;
line-height: 1;
color: #fff;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s;
}
.bd-lb-overlay.bd-lb-open .bd-lb-close,
.bd-lb-overlay.bd-lb-open .bd-lb-counter { pointer-events: auto; }
.bd-lb-close:hover,
.bd-lb-close:focus-visible {
background: rgba(255, 255, 255, 0.22);
outline: none;
}
.bd-lb-prev,
.bd-lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.35);
border: none;
font-size: 2.5rem;
line-height: 1;
color: #fff;
cursor: pointer;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s;
user-select: none;
z-index: 2;
}
.bd-lb-prev { left: calc(1rem + env(safe-area-inset-left)); }
.bd-lb-next { right: calc(1rem + env(safe-area-inset-right)); }
.bd-lb-prev:hover,
.bd-lb-next:hover,
.bd-lb-prev:focus-visible,
.bd-lb-next:focus-visible {
background: rgba(255, 255, 255, 0.22);
outline: none;
}
.bd-lb-counter {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
font-weight: 500;
background: rgba(0, 0, 0, 0.35);
padding: 4px 12px;
border-radius: 999px;
}
@media (max-width: 640px) {
.bd-lb-img {
max-width: calc(100vw - 16px);
max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.bd-lb-prev, .bd-lb-next {
width: 40px; height: 40px; font-size: 2rem;
}
.bd-lb-prev { left: calc(0.5rem + env(safe-area-inset-left)); }
.bd-lb-next { right: calc(0.5rem + env(safe-area-inset-right)); }
.bd-lb-close { width: 48px; height: 48px; font-size: 2.2rem; }
.bd-lb-counter { font-size: 0.85rem; }
}
/* Mobile */
@media (max-width: 768px) {
.bd-photos {
grid-template-columns: 1fr;
border-radius: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 1.5rem;
}
.bd-photo-main img {
min-height: 280px;
border-radius: 0;
}
.bd-photo-grid {
display: none;
}
.bd-layout {
grid-template-columns: 1fr;
gap: 0;
padding-top: 0.5rem !important;
}
/* Tighten the desktop hero/main paddings on mobile — they otherwise leave a big
empty gap above the gallery and excess space under the listing metadata on phones.
`main` and `.hero` are styled inline in index.php (loaded after this file), so the
overrides need !important to win. */
main { padding-top: 0.75rem !important; }
.hero { padding: 0.75rem 0 1rem !important; }
.bd-title-area { padding-bottom: 0.5rem !important; margin-bottom: 0.25rem !important; }
.bd-sidebar {
position: relative;
top: 0;
order: -1;
margin-bottom: 2rem;
}
.bd-booking-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bd-rules {
grid-template-columns: 1fr 1fr;
}
.bd-amenities {
grid-template-columns: 1fr;
}
.bd-title-area h1 {
font-size: 1.375rem;
}
.hero .bd-listing-title {
font-size: 1.375rem;
margin-bottom: 0.75rem;
}
}
/* Text on the page background follows the theme (--text, muted = text blended toward --bg; links and
secondary controls = --primary) so every preset stays readable (George, 10 Sep: hardcoded greys vanished on Night). */
/* ── Guest reviews (injected live after Things to know) ── */
.bd-reviews-avg {
color: #f59e0b;
font-weight: 700;
}
.bd-reviews-list {
display: grid;
--bd-cols: 2;
grid-template-columns: repeat(auto-fit, minmax(max(320px, (100% - (var(--bd-cols) - 1) * 20px) / var(--bd-cols)), 1fr));
gap: 1.25rem;
}
@media (max-width: 640px) {
.bd-reviews-list { grid-template-columns: 1fr; }
}
.bd-review {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1rem 1.25rem;
}
.bd-review-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.bd-review-head strong {
font-size: 0.95rem;
color: #0f172a;
}
.bd-review-date {
font-size: 0.8rem;
color: #64748b;
}
.bd-review-stars {
color: #f59e0b;
letter-spacing: 2px;
margin: 0.35rem 0;
font-size: 0.95rem;
}
.bd-review-body {
margin: 0.25rem 0 0;
font-size: 0.9rem;
line-height: 1.55;
color: #334155;
overflow-wrap: anywhere;
}
.js-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.js-clamp.clamp-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.review-toggle { display: inline-block; margin: 4px 0 0; padding: 0; background: none; border: none; color: var(--primary, #0d2c5e); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.review-toggle:hover { text-decoration: underline; }
/* Reviews module options (10 Sep 2026): columns, "Show more reviews", summary line, sample state in the canvas. */
.bd-reviews--cols-1 .bd-reviews-list { --bd-cols: 1; }
.bd-reviews--cols-3 .bd-reviews-list { --bd-cols: 3; }
@media (max-width: 900px) { .bd-reviews--cols-3 .bd-reviews-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bd-reviews--cols-3 .bd-reviews-list { grid-template-columns: 1fr; } }
.bd-reviews-summary { margin: -0.25rem 0 1rem; color: var(--text); color: color-mix(in srgb, var(--text) 62%, var(--bg)); font-size: 0.95rem; }
.bd-reviews-more { display: inline-block; margin: 1.25rem 0 0; padding: 0.6rem 1.1rem; border: 1px solid var(--primary, #cbd5e1); border-radius: 999px; background: transparent; color: var(--primary, #0f172a); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.bd-reviews-more:hover { background: var(--primary, #0d2c5e); color: var(--bg, #fff); }
.bd-review[hidden] { display: none; }
.bd-reviews-sample::before { content: 'Sample — your approved guest reviews will show here'; display: block; margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 600; color: #b45309; }
.bd-reviews-sample .bd-review { opacity: .85; }
/* ── Builder modules: Contact host + Hero band (8 Sep 2026) ─────────────────
Template-agnostic versions of the Template 4 contact form and the photo band, usable on any page. */
.bd-contact { padding: 0.5rem 0 1rem; }
.bd-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; }
.bd-contact__heading { font-family: var(--bd-font-heading); font-size: 1.4rem; margin: 0 0 1rem; color: var(--text); }
.bd-contact__sub { color: var(--text); opacity: 0.75; line-height: 1.6; margin: 0; }
.bd-contact__form { display: grid; gap: 0.9rem; position: relative; }
.bd-contact__form label { display: grid; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.bd-contact__form input, .bd-contact__form textarea { font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: #fff; color: #0f172a; text-transform: none; letter-spacing: 0; font-weight: 400; }
.bd-contact__form textarea { min-height: 130px; resize: vertical; }
.bd-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bd-contact__btn { display: inline-block; justify-self: start; background: var(--btn-bg); color: var(--btn-text); border: 0; border-radius: 10px; padding: 0.85rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
@media (max-width: 900px) { .bd-contact__grid { grid-template-columns: 1fr; gap: 1.25rem; } }
/* The form alone — the block's own heading and intro both off (George, 23 Oct 19:15: an empty half beside it): one column, up to
about its width in the two-column layout, left-aligned. After the 900px rule so it holds at every width. */
.bd-contact__grid--form { grid-template-columns: minmax(0, 40rem); }
.bd-hero-band { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; margin: 0 0 2rem; border-radius: 16px; overflow: hidden; }
.bd-hero-band--h40 { min-height: min(calc(40 * var(--bd-vh, 1vh)), 420px); } /* --bd-vh: see the Template 1 hero */
.bd-hero-band--h60 { min-height: min(calc(60 * var(--bd-vh, 1vh)), 620px); }
.bd-hero-band--h75 { min-height: min(calc(75 * var(--bd-vh, 1vh)), 760px); }
.bd-hero-band--h100 { min-height: min(calc(100 * var(--bd-vh, 1vh)), 900px); }
.bd-hero-band::before { content: ""; position: absolute; inset: 0; }
.bd-hero-band--overlay-light::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.3) 100%); }
.bd-hero-band--overlay-medium::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.5) 100%); }
.bd-hero-band--overlay-dark::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.7) 100%); }
.bd-hero-band__inner { position: relative; width: 100%; max-width: var(--bd-wide-w, 1600px); margin: 0 auto; padding: 4rem var(--bd-gutter); }
.bd-hero-band__kicker { color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.bd-hero-band__title { margin: 0; color: #fff; font-family: var(--bd-font-heading); font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1.15; letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.bd-hero-band__cta { display: inline-block; margin-top: 1.75rem; padding: 0.9rem 2.2rem; background: var(--btn-bg, #0d2c5e); color: var(--btn-text, #fff); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; border-radius: 4px; text-decoration: none; transition: opacity 0.15s; }
.bd-hero-band__cta:hover { opacity: 0.88; color: var(--btn-text, #fff); text-decoration: none; }
.bd-hero-band--left { align-items: flex-end; justify-content: flex-start; text-align: left; }
.bd-hero-band--left .bd-hero-band__inner { padding: 4rem 2.5rem 3rem; }
.bd-hero-band--left .bd-hero-band__title { max-width: 20ch; }
/* Edge to edge: the viewport on Templates 1 / 4, the box on Template 2, the content column on Template 3. */
.bd-hero-band--bleed { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
body.tpl-boxed .bd-hero-band--bleed { width: min(100vw, var(--bd-box-w, 1200px)); margin-left: calc(50% - min(50vw, var(--bd-box-w, 1200px) / 2)); }
body.tpl-left .bd-hero-band--bleed { width: auto; margin-left: 0; border-radius: 16px; }
/* ── Builder layout blocks (columns, spacer, text, image, button) — the same rules the canvas uses
(layout-canvas.css); compiled pages ship these classes, so the site must style them too (George, 10 Sep:
a two-column row stacked on the live site). Keep the two files in step. ── */
.bd-row { display: grid; gap: 24px; margin: 0 0 1.5rem; }
.bd-row--1 { grid-template-columns: 1fr; }
.bd-row--2 { grid-template-columns: 1fr 1fr; }
.bd-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .bd-row { grid-template-columns: 1fr; } }
.bd-col { min-height: 40px; min-width: 0; }
.bd-spacer { height: 32px; }
.bd-text { line-height: 1.6; }
.bd-image { max-width: 100%; height: auto; display: block; border-radius: 12px; }
.bd-btn { display: inline-block; padding: 0.7rem 1.2rem; border-radius: 8px; background: var(--btn-bg, #111); color: var(--btn-text, #fff); font-weight: 600; text-decoration: none; }
/* ── Builder v2: row ratios, section bands and the content modules (11 Sep 2026) ──────────────
Contract: grapesjs/v2-contract.md §3. Everything here is template-agnostic and theme-aware:
colour comes from --text / --bg / --primary / --btn-*, never a hardcoded grey, so a dark preset
gets a dark panel and light copy (the rule from review fix 32, 10 Sep).
Muted text uses the file's established two-line pattern — a plain --text fallback, then the
blend — with --bd-muted as an override hook so a dark band can re-point every muted line at
once instead of every selector being listed twice.
Both canvases load THIS file through the site chrome, so these classes are the single source:
the .bd-row copies in the two layout-canvas.css files are gone. ── */
/* ── Rows: count, ratio, vertical alignment, gap ───────────────────────────── */
.bd-row--4 { grid-template-columns: repeat(4, 1fr); }
.bd-row--r1-2 { grid-template-columns: 1fr 2fr; }
.bd-row--r2-1 { grid-template-columns: 2fr 1fr; }
.bd-row--r1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
.bd-row--vm { align-items: center; }
.bd-row--vb { align-items: end; }
.bd-row--gap-0 { gap: 0; }
.bd-row--gap-s { gap: 12px; }
.bd-row--gap-l { gap: 48px; }
/* LOAD-BEARING ORDER: the mobile stack at line ~926 sits ABOVE these, and a ratio class has the
same specificity (0,1,0) — so without this repeat the ratios would win on a phone and a 1fr 2fr
row would never stack. The MODULE grids are not here: their column counts are declared further
down the file, so collapsing them has to happen after that (see the last block in this file). */
@media (max-width: 760px) {
.bd-row, .bd-row--4, .bd-row--r1-2, .bd-row--r2-1, .bd-row--r1-2-1 { grid-template-columns: 1fr; }
}
/* ── Section band ──────────────────────────────────────────────────────────── */
.bd-band { position: relative; margin: 2rem 0; padding: 2.5rem 0; border-radius: 16px; }
.bd-band__inner { position: relative; z-index: 1; max-width: var(--bd-content-w, 1280px); margin: 0 auto; padding: 0 1.25rem; }
/* Every block carries its own bottom margin; inside a band that lands on top of the band's padding
and makes the gap under the content bigger than the one above it. */
.bd-band__inner > :last-child, .bd-band__inner .bd-col > :last-child { margin-bottom: 0; }
.bd-band--pad-s { padding: 1.25rem 0; }
.bd-band--pad-l { padding: 4.5rem 0; }
.bd-band--tint { background: var(--bd-tint, #f6f7f9); background: var(--bd-tint, color-mix(in srgb, var(--text) 6%, var(--bg))); }
.bd-band--dark { background: #14181d; color: #ffffff; }
.bd-band--picture { background-image: var(--bd-band-img); background-size: cover; background-position: center; color: #ffffff; }
.bd-band--light-text { color: #ffffff; }
/* The overlay sits under .bd-band__inner (z-index 1) and inherits the band's own corners. */
.bd-band--overlay-light::before, .bd-band--overlay-dark::before,
.bd-cta--overlay-light::before, .bd-cta--overlay-dark::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.bd-band--overlay-light::before, .bd-cta--overlay-light::before { background: rgba(255, 255, 255, 0.45); }
.bd-band--overlay-dark::before, .bd-cta--overlay-dark::before { background: rgba(0, 0, 0, 0.45); }
/* Edge to edge, exactly as the hero band does it (lines ~855): the page column on Templates 1/3,
the box on Template 2, the section width on Template 4. */
.bd-band--bleed { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
body.tpl-boxed .bd-band--bleed { width: min(100vw, var(--bd-box-w, 1200px)); margin-left: calc(50% - min(50vw, var(--bd-box-w, 1200px) / 2)); }
body.tpl-left .bd-band--bleed { width: auto; margin-left: 0; border-radius: 16px; }
/* On a dark ground every muted line flips at once rather than being listed twice per module. */
/* A theme's accent is picked against the PAGE background, so inside a dark band it is nearly
invisible — the seeded "Book now" section had an outline button you could not read. Everything
accent-coloured follows the band instead, the same way muted text already does. */
.bd-band--dark, .bd-band--picture, .bd-band--light-text,
.bd-cta--dark, .bd-cta--picture { --bd-muted: rgba(255, 255, 255, 0.78); --bd-accent: #ffffff; }
.bd-band--dark a:not(.bd-btn), .bd-band--picture a:not(.bd-btn),
.bd-band--light-text a:not(.bd-btn), .bd-cta--dark a:not(.bd-btn), .bd-cta--picture a:not(.bd-btn) { color: #ffffff; }
/* ── Shared bits: outline button, icon, empty picture slot ─────────────────── */
.bd-btn--outline { background: transparent; color: var(--bd-accent, var(--primary, #222222)); border: 1px solid currentColor; }
.bd-icon { width: 24px; height: 24px; flex: 0 0 auto; }
/* Canvas only: an image option with nothing in it yet. The site renders no element at all. */
.bd-img-placeholder {
display: grid; place-items: center; min-height: 140px; padding: 1rem; text-align: center;
border: 1px dashed rgba(128, 128, 128, 0.5); border-radius: 10px; font-size: 0.9rem;
color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 55%, var(--bg)));
}
/* ── Heading ───────────────────────────────────────────────────────────────── */
.bd-subheading { font-family: var(--bd-font-heading); margin: 0 0 0.75rem; line-height: 1.25; }
.bd-subheading--large { font-size: clamp(1.5rem, 1rem + 2vw, 2rem); } /* scales with the frame (Fluid Slice 2b) */
.bd-subheading--small { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem); }
/* ── Image + text ──────────────────────────────────────────────────────────── */
.bd-imagetext { display: grid; gap: 28px; align-items: center; margin: 0 0 1.5rem; }
.bd-imagetext--r1-1 { grid-template-columns: 1fr 1fr; }
.bd-imagetext--r1-2 { grid-template-columns: 1fr 2fr; }
.bd-imagetext--r2-1 { grid-template-columns: 2fr 1fr; }
.bd-imagetext--right .bd-imagetext__media { order: 2; }
/* After the ratios on purpose: with no picture there is no second column to size. */
.bd-imagetext--textonly { grid-template-columns: 1fr; }
.bd-imagetext__media { min-width: 0; }
.bd-imagetext__img { display: block; width: 100%; max-height: clamp(360px, 34vw, 560px); } /* scales the height cap with the frame (Fluid Slice 2b) */
/* A fixed box for the cropping case: without it the row's height follows whatever shape the photo
happens to be, and a portrait one leaves the words floating in the middle of a tall column. */
.bd-imagetext--cover .bd-imagetext__img { aspect-ratio: 4 / 3; object-fit: cover; }
.bd-imagetext--contain .bd-imagetext__img { object-fit: contain; }
.bd-imagetext--rounded .bd-imagetext__img, .bd-imagetext--rounded .bd-img-placeholder { border-radius: 14px; }
.bd-imagetext__body { min-width: 0; }
.bd-imagetext__heading { font-family: var(--bd-font-heading); font-size: 1.5rem; margin: 0 0 0.6rem; }
.bd-imagetext__text { line-height: 1.7; }
.bd-imagetext__text p { margin: 0 0 0.7rem; }
.bd-imagetext__text p:last-child { margin-bottom: 0; }
.bd-imagetext__btn { display: inline-block; margin-top: 0.9rem; }
/* ── Quote ─────────────────────────────────────────────────────────────────── */
.bd-quote { margin: 0 0 1.5rem; }
.bd-quote__text p { margin: 0 0 0.6rem; line-height: 1.7; }
.bd-quote__text p:last-child { margin-bottom: 0; }
.bd-quote__author { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 62%, var(--bg))); }
.bd-quote--plain { border-left: 3px solid var(--bd-accent, var(--primary, #222222)); padding-left: 1.1rem; }
.bd-quote--card { background: #ffffff; color: #222222; border: 1px solid #dddddd; border-radius: 12px; padding: 1.4rem 1.5rem; }
.bd-quote--card .bd-quote__author { color: #666666; } /* a light card keeps dark text whatever the theme */
.bd-quote--large { text-align: center; }
.bd-quote--large .bd-quote__text p { font-family: var(--bd-font-heading); font-size: clamp(1.2rem, 0.95rem + 1.4vw, 1.6rem); line-height: 1.5; }
/* ── Feature list ──────────────────────────────────────────────────────────── */
.bd-features { display: grid; gap: 22px 28px; margin: 0 0 1.5rem; counter-reset: bd-feature; --bd-cols: 3;
grid-template-columns: repeat(auto-fit, minmax(max(240px, (100% - (var(--bd-cols) - 1) * 28px) / var(--bd-cols)), 1fr)); }
.bd-features--2 { --bd-cols: 2; }
.bd-features--3 { --bd-cols: 3; }
.bd-features--4 { --bd-cols: 4; }
.bd-feature { display: flex; gap: 0.75rem; min-width: 0; }
.bd-feature__icon { display: inline-flex; color: var(--bd-accent, var(--primary, currentColor)); }
.bd-feature__body { min-width: 0; }
.bd-feature__title { font-family: var(--bd-font-heading); font-size: 1.02rem; margin: 0 0 0.25rem; }
.bd-feature__text { font-size: 0.95rem; line-height: 1.6; color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 72%, var(--bg))); }
.bd-feature__text p { margin: 0 0 0.4rem; }
.bd-feature__text p:last-child { margin-bottom: 0; }
.bd-features--icon-top .bd-feature { flex-direction: column; gap: 0.5rem; }
/* Numbered: the count comes from the page order, so it can never disagree with it. */
.bd-features--numbered .bd-feature { counter-increment: bd-feature; }
.bd-features--numbered .bd-feature__icon { display: none; }
.bd-features--numbered .bd-feature::before {
content: counter(bd-feature); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center; font-size: 0.85rem; font-weight: 600;
background: var(--bd-accent, var(--primary, #222222)); color: var(--btn-text, #ffffff);
}
/* ── Cards ─────────────────────────────────────────────────────────────────── */
/* Grid modules use auto-fit CAPPED at the host's column count (--bd-cols): as the frame widens the
grid gains columns up to N (cells stay a sane width, filling the space), and below that it collapses
to fewer — then 1 on mobile via the media block — instead of N ever-wider cells stranded in a gutter.
(Fluid Slice 2, 22 Sep 2026.) */
.bd-cards { display: grid; gap: 20px; margin: 0 0 1.5rem; --bd-cols: 3;
grid-template-columns: repeat(auto-fit, minmax(max(260px, (100% - (var(--bd-cols) - 1) * 20px) / var(--bd-cols)), 1fr)); }
.bd-cards--2 { --bd-cols: 2; }
.bd-cards--3 { --bd-cols: 3; }
.bd-cards--4 { --bd-cols: 4; }
.bd-card { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden; }
/* Like the booking card: a light panel with dark text, so it reads the same on every preset. */
.bd-cards--bordered .bd-card, .bd-cards--shadow .bd-card { background: #ffffff; color: #222222; border: 1px solid #dddddd; }
.bd-cards--shadow .bd-card { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
/* A light card sitting inside a dark band must not inherit that band's white accent. */
.bd-cards--bordered .bd-card, .bd-cards--shadow .bd-card, .bd-quote--card { --bd-accent: var(--primary, #222222); }
.bd-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bd-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem 1.25rem; }
.bd-cards--plain .bd-card__body { padding-left: 0; padding-right: 0; }
.bd-card__title { font-family: var(--bd-font-heading); font-size: 1.1rem; margin: 0; }
.bd-card__text { font-size: 0.95rem; line-height: 1.6; }
.bd-card__text p { margin: 0 0 0.5rem; }
.bd-card__text p:last-child { margin-bottom: 0; }
.bd-card__btn { align-self: start; margin-top: 0.35rem; }
/* ── Call to action ────────────────────────────────────────────────────────── */
.bd-cta { position: relative; overflow: hidden; margin: 0 0 1.5rem; padding: 2.25rem 1.5rem; border-radius: 16px; text-align: center; }
.bd-cta__inner { position: relative; z-index: 1; display: grid; gap: 0.75rem; justify-items: center; max-width: 640px; margin: 0 auto; }
.bd-cta--band { background: none; padding-left: 0; padding-right: 0; }
.bd-cta--tint { background: var(--bd-tint, #f6f7f9); background: var(--bd-tint, color-mix(in srgb, var(--text) 6%, var(--bg))); }
.bd-cta--dark { background: #14181d; color: #ffffff; }
.bd-cta--picture { background-image: var(--bd-band-img); background-size: cover; background-position: center; color: #ffffff; }
.bd-cta__heading { font-family: var(--bd-font-heading); font-size: 1.6rem; margin: 0; }
.bd-cta__text { line-height: 1.6; }
.bd-cta__text p { margin: 0 0 0.4rem; }
.bd-cta__text p:last-child { margin-bottom: 0; }
.bd-cta__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.35rem; }
/* ── FAQ (no script:
does this, keyboard included) ───────────────── */
.bd-faq { margin: 0 0 1.5rem; }
.bd-faq__item { padding: 0.85rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.28); }
.bd-faq__q { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 600; list-style: none; }
.bd-faq__q::-webkit-details-marker { display: none; }
.bd-faq__q::after { content: "+"; flex: 0 0 auto; font-weight: 400; opacity: 0.6; }
.bd-faq__item[open] > .bd-faq__q::after { content: "\2212"; }
.bd-faq__a { padding-top: 0.6rem; line-height: 1.65; }
.bd-faq__a p { margin: 0 0 0.6rem; }
.bd-faq__a p:last-child { margin-bottom: 0; }
.bd-faq--cards .bd-faq__item { margin-bottom: 0.6rem; padding: 0.85rem 1rem; border: 1px solid rgba(128, 128, 128, 0.28); border-radius: 10px; }
/* ── Video (the player is swapped in at serve time; this styles the mount) ─── */
.bd-video { margin: 0 0 1.5rem; }
.bd-video__frame { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #000000; }
.bd-video--16-9 .bd-video__frame { aspect-ratio: 16 / 9; }
.bd-video--4-3 .bd-video__frame { aspect-ratio: 4 / 3; }
.bd-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bd-video__frame--empty {
display: grid; place-items: center; padding: 1rem; text-align: center; background: none;
border: 1px dashed rgba(128, 128, 128, 0.5);
color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 55%, var(--bg)));
}
.bd-video__caption { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 62%, var(--bg))); }
/* ── Table ─────────────────────────────────────────────────────────────────── */
.bd-table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.95rem; }
.bd-table__cell { padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.bd-table thead .bd-table__cell { font-weight: 600; }
.bd-table--lines .bd-table__cell { border-bottom: 1px solid rgba(128, 128, 128, 0.28); }
.bd-table--striped tbody tr:nth-child(odd) { background: var(--bd-tint, rgba(128, 128, 128, 0.08)); }
.bd-table--2 .bd-table__cell:first-child { width: 45%; }
.bd-table--3 .bd-table__cell:first-child { width: 34%; }
.bd-table--4 .bd-table__cell:first-child { width: 28%; }
/* Columns has to govern what a row SHOWS, not only how wide the first cell is. A row cannot read
its container's options — it renders cells up to the last one filled in — so the cap lives here,
which also means the canvas and the live page hide exactly the same cells without the canvas
needing to know anything about it. (revenant, 14 Sep: Columns=2 still rendered four cells.) */
.bd-table--2 .bd-table__cell:nth-child(n+3),
.bd-table--3 .bd-table__cell:nth-child(n+4) { display: none; }
/* Canvas only (.bd-table--headed is emitted in preview and never reaches a page): the header row is
promoted to when the page is compiled, so in the canvas row 1 is an ordinary row and
the "First row is a header" toggle looks like it does nothing. Give it the weight it will have. */
.bd-table--headed tbody[data-bd-children] > :first-child .bd-table__cell { font-weight: 600; }
/* ── Buttons ───────────────────────────────────────────────────────────────── */
.bd-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.5rem; }
.bd-buttons--centre { justify-content: center; }
/* ── Numbers ───────────────────────────────────────────────────────────────── */
.bd-numbers { display: grid; gap: 18px; margin: 0 0 1.5rem; text-align: center; --bd-cols: 3;
grid-template-columns: repeat(auto-fit, minmax(max(160px, (100% - (var(--bd-cols) - 1) * 18px) / var(--bd-cols)), 1fr)); }
.bd-numbers--2 { --bd-cols: 2; }
.bd-numbers--3 { --bd-cols: 3; }
.bd-numbers--4 { --bd-cols: 4; }
.bd-number { min-width: 0; }
.bd-number__value { display: block; font-family: var(--bd-font-heading); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); line-height: 1.1; color: var(--bd-accent, var(--primary, inherit)); }
.bd-number__label { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 62%, var(--bg))); }
/* ── Empty-container prompts: canvas only (a container with nothing in it renders
nothing at all on the site, so these never reach a visitor). ───────────── */
.bd-cards__empty, .bd-features__empty, .bd-faq__empty, .bd-numbers__empty, .bd-table__empty {
grid-column: 1 / -1; padding: 1.5rem; text-align: center; font-size: 0.9rem;
border: 1px dashed rgba(128, 128, 128, 0.5); border-radius: 10px;
color: var(--text); color: var(--bd-muted, color-mix(in srgb, var(--text) 55%, var(--bg)));
}
@media (max-width: 700px) {
.bd-band { padding: 1.75rem 0; }
.bd-band--pad-l { padding: 2.5rem 0; }
.bd-band__inner { padding: 0 1rem; }
.bd-cta { padding: 1.75rem 1.1rem; }
.bd-cta__heading { font-size: 1.35rem; }
.bd-quote--large .bd-quote__text p { font-size: 1.2rem; }
.bd-subheading--large { font-size: 1.5rem; }
.bd-number__value { font-size: 1.6rem; }
.bd-table { font-size: 0.9rem; }
.bd-table__cell { padding: 0.5rem 0.5rem; }
}
/* ── The module grids on a phone ───────────────────────────────────────────────
LOAD-BEARING ORDER, and the second place in this file that needs saying: the column counts
(.bd-cards--3, .bd-numbers--4, .bd-imagetext--r1-2 …) are declared ABOVE and carry the same
specificity (0,1,0), so a mobile rule only wins if it comes after them. Putting these with the
row collapse further up left a four-across Numbers block and a side-by-side Image + text on a
390px screen — caught by rendering it, not by a test. Keep this block last. */
@media (max-width: 760px) {
.bd-cards, .bd-features, .bd-imagetext { grid-template-columns: 1fr; }
.bd-imagetext--right .bd-imagetext__media { order: 0; } /* picture back above the words */
.bd-imagetext--cover .bd-imagetext__img { aspect-ratio: 16 / 10; }
.bd-numbers { grid-template-columns: repeat(2, 1fr); } /* two short facts side by side reads better than one */
}
/* ── Sign in (grapesjs/builtin-pages-contract.md, 17 Sep) ─────────────────────────────────────
The sign-in form became a page block, and the block emitted classes nothing styled: the page had
no card, no padding and no button (George, 17 Sep). It used to be a guest-portal screen wearing
gp-* from guest-portal.css, which the page path does not load — so the look is reproduced here in
the page stylesheet, in this file's own idiom and on the theme's variables rather than the fixed
slate palette the portal uses. The canvas loads this file through the site chrome, so the host
sees the same card they are editing. */
.bd-login { padding: 0.5rem 0 1rem; }
.bd-login__card { max-width: 420px; margin: 1.5rem auto; padding: 1.75rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 14px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); }
.bd-login__heading { font-family: var(--bd-font-heading); font-size: 1.4rem; margin: 0 0 0.4rem; color: var(--text); }
.bd-login__sub { margin: 0 0 1.25rem; color: var(--text); opacity: 0.7; font-size: 0.95rem; line-height: 1.5; }
.bd-login__error { padding: 0.75rem 0.9rem; margin: 0 0 1rem; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px; color: #991b1b; font-size: 0.9rem; }
.bd-login__form { display: grid; gap: 0.9rem; }
.bd-login__form label { display: grid; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.bd-login__form input { font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; background: #fff; color: #0f172a; text-transform: none; letter-spacing: 0; font-weight: 400; width: 100%; box-sizing: border-box; }
.bd-login__form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); }
.bd-login__btn { display: block; width: 100%; background: var(--btn-bg); color: var(--btn-text); border: 0; border-radius: 10px; padding: 0.85rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer; margin-top: 0.25rem; }
.bd-login__btn:hover { opacity: 0.9; }
.bd-login__links { margin: 0.9rem 0 0; text-align: center; font-size: 0.9rem; }
.bd-login__links a { color: var(--primary); }
@media (max-width: 760px) { .bd-login__card { margin: 1rem auto; padding: 1.25rem; border-radius: 12px; } }
/* Headings wrap whatever they are given (George, 17 Sep): a heading typed without spaces
("xxxxxxxx…", a long URL, one German compound) cannot break at a word boundary, so it ran off
the right edge of the page and the canvas. `anywhere` breaks inside the word only when nothing
else fits, and lets a flex/grid track shrink below the word's width instead of blowing out. */
.bd-main, .bd-text, .bd-section, /* the whole details column: text blocks too (George, 19:16, /local-stuff) */
.bd-main h1, .bd-main h2, .bd-main h3, .bd-main h4,
.bd-section h2, .bd-section h3,
.hero h1, .bd-hero-banner h1, .bd-listing-title {
overflow-wrap: anywhere;
word-break: break-word; /* older WebKit, where `anywhere` is not understood */
}