/*
 * Type scale
 * ---------------------------------------------------------------------
 * Every size below grows with the window between 360px and 1280px and
 * then stops, so a heading is not the same 52px on a phone as on a
 * desktop. Sizes of 13px and under are left fixed: a label has nowhere
 * useful to shrink to, and making it smaller only makes it harder to
 * read. Larger sizes move proportionally more, because that is where
 * fixed type actually breaks.
 */

/*
 * Public stylesheet. Every colour, radius and typeface comes from a CSS
 * custom property written by the Design screen, so nothing here needs
 * editing when a client changes their palette.
 */

/*
 * Theme isolation.
 *
 * The plugin renders its own document but still calls wp_head(), so the
 * active theme's stylesheet loads with it. A theme rule like `p { color: … }`
 * beats our colour inheriting down from .bep-body, because inheritance loses
 * to any direct declaration no matter how specific the ancestor selector is.
 * That is what turned body copy teal and the hero heading navy.
 *
 * :where() carries zero specificity, so these rules weigh exactly 0,1,0 —
 * enough to beat the theme's element selectors, low enough that every
 * component rule further down this file still wins.
 */

.bep-body,
.bep-body :where(*, *::before, *::after) { box-sizing: border-box; }

.bep-body :where(p, li, ul, ol, div, span, label, small, strong, em, td, th, dt, dd, figure, figcaption, h4, h5, h6) {
	color: inherit;
	font-family: inherit;
}

.bep-body :where(h1, h2, h3, h4, h5, h6) { text-transform: none; letter-spacing: -0.01em; }
.bep-body :where(a) { color: inherit; text-decoration: none; }
.bep-body :where(ul, ol) { margin: 0; padding: 0; }
.bep-body :where(table) { border-collapse: collapse; width: 100%; }
.bep-body :where(img, svg, video, iframe) { max-width: 100%; }

/* Themes routinely set a height or line-height on controls, which clips the
   selected option. Ours are sized here so that cannot happen. */
.bep-body :where(input, select, textarea, button) {
	font-family: inherit;
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
	line-height: 1.4;
	min-height: 46px;
	max-width: 100%;
	min-width: 0;
	margin: 0;
}

.bep-body :where(textarea) { min-height: 96px; }
.bep-body :where(input[type="checkbox"], input[type="radio"]) { min-height: 0; width: auto; }

.bep-body {
	margin: 0;
	background: var(--bep-bg);
	color: var(--bep-text);
	font-family: var(--bep-font-body);
	font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.bep-body h1,
.bep-body h2,
.bep-body h3 {
	font-family: var(--bep-font-heading);
	line-height: 1.15;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

.bep-body a { color: inherit; }
.bep-body img { max-width: 100%; height: auto; display: block; }
.bep-price { font-family: var(--bep-font-price); font-variant-numeric: tabular-nums; }
.bep-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bep-hp { position: absolute; left: -9999px; }

.bep-skip {
	position: absolute;
	left: -9999px;
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	padding: 12px 18px;
}

.bep-skip:focus { left: 12px; top: 12px; z-index: 100; }

.bep-shell {
	width: min(100% - 40px, var(--bep-container));
	margin-inline: auto;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* Buttons ---------------------------------------------------------------- */

.bep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--bep-radius-button);
	font-family: var(--bep-font-heading);
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
	font-weight: var(--bep-weight-strong, 600);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bep-btn--accent { background: var(--bep-accent); color: var(--bep-on-accent); }
.bep-btn--accent:hover { background: var(--bep-accent-dark); }
.bep-btn--primary { background: var(--bep-primary); color: var(--bep-on-primary); }
.bep-btn--primary:hover { background: var(--bep-primary-dark); }
.bep-btn--ghost { border-color: var(--bep-border); color: var(--bep-text); background: var(--bep-surface); }
.bep-btn--ghost:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); color: var(--bep-accent-dark); }
.bep-btn--quiet { border-color: currentColor; color: inherit; background: transparent; }
.bep-btn--block { display: flex; width: 100%; }
.bep-btn:focus-visible,
.bep-body a:focus-visible,
.bep-body button:focus-visible,
.bep-body input:focus-visible,
.bep-body select:focus-visible,
.bep-body textarea:focus-visible {
	outline: 3px solid var(--bep-accent);
	outline-offset: 2px;
}

/* Header ----------------------------------------------------------------- */

.bep-header { background: var(--bep-primary); color: var(--bep-on-primary); }

.bep-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 72px;
}

.bep-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.bep-brand__mark {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	border-radius: var(--bep-radius-button);
	font-family: var(--bep-font-heading);
	font-weight: 700;
}

.bep-brand__name { font-family: var(--bep-font-heading); font-weight: var(--bep-weight-heading, 500); font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }

.bep-nav { display: flex; align-items: center; gap: 22px; }
.bep-nav a { text-decoration: none; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); opacity: 0.9; }
.bep-nav a:hover { opacity: 1; }
.bep-nav__cta { opacity: 1; }

.bep-header__toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px));
	cursor: pointer;
}

/* Hero ------------------------------------------------------------------- */

.bep-hero,
.bep-single__hero {
	position: relative;
	background-color: var(--bep-primary);
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.bep-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--bep-primary);
	opacity: 0.62;
}

.bep-hero__inner { position: relative; padding: 96px 0 40px; }

.bep-hero__title {
	font-size: var(--bwm-display, clamp(30px, 7vw, 68px));
	max-width: 14ch;
	margin-bottom: 12px;
}

.bep-hero__tagline { font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); margin: 0 0 6px; }
.bep-hero__place { display: flex; align-items: center; gap: 6px; margin: 0 0 32px; opacity: 0.9; }

.bep-searchbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	background: var(--bep-surface);
	color: var(--bep-text);
	padding: 18px;
	border-radius: var(--bep-radius-section);
	max-width: 780px;
}

.bep-searchbar__field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; }
.bep-searchbar__field span { font-size: 13px; color: var(--bep-muted); }

.bep-searchbar select,
.bep-field input,
.bep-field select,
.bep-field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	color: var(--bep-text);
	font-family: inherit;
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
}

/* Amenity strip ---------------------------------------------------------- */

.bep-strip { background: var(--bep-surface); border-bottom: 1px solid var(--bep-border); }

.bep-strip__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: space-between;
	padding: 22px 0;
}

.bep-strip__item { display: flex; align-items: center; gap: 10px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-strip__item i { font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); color: var(--bep-accent-ink, var(--bep-accent)); }

/* Sections --------------------------------------------------------------- */

.bep-section { padding: 68px 0; }
.bep-section--tint { background: var(--bep-surface); }
.bep-section--dark { background: var(--bep-primary); color: var(--bep-on-primary); }
.bep-section__title { font-size: clamp(26px, 3vw, 36px); }

.bep-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.bep-h2 { font-size: var(--bwm-h4, clamp(17.8px, calc(17.8px + 0.0067 * (100vw - 360px)), 24px)); margin-top: 40px; }
.bep-h3 { font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); margin-top: 24px; }
.bep-prose p { margin: 0 0 1em; max-width: 70ch; }
.bep-prose ul, .bep-prose ol { margin: 0 0 1em; padding-left: 1.3em; max-width: 70ch; }
.bep-prose ul { list-style: disc; }
.bep-prose ol { list-style: decimal; }
.bep-prose li { margin-bottom: 0.4em; }
.bep-prose a { text-decoration: underline; }

/* Types ------------------------------------------------------------------ */

.bep-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.bep-type {
	display: block;
	padding: 24px;
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	text-decoration: none;
}

.bep-type:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-type__name { display: block; font-family: var(--bep-font-heading); font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px)); }
.bep-type__count { display: block; color: var(--bep-muted); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); margin-top: 4px; }
.bep-type__price { display: block; margin-top: 14px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); color: var(--bep-accent-dark); }

/* Cards ------------------------------------------------------------------ */

.bep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 22px;
	margin-top: 28px;
}

.bep-card {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bep-card__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--bep-bg); }
.bep-card__media img { width: 100%; height: 100%; object-fit: cover; }

.bep-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: var(--bwm-h2, clamp(21.1px, calc(21.1px + 0.0140 * (100vw - 360px)), 34px));
	color: var(--bep-muted);
}

.bep-card__type {
	position: absolute;
	left: 12px;
	top: 12px;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	padding: 5px 11px;
	border-radius: var(--bep-radius-button);
	font-size: 12px;
	font-weight: var(--bep-weight-strong, 600);
}

.bep-card__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bep-card__title { font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); margin: 0; }
.bep-card__title a { text-decoration: none; }
.bep-card__title a:hover { color: var(--bep-accent-dark); }
.bep-card__place { margin: 0; color: var(--bep-muted); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); display: flex; align-items: center; gap: 5px; }
.bep-card__summary { margin: 0; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); color: var(--bep-muted); }

.bep-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
	color: var(--bep-muted);
}

.bep-facts li { display: flex; align-items: center; gap: 6px; }
.bep-facts i { color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-facts--large { font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); gap: 22px; margin-bottom: 28px; }

.bep-card__foot {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	gap: 12px;
}

.bep-card__price { margin: 0; font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px)); font-weight: var(--bep-weight-strong, 600); }
.bep-card__per { display: block; font-size: 12px; font-weight: 400; color: var(--bep-muted); font-family: var(--bep-font-body); }

/* Services --------------------------------------------------------------- */

.bep-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}

.bep-service {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 28px;
}

.bep-service--feature { background: var(--bep-primary); color: var(--bep-on-primary); border-color: transparent; }
.bep-service--feature .bep-field input,
.bep-service--feature .bep-field textarea { background: var(--bep-surface); color: var(--bep-text); }
.bep-service__icon { font-size: var(--bwm-h3, clamp(22.2px, calc(22.2px + 0.0085 * (100vw - 360px)), 30px)); color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-service__title { font-size: clamp(18.1px, calc(18.1px + 0.0032 * (100vw - 360px)), 21px); margin: 14px 0 8px; }

.bep-enquiry { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.bep-field { display: flex; flex-direction: column; gap: 5px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-enquiry__status { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); min-height: 1.2em; }
.bep-enquiry__status.is-error { color: var(--bep-danger); }
.bep-enquiry__status.is-ok { color: var(--bep-success); }

/* Closing ---------------------------------------------------------------- */

.bep-closing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.bep-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bep-reasons li { padding-left: 26px; position: relative; }

.bep-reasons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 10px;
	height: 10px;
	background: var(--bep-accent);
	border-radius: 2px;
}

.bep-closing__panel {
	background: var(--bep-surface);
	color: var(--bep-text);
	border-radius: var(--bep-radius-section);
	padding: 28px;
	display: grid;
	gap: 14px;
}

.bep-closing__lead { font-family: var(--bep-font-heading); font-size: clamp(18.1px, calc(18.1px + 0.0032 * (100vw - 360px)), 21px); font-weight: var(--bep-weight-strong, 600); margin: 0; }

/* Listing ---------------------------------------------------------------- */

.bep-pagehead { background: var(--bep-primary); color: var(--bep-on-primary); padding: 56px 0 40px; }
.bep-pagehead__title { font-size: var(--bwm-h2, clamp(30px, 4vw, 44px)); margin: 0; }
.bep-pagehead__meta { margin: 8px 0 0; opacity: 0.85; }

.bep-listing { padding: 40px 0 72px; }

.bep-pager { display: flex; gap: 8px; margin-top: 36px; }

.bep-pager__link {
	min-width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	text-decoration: none;
}

.bep-pager__link.is-current { background: var(--bep-primary); color: var(--bep-on-primary); border-color: var(--bep-primary); }

.bep-empty {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 48px;
	text-align: center;
	display: grid;
	gap: 12px;
	justify-items: center;
	margin-top: 28px;
}

.bep-empty--page { margin: 72px auto; max-width: 640px; }

/* Single ----------------------------------------------------------------- */

.bep-single__heroinner { position: relative; padding: clamp(56px, 11vw, 110px) 0 clamp(28px, 5vw, 46px); }
.bep-single__type { margin: 0 0 10px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-single__title { font-size: clamp(26px, 6vw, 50px); margin: 0 0 10px; overflow-wrap: break-word; }
.bep-single__place { display: flex; align-items: center; gap: 6px; margin: 0; opacity: 0.9; }

.bep-single__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding: clamp(28px, 5vw, 48px) 0 clamp(40px, 7vw, 72px); }

.bep-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bep-gallery img { border-radius: var(--bep-radius-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.bep-amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bep-amenities li { display: flex; align-items: center; gap: 8px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-amenities i { color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-bookbox,
.bep-aside-card {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 24px;
	display: grid;
	gap: 12px;
	position: sticky;
	top: 20px;
}

.bep-aside-card { position: static; margin-top: 18px; }
.bep-bookbox__price { margin: 0; font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); font-weight: var(--bep-weight-strong, 600); }
.bep-bookbox__per { display: block; font-size: 13px; font-weight: 400; color: var(--bep-muted); font-family: var(--bep-font-body); }
.bep-bookbox__note,
.bep-bookbox__meta { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }

/* Footer ----------------------------------------------------------------- */

.bep-footer { background: var(--bep-primary); color: var(--bep-on-primary); padding: 56px 0 24px; }
.bep-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.bep-footer__grid a { display: block; text-decoration: none; opacity: 0.85; margin-bottom: 8px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-footer__grid a:hover { opacity: 1; }
.bep-footer__brand { font-family: var(--bep-font-heading); font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); font-weight: var(--bep-weight-strong, 600); margin: 0 0 8px; }
.bep-footer__text { margin: 0; opacity: 0.8; max-width: 34ch; }
.bep-footer__heading { font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); margin: 0 0 12px; }

.bep-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.bep-footer__base {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
	opacity: 0.8;
}

.bep-footer__base p { margin: 0; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
	.bep-single__body { grid-template-columns: 1fr; }
	.bep-bookbox { position: static; }
	.bep-closing { grid-template-columns: 1fr; }
	.bep-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	.bep-header__toggle { display: block; }

	.bep-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bep-primary);
		padding: 8px 20px 20px;
		z-index: 20;
	}

	.bep-nav.is-open { display: flex; }
	.bep-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
	.bep-nav__cta { margin-top: 14px; border-bottom: 0; }
	.bep-header__inner { position: relative; }
	.bep-hero__inner { padding: 64px 0 32px; }
	.bep-section { padding: 48px 0; }
	.bep-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.bep-btn { transition: none; }
}

/* Booking widget, cart and checkout ------------------------------------- */

.bep-bookbox__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.bep-quote { border-top: 1px solid var(--bep-border); padding-top: 12px; }

.bep-quote__lines { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-quote__lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--bep-muted); }

.bep-quote__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--bep-border);
	font-weight: var(--bep-weight-strong, 600);
	font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px));
}

.bep-quote__note { margin: 10px 0 0; font-size: 13px; color: var(--bep-muted); }

.bep-bookbox__status, .bep-checkout__status { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); min-height: 1.2em; }
.bep-bookbox__status.is-error, .bep-checkout__status.is-error { color: var(--bep-danger); }
.bep-bookbox__status.is-ok, .bep-checkout__status.is-ok { color: var(--bep-success); }

.bep-alternatives { border-top: 1px solid var(--bep-border); padding-top: 12px; }
.bep-alternatives__title { margin: 0 0 8px; font-size: 13px; color: var(--bep-muted); }

.bep-alt { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-alt img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--bep-radius-button); }
.bep-alt strong { display: block; font-weight: var(--bep-weight-strong, 600); }
.bep-alt em { font-style: normal; color: var(--bep-muted); font-size: 13px; }

.bep-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.bep-cart__lines { display: grid; gap: 16px; }

.bep-cartline {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	padding: 16px;
}

.bep-cartline.is-gone { opacity: 0.75; border-color: var(--bep-danger); }
.bep-cartline__image { width: 160px; height: 120px; object-fit: cover; border-radius: var(--bep-radius-button); }
.bep-cartline__title { font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px)); margin: 0 0 6px; }
.bep-cartline__title a { text-decoration: none; }
.bep-cartline__meta { margin: 0 0 8px; color: var(--bep-muted); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-cartline__warning { margin: 0 0 8px; color: var(--bep-danger); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-cartline__price { margin: 0; font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); font-weight: var(--bep-weight-strong, 600); }

.bep-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--bep-muted);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

.bep-cart__summary,
.bep-panelcard {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 24px;
	display: grid;
	gap: 12px;
}

.bep-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.bep-checkout__main { display: grid; gap: 20px; }
.bep-checkout__aside .bep-panelcard { position: sticky; top: 20px; }

.bep-payopt {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	cursor: pointer;
}

.bep-payopt:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-payopt strong { display: block; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-payopt em { font-style: normal; color: var(--bep-muted); font-size: 13px; }

.bep-quotetable { width: 100%; border-collapse: collapse; }
.bep-quotetable td { padding: 10px 0; border-bottom: 1px solid var(--bep-border); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-quotetable td:last-child { text-align: right; }
.bep-quotetable a { text-decoration: none; }

.bep-hiddenform { display: none; }

@media (max-width: 900px) {
	.bep-cart, .bep-checkout { grid-template-columns: 1fr; }
	.bep-checkout__aside .bep-panelcard { position: static; }
	.bep-cartline { grid-template-columns: 100px minmax(0, 1fr); }
	.bep-cartline__image { width: 100px; height: 80px; }
	.bep-cartline__price { grid-column: 2; text-align: right; }
	}

/* Portals and calendar --------------------------------------------------- */

.bep-portalnav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	padding-bottom: 12px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--bep-border);
}

.bep-portalnav__link { text-decoration: none; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); color: var(--bep-muted); padding-bottom: 8px; }
.bep-portalnav__link.is-current { color: var(--bep-text); font-weight: var(--bep-weight-strong, 600); box-shadow: inset 0 -2px 0 var(--bep-accent); }

.bep-portal__status { margin: 16px 0 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); min-height: 1.2em; }
.bep-portal__status.is-error { color: var(--bep-danger); }
.bep-portal__status.is-ok { color: var(--bep-success); }

.bep-muted { color: var(--bep-muted); font-size: 13px; }

.bep-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 30px; }

.bep-metric {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	padding: 20px;
	display: grid;
	gap: 4px;
}

.bep-metric__value { font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); font-weight: var(--bep-weight-heading, 500); line-height: 1.1; }
.bep-metric__label { color: var(--bep-muted); font-size: 13px; }

.bep-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	background: var(--bep-bg);
	border: 1px solid var(--bep-border);
	text-transform: capitalize;
}

.bep-tag--confirmed, .bep-tag--published { border-color: var(--bep-success); color: var(--bep-success); }
.bep-tag--pending, .bep-tag--draft { border-color: var(--bep-warning); color: var(--bep-warning); }
.bep-tag--cancelled, .bep-tag--expired { border-color: var(--bep-danger); color: var(--bep-danger); }

.bep-calendar {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 22px;
	user-select: none;
}

.bep-calendar__bar { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.bep-calendar__nav { display: flex; align-items: center; gap: 12px; }
.bep-calendar__nav strong { min-width: 160px; text-align: center; font-family: var(--bep-font-heading); }
.bep-field--inline { max-width: 320px; }

.bep-calendar__weekdays,
.bep-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bep-calendar__weekdays { margin-bottom: 6px; font-size: 12px; color: var(--bep-muted); text-align: center; }
.bep-calendar__grid[aria-busy="true"] { opacity: 0.5; }

.bep-day {
	min-height: 72px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	padding: 8px;
	text-align: left;
	cursor: pointer;
	font: inherit;
	display: grid;
	align-content: start;
	gap: 4px;
}

.bep-day--empty { border: 0; background: none; cursor: default; min-height: 0; }
.bep-day__num { font-weight: var(--bep-weight-strong, 600); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-day__guest { font-size: 11px; color: var(--bep-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bep-day.is-past { opacity: 0.45; }
.bep-day.is-locked { cursor: not-allowed; }
.bep-day.is-selected { outline: 3px solid var(--bep-accent); outline-offset: -3px; }

.bep-day--booked { background: var(--bep-primary); color: var(--bep-on-primary); border-color: var(--bep-primary); }
.bep-day--booked .bep-day__guest { color: inherit; opacity: 0.8; }
.bep-day--pending { background: var(--bep-accent-soft); border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-day--blocked { background: var(--bep-border); }
.bep-day--maintenance { background: var(--bep-bg); border-style: dashed; }

.bep-calendar__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.bep-calendar__actions p { margin: 0 10px 0 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }

.bep-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--bep-muted); }
.bep-legend li { display: flex; align-items: center; gap: 7px; }
.bep-legend__dot { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--bep-border); display: inline-block; }
.bep-legend__dot--booked { background: var(--bep-primary); border-color: var(--bep-primary); }
.bep-legend__dot--pending { background: var(--bep-accent-soft); border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-legend__dot--blocked { background: var(--bep-border); }
.bep-legend__dot--maintenance { background: var(--bep-bg); border-style: dashed; }
.bep-legend__dot--available { background: var(--bep-surface); }

@media (max-width: 680px) {
	.bep-day { min-height: 54px; padding: 5px; }
	.bep-day__guest { display: none; }
}

/* Messages and reviews --------------------------------------------------- */

.bep-thread { display: grid; gap: 10px; margin-bottom: 16px; }

.bep-msg {
	padding: 12px 14px;
	border-radius: var(--bep-radius-card);
	background: var(--bep-bg);
	border: 1px solid var(--bep-border);
}

.bep-msg--host { background: var(--bep-accent-soft); border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-msg__body { margin: 0 0 6px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); white-space: pre-line; }
.bep-msg__meta { margin: 0; font-size: 12px; color: var(--bep-muted); }

.bep-stars { margin: 0 0 6px; color: var(--bep-accent-ink, var(--bep-accent)); font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); letter-spacing: 2px; }

.bep-ratingchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: 12px;
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
	font-family: var(--bep-font-body);
	font-weight: 400;
	color: var(--bep-muted);
}

.bep-ratingchip i { color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.bep-review {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	padding: 20px;
}

.bep-review__title { font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); margin: 0 0 8px; }
.bep-review__body { margin: 0 0 12px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-review__who { margin: 0; font-size: 13px; color: var(--bep-muted); }

.bep-review__reply {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--bep-border);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

.bep-review__reply p { margin: 0 0 4px; }

/* ========================================================================
   Responsive pass
   ======================================================================== */

/* Anything that can hold a long unbroken string gets permission to break,
   so a property name or an email address cannot widen the page. */
.bep-body h1,
.bep-body h2,
.bep-body h3,
.bep-card__title,
.bep-cartline__title,
.bep-review__title,
.bep-prose,
.bep-msg__body { overflow-wrap: break-word; word-break: break-word; }

/* The WordPress admin bar is fixed and 32px tall, 46px on small screens.
   Our own document has to account for it or the header sits underneath. */
.admin-bar .bep-header { margin-top: 0; }

@media (max-width: 1100px) {
	.bep-single__body { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
	.bep-footer__grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/*
	 * On a phone the booking box is the reason the page exists, so it comes
	 * before the description rather than after several screens of house
	 * rules. No sticky bar: these sites usually carry a chat bubble in the
	 * bottom corner and two floating things fight over the same thumb.
	 */
	.bep-single__body { display: flex; flex-direction: column; }
	.bep-single__aside { order: -1; }
	.bep-single__main { order: 1; }

	.bep-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bep-amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-reviews { grid-template-columns: 1fr; }
	.bep-types { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
	.bep-strip__inner { gap: 16px 24px; }
	.bep-strip__item { flex: 1 1 40%; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
}

@media (max-width: 680px) {
	.bep-shell { width: calc(100% - 32px); }

	/* Menu links need a thumb-sized target, not a text-sized one. */
	.bep-nav a { padding: 14px 0; min-height: 48px; display: flex; align-items: center; }
	.bep-header__toggle { min-width: 48px; min-height: 48px; }

	.bep-searchbar { padding: 14px; gap: 10px; }
	.bep-searchbar__field { flex: 1 1 100%; }

	.bep-section__head { flex-direction: column; align-items: stretch; gap: 12px; }
	.bep-grid { grid-template-columns: 1fr; gap: 16px; }
	.bep-types { grid-template-columns: 1fr; }
	.bep-amenities { grid-template-columns: 1fr; }
	.bep-services { grid-template-columns: 1fr; }
	.bep-service { padding: 20px; }

	.bep-card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.bep-card__foot .bep-btn { width: 100%; }

	.bep-facts--large { gap: 12px 18px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
	.bep-empty { padding: 32px 20px; }
	.bep-empty--page { margin: 40px auto; }

	/* Native date inputs have a stubborn intrinsic width; side by side they
	   overflow a 320px screen, so they stack. */
	.bep-bookbox__dates { grid-template-columns: 1fr; }

	.bep-bookbox,
	.bep-panelcard,
	.bep-cart__summary { padding: 18px; }

	.bep-quote__total { font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); }

	/*
	 * Wide tables become stacked rows rather than a horizontal scroll.
	 * Scrolling sideways inside a page that also scrolls down is the worst
	 * of both, and these tables are short enough to stack cleanly.
	 */
	.bep-quotetable tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--bep-border);
	}

	.bep-quotetable td {
		display: block;
		border: 0;
		padding: 2px 0;
	}

	.bep-quotetable td:last-child { text-align: left; font-weight: var(--bep-weight-strong, 600); }

	.bep-cartline {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.bep-cartline__image { width: 100%; height: 180px; }
	.bep-cartline__price { grid-column: 1; text-align: left; }

	.bep-portalnav { gap: 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
	.bep-portalnav__link { white-space: nowrap; }

	.bep-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bep-metric { padding: 14px; }
	.bep-metric__value { font-size: clamp(18.1px, calc(18.1px + 0.0032 * (100vw - 360px)), 21px); }

	.bep-calendar { padding: 14px; }
	.bep-calendar__bar { flex-direction: column; align-items: stretch; gap: 12px; }
	.bep-field--inline { max-width: none; }
	.bep-calendar__nav { justify-content: space-between; }
	.bep-calendar__grid { gap: 3px; }
	.bep-calendar__actions .bep-btn { flex: 1 1 100%; }

	.bep-alt img { width: 52px; height: 40px; }
	.bep-footer { padding: 40px 0 20px; }
	.bep-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.bep-footer__base { flex-direction: column; gap: 6px; }
}

@media (max-width: 420px) {
	.bep-shell { width: calc(100% - 24px); }
	.bep-brand__name { font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
	.bep-gallery { grid-template-columns: 1fr; }
	.bep-metrics { grid-template-columns: 1fr; }
	.bep-day { min-height: 46px; padding: 3px; }
	.bep-day__num { font-size: 12px; }
	.bep-legend { gap: 10px; font-size: 12px; }
}

/* Coarse pointers get real targets regardless of viewport width. */
@media (pointer: coarse) {
	.bep-btn { min-height: 48px; }
	.bep-linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
	.bep-day { min-height: 52px; }
}


/* ========================================================================
   Isolation, restated
   ------------------------------------------------------------------------
   Repeated at the end of the file so that if a stylesheet does slip past
   the dequeue and loads after ours, source order does not hand it the
   argument. Still 0,1,0 thanks to :where(), so every component rule above
   continues to win.
   ======================================================================== */

/*
 * Every selector below is restricted to elements that carry no bep- class.
 *
 * The earlier version of this block was not, and the comment above it was
 * wrong: at equal specificity source order decides, and this block sits
 * after most of the component rules, so it was overriding them rather than
 * deferring to them. Muted text lost its colour and the mosaic's "View
 * more" label turned dark on a dark panel.
 *
 * :where() still zeroes the whole argument, so :not() inside it costs
 * nothing and the weight stays 0,1,0 — enough to beat a stray theme rule,
 * and now incapable of touching anything the plugin styles itself.
 */

.bep-body :where(p:not([class*="bep-"]), li:not([class*="bep-"]), span:not([class*="bep-"]), label:not([class*="bep-"]), small, strong, em, td:not([class*="bep-"]), th, h4, h5, h6) { color: inherit; }
.bep-body :where(a:not([class*="bep-"])) { color: inherit; }
.bep-body :where(input:not([class*="bep-"]), select:not([class*="bep-"]), textarea:not([class*="bep-"])) { min-height: 46px; line-height: 1.4; }
.bep-hero :where(h1, p:not([class*="bep-"])), .bep-single__hero :where(h1, p:not([class*="bep-"])), .bep-pagehead :where(h1, p:not([class*="bep-"])) { color: inherit; }
.bep-section--dark :where(h2, p:not([class*="bep-"]), li:not([class*="bep-"])) { color: inherit; }

/* ========================================================================
   Property listing layout
   ------------------------------------------------------------------------
   Title and price on one line, a photo mosaic, then facts on the left with
   the booking panel held beside them. Replaces the old full-bleed hero,
   which pushed every useful fact below the fold.
   ======================================================================== */

.bep-listing-page { padding-bottom: 8px; }

.bep-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 20px 0 0;
	font-size: 13px;
	color: var(--bep-muted);
}

.bep-crumbs a:hover { color: var(--bep-accent-dark); }
.bep-crumbs__current { color: var(--bep-text); }

.bep-listinghead {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--bep-border);
	margin-bottom: 22px;
}

.bep-listinghead__title { font-size: var(--bwm-h2, clamp(24px, 3.2vw, 34px)); margin: 0 0 8px; }

.bep-listinghead__place {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--bep-muted);
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
}

.bep-listinghead__place i { color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-listinghead__side { text-align: right; display: grid; gap: 10px; justify-items: end; }
.bep-listinghead__price { margin: 0; font-size: var(--bwm-h3, clamp(22px, 2.6vw, 30px)); font-weight: var(--bep-weight-strong, 600); line-height: 1.1; }
.bep-listinghead__per { display: block; font-size: 13px; font-weight: 400; color: var(--bep-muted); font-family: var(--bep-font-body); }

.bep-actions { display: flex; gap: 8px; }

.bep-iconbtn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	color: var(--bep-text);
	cursor: pointer;
	font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px));
	min-height: 40px;
}

.bep-iconbtn:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); color: var(--bep-accent-dark); }

/* Mosaic ----------------------------------------------------------------- */

.bep-mosaic {
	display: grid;
	grid-template-columns: 2fr 1.15fr 1.15fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	height: 380px;
	margin-bottom: 34px;
}

.bep-mosaic__cell { position: relative; margin: 0; overflow: hidden; border-radius: var(--bep-radius-card); background: var(--bep-border); }
.bep-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; }
.bep-mosaic__cell:first-child { grid-row: span 2; }
.bep-mosaic__cell:nth-child(2) { grid-row: span 2; }

.bep-mosaic--1 .bep-mosaic__cell:first-child { grid-column: span 3; }
.bep-mosaic--2 .bep-mosaic__cell:nth-child(2) { grid-column: span 2; }
.bep-mosaic--3 .bep-mosaic__cell:nth-child(3) { grid-row: span 2; }

.bep-mosaic__more {
	position: absolute;
	inset: 0;
	color: var(--bep-on-primary);
	display: grid;
	place-items: center;
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	font-family: var(--bep-font-heading);
	font-weight: var(--bep-weight-strong, 600);
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
	opacity: 0.82;
}

.bep-mosaic__more:hover { opacity: 0.92; }

/* Body ------------------------------------------------------------------- */

.bep-listing-page__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 30px;
	align-items: start;
	padding-bottom: 60px;
}

.bep-listing-page__main { display: grid; gap: 22px; }

.bep-block {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 26px;
}

.bep-block__title { font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); margin: 0 0 18px; }

.bep-overview {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 20px;
	list-style: none;
}

.bep-overview li { display: flex; align-items: center; gap: 9px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-overview i { color: var(--bep-accent-ink, var(--bep-accent)); font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); }

.bep-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 24px;
	list-style: none;
}

.bep-details li { display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-details span { color: var(--bep-muted); }
.bep-details span::after { content: ":"; }

.bep-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 20px;
	list-style: none;
}

.bep-features li { display: flex; align-items: center; gap: 9px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-features i { color: var(--bep-accent-ink, var(--bep-accent)); font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); }

/* Sidebar ---------------------------------------------------------------- */

.bep-listing-page__aside { display: grid; gap: 20px; position: sticky; top: 20px; }

.bep-sidecard {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	overflow: hidden;
}

.bep-sidecard__head {
	margin: 0;
	padding: 14px 20px;
	background: var(--bep-primary-soft);
	border-bottom: 1px solid var(--bep-border);
	font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px);
}

.bep-sidecard__body { padding: 20px; }
.bep-sidecard__body--flush { padding: 8px 0; }

/* The booking widget is already a card elsewhere, so it drops its own
   chrome when it sits inside one. */
.bep-sidecard .bep-bookbox {
	border: 0;
	padding: 0;
	border-radius: 0;
	position: static;
	background: transparent;
}

.bep-host { display: flex; gap: 12px; align-items: center; }

.bep-host__mark {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	font-family: var(--bep-font-heading);
	font-weight: var(--bep-weight-strong, 600);
	font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px));
}

.bep-host__name { margin: 0 0 3px; font-family: var(--bep-font-heading); font-weight: var(--bep-weight-strong, 600); }
.bep-host__phone { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); display: flex; align-items: center; gap: 6px; color: var(--bep-muted); }
.bep-host__phone i { color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-host__address { margin: 14px 0 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); display: flex; gap: 6px; }
.bep-host__address i { color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-mini { display: flex; gap: 12px; padding: 12px 20px; align-items: center; }
.bep-mini:hover { background: var(--bep-bg); }
.bep-mini img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--bep-radius-button); flex: 0 0 90px; }
.bep-mini__body { display: grid; gap: 2px; min-width: 0; }
.bep-mini__title { font-family: var(--bep-font-heading); font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-mini__place { font-size: 13px; color: var(--bep-muted); }
.bep-mini__price { font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); font-weight: var(--bep-weight-strong, 600); }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.bep-listing-page__body { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
	.bep-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bep-mosaic { height: 320px; }
}

@media (max-width: 900px) {
	.bep-listing-page__body { display: flex; flex-direction: column; }
	.bep-listing-page__aside { position: static; order: -1; }
	.bep-listing-page__main { order: 1; }
	.bep-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.bep-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		height: 300px;
	}

	.bep-mosaic__cell:first-child { grid-column: span 2; grid-row: span 1; }
	.bep-mosaic__cell:nth-child(2) { grid-row: span 1; }
	.bep-mosaic--3 .bep-mosaic__cell:nth-child(3) { grid-row: span 1; }
}

@media (max-width: 680px) {
	.bep-listinghead { flex-direction: column; gap: 14px; }
	.bep-listinghead__side { text-align: left; justify-items: start; width: 100%; }
	.bep-listinghead__price { font-size: var(--bwm-h4, clamp(17.8px, calc(17.8px + 0.0067 * (100vw - 360px)), 24px)); }
	.bep-block { padding: 20px; }
	.bep-overview { grid-template-columns: 1fr; gap: 12px; }
	.bep-details { grid-template-columns: 1fr; }
	.bep-features { grid-template-columns: 1fr; }
	.bep-mosaic { height: 240px; gap: 8px; }
	.bep-crumbs { font-size: 12px; }
}

@media (max-width: 420px) {
	.bep-mosaic { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 200px; }
	.bep-mosaic__cell:first-child { grid-column: span 1; }
	.bep-mosaic__cell:nth-child(n + 2) { display: none; }
	.bep-mini img { width: 70px; height: 56px; flex-basis: 70px; }
}

/* Add-on services and arrival ------------------------------------------- */

.bep-services-list { display: grid; gap: 12px; }

.bep-serviceline {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
}

.bep-serviceline > i { font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-serviceline__name { margin: 0; font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-serviceline__desc { margin: 3px 0 0; font-size: 13px; color: var(--bep-muted); }
.bep-serviceline__price { margin: 4px 0 0; font-size: 13px; color: var(--bep-accent-dark); font-weight: var(--bep-weight-strong, 600); }
.bep-serviceline__control .bep-field { margin: 0; }
.bep-serviceline__control select { min-width: 92px; }
.bep-serviceline__control .bep-check { margin: 0; white-space: nowrap; }

.bep-extrasline span:first-child { font-weight: var(--bep-weight-strong, 600); color: var(--bep-text); }

.bep-agreement {
	max-height: 320px;
	overflow-y: auto;
	padding: 16px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	background: var(--bep-bg);
}

.bep-code-badge {
	margin: 0 0 12px;
	padding: 18px;
	text-align: center;
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	border-radius: var(--bep-radius-card);
	font-family: var(--bep-font-price);
	font-size: clamp(23.7px, calc(23.7px + 0.0090 * (100vw - 360px)), 32px);
	font-weight: var(--bep-weight-heading, 500);
	letter-spacing: 6px;
}

.bep-checkedin { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--bep-success); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }

@media (max-width: 680px) {
	.bep-serviceline { grid-template-columns: 24px minmax(0, 1fr); }
	.bep-serviceline__control { grid-column: 2; justify-self: start; }
	.bep-code-badge { font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); letter-spacing: 4px; }
}

/* ========================================================================
   Cart, checkout and confirmation
   ======================================================================== */

.bep-checkouthead { padding: 22px 0 26px; border-bottom: 1px solid var(--bep-border); }
.bep-checkouthead__title { font-size: clamp(24px, 3.2vw, 32px); margin: 12px 0 0; }

.bep-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	counter-reset: bep-step;
}

.bep-steps__item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
	color: var(--bep-muted);
}

.bep-steps__item span {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--bep-border);
	background: var(--bep-surface);
	font-size: 13px;
	font-weight: var(--bep-weight-strong, 600);
}

.bep-steps__item.is-current { color: var(--bep-text); font-weight: var(--bep-weight-strong, 600); }
.bep-steps__item.is-current span { background: var(--bep-accent); color: var(--bep-on-accent); border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-steps__item.is-done span { background: var(--bep-primary); color: var(--bep-on-primary); border-color: var(--bep-primary); }

.bep-checkout-page { padding: 30px 0 70px; }

.bep-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 28px;
	align-items: start;
}

.bep-checkout__main { display: grid; gap: 20px; }
.bep-checkout__aside { display: grid; gap: 18px; position: sticky; top: 20px; }
.bep-block__lead { margin: -8px 0 16px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }

.bep-fieldrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bep-field--tight { margin: 0; }

.bep-fineprint {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--bep-muted);
}

.bep-fineprint i { color: var(--bep-accent-ink, var(--bep-accent)); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }

.bep-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 13px 15px;
	border-radius: var(--bep-radius-card);
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-left: 3px solid var(--bep-accent);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

.bep-alert--warn { border-left-color: var(--bep-warning); color: var(--bep-warning); }
.bep-alert i { font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px)); flex: 0 0 auto; }

/* Payment choices ------------------------------------------------------- */

.bep-payopts { display: grid; gap: 10px; margin-bottom: 18px; }

.bep-payopt {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 15px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	cursor: pointer;
	background: var(--bep-surface);
}

.bep-payopt:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-payopt:has(input:checked) { border-color: var(--bep-accent-ink, var(--bep-accent)); background: var(--bep-accent-soft); }
.bep-payopt__body { display: grid; gap: 3px; }
.bep-payopt__name { font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-payopt__note { font-size: 13px; color: var(--bep-muted); }
.bep-check--terms { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-check--terms a { text-decoration: underline; }

.bep-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); white-space: nowrap; cursor: pointer; }

/* Summary --------------------------------------------------------------- */

.bep-staysummary { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--bep-border); }
.bep-staysummary img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--bep-radius-button); flex: 0 0 90px; }
.bep-staysummary__title { margin: 0 0 3px; font-family: var(--bep-font-heading); font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-staysummary__place { margin: 0; font-size: 13px; color: var(--bep-muted); }

.bep-stayfacts { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.bep-stayfacts li { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-stayfacts span { color: var(--bep-muted); }
.bep-quote__saving { color: var(--bep-success); }

.bep-paynow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: var(--bep-radius-card);
	background: var(--bep-accent-soft);
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
}

.bep-btn--large { padding: 16px 22px; font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }

.bep-assurances { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bep-assurances li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--bep-muted); }
.bep-assurances i { color: var(--bep-success); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); flex: 0 0 auto; }

/* Cart ------------------------------------------------------------------ */

.bep-cartlist { display: grid; gap: 16px; }

.bep-stay {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 240px;
	gap: 20px;
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 18px;
	align-items: start;
}

.bep-stay.is-gone { border-color: var(--bep-warning); }
.bep-stay__media { display: block; border-radius: var(--bep-radius-card); overflow: hidden; aspect-ratio: 22 / 17; background: var(--bep-bg); }
.bep-stay__media img { width: 100%; height: 100%; object-fit: cover; }
.bep-stay__title { font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); margin: 0 0 6px; }
.bep-stay__place { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--bep-muted); font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-stay__place i { color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-stay__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.bep-stay__facts li { display: grid; gap: 2px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
.bep-stay__facts span { color: var(--bep-muted); font-size: 12px; }

.bep-stay__side { display: grid; gap: 10px; justify-items: stretch; text-align: right; }
.bep-stay__price { margin: 0; font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); font-weight: var(--bep-weight-strong, 600); }
.bep-stay__per { display: block; font-size: 12px; font-weight: 400; color: var(--bep-muted); font-family: var(--bep-font-body); }
.bep-stay__deposit { margin: 0; font-size: 13px; color: var(--bep-accent-dark); }

.bep-cartfoot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 24px; }
.bep-empty--wide { max-width: 560px; margin-inline: auto; }
.bep-empty__icon { font-size: var(--bwm-h2, clamp(21.1px, calc(21.1px + 0.0140 * (100vw - 360px)), 34px)); color: var(--bep-accent-ink, var(--bep-accent)); }

/* Confirmation ---------------------------------------------------------- */

.bep-confirm { max-width: 760px; padding: 56px 0 80px; text-align: center; }
.bep-confirm__head i { font-size: var(--bwm-h1, clamp(32.2px, calc(32.2px + 0.0215 * (100vw - 360px)), 52px)); color: var(--bep-success); }
.bep-confirm__head--pending i { color: var(--bep-warning); }
.bep-confirm__head--warn i { color: var(--bep-danger); }
.bep-confirm__head h1 { font-size: clamp(26px, 3.6vw, 36px); margin: 12px 0 8px; }
.bep-confirm__head p { margin: 0 auto; max-width: 52ch; color: var(--bep-muted); }

.bep-confirm__card {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 24px;
	margin: 28px 0;
	text-align: left;
}

.bep-confirm__ref {
	display: grid;
	gap: 4px;
	margin: 0 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bep-border);
	text-align: center;
}

.bep-confirm__ref span { font-size: 13px; color: var(--bep-muted); }
.bep-confirm__ref strong { font-family: var(--bep-font-price); font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); letter-spacing: 3px; }
.bep-confirm__next { font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); margin: 0 0 18px; }

.bep-nextsteps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; text-align: left; }
.bep-nextsteps li { display: flex; gap: 14px; align-items: flex-start; }

.bep-nextsteps span {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	font-weight: var(--bep-weight-strong, 600);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

.bep-nextsteps strong { display: block; margin-bottom: 2px; }
.bep-nextsteps p { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }

.bep-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bep-confirm__help { margin: 26px 0 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }
.bep-confirm__help a { text-decoration: underline; }

@media (max-width: 1100px) {
	.bep-checkout { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
	.bep-stay { grid-template-columns: 180px minmax(0, 1fr) 200px; }
}

@media (max-width: 900px) {
	/* The summary carries the price and the button, so it leads on a phone. */
	.bep-checkout { display: flex; flex-direction: column; }
	.bep-checkout__aside { position: static; order: -1; }
	.bep-checkout__main { order: 1; }

	.bep-stay { grid-template-columns: 160px minmax(0, 1fr); }
	.bep-stay__side { grid-column: 1 / -1; text-align: left; justify-items: start; }
	.bep-stay__side .bep-btn { width: auto; display: inline-flex; }
}

@media (max-width: 680px) {
	.bep-fieldrow { grid-template-columns: 1fr; }
	.bep-steps { gap: 8px 16px; font-size: 13px; }
	.bep-stay { grid-template-columns: 1fr; padding: 14px; }
	.bep-stay__media { aspect-ratio: 16 / 9; }
	.bep-stay__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-stay__side .bep-btn { width: 100%; }
	.bep-confirm { padding: 36px 0 56px; }
	.bep-confirm__actions .bep-btn { width: 100%; }
	.bep-confirm__ref strong { font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); }
}

/* Listing and search ----------------------------------------------------- */

.bep-checkouthead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 10px 0 0;
	color: var(--bep-muted);
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
}

.bep-checkouthead__meta i { color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-checkouthead__meta a { text-decoration: underline; }

.bep-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 16px;
	margin-bottom: 18px;
}

.bep-filterbar .bep-field { margin: 0; flex: 1 1 160px; }
.bep-filterbar .bep-field--grow { flex: 2 1 240px; }
.bep-filterbar .bep-field--narrow { flex: 0 1 120px; }
.bep-filterbar .bep-btn { flex: 0 0 auto; }

.bep-resultbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.bep-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bep-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--bep-border);
	background: var(--bep-surface);
	font-size: 13px;
	text-decoration: none;
}

.bep-chip:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); color: var(--bep-accent-dark); }
.bep-chip i { font-size: 13px; opacity: 0.7; }
.bep-chip--clear { border-style: dashed; color: var(--bep-muted); }

.bep-sortform { display: flex; align-items: center; gap: 8px; }
.bep-sortform .bep-field { margin: 0; }
.bep-sortform select { min-width: 190px; }

.bep-card__rating {
	position: absolute;
	right: 12px;
	top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	color: var(--bep-text);
	font-family: var(--bep-font-price);
	font-size: 13px;
	font-weight: var(--bep-weight-strong, 600);
}

.bep-card__rating i { color: var(--bep-accent-ink, var(--bep-accent)); }

@media (max-width: 900px) {
	.bep-filterbar .bep-field { flex: 1 1 45%; }
	.bep-filterbar .bep-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 680px) {
	.bep-filterbar { padding: 14px; gap: 10px; }
	.bep-filterbar .bep-field,
	.bep-filterbar .bep-field--grow,
	.bep-filterbar .bep-field--narrow { flex: 1 1 100%; }
	.bep-resultbar { flex-direction: column; align-items: stretch; }
	.bep-sortform select { width: 100%; min-width: 0; }
}

/* Portals, reading pages and small screens -------------------------------- */

.bep-block--reading { max-width: 78ch; margin-inline: auto; }
.bep-block--reading .bep-prose p { max-width: none; }

.bep-empty--page { margin: 56px auto; }

.bep-portalnav {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 6px 8px;
	gap: 4px;
	border-bottom: 1px solid var(--bep-border);
	margin-bottom: 22px;
}

.bep-portalnav__link {
	padding: 10px 14px;
	border-radius: var(--bep-radius-button);
	box-shadow: none;
}

.bep-portalnav__link.is-current {
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	box-shadow: none;
}

.bep-portalnav__link:hover { color: var(--bep-text); }
.bep-portalnav__link.is-current:hover { color: var(--bep-on-primary); }

/* Tables inside portal panels sit flush against the card padding. */
.bep-block > .bep-quotetable { margin: 0; }
.bep-block > .bep-quotetable tr:last-child td { border-bottom: 0; }

.bep-stay__media .bep-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--bep-bg);
	font-size: var(--bwm-h3, clamp(20.7px, calc(20.7px + 0.0079 * (100vw - 360px)), 28px));
	color: var(--bep-muted);
	border-radius: var(--bep-radius-card);
}

.bep-stay__place .bep-tag { margin-left: 6px; }

@media (max-width: 680px) {
	.bep-portalnav { padding: 6px; }
	.bep-portalnav__link { padding: 10px 12px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
	.bep-empty--page { margin: 32px auto; }
}

/* ========================================================================
   Manager console
   ======================================================================== */

.bep-console {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	min-height: 80vh;
	background: var(--bep-bg);
}

.bep-console__side {
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.bep-console__brand { display: flex; gap: 11px; align-items: center; text-decoration: none; }
.bep-console__brandname { display: block; font-family: var(--bep-font-heading); font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-console__brandmeta { display: block; font-size: 12px; opacity: 0.7; }

.bep-console__nav,
.bep-console__foot { display: grid; gap: 2px; }
.bep-console__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); }

.bep-console__link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: var(--bep-radius-button);
	text-decoration: none;
	font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px));
	opacity: 0.85;
	min-height: 44px;
}

.bep-console__link i { font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); }
.bep-console__link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.bep-console__link.is-current { background: var(--bep-accent); color: var(--bep-on-accent); opacity: 1; }

.bep-console__badge {
	margin-left: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	font-size: 12px;
	font-weight: var(--bep-weight-strong, 600);
}

.bep-console__link.is-current .bep-console__badge { background: var(--bep-on-accent); color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-console__main { padding: 24px 26px 60px; min-width: 0; }

.bep-console__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.bep-console__head h1 { margin: 0; font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); }
.bep-console__alerts { display: flex; flex-wrap: wrap; gap: 8px; }

.bep-console__alert {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: var(--bep-radius-button);
	background: var(--bep-surface);
	border: 1px solid var(--bep-warning);
	color: var(--bep-warning);
	font-size: 13px;
	text-decoration: none;
}

.bep-console__body { display: grid; gap: 20px; }
.bep-console__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.bep-console__cols--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.bep-console__cols > div { display: grid; gap: 20px; align-content: start; }

.bep-console__back { margin: 0; }
.bep-console__back a { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }
.bep-console__ref { font-size: 13px; font-weight: 400; color: var(--bep-muted); margin-left: 8px; }

.bep-consoleform { display: grid; gap: 12px; margin-top: 14px; }
.bep-actionstack { display: grid; gap: 10px; }
.bep-alert--success { border-left-color: var(--bep-success); color: var(--bep-success); }

.bep-proplist { display: grid; gap: 10px; }

.bep-propline {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) 110px 140px auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	background: var(--bep-surface);
}

.bep-propline img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--bep-radius-button); }
.bep-propline__body { display: grid; gap: 3px; min-width: 0; }
.bep-propline__title { font-weight: var(--bep-weight-strong, 600); font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-propline .bep-field { margin: 0; }

@media (max-width: 1100px) {
	.bep-console { grid-template-columns: 210px minmax(0, 1fr); }
	.bep-console__cols,
	.bep-console__cols--wide { grid-template-columns: 1fr; }
	.bep-propline { grid-template-columns: 70px minmax(0, 1fr) 100px 130px; }
	.bep-propline img { width: 70px; height: 56px; }
	.bep-propline .bep-toggle,
	.bep-propline .bep-btn { grid-column: span 2; }
}

@media (max-width: 780px) {
	/* The sidebar becomes a scrolling strip: a phone has no room for a rail,
	   and hiding navigation behind a menu button costs a tap on every move. */
	.bep-console { grid-template-columns: 1fr; }

	.bep-console__side {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		overflow-x: auto;
	}

	.bep-console__brand,
	.bep-console__foot { display: none; }
	.bep-console__nav { display: flex; gap: 6px; }
	.bep-console__link { white-space: nowrap; padding: 9px 12px; }
	.bep-console__link span { font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); }
	.bep-console__main { padding: 18px 16px 50px; }
	.bep-console__head h1 { font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); }
	.bep-propline { grid-template-columns: 1fr 1fr; }
	.bep-propline__media { display: none; }
	.bep-propline__body { grid-column: 1 / -1; }
}

.bep-nav__manage {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--bep-radius-button);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

/* ========================================================================
   Homepage sections
   ------------------------------------------------------------------------
   Also used by the shortcodes, so everything here has to survive being
   dropped inside a page builder with a theme's own styles still loaded.
   ======================================================================== */

.bep-embed { background: transparent; overflow-x: visible; }
.bep-embed > section:first-child { margin-top: 0; }

.bep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: var(--bep-weight-strong, 600);
	letter-spacing: 0.02em;
	color: var(--bep-accent-dark);
}

.bep-eyebrow i { font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); }
.bep-eyebrow--centred { justify-content: center; width: 100%; }

.bep-section__title--centred { text-align: center; }
.bep-section__lead { margin: 0 auto 26px; max-width: 62ch; text-align: center; color: var(--bep-muted); font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }
.bep-section__lead--left { margin-left: 0; text-align: left; }
.bep-section__cta { margin: 30px 0 0; text-align: center; }

/* Hero -------------------------------------------------------------------- */

.bep-hero__inner { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.bep-hero__copy { max-width: 640px; }
.bep-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.bep-hero__badge {
	background: var(--bep-surface);
	color: var(--bep-text);
	border-radius: var(--bep-radius-card);
	padding: 14px 18px;
	text-align: center;
	min-width: 170px;
}

.bep-hero__badgetop { margin: 0 0 4px; font-size: 12px; color: var(--bep-muted); }
.bep-hero__badgemeta { margin: 4px 0 0; font-size: 13px; color: var(--bep-muted); }

.bep-herosearch {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: var(--bep-surface);
	color: var(--bep-text);
	border-radius: var(--bep-radius-section);
	padding: 16px;
	margin-bottom: -34px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.bep-herosearch .bep-field { margin: 0; flex: 1 1 170px; }
.bep-herosearch .bep-field--narrow { flex: 0 1 110px; }
.bep-herosearch .bep-btn { flex: 0 0 auto; }
.bep-strip { padding-top: 46px; }

/* Space cards ------------------------------------------------------------- */

.bep-spaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.bep-space {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bep-space__media { position: relative; display: block; aspect-ratio: 7 / 5; background: var(--bep-bg); }
.bep-space__media img { width: 100%; height: 100%; object-fit: cover; }

.bep-space__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	padding: 5px 12px;
	border-radius: var(--bep-radius-button);
	font-size: 12px;
	font-weight: var(--bep-weight-heading, 500);
}

.bep-space__body { padding: 18px; display: grid; gap: 10px; }
.bep-space__note { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }
.bep-space__price { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }
.bep-space__price .bep-price { font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px)); font-weight: var(--bep-weight-heading, 500); color: var(--bep-text); }
.bep-space__per { display: block; font-size: 12px; }

/* Service splits ---------------------------------------------------------- */

.bep-service-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.bep-visa .bep-panelcard { color: var(--bep-text); }
.bep-quote__note--light { opacity: 0.75; }

.bep-treatments { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.bep-treatments li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 14px 8px;
	background: var(--bep-bg);
	border-radius: var(--bep-radius-card);
	font-size: 13px;
	text-align: center;
}

.bep-treatments i { font-size: clamp(18.1px, calc(18.1px + 0.0032 * (100vw - 360px)), 21px); color: var(--bep-accent-ink, var(--bep-accent)); }

.bep-ticks { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.bep-ticks li { display: flex; align-items: center; gap: 9px; font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }
.bep-ticks i { color: var(--bep-accent-ink, var(--bep-accent)); font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px)); }

/* Tours ------------------------------------------------------------------- */

.bep-tours { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

.bep-tour {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	padding: 22px;
}

.bep-tour__icon { font-size: var(--bwm-h3, clamp(19.2px, calc(19.2px + 0.0074 * (100vw - 360px)), 26px)); color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-tour__title { font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); margin: 12px 0 6px; }
.bep-tour__note { margin: 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }
.bep-tours__form { max-width: 560px; margin: 30px auto 0; }

/* Why guests love us ------------------------------------------------------ */

.bep-why { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 34px; align-items: center; }

.bep-ratingpanel {
	background: var(--bep-surface);
	color: var(--bep-text);
	border-radius: var(--bep-radius-section);
	padding: 28px;
	text-align: center;
}

.bep-ratingpanel__score { font-size: var(--bwm-h2, clamp(28.5px, calc(28.5px + 0.0190 * (100vw - 360px)), 46px)); font-weight: var(--bep-weight-heading, 500); line-height: 1; margin: 0 0 8px; }
.bep-ratingpanel__meta { margin: 6px 0 0; font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px); color: var(--bep-muted); }

/* Location ---------------------------------------------------------------- */

.bep-locationsplit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }

.bep-locationcard,
.bep-bookband {
	background: var(--bep-surface);
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-section);
	padding: 28px;
}

.bep-locationcard__icon { font-size: var(--bwm-h3, clamp(22.2px, calc(22.2px + 0.0085 * (100vw - 360px)), 30px)); color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-locationcard__title { font-size: var(--bwm-h4, clamp(16.3px, calc(16.3px + 0.0062 * (100vw - 360px)), 22px)); margin: 12px 0 6px; }
.bep-locationcard__place { margin: 0; font-size: var(--bwm-text-lg, clamp(14.6px, calc(14.6px + 0.0026 * (100vw - 360px)), 17px)); font-weight: var(--bep-weight-strong, 600); }
.bep-locationcard__address { margin: 4px 0 0; color: var(--bep-muted); }
.bep-map { margin-top: 16px; border-radius: var(--bep-radius-card); overflow: hidden; }
.bep-map iframe { width: 100%; min-height: 220px; border: 0; display: block; }

.bep-bookband { background: var(--bep-primary); color: var(--bep-on-primary); border-color: transparent; display: grid; gap: 12px; align-content: center; }
.bep-bookband__title { font-size: var(--bwm-h4, clamp(17.8px, calc(17.8px + 0.0067 * (100vw - 360px)), 24px)); margin: 0; }

/* Facility strip ---------------------------------------------------------- */

.bep-facilities { padding: 0 0 10px; }
.bep-facilities .bep-section__title { padding: 40px 0 24px; }
.bep-facilities__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.bep-facility { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.bep-facility img { width: 100%; height: 100%; object-fit: cover; }

.bep-facility figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 14px 12px;
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	font-size: 13px;
	font-weight: var(--bep-weight-strong, 600);
	opacity: 0.92;
}

@media (max-width: 1100px) {
	.bep-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-facilities__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.bep-service-split,
	.bep-why,
	.bep-locationsplit { grid-template-columns: 1fr; gap: 22px; }
	.bep-treatments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bep-hero__badge { min-width: 0; }
	.bep-herosearch { margin-bottom: -26px; }
}

@media (max-width: 680px) {
	.bep-spaces { grid-template-columns: 1fr; }
	.bep-facilities__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bep-hero__actions .bep-btn { width: 100%; }
	.bep-herosearch { margin-bottom: -18px; }
	.bep-herosearch .bep-field,
	.bep-herosearch .bep-field--narrow { flex: 1 1 100%; }
	.bep-herosearch .bep-btn { width: 100%; }
	.bep-strip { padding-top: 34px; }
	.bep-ratingpanel__score { font-size: var(--bwm-h2, clamp(23.6px, calc(23.6px + 0.0157 * (100vw - 360px)), 38px)); }
	.bep-facility figcaption { font-size: 11px; padding: 16px 8px 9px; }
}

/* ========================================================================
   Phone pass
   ------------------------------------------------------------------------
   Written against a 390px viewport, which is what most guests here are
   holding, rather than the 680px the earlier breakpoints assumed.
   ======================================================================== */

/*
 * iOS Safari zooms the whole page when a field smaller than 16px takes
 * focus, and it never zooms back out. Every date picker and guest selector
 * on this site did exactly that. The floor applies only on touch screens,
 * so the tidier 15px stays on desktop.
 */
@media (pointer: coarse) {
	.bep-body input,
	.bep-body select,
	.bep-body textarea,
	.bep-embed input,
	.bep-embed select,
	.bep-embed textarea {
		/*
		 * Exactly 16px, and never fluid. iOS zooms the whole page whenever
		 * a focused field is under 16 pixels, and a fluid size resolves to
		 * about 14 on a phone, which is the one place this rule exists to
		 * protect.
		 */
		font-size: 16px;
	}
}

/* Nothing should be able to push the page sideways. */
.bep-body,
.bep-embed { max-width: 100%; }

.bep-body img,
.bep-body table,
.bep-body iframe,
.bep-embed img,
.bep-embed table,
.bep-embed iframe { max-width: 100%; }

/* A pasted link or a long apartment name must wrap, not widen the page. */
.bep-body p,
.bep-body h1,
.bep-body h2,
.bep-body h3,
.bep-body li,
.bep-body td,
.bep-body a { overflow-wrap: anywhere; }

@media (max-width: 560px) {
	.bep-shell { width: calc(100% - 28px); }

	/* Headings were sized for a laptop and ran to four lines on a phone. */
	.bep-hero__title { font-size: var(--bwm-h2, clamp(28px, 8.5vw, 38px)); line-height: 1.15; }
	.bep-hero__tagline { font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }
	.bep-section__title { font-size: var(--bwm-h3, clamp(21px, 6vw, 26px)); }
	.bep-checkouthead__title { font-size: var(--bwm-h3, clamp(21px, 6vw, 26px)); }
	.bep-section__lead { font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }

	.bep-section { padding: 38px 0; }
	.bep-hero { padding: 60px 0 34px; }

	/* One thumb, one column. */
	.bep-grid,
	.bep-spaces,
	.bep-tours,
	.bep-metrics,
	.bep-console__cols,
	.bep-console__cols--wide { grid-template-columns: 1fr; }

	.bep-strip__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.bep-strip__item { font-size: 13px; gap: 7px; }

	/* Buttons are thumb targets, not links. */
	.bep-btn { min-height: 46px; padding: 13px 18px; }
	.bep-btn--large { min-height: 52px; font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }
	.bep-hero__actions { display: grid; gap: 10px; }
	.bep-hero__actions .bep-btn { width: 100%; }
	.bep-section__cta .bep-btn { width: 100%; }

	/* The search panel was overlapping the strip below it. */
	.bep-herosearch { margin-bottom: 0; gap: 10px; padding: 14px; }
	.bep-strip { padding-top: 24px; }
	.bep-hero__badge { align-self: flex-start; }
	.bep-hero__inner { gap: 18px; }

	/* Sticky boxes steal a phone screen; let them scroll away. */
	.bep-checkout__aside,
	.bep-listing-page__aside { position: static; }

	.bep-block,
	.bep-panelcard,
	.bep-sidecard__body,
	.bep-locationcard,
	.bep-bookband { padding: 18px 16px; }

	/* Facility strip: a swipeable row beats five thumbnails nobody can see. */
	.bep-facilities__strip {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 74%;
		grid-template-columns: none;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 0 14px 4px;
		-webkit-overflow-scrolling: touch;
	}

	.bep-facility { scroll-snap-align: center; border-radius: var(--bep-radius-card); }
	.bep-facility figcaption { font-size: 12px; padding: 18px 12px 10px; }

	.bep-treatments { grid-template-columns: 1fr 1fr; }
	.bep-ratingpanel { padding: 20px; }
	.bep-ratingpanel__score { font-size: var(--bwm-h2, clamp(21.1px, calc(21.1px + 0.0140 * (100vw - 360px)), 34px)); }

	/* Filter bars and pickers stack rather than squeezing. */
	.bep-filterbar,
	.bep-herosearch { flex-direction: column; align-items: stretch; }
	.bep-filterbar .bep-field,
	.bep-herosearch .bep-field { flex: 1 1 auto; width: 100%; }
	.bep-filterbar .bep-btn,
	.bep-herosearch .bep-btn { width: 100%; }

	/* Console: the rail is already a strip, keep its rows readable. */
	.bep-console__main { padding: 16px 14px 44px; }
	.bep-propline { grid-template-columns: 1fr; }
	.bep-propline .bep-btn { width: 100%; }

	.bep-confirm { padding: 30px 0 44px; }
	.bep-confirm__ref strong { font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); letter-spacing: 2px; }
	.bep-code-badge { font-size: var(--bwm-h4, clamp(17.8px, calc(17.8px + 0.0067 * (100vw - 360px)), 24px)); letter-spacing: 3px; padding: 14px; }
}

@media (max-width: 400px) {
	.bep-shell { width: calc(100% - 24px); }
	.bep-strip__inner { grid-template-columns: 1fr; }
	.bep-treatments { grid-template-columns: 1fr; }
	.bep-stay__facts { grid-template-columns: 1fr 1fr; }
	.bep-facilities__strip { grid-auto-columns: 82%; }
}

/* ========================================================================
   Phone overrides, last on purpose
   ------------------------------------------------------------------------
   This stylesheet grew by appending one section at a time, which left
   wide-screen rules sitting after the narrow-screen rules meant to beat
   them. At equal specificity the later rule wins, so a 1100px rule was
   quietly deciding the layout on a 390px phone. Everything below is
   deliberately last in the file so the phone layout is the final word.
   ======================================================================== */

@media (max-width: 780px) {

	/* Footer: was resolving to three columns on a phone. */
	.bep-footer__grid { grid-template-columns: 1fr; gap: 26px; }
	.bep-footer__text { max-width: none; }

	/* Every two-column body collapses, whatever earlier rules asked for. */
	.bep-listing-page__body,
	.bep-checkout,
	.bep-cart,
	.bep-service-split,
	.bep-why,
	.bep-locationsplit,
	.bep-console__cols,
	.bep-console__cols--wide {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Sidebars go full width and stop sticking. */
	.bep-listing-page__aside,
	.bep-checkout__aside {
		position: static;
		width: 100%;
		max-width: none;
	}

	.bep-checkout__aside .bep-panelcard,
	.bep-sidecard { position: static; width: 100%; }

	/* The booking box leads; the reading matter follows. */
	.bep-listing-page__aside,
	.bep-checkout__aside { order: -1; }
	.bep-listing-page__main,
	.bep-checkout__main { order: 1; width: 100%; }

	/*
	 * Photos: the old rule hid every image after the first on a phone,
	 * which is the one screen where guests browse photos most. A snap
	 * carousel shows all of them instead, at a shape that suits a photo
	 * rather than a fixed pixel height that squashes it to a strip.
	 */
	.bep-mosaic {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 88%;
		grid-template-columns: none;
		grid-template-rows: none;
		height: auto;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 14px;
		padding-bottom: 6px;
		margin-bottom: 24px;
		-webkit-overflow-scrolling: touch;
	}

	.bep-mosaic__cell,
	.bep-mosaic__cell:first-child,
	.bep-mosaic__cell:nth-child(2),
	.bep-mosaic--1 .bep-mosaic__cell:first-child,
	.bep-mosaic--2 .bep-mosaic__cell:nth-child(2),
	.bep-mosaic--3 .bep-mosaic__cell:nth-child(3) {
		display: block;
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
		scroll-snap-align: center;
	}

	.bep-mosaic__cell:nth-child(n + 2) { display: block; }
	.bep-mosaic__more { font-size: var(--bwm-text, clamp(13px, calc(13px + 0.0022 * (100vw - 360px)), 15px)); }

	/* The gallery further down the page: two readable squares. */
	.bep-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
	.bep-gallery img,
	.bep-gallery figure { aspect-ratio: 1 / 1; object-fit: cover; }

	/* Fact and feature grids that were still asking for three columns. */
	.bep-overview,
	.bep-features,
	.bep-details { grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 560px) {
	.bep-overview,
	.bep-features,
	.bep-details { grid-template-columns: 1fr; }

	.bep-gallery { grid-template-columns: 1fr 1fr; }
	.bep-mosaic { grid-auto-columns: 90%; }

	/* The share button sat alone on a line looking like an orphan. */
	.bep-listing-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
}

/* ========================================================================
   Results page: cards left, filters right
   ======================================================================== */

.bep-resulthead { padding: 20px 0 0; }
.bep-resulthead__title { font-size: clamp(20px, 2.6vw, 27px); margin: 10px 0 0; }
.bep-resulthead__where { color: var(--bep-muted); font-weight: 400; }

.bep-chiprow {
	display: flex;
	gap: 8px;
	margin: 16px 0 0;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.bep-chiprow::-webkit-scrollbar { display: none; }

.bep-typechip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--bep-border);
	background: var(--bep-surface);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
	text-decoration: none;
	white-space: nowrap;
}

.bep-typechip span { color: var(--bep-muted); font-size: 13px; }
.bep-typechip:hover { border-color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-typechip.is-current { background: var(--bep-primary); color: var(--bep-on-primary); border-color: var(--bep-primary); }
.bep-typechip.is-current span { color: inherit; opacity: 0.7; }

.bep-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 28px;
	align-items: start;
	padding: 22px 0 70px;
}

.bep-results__main { min-width: 0; }

.bep-results__bar {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.bep-results__filterbtn { display: none; }

.bep-results__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	font-size: 12px;
	font-weight: var(--bep-weight-strong, 600);
}

/* A row of cards lines up because nothing in the card is free to grow. */
.bep-grid--results { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 0; }
.bep-grid--results .bep-card { height: 100%; }
.bep-grid--results .bep-card__media { aspect-ratio: 4 / 3; }

.bep-card__summary {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bep-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bep-card__foot { margin-top: auto; }

/* Filter panel: see the block at the end of this file. */

@media (max-width: 1100px) {
	.bep-results { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
}

@media (max-width: 900px) {
	/* Filters become a sheet, so the results get the whole width. */
	.bep-results { grid-template-columns: 1fr; }
	.bep-results__filterbtn { display: inline-flex; }

}

@media (prefers-reduced-motion: reduce) {
	.bep-results__aside { transition: none; }
}

@media (max-width: 780px) {
	.bep-grid--results { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
	.bep-results { padding-top: 16px; }
	.bep-resulthead__title { font-size: clamp(17.2px, calc(17.2px + 0.0030 * (100vw - 360px)), 20px); }
}

@media (max-width: 560px) {
	.bep-grid--results { grid-template-columns: 1fr; }
	.bep-grid--results .bep-card__media { aspect-ratio: 16 / 10; }
	.bep-results__bar { gap: 8px; }
	.bep-results__bar .bep-sortform select { max-width: 46vw; }
}

/* ========================================================================
   Width
   ======================================================================== */

/*
 * A theme wraps our pages in its own centred container, so booking pages
 * inherited whatever width the theme was built for. These margins pull the
 * wrapper back out to the edges of the window from inside any centred
 * parent, without needing to know a single thing about the theme.
 *
 * The shell inside still honours --bep-container, so "full width" means the
 * page can use the whole window, not that every line of text has to.
 */
/*
 * Themes put their content wrapper in every shape going. Astra uses a flex
 * row (`.site-content .ast-container`), switching to a column below 921px.
 * A flex item with `width: auto` shrink-wraps to its content in a row, so
 * our page collapsed on desktop while working on a phone, where the column
 * direction stretches it. These four lines make the wrapper fill its parent
 * whether that parent is a block, a flex row, a flex column or a grid.
 *
 * There is deliberately no overflow on this element. Clipping here cuts the
 * page off at the wrapper's own edges, which is what turned the collapse
 * into a blank screen rather than a visibly narrow one.
 */
.bep-main--themed {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: 0;
	grid-column: 1 / -1;
}

/*
 * Negative margins alone widen a block, but a theme that wraps its content
 * in a flex or grid container makes this a flex item, and a flex item with
 * `width: auto` shrinks to fit its content rather than filling. That left
 * the whole page as a narrow sliver. The explicit width is what makes the
 * pull-out behave the same in a block, a flex and a grid parent.
 */
.bep-body--bleed {
	/*
	 * Kept as a hook for anyone targeting it, but deliberately empty. The
	 * width is now released on the theme's own container instead of being
	 * escaped from inside it, so pulling out here as well would push the
	 * page past the edge of the window.
	 */
	min-width: 0;
}

/*
 * The photo box holds its shape no matter what the theme says about images.
 * Left in flow, a theme rule as ordinary as `img { height: auto }` beats our
 * height and the picture pushes the box taller than its aspect ratio, which
 * is what made one card in a row stand taller than its neighbour.
 */
.bep-card__media,
.bep-space__media,
.bep-mosaic__cell,
.bep-facility { overflow: hidden; }

.bep-card__media img,
.bep-space__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bep-space__media { position: relative; }

/*
 * Edge to edge. The pull-out above escapes the theme's container; this
 * releases our own, so the shell stops capping content at the width set on
 * the Design screen. The padding stays, because text running into the
 * bezel of a screen is not a design, it is an oversight.
 */
.bep-body--edge .bep-shell {
	width: 100%;
	max-width: none;
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
}

@media (min-width: 1400px) {
	.bep-body--edge .bep-shell { padding-left: 40px; padding-right: 40px; }
}

/* ========================================================================
   Releasing the theme's container
   ------------------------------------------------------------------------
   Named selectors on purpose. Astra wraps content in #content .ast-container;
   the others cover the wrappers used by the block themes, Elementor and the
   handful of classic themes most likely to be under a booking site. These
   only ever apply on booking routes, and only when the page width setting
   asks for it, so a theme's own pages are never touched.
   ======================================================================== */

body.bep-page-wide #content,
body.bep-page-wide #content > .ast-container,
body.bep-page-wide .site-content,
body.bep-page-wide .site-content > .ast-container,
body.bep-page-wide .ast-container,
body.bep-page-wide .ast-container-fluid,
body.bep-page-wide #primary,
body.bep-page-wide .content-area,
body.bep-page-wide .site-main,
body.bep-page-wide .entry-content,
body.bep-page-wide .wp-site-blocks,
body.bep-page-wide .wp-block-group__inner-container,
body.bep-page-wide .elementor-section-boxed > .elementor-container,
body.bep-page-wide .container,
body.bep-page-wide .site-container {
	max-width: none;
	width: auto;
}

/* Astra puts 20px of its own on the container; our shell supplies the gutter. */
body.bep-page-wide #content > .ast-container,
body.bep-page-wide .site-content > .ast-container,
body.bep-page-wide .ast-container,
body.bep-page-wide .ast-container-fluid {
	padding-left: 0;
	padding-right: 0;
}

/* Astra's sidebar column would otherwise still reserve its share. */
body.bep-page-wide #primary { flex: 1 1 100%; width: 100%; margin: 0; padding: 0; }
body.bep-page-wide #secondary { display: none; }

/* A themed page often carries the theme's own vertical padding as well. */
body.bep-page-wide .bep-main--themed { margin: 0; }

/* A real logo replaces the lettered square, at whatever shape it happens
   to be, without stretching it to fit a circle meant for one character. */
.bep-brand__logo {
	display: block;
	width: auto;
	height: 38px;
	max-width: 190px;
	object-fit: contain;
	background: none;
	border-radius: 0;
	flex: 0 0 auto;
}

.bep-host__mark.bep-brand__logo { height: 44px; max-width: 120px; }
.bep-console__brand .bep-brand__logo { height: 32px; max-width: 150px; }

@media (max-width: 560px) {
	.bep-brand__logo { height: 32px; max-width: 140px; }
}

/* Console reviews, clashes and services --------------------------------- */

.bep-reviewhead { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.bep-reviewhead .bep-block__title { margin: 6px 0 4px; }
.bep-reviewactions { display: flex; flex-wrap: wrap; gap: 10px; }

.bep-reviewreply {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--bep-bg);
	border-radius: var(--bep-radius-card);
	border-left: 3px solid var(--bep-accent);
}

.bep-reviewreply p { margin: 0; }
.bep-reviewreply p:first-child { font-size: 13px; margin-bottom: 4px; }

.bep-conflict {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px;
	margin-bottom: 10px;
	border: 1px solid var(--bep-warning);
	border-radius: var(--bep-radius-card);
	background: var(--bep-surface);
}

.bep-conflict__title { margin: 0 0 4px; font-weight: var(--bep-weight-strong, 600); }
.bep-conflict p { margin: 0; }
.bep-conflict__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.bep-serviceedit {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 120px auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	background: var(--bep-surface);
}

.bep-serviceedit > i { font-size: clamp(18.1px, calc(18.1px + 0.0032 * (100vw - 360px)), 21px); color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-serviceedit__name { margin: 0 0 2px; font-weight: var(--bep-weight-strong, 600); }
.bep-serviceedit .bep-field { margin: 0; }

@media (max-width: 780px) {
	.bep-conflict { grid-template-columns: 1fr; }
	.bep-conflict__actions .bep-btn { flex: 1 1 auto; justify-content: center; }
	.bep-serviceedit { grid-template-columns: 1fr 1fr; }
	.bep-serviceedit > i { display: none; }
	.bep-serviceedit__body { grid-column: 1 / -1; }
	.bep-serviceedit .bep-btn { grid-column: 1 / -1; }
	.bep-reviewhead { flex-direction: column; }
}

/* Type weight ------------------------------------------------------------
   Set on the Design screen. Body text carries its own weight so a heavier
   setting lifts the whole page rather than only the headings. */

.bep-body,
.bep-embed { font-weight: var(--bep-weight-body, 400); }

.bep-body strong,
.bep-body b,
.bep-embed strong { font-weight: var(--bep-weight-heading, 500); }

/* Buttons and navigation read as actions, so they sit above body weight. */
.bep-btn,
.bep-nav a,
.bep-typechip,
.bep-pill,
.bep-console__link { font-weight: var(--bep-weight-strong, 600); }

.bep-btn--accent,
.bep-btn--primary { font-weight: var(--bep-weight-heading, 500); }

/* Icons: Phosphor's bold weight is a separate font, not a stroke setting,
   so the class carries it. This only nudges optical size to match the
   heavier type around it. */
.bep-body .ph-bold,
.bep-embed .ph-bold { font-size: 1.05em; }

/* Labels ------------------------------------------------------------------
   The small bracketed captions in the reference layout: monospace, wide
   letterspacing, uppercase. Applied to the eyebrow above a heading and to
   the small meta lines, where a label reads better than a sentence. */

.bep-eyebrow,
.bep-metric__label,
.bep-hero__badgetop {
	font-family: var(--bep-font-label, ui-monospace, monospace);
	letter-spacing: 0.02em;
	font-size: 12.5px;
}

/*
 * Captions under a price are sentences, not labels. Set in caps and
 * letterspaced they shout a footnote, and at a price that says "priced on
 * request" the caption is longer than the price it explains.
 */
.bep-card__per,
.bep-space__per,
.bep-stay__per {
	font-family: var(--bep-font-body);
	text-transform: none;
	letter-spacing: 0;
}

.bep-eyebrow {
	gap: 8px;
	font-family: inherit;
	font-size: var(--bwm-text, clamp(14px, 1.3vw, 15.5px));
	font-weight: var(--bep-weight-strong, 600);
	letter-spacing: 0;
	text-transform: none;
}

/* The eyebrow icon should not inherit the monospace metrics. */
.bep-eyebrow i { font-family: inherit; letter-spacing: 0; font-size: clamp(13.8px, calc(13.8px + 0.0024 * (100vw - 360px)), 16px); }

/* Console property editor ------------------------------------------------ */

.bep-amenitygrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px 16px;
}

.bep-photogrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.bep-photogrid__item {
	position: relative;
	margin: 0;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-card);
	overflow: hidden;
	background: var(--bep-surface);
}

.bep-photogrid__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.bep-photogrid__badge {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 4px 9px;
	border-radius: var(--bep-radius-button);
	background: var(--bep-accent);
	color: var(--bep-on-accent);
	font-size: 11px;
	font-weight: var(--bep-weight-strong, 600);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bep-photogrid__actions {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
}

.bep-photogrid__actions form { margin: 0; }

/* A file input styled like the other fields rather than left raw. */
.bep-field input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1px dashed var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: var(--bep-bg);
	font-size: clamp(13px, calc(13px + 0.0011 * (100vw - 360px)), 14px);
}

@media (max-width: 680px) {
	.bep-amenitygrid { grid-template-columns: 1fr 1fr; }
	.bep-photogrid { grid-template-columns: 1fr 1fr; }
}


/* Buttons that are links -------------------------------------------------
   An anchor styled as a button is still an anchor, and themes colour
   anchors. These qualify the selector with the element and cover the link
   states, so the colour survives a theme's own link rules in the ordinary
   case. Where a theme uses an id selector it wins on specificity, and the
   inline block printed by Theme::link_css() takes over. */

.bep-body a.bep-btn--accent,
.bep-body a.bep-btn--accent:visited,
.bep-body a.bep-btn--accent:hover,
.bep-body a.bep-btn--accent:focus,
.bep-embed a.bep-btn--accent { color: var(--bep-on-accent); }

.bep-body a.bep-btn--primary,
.bep-body a.bep-btn--primary:visited,
.bep-body a.bep-btn--primary:hover,
.bep-body a.bep-btn--primary:focus,
.bep-embed a.bep-btn--primary { color: var(--bep-on-primary); }

.bep-body a.bep-btn--ghost,
.bep-body a.bep-btn--ghost:visited,
.bep-body a.bep-btn--ghost:focus,
.bep-embed a.bep-btn--ghost { color: var(--bep-text); }

.bep-body a.bep-btn--ghost:hover { color: var(--bep-accent-dark); }

.bep-body a.bep-btn--quiet,
.bep-body a.bep-btn--quiet:visited,
.bep-body a.bep-btn--quiet:hover,
.bep-body a.bep-btn--quiet:focus { color: inherit; }

/* Card titles are links too, and should read as headings. */
.bep-body .bep-card__title a,
.bep-body .bep-card__title a:visited,
.bep-body .bep-stay__title a,
.bep-body .bep-stay__title a:visited,
.bep-body .bep-propline__title,
.bep-body .bep-propline__title:visited { color: var(--bep-text); }

.bep-body .bep-card__title a:hover,
.bep-body .bep-stay__title a:hover,
.bep-body .bep-propline__title:hover { color: var(--bep-accent-dark); }

/* ========================================================================
   Hero: the plate
   ------------------------------------------------------------------------
   A solid block of brand colour standing against the photograph, flush to
   the left edge of the window, with the picture showing above and below it.
   Nothing is laid over the photograph, so it is never dimmed to make words
   readable and can be used as it was taken.
   ======================================================================== */

.bep-plate { background: var(--bep-bg); }

.bep-plate__stage {
	position: relative;
	display: grid;
	min-height: clamp(420px, 56vw, 660px);
}

.bep-plate__shot { position: absolute; inset: 0; overflow: hidden; }

.bep-plate__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bep-plate__card {
	position: relative;
	z-index: 2;
	align-self: center;
	justify-self: start;
	width: min(calc(50vw + 92px), calc(50% + 12rem));
	max-width: 100%;
	margin: clamp(40px, 6vw, 72px) 0;
	padding: clamp(38px, 5vw, 62px) clamp(28px, 5vw, 72px) clamp(36px, 4.6vw, 58px)
		max(24px, calc(50vw - var(--bep-container, 1240px) / 2));
	background: var(--bep-primary);
	color: var(--bep-on-primary);
}

.bep-plate__title {
	margin: 0;
	font-size: var(--bwm-display, clamp(34px, 5.2vw, 68px));
	font-weight: var(--bep-weight-heading, 500);
	font-stretch: 92%;
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: var(--bep-on-primary);
}

.bep-plate__title span { display: block; }

/* The last line steps in, echoing the stepped roofline in the logo. The
   step does the work, so no word has to be picked out in another colour. */
.bep-plate__title span:last-child:not(:only-child) { padding-left: 0.36em; }

.bep-plate__said {
	max-width: 34ch;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--bwm-text-lg, clamp(15px, 1.4vw, 17px));
	line-height: 1.55;
}

.bep-plate__where {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
}

.bep-plate__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 22px;
	margin: 32px 0 0;
}

.bep-plate__talk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--bep-on-primary);
	font-size: 15px;
	font-weight: var(--bep-weight-strong, 600);
	text-decoration: none;
}

.bep-plate__talk:hover,
.bep-plate__talk:focus { border-bottom-color: var(--bep-accent); color: var(--bep-on-primary); }

/* The rating reads as a fact on a ruled line, not a sticker. */
.bep-plate__score {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
}

.bep-plate__score b {
	font-size: var(--bwm-h3, clamp(24px, 2.4vw, 30px));
	font-weight: var(--bep-weight-heading, 500);
	line-height: 1;
	letter-spacing: -0.02em;
}

.bep-plate__score i { align-self: center; color: var(--bep-accent); }
.bep-plate__score span { color: rgba(255, 255, 255, 0.62); font-size: 13px; }

/* The practicals: what people ask before booking. A plain row divided by
   hairlines, no cards and no shadows. */
.bep-plate__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	padding: clamp(26px, 3vw, 40px) 0 clamp(30px, 3.4vw, 46px);
}

.bep-plate__fact {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
}

.bep-plate__fact i { flex: none; margin-top: 1px; font-size: 20px; color: var(--bep-accent-ink, var(--bep-accent)); }
.bep-plate__fact b { display: block; font-size: 14px; font-weight: var(--bep-weight-heading, 500); }

.bep-plate__fact em {
	display: block;
	margin-top: 2px;
	color: var(--bep-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
}

/*
 * Below 1024 the plate stops being an overlay and sits over the foot of the
 * photograph. The photograph comes first in the markup, so it is above the
 * plate here without any reordering.
 */
@media (max-width: 1024px) {
	.bep-plate__stage { display: block; min-height: 0; }
	.bep-plate__shot { position: relative; inset: auto; height: clamp(240px, 38vw, 340px); }

	.bep-plate__card {
		width: auto;
		margin: -60px 24px 0;
		padding: clamp(32px, 5vw, 44px) clamp(24px, 4vw, 40px) clamp(34px, 5vw, 46px);
	}

	.bep-plate__said { max-width: 46ch; }

	.bep-plate__facts { grid-template-columns: 1fr 1fr; gap: 22px 0; padding-top: 32px; }
}

@media (max-width: 600px) {
	.bep-plate__card { margin: -48px 14px 0; }
	.bep-plate__act { gap: 14px; }

	/* A full width button is easier to hit than a centred one, and the
	   WhatsApp link sits under it rather than beside it. */
	.bep-plate__act .bep-btn { width: 100%; justify-content: center; }

	.bep-plate__facts { grid-template-columns: 1fr; gap: 0; }
	.bep-plate__fact { padding: 0; }



}

/* ========================================================================
   Wellness: treatments as a ruled list
   ------------------------------------------------------------------------
   A tile can hold a name. A row can hold what the treatment is, how long
   it takes and what it costs, which is what someone deciding needs.
   ======================================================================== */

.bep-wellness__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: clamp(36px, 5vw, 76px);
	align-items: start;
}

.bep-treatlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 3vw, 40px) clamp(28px, 3.4vw, 48px);
	margin: clamp(30px, 4vw, 46px) 0 0;
	padding: 0;
	list-style: none;
}

.bep-treatlist__row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	gap: 2px 14px;
	align-items: baseline;
	padding: 0;
	list-style: none;
}

.bep-treatlist__row::marker { content: ""; }

.bep-treatlist__icon {
	grid-row: span 2;
	align-self: start;
	margin-top: 2px;
	font-size: 21px;
	color: var(--bep-accent-ink, var(--bep-accent));
}

.bep-treatlist__name {
	margin: 0;
	font-size: var(--bwm-text-lg, clamp(16.3px, calc(16.3px + 0.0029 * (100vw - 360px)), 19px));
	font-weight: var(--bep-weight-heading, 500);
	letter-spacing: -0.01em;
}

.bep-treatlist__note {
	grid-column: 2;
	margin: 4px 0 0;
	color: var(--bep-muted);
	font-size: 14px;
	line-height: 1.5;
}

.bep-treatlist__meta { text-align: right; white-space: nowrap; align-self: baseline; }
.bep-treatlist__time { display: block; color: var(--bep-muted); font-size: 13px; }

.bep-treatlist__price {
	display: block;
	margin-top: 2px;
	font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0027 * (100vw - 360px)), 18px));
	font-weight: var(--bep-weight-heading, 500);
	letter-spacing: -0.01em;
}

.bep-treatlist__price small { font-size: 12px; font-weight: 500; color: var(--bep-muted); }

/* How it works ----------------------------------------------------------- */

.bep-howto {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: clamp(30px, 4vw, 46px) 0 0;
	padding: 0;
	list-style: none;
}

.bep-howto__item { list-style: none; }



.bep-howto__item b { display: block; font-size: 15px; font-weight: var(--bep-weight-heading, 500); }
.bep-howto__item span { display: block; margin-top: 4px; color: var(--bep-muted); font-size: 14px; line-height: 1.5; }

/* The form, on the brand plate so it reads as the thing to do next. */

.bep-panelcard--ink {
	background: var(--bep-primary);
	color: var(--bep-on-primary);
	border-color: transparent;
}

.bep-panelcard--ink .bep-h3,
.bep-panelcard--ink label > span { color: var(--bep-on-primary); }

.bep-panelcard--ink input,
.bep-panelcard--ink select,
.bep-panelcard--ink textarea {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
	color: var(--bep-on-primary);
}

.bep-panelcard--ink input::placeholder,
.bep-panelcard--ink textarea::placeholder { color: rgba(255, 255, 255, 0.42); }

/* A dark select needs its options set back to dark on white, or Windows
   draws white text on a white list. */
.bep-panelcard--ink select option { color: var(--bep-text); background: var(--bep-surface); }

.bep-wellness__card { position: sticky; top: calc(var(--bep-sticky-top, 96px) + 20px); }

@media (max-width: 980px) {
	.bep-wellness__grid { grid-template-columns: 1fr; }
	.bep-wellness__card { position: static; }
}

@media (max-width: 620px) {
	.bep-treatlist { grid-template-columns: 1fr; }
	.bep-treatlist__row { grid-template-columns: 26px minmax(0, 1fr); }
	.bep-treatlist__meta { grid-column: 2; margin-top: 6px; text-align: left; }
	.bep-treatlist__time { display: inline; }
	.bep-treatlist__price { display: inline; margin-left: 10px; }
	.bep-howto { grid-template-columns: 1fr; gap: 18px; }
	.bep-plate__facts { grid-template-columns: 1fr; }
}

/* ========================================================================
   The same list, on the dark section
   ------------------------------------------------------------------------
   The visa block sits on brand ink, so the rules, the muted text and the
   accent all have to be restated against it. The accent keeps its brighter
   cut here: the darker one is for light backgrounds and would sink.
   ======================================================================== */

.bep-treatlist--ink .bep-treatlist__icon { color: var(--bep-accent); }
.bep-treatlist--ink .bep-treatlist__note { color: rgba(255, 255, 255, 0.66); }
.bep-treatlist--ink .bep-treatlist__time { color: rgba(255, 255, 255, 0.6); }
.bep-treatlist--ink .bep-treatlist__price small { color: rgba(255, 255, 255, 0.6); }

.bep-howto--ink .bep-howto__item span { color: rgba(255, 255, 255, 0.66); }

/* What to bring ---------------------------------------------------------- */

.bep-papers {
	margin: clamp(28px, 3.5vw, 40px) 0 0;
	padding: clamp(20px, 2.5vw, 28px);
	border-radius: var(--bep-radius-card);
	background: var(--bep-surface);
}

/* On ink the same panel is a lighter patch of the section rather than a
   white card, which would read as a second form. */
.bep-section--dark .bep-papers {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
}

.bep-papers__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: var(--bep-weight-heading, 500);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bep-accent-ink, var(--bep-accent));
}

.bep-papers__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bep-papers__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.bep-papers__list i { flex: none; margin-top: 2px; font-size: 17px; color: var(--bep-accent-ink, var(--bep-accent)); }

/*
 * The honest line about dates. Set apart rather than dropped in as small
 * print, because a visa applicant who reads it and books anyway is a
 * client who will not be disappointed later.
 */
.bep-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: clamp(24px, 3vw, 34px) 0 0;
	color: var(--bep-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* On ink only the words need restating now. */
.bep-section--dark .bep-disclaimer { color: rgba(255, 255, 255, 0.66); }

.bep-disclaimer i { flex: none; margin-top: 2px; font-size: 17px; color: var(--bep-accent-ink, var(--bep-accent)); }

@media (max-width: 620px) {
	.bep-papers__list { grid-template-columns: 1fr; }
}


/* Additions to the existing dark section, for the parts that carry their
   own colour and so do not inherit it. */
.bep-section--dark .bep-section__title,
.bep-section--dark .bep-h3 { color: var(--bep-on-primary); }

.bep-section--dark .bep-section__lead { color: rgba(255, 255, 255, 0.72); }
.bep-section--dark .bep-eyebrow { color: var(--bep-accent); }


/* ========================================================================
   Making dark sections actually readable
   ------------------------------------------------------------------------
   Two separate failures, with opposite causes.
   
   First: inheritance loses to any direct rule. Setting `color` on the
   section does nothing for a heading, because the theme colours headings
   itself — `h1..h6 { color: ... }` beats an inherited value however far up
   it was set. So every element that a theme is likely to colour has to be
   named here rather than left to inherit.

   Second: a white card sitting inside a dark section inherits white text
   onto white. The card has to restate its own colour, or the form labels
   vanish entirely, which is what happened to "Your name" and "Phone
   number" on the visa block.
   ======================================================================== */

/*
 * Every surface painted in brand ink, in one place. Adding a dark card
 * anywhere means adding it to this list, which is a smaller thing to
 * remember than the six rules each one would otherwise need.
 */
.bep-section--dark h1,
.bep-section--dark h2,
.bep-section--dark h3,
.bep-section--dark h4,
.bep-section--dark p,
.bep-section--dark li,
.bep-section--dark b,
.bep-section--dark strong,
.bep-section--dark span,
.bep-bookband h1,
.bep-bookband h2,
.bep-bookband h3,
.bep-bookband h4,
.bep-bookband p,
.bep-bookband li,
.bep-bookband b,
.bep-bookband strong,
.bep-bookband span,
.bep-panelcard--ink h1,
.bep-panelcard--ink h2,
.bep-panelcard--ink h3,
.bep-panelcard--ink h4,
.bep-panelcard--ink p,
.bep-panelcard--ink li,
.bep-panelcard--ink b,
.bep-panelcard--ink strong,
.bep-panelcard--ink span,
.bep-plate__card h1,
.bep-plate__card h2,
.bep-plate__card h3,
.bep-plate__card p,
.bep-plate__card span { color: var(--bep-on-primary); }

/* Buttons on those surfaces keep their own lettering. */
.bep-bookband .bep-btn--accent,
.bep-bookband .bep-btn--accent span,
.bep-panelcard--ink .bep-btn--accent,
.bep-panelcard--ink .bep-btn--accent span,
.bep-plate__card .bep-btn--accent,
.bep-plate__card .bep-btn--accent span { color: var(--bep-on-accent); }

/* Restated after the block above, which would otherwise flatten them. */
.bep-section--dark .bep-section__lead,
.bep-section--dark .bep-treatlist__note,
.bep-section--dark .bep-treatlist__time,
.bep-section--dark .bep-treatlist__price small,
.bep-section--dark .bep-howto__item span,
.bep-section--dark .bep-disclaimer,
.bep-section--dark .bep-disclaimer span { color: rgba(255, 255, 255, 0.68); }

.bep-section--dark .bep-eyebrow,
.bep-section--dark .bep-eyebrow span,
.bep-section--dark .bep-papers__title,
.bep-section--dark .bep-papers__list i,
.bep-section--dark .bep-disclaimer i,
.bep-section--dark .bep-treatlist__icon,

/*
 * The card is its own surface. Everything inside it goes back to the page
 * colours, whatever the section around it is doing.
 */
.bep-section--dark .bep-panelcard,
.bep-section--dark .bep-panelcard h1,
.bep-section--dark .bep-panelcard h2,
.bep-section--dark .bep-panelcard h3,
.bep-section--dark .bep-panelcard p,
.bep-section--dark .bep-panelcard li,
.bep-section--dark .bep-panelcard b,
.bep-section--dark .bep-panelcard strong,
.bep-section--dark .bep-panelcard label,
.bep-section--dark .bep-panelcard label > span { color: var(--bep-text); }

.bep-section--dark .bep-panelcard input,
.bep-section--dark .bep-panelcard select,
.bep-section--dark .bep-panelcard textarea {
	color: var(--bep-text);
	background: var(--bep-surface);
	border-color: var(--bep-border);
}

.bep-section--dark .bep-panelcard .bep-quote__note,
.bep-section--dark .bep-panelcard .bep-muted { color: var(--bep-muted); }

/* The button keeps its own lettering, not the section's and not the card's. */
.bep-section--dark .bep-panelcard .bep-btn--accent,
.bep-section--dark .bep-panelcard .bep-btn--accent span { color: var(--bep-on-accent); }
.bep-section--dark .bep-panelcard .bep-btn--primary,
.bep-section--dark .bep-panelcard .bep-btn--primary span { color: var(--bep-on-primary); }

/*
 * A theme that numbers or bullets list items draws those markers in the
 * inherited colour, which is how white dots appeared beside the steps.
 */
.bep-howto,
.bep-howto__item,
.bep-treatlist,
.bep-treatlist__row,
.bep-papers__list,
.bep-papers__list li { list-style: none; }

.bep-howto__item::marker,
.bep-treatlist__row::marker,
.bep-papers__list li::marker { content: ""; }

/* Reasons ----------------------------------------------------------------
   A claim on its own is an advert. Each one carries the line that backs it
   up, so the block is two columns of substance rather than four bullets
   and a lot of empty ground. */

.bep-reasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 3vw, 32px);
	margin: clamp(26px, 3.5vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

.bep-reasons__item { display: flex; align-items: flex-start; gap: 14px; }

.bep-reasons__icon {
	flex: none;
	margin-top: 2px;
	font-size: 22px;
	color: var(--bep-accent-ink, var(--bep-accent));
}

/* On ink the brighter cut, as everywhere else: the darker one is for
   light grounds and would sink into the section. */
.bep-section--dark .bep-reasons__icon { color: var(--bep-accent); }

.bep-reasons__name {
	display: block;
	font-size: var(--bwm-text-lg, clamp(15.5px, calc(15.5px + 0.0016 * (100vw - 360px)), 17px));
	font-weight: var(--bep-weight-heading, 500);
	line-height: 1.35;
}

.bep-reasons__note {
	display: block;
	margin-top: 5px;
	font-size: 14.5px;
	line-height: 1.55;
}

.bep-section--dark .bep-reasons__note { color: rgba(255, 255, 255, 0.68); }

/* How far things are ------------------------------------------------------
   The first question a guest asks about an apartment, and the thing that
   keeps the card from being a heading floating in empty space when no map
   has been set. */

.bep-distances {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.bep-distances li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: 15px;
}
.bep-distances__place { min-width: 0; }

.bep-distances__time {
	flex: none;
	color: var(--bep-muted);
	font-weight: var(--bep-weight-strong, 600);
	white-space: nowrap;
}

.bep-distances__go { margin-top: 18px; align-self: start; }

@media (max-width: 420px) {
	.bep-distances li { flex-direction: column; gap: 2px; }
	.bep-distances__go { width: 100%; justify-content: center; }
}

/* ========================================================================
   Service table
   ------------------------------------------------------------------------
   Treatments, visas and day trips are the same shape of information, so
   they are one table. Rows are told apart by a faint band rather than a
   drawn rule: the eye follows a row across four columns either way, and
   nothing has to be drawn to make it happen.
   ======================================================================== */

.bep-tablewrap {
	margin: clamp(26px, 3.4vw, 42px) 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bep-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--bwm-text, clamp(14.5px, 1.3vw, 15.5px));
}

.bep-table th,
.bep-table td {
	border: 0;
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
}

.bep-table thead th {
	padding-top: 0;
	padding-bottom: 10px;
	color: var(--bep-muted);
	font-size: 12.5px;
	font-weight: var(--bep-weight-strong, 600);
	white-space: nowrap;
}

.bep-table tbody tr:nth-child(odd) { background: var(--bep-surface); }

.bep-table tbody th,
.bep-table tbody td:first-of-type { padding-left: 18px; }

.bep-table__what {
	display: table-cell;
	font-weight: var(--bep-weight-heading, 500);
	font-size: var(--bwm-text, clamp(15.5px, calc(15.5px + 0.0016 * (100vw - 360px)), 17px));

	/*
	 * Not nowrap. A name like "Aburi Botanical Gardens" then forces the
	 * whole table wider than the column it sits in, and the price column
	 * is pushed off the edge, which is exactly what happened.
	 */
	white-space: normal;
}

.bep-table__what i { margin-right: 9px; font-size: 18px; color: var(--bep-accent-ink, var(--bep-accent)); vertical-align: -2px; }

.bep-table__detail { color: var(--bep-muted); line-height: 1.55; min-width: 0; }
.bep-table__num { white-space: nowrap; }
.bep-table__price { font-weight: var(--bep-weight-heading, 500); }
.bep-table__price small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--bep-muted); }

/* On ink the band and the muted words are restated. */
.bep-section--dark .bep-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.bep-section--dark .bep-table thead th,
.bep-section--dark .bep-table__detail,
.bep-section--dark .bep-table__price small { color: rgba(255, 255, 255, 0.66); }
.bep-section--dark .bep-table__what i { color: var(--bep-accent); }

/*
 * Below 760 a four column table is unreadable on a phone, so each row
 * becomes a block. The column heading travels with the figure as a label,
 * which is why the cells carry data-label.
 */
@media (max-width: 1080px) {
	.bep-tablewrap { overflow-x: visible; }

	.bep-table,
	.bep-table tbody,
	.bep-table tbody tr,
	.bep-table tbody th,
	.bep-table tbody td { display: block; width: 100%; }

	.bep-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	.bep-table tbody tr { padding: 16px 16px 18px; }
	.bep-table tbody th,
	.bep-table tbody td { padding: 0; }

	.bep-table__what { white-space: normal; margin-bottom: 6px; }
	.bep-table__detail { min-width: 0; margin-bottom: 10px; }

	.bep-table__num { display: flex; gap: 8px; align-items: baseline; }

	.bep-table__num::before {
		content: attr(data-label) ":";
		color: var(--bep-muted);
		font-size: 13px;
		font-weight: 400;
	}

	.bep-section--dark .bep-table__num::before { color: rgba(255, 255, 255, 0.6); }

	.bep-table__price small { display: inline; margin: 0 0 0 4px; }
}


/* Cards, tidied ----------------------------------------------------------
   Three faults showed on the services page: the button broke across three
   lines, the title carried the theme's underline, and a card with no
   photograph showed an empty grey box with no explanation. */

.bep-card__foot .bep-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.bep-card__price { min-width: 0; }

.bep-card__price .bep-price--quiet {
	font-size: var(--bwm-text, clamp(15.5px, calc(15.5px + 0.0016 * (100vw - 360px)), 17px));
	font-weight: var(--bep-weight-heading, 500);
	letter-spacing: -0.01em;
}

.bep-body .bep-card__title a,
.bep-body .bep-card__title a:hover,
.bep-body .bep-card__title a:focus { text-decoration: none; }

/* A card with no photograph says so, quietly, rather than showing an
   empty grey rectangle that reads as a broken image. */
.bep-card__media--none {
	display: grid;
	place-items: center;
	background: var(--bep-bg);
	color: var(--bep-muted);
	font-size: 13px;
}

@media (max-width: 420px) {
	.bep-card__foot { flex-direction: column; align-items: stretch; gap: 12px; }
	.bep-card__foot .bep-btn { width: 100%; justify-content: center; }
}

/* One photograph on a service page should fill the width rather than sit
   in a mosaic slot waiting for four more that do not exist. */
/*
 * The mosaic has room for four: three columns, two rows, with the first
 * two cells spanning both rows. A fifth would create an implicit row with
 * no height and stretch the whole block, so anything past the fourth is
 * hidden rather than allowed to break the layout.
 */
.bep-mosaic__cell:nth-child(n + 5) { display: none; }

/* The empty photograph state is a note, not something to click. It sits
   inside the card's link, so it inherits the underline unless told not to. */
.bep-card__nophoto {
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.01em;
	opacity: 0.75;
}

.bep-body .bep-card__media--none:hover .bep-card__nophoto { text-decoration: none; }

/* A card whose content is short should not leave a tall empty foot. */
.bep-card__body { display: flex; flex-direction: column; }
.bep-card__summary:last-of-type { margin-bottom: 4px; }

/* Console: reaching an enquiry --------------------------------------------
   These are answered from a phone far more often than from a desk, so the
   phone number is a button rather than text to copy out by hand. */

.bep-enquiry__reach {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

.bep-enquiry__reach .bep-btn { gap: 8px; }

@media (max-width: 560px) {
	/* Full width, because a mis-tap on a phone dials the wrong person. */
	.bep-enquiry__reach { flex-direction: column; }
	.bep-enquiry__reach .bep-btn { width: 100%; justify-content: center; }
	.bep-reviewactions .bep-btn { flex: 1 1 auto; justify-content: center; }
}

/* With fourteen sections the strip scrolls, so the one you are on has to
   be brought into view rather than left off the edge. */
.bep-console__link.is-current { scroll-margin-inline: 16px; }

/* ========================================================================
   Filter panel
   ------------------------------------------------------------------------
   One scroll, not two. The column scrolls itself when it is taller than the
   window, with the button pinned to its foot, so there is never a scrollbar
   inside a box inside the page. Groups are separated by space rather than
   rules, and each question has one control that looks like one question.
   ======================================================================== */

.bep-results__aside {
	position: sticky;
	top: calc(var(--bep-sticky-top, 96px) + 16px);
	max-height: calc(100vh - var(--bep-sticky-top, 96px) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	border-radius: var(--bep-radius-section, 14px);
}

.bep-results__aside::-webkit-scrollbar { display: none; }

.bep-filters {
	display: block;
	background: var(--bep-surface, #fff);
	border-radius: var(--bep-radius-section, 14px);
	box-shadow: 0 1px 2px rgba(11, 17, 16, 0.05), 0 10px 30px rgba(11, 17, 16, 0.06);
	color: var(--bep-text, #0B1110);
}

.bep-filters__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 22px 6px;
}

.bep-filters .bep-filters__title {
	margin: 0;
	font-size: var(--bwm-h4, clamp(19px, calc(19px + 0.0043 * (100vw - 360px)), 23px));
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: left;
}

.bep-filters__clear {
	margin-left: auto;
	color: var(--bep-muted, #6A7574);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bep-filters__clear:hover { color: var(--bep-text, #0B1110); }

.bep-filters__close {
	display: none;
	margin-left: auto;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bep-text, #0B1110);
	font-size: 20px;
	cursor: pointer;
}

.bep-filters__close:hover { background: var(--bep-soft-fill, #F3F6F6); }

.bep-filters__body { padding: 0 22px; }

.bep-filters__group { padding: 20px 0 4px; }

.bep-filters__label {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Shared input shell ------------------------------------------------------ */

.bep-filters .bep-money,
.bep-filters .bep-input {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 46px;
	margin: 0;
	border-radius: 10px;
	background: var(--bep-soft-fill, #F3F6F6);
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.bep-filters .bep-money:focus-within,
.bep-filters .bep-input:focus-within {
	background: var(--bep-surface, #fff);
	box-shadow: 0 0 0 2px var(--bep-accent, #008186);
}

.bep-filters .bep-money input,
.bep-filters .bep-input input,
.bep-filters .bep-input select {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 12px 0 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit;
	font-size: 15px;
	outline: none;
	-moz-appearance: textfield;
}

.bep-filters .bep-money input::-webkit-outer-spin-button,
.bep-filters .bep-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bep-filters .bep-money input::placeholder,
.bep-filters .bep-input input::placeholder { color: var(--bep-muted, #6A7574); opacity: 0.8; }

.bep-money__sym,
.bep-filters .bep-input i {
	flex: none;
	padding: 0 8px 0 12px;
	color: var(--bep-muted, #6A7574);
	font-size: 14px;
	font-weight: 600;
}

.bep-filters .bep-input i { font-size: 18px; }

/* A select keeps its arrow, drawn so it matches on every browser. */
.bep-filters .bep-input select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A7574' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}

/* Price ------------------------------------------------------------------- */

.bep-filters__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}

.bep-filters__to { color: var(--bep-muted, #6A7574); font-size: 13px; }

/* Type of place ------------------------------------------------------------- */

.bep-options { display: grid; gap: 6px; }

.bep-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bep-option:hover { background: var(--bep-soft-fill, #F3F6F6); }

.bep-option__input { position: absolute; opacity: 0; pointer-events: none; }

.bep-option__dot {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #C9D1D1;
	transition: box-shadow 0.15s ease;
}

.bep-option__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }

.bep-option__count {
	flex: none;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--bep-soft-fill, #F3F6F6);
	color: var(--bep-muted, #6A7574);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

.bep-option__input:checked ~ .bep-option__dot { box-shadow: inset 0 0 0 6px var(--bep-accent, #008186); }
.bep-option__input:checked ~ .bep-option__name { font-weight: 700; }
.bep-option:has(.bep-option__input:checked) { background: var(--bep-soft-fill, #F3F6F6); }
.bep-option:has(.bep-option__input:checked) .bep-option__count { background: var(--bep-surface, #fff); }
.bep-option__input:focus-visible ~ .bep-option__dot { outline: 2px solid var(--bep-accent, #008186); outline-offset: 3px; }

/* Rooms and guests ------------------------------------------------------------ */

.bep-seg { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }

.bep-seg__label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	color: var(--bep-muted, #6A7574);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
}

.bep-seg__track {
	display: grid;
	grid-template-columns: 1.35fr repeat(5, 1fr);
	gap: 2px;
	padding: 3px;
	border-radius: 10px;
	background: var(--bep-soft-fill, #F3F6F6);
}

.bep-seg__input { position: absolute; opacity: 0; pointer-events: none; }

.bep-seg__opt {
	display: grid;
	place-items: center;
	min-width: 0;
	height: 38px;
	margin: 0;
	border-radius: 8px;
	color: var(--bep-muted, #6A7574);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bep-seg__opt:hover { color: var(--bep-text, #0B1110); }

.bep-seg__input:checked + .bep-seg__opt {
	background: var(--bep-surface, #fff);
	color: var(--bep-text, #0B1110);
	box-shadow: 0 1px 2px rgba(11, 17, 16, 0.08), 0 2px 8px rgba(11, 17, 16, 0.06);
}

.bep-seg__input:focus-visible + .bep-seg__opt { outline: 2px solid var(--bep-accent, #008186); outline-offset: 1px; }

/* Where ---------------------------------------------------------------------------- */

.bep-filters__stack { display: grid; gap: 8px; }

/* Foot: pinned to the bottom of the column while the rest scrolls. ------------------ */

.bep-filters__foot {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: 16px;
	padding: 14px 22px 22px;
	border-radius: 0 0 var(--bep-radius-section, 14px) var(--bep-radius-section, 14px);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bep-surface, #fff) 26%);
}

.bep-filters__submit { display: flex; width: 100%; min-height: 52px; justify-content: center; }

.bep-filters__scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(11, 17, 16, 0.45);
}

/* Phone and tablet: a sheet from the bottom. ------------------------------------------ */

@media (max-width: 900px) {
	.bep-results__aside {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		z-index: 61;
		max-height: 90vh;
		max-height: 90dvh;
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
		transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.bep-results__aside.is-open { transform: translateY(0); }

	.bep-filters { border-radius: 20px 20px 0 0; box-shadow: none; }

	/* A grab handle, so it reads as a sheet that can be dismissed. */
	.bep-filters__head { position: sticky; top: 0; z-index: 2; padding-top: 26px; background: var(--bep-surface, #fff); border-radius: 20px 20px 0 0; }
	.bep-filters__head::before {
		content: "";
		position: absolute;
		top: 9px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: #D5DCDC;
	}

	.bep-filters__close { display: grid; place-items: center; }
	.bep-filters__foot { border-radius: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

	/* 16px stops iPhones zooming the page when a field is tapped. */
	.bep-filters .bep-money input,
	.bep-filters .bep-input input,
	.bep-filters .bep-input select { font-size: 16px; }
}

@media (max-width: 380px) {
	.bep-filters__head, .bep-filters__body { padding-left: 16px; padding-right: 16px; }
	.bep-filters__foot { padding-left: 16px; padding-right: 16px; }
	.bep-seg__opt { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.bep-results__aside,
	.bep-option,
	.bep-option__dot,
	.bep-seg__opt,
	.bep-filters .bep-money,
	.bep-filters .bep-input { transition: none; }
}

.bep-filters__clear + .bep-filters__close { margin-left: 4px; }

/* Airport pickup page ------------------------------------------------------
   Each part of the page is its own block with room around it, so the fleet
   card no longer runs straight into the next heading. */

.bep-pickup__block { margin-top: clamp(44px, 6vw, 88px); }
.bep-pickup__block:last-child { margin-bottom: clamp(56px, 7vw, 110px); }
.bep-pickup__block .bep-section__title { margin: 0; text-align: left; }
.bep-pickup__block .bep-grid--results { margin-top: clamp(20px, 2.6vw, 30px); }

.bep-pickup .bep-howto {
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: clamp(22px, 3vw, 32px);
	counter-reset: bep-howto;
}

/* Numbered, one under another: in a column beside the form, three narrow
   columns of prose would be a word or two to a line. */
.bep-pickup .bep-howto__item {
	position: relative;
	padding: 0 0 26px 56px;
	counter-increment: bep-howto;
}

.bep-pickup .bep-howto__item:last-child { padding-bottom: 0; }

.bep-pickup .bep-howto__item::before {
	content: counter(bep-howto);
	position: absolute;
	top: -4px;
	left: 0;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bep-accent-soft, #E6F3F3);
	color: var(--bep-accent-dark, #006266);
	font-size: 15px;
	font-weight: 800;
}

.bep-pickup .bep-howto__item b { font-size: 17px; }
.bep-pickup .bep-howto__item span { font-size: 15px; max-width: 46ch; }


/* ==========================================================================
   2.35.0 — Quieter typography
   --------------------------------------------------------------------------
   The brief was a hotel room page: type you read rather than type you
   notice. Headings drop to medium at normal width and the tracking that
   locked words into a block is released. This applies site-wide rather than
   only on the room page, because that was the request. The fluid size scale
   is untouched; only weight, width and tracking change.
   ========================================================================== */

.bep-body h1,
.bep-body h2,
.bep-body h3,
.bep-body h4,
.bep-body .bep-section__title,
.bep-body .bep-hero__title,
.bep-body .bep-locationcard__title,
.bep-body .bep-bookband__title,
.bep-body .bep-block__title,
.bep-body .bep-listinghead__title,
.bep-body .bep-footer__brand,
.bep-body .bep-trip__title,
.bep-body .bep-card__title,
.bep-body .bep-filters__title,
.bep-body .bep-service__title {
	font-weight: var(--bep-weight-heading, 500);
	font-stretch: var(--bep-width-heading, 100%);
	letter-spacing: var(--bep-tracking-heading, -0.005em);
}

/* Leading can relax once the weight comes down: tight leading was holding
   the heavy block together and now only crowds the words. */
.bep-body .bep-section__title,
.bep-body .bep-hero__title,
.bep-body .bep-listinghead__title { line-height: 1.16; }

/* The remaining hard weights, each the loudest thing on its own panel. */
.bep-body .bep-filters .bep-filters__title { font-weight: var(--bep-weight-heading, 500); letter-spacing: -0.005em; }
.bep-body .bep-filters__label { font-weight: 600; letter-spacing: 0; }
.bep-body .bep-option__input:checked ~ .bep-option__name { font-weight: 600; }
.bep-body .bep-pickup .bep-howto__item::before { font-weight: 600; }
.bep-body .bep-trip__no { font-weight: 600; font-stretch: 100%; letter-spacing: 0.08em; }

/* Eyebrows and footer headings: small caps carry on their own, and 700 or
   800 made them compete with the headings they introduce. */
.bep-body .bep-eyebrow { font-weight: 600; letter-spacing: 0.16em; }
.bep-body .bep-footer__heading { font-weight: 600; letter-spacing: 0.14em; }
.bep-body .bep-footer__wa a { font-weight: 500; }
.bep-body .bep-footer__tel a { font-weight: 500; letter-spacing: -0.005em; }

/* Buttons keep their own weight so a call to action still reads as one. */
.bep-body .bep-btn,
.bep-body .bep-btn--primary { font-weight: var(--bep-weight-button, 600); font-stretch: 100%; letter-spacing: 0.01em; }

/* Prices are set in Inter and were inheriting the display weight. */
.bep-body .bep-price { font-weight: 600; font-stretch: normal; letter-spacing: 0; }


/* ==========================================================================
   2.35.0 — The room page
   --------------------------------------------------------------------------
   Read in the order a guest decides in: see the room, scan what is in it,
   read the description, pick the dates. Everything that is reference rather
   than decision sits below the booking bar.
   ========================================================================== */

.bep-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.bep-body .bep-room { padding: 0 0 8px; }

/* --- Back link ---------------------------------------------------------- */

.bep-body .bep-roomnav {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 0 14px;
	font-size: 14px;
	color: var(--bep-muted);
}

.bep-body .bep-roomnav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--bep-muted);
	text-decoration: none;
}

.bep-body .bep-roomnav__back:hover { color: var(--bep-accent); }
.bep-body .bep-roomnav__back i { font-size: 16px; }
.bep-body .bep-roomnav__here { color: var(--bep-text); }

/* --- Photographs -------------------------------------------------------- */

.bep-body .bep-roomshots { margin: 0 0 26px; }

.bep-body .bep-roomshots__main {
	margin: 0;
	border-radius: var(--bep-radius-card);
	overflow: hidden;
	background: var(--bep-surface);
}

.bep-body .bep-roomshots__main img {
	display: block;
	width: 100%;
	height: clamp(230px, 42vw, 520px);
	object-fit: cover;
}

/* The strip scrolls rather than wrapping, so the row reads as "more
   photographs this way" at any width instead of reflowing into a block. */
.bep-body .bep-roomshots__strip {
	display: flex;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.bep-body .bep-roomshots__strip::-webkit-scrollbar { height: 4px; }
.bep-body .bep-roomshots__strip::-webkit-scrollbar-thumb { background: var(--bep-border); border-radius: 4px; }
.bep-body .bep-roomshots__strip li { flex: 0 0 auto; scroll-snap-align: start; }

.bep-body .bep-roomshots__thumb {
	display: block;
	width: clamp(92px, 12vw, 156px);
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.58;
	transition: opacity 0.18s ease;
}

.bep-body .bep-roomshots__thumb img {
	display: block;
	width: 100%;
	height: clamp(66px, 8.4vw, 104px);
	object-fit: cover;
}

.bep-body .bep-roomshots__thumb:hover,
.bep-body .bep-roomshots__thumb.is-on { opacity: 1; }
.bep-body .bep-roomshots__thumb:focus-visible { outline: 2px solid var(--bep-accent); outline-offset: 2px; }

/* --- Title and the facts line ------------------------------------------- */

.bep-body .bep-roomhead { margin: 0 0 22px; }

.bep-body .bep-roomhead__title {
	margin: 0 0 8px;
	font-family: var(--bep-font-heading);
	font-size: var(--bwm-h1, clamp(25px, calc(25px + 0.0102 * (100vw - 360px)), 38px));
	font-weight: var(--bep-weight-heading, 500);
	font-stretch: var(--bep-width-heading, 100%);
	letter-spacing: var(--bep-tracking-heading, -0.005em);
	line-height: 1.18;
	color: var(--bep-text);
}

.bep-body .bep-roomhead__facts {
	margin: 0;
	color: var(--bep-muted);
	font-size: 15px;
	line-height: 1.6;
}

.bep-body .bep-roomhead__place::before { content: " · "; }

.bep-body .bep-roomhead__price { margin: 10px 0 0; display: flex; align-items: baseline; gap: 7px; }
.bep-body .bep-roomhead__price .bep-price { font-size: 22px; }
.bep-body .bep-roomhead__per { color: var(--bep-muted); font-size: 14px; }

/* --- Amenities ----------------------------------------------------------
   A quiet panel, four across on a desktop and two on a phone, with the icon
   at reading size beside the words rather than above them in a tile. The
   minimum is a variable so auto-fit still does the work inside a narrow
   column, where a media query would see the window rather than the
   container the panel is actually in.
   ------------------------------------------------------------------------ */

.bep-body .bep-amen {
	--bep-amen-min: 230px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bep-amen-min)), 1fr));
	gap: 14px 24px;
	margin: 0 0 26px;
	padding: 24px 26px;
	list-style: none;
	border-radius: var(--bep-radius-section);
	background: var(--bep-surface);
}

@media (max-width: 760px) {
	.bep-body .bep-amen { --bep-amen-min: 132px; }
}

.bep-body .bep-amen__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--bep-text);
}

/* 17px: the size of the words beside it. A larger icon turns a list of
   facilities into a row of badges. */
.bep-body .bep-amen__item i {
	flex: 0 0 auto;
	margin-top: 1px;
	font-size: 17px;
	line-height: 1.2;
	color: var(--bep-accent);
}

/* --- Description --------------------------------------------------------- */

.bep-body .bep-roomtext { margin: 0 0 28px; max-width: 74ch; }
.bep-body .bep-roomtext p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.bep-body .bep-roomtext p:last-child { margin-bottom: 0; }

/* --- Booking bar ---------------------------------------------------------
   The sidebar panel laid flat: the fields in a row, the button on the end.
   ------------------------------------------------------------------------- */

.bep-body .bep-bookbar {
	margin: 0 0 34px;
	padding: 22px 26px 24px;
	border-radius: var(--bep-radius-section);
	background: var(--bep-surface);
}

.bep-body .bep-bookbar__title {
	margin: 0 0 16px;
	font-family: var(--bep-font-heading);
	font-size: 19px;
	font-weight: var(--bep-weight-heading, 500);
	font-stretch: var(--bep-width-heading, 100%);
	letter-spacing: var(--bep-tracking-heading, -0.005em);
	color: var(--bep-text);
}

/* Four tracks on a desktop: Arrival, Departure, Guests and the button. */
.bep-body .bep-bookbar .bep-bookbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 14px 16px;
	align-items: end;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	box-shadow: none;
}

/* The price, the quote, the status line and the notes run the full width;
   only the three fields and the button share the row. */
.bep-body .bep-bookbar .bep-bookbox__price,
.bep-body .bep-bookbar .bep-quote,
.bep-body .bep-bookbar .bep-bookbox__status,
.bep-body .bep-bookbar .bep-bookbox__meta,
.bep-body .bep-bookbar .bep-alternatives,
.bep-body .bep-bookbar .bep-bookbox > a.bep-btn--block { grid-column: 1 / -1; }

.bep-body .bep-bookbar .bep-bookbox__dates { display: contents; }

/* The button belongs on the end of the row, not under it. The quote, the
   status line and the notes sit between the fields and the button in the
   markup, so without an explicit order they claim the row first and push
   the button down. */
.bep-body .bep-bookbar .bep-bookbox__price { order: 1; }
.bep-body .bep-bookbar .bep-bookbox__dates { order: 2; }
.bep-body .bep-bookbar .bep-bookbox__dates > .bep-field { order: 2; }
.bep-body .bep-bookbar .bep-bookbox > label.bep-field { order: 3; }
.bep-body .bep-bookbar .bep-bookbox > button[type="submit"] { order: 4; }
.bep-body .bep-bookbar .bep-quote { order: 5; }
.bep-body .bep-bookbar .bep-alternatives { order: 6; }
.bep-body .bep-bookbar .bep-bookbox__status { order: 7; }
.bep-body .bep-bookbar .bep-bookbox__meta { order: 8; }
.bep-body .bep-bookbar .bep-bookbox > a.bep-btn--block { order: 9; }

/* An empty status paragraph still claims a row. */
.bep-body .bep-bookbar .bep-bookbox__status:empty { display: none; }

.bep-body .bep-bookbar .bep-field { margin: 0; }
.bep-body .bep-bookbar .bep-field > span { display: block; margin: 0 0 6px; font-size: 14px; color: var(--bep-muted); }

.bep-body .bep-bookbar .bep-field input,
.bep-body .bep-bookbar .bep-field select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--bep-border);
	border-radius: var(--bep-radius-button);
	background: #ffffff;
	color: var(--bep-text);
	/* 16px keeps iOS from zooming the page when the field takes focus. */
	font-size: 16px;
	font-family: inherit;
}

.bep-body .bep-bookbar .bep-bookbox > button[type="submit"] {
	min-height: 46px;
	margin: 0;
	width: 100%;
}

.bep-body .bep-bookbar .bep-bookbox__price { margin: 0; display: flex; align-items: baseline; gap: 7px; }

/* --- Everything below the decision --------------------------------------- */

.bep-body .bep-roomrest { padding-bottom: 10px; }
.bep-body .bep-roomrest .bep-block { margin: 0 0 30px; }

.bep-body .bep-roomhost {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	padding: 20px 22px;
	border-radius: var(--bep-radius-section);
	background: var(--bep-surface);
}

.bep-body .bep-roomhost__words { flex: 1 1 190px; min-width: 0; }
.bep-body .bep-roomhost__name { margin: 0; font-size: 16px; color: var(--bep-text); }
.bep-body .bep-roomhost__where { margin: 3px 0 0; font-size: 14px; color: var(--bep-muted); }
.bep-body .bep-roomhost__links { display: flex; flex-wrap: wrap; gap: 10px; }
.bep-body .bep-roomhost__links .bep-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; }
.bep-body .bep-roomhost__mark { flex: 0 0 auto; }

/* --- More apartments ------------------------------------------------------ */

.bep-body .bep-roommore { padding-top: 10px; }

.bep-body .bep-roommore__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.bep-body .bep-roommore__head .bep-section__title { margin: 0; }

.bep-body .bep-roommore__all {
	flex: 0 0 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--bep-accent);
	font-size: 15px;
	text-decoration: none;
}

.bep-body .bep-roommore__all:hover { text-decoration: underline; }

/* A carousel at every width, the way the reference runs it: the cards keep
   one shape and the row scrolls, rather than five wrapping to 3 and 2. The
   phone behaviour and the desktop behaviour are then the same thing rather
   than two layouts to keep in step. */
.bep-body .bep-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(84%, 300px), 1fr);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	scrollbar-width: thin;
}

.bep-body .bep-rail > * { scroll-snap-align: start; min-width: 0; }
.bep-body .bep-rail::-webkit-scrollbar { height: 5px; }
.bep-body .bep-rail::-webkit-scrollbar-thumb { background: var(--bep-border); border-radius: 5px; }

@media (min-width: 900px) {
	.bep-body .bep-rail { grid-auto-columns: minmax(300px, 1fr); }
}

/* Card footers were a flex row, so a four-figure price ("GH₵ 1,090.00")
   left too little room for the button and it dropped to a second line while
   the three-figure cards beside it kept theirs on one. A two-track grid
   makes every card in the row identical whatever the price reads. */
.bep-body .bep-card__foot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.bep-body .bep-card__foot .bep-btn { width: 100%; }

@media (max-width: 420px) {
	.bep-body .bep-card__foot { grid-template-columns: 1fr; }
}

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 640px) {
	.bep-body .bep-roomnav { padding: 12px 0 10px; font-size: 13px; }
	.bep-body .bep-roomnav__here { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.bep-body .bep-amen { padding: 18px 16px; gap: 12px 16px; }
	.bep-body .bep-bookbar { padding: 18px 16px 20px; }
	.bep-body .bep-roomhost { padding: 16px; }
	.bep-body .bep-roomhost__links .bep-btn { flex: 1 1 140px; justify-content: center; }
}


/* --- Room page: measured against the live site ----------------------------
   On the live site the shell runs far wider than the 1200px default, so the
   room page was being drawn at about 1800px across. Three things went wrong
   at that width, and all three have the same cause.

   The photograph. object-fit: cover crops whatever the box does not match,
   and the crop depends on the box's shape, not its size. A fixed 520px
   height inside an 1800px box is a 3.46:1 letterbox, so a phone photograph
   of a room lost most of its height — the "zoomed in" look. The box is now
   given a shape rather than a height, so the crop stays the same whatever
   the theme's width turns out to be.

   The type. The fluid sizes are driven by the viewport, not the container,
   so on a 1920px screen the heading reached its maximum while the text
   beside it did not.

   Rather than fight the theme, the room page is given its own measure, near
   the reference's own 1300px. Everything else follows from that.
   -------------------------------------------------------------------------- */

.bep-body .bep-room > .bep-shell,
.bep-body .bep-room .bep-roommore .bep-shell {
	max-width: 1240px;
}

/* A shape, not a height: 2.2:1 against the old 3.46:1, close to the
   reference's own crop and far kinder to a photograph taken portrait. */
.bep-body .bep-roomshots__main img {
	height: auto;
	aspect-ratio: 2.2 / 1;
	max-height: 540px;
}

@media (max-width: 760px) {
	/* Nearer to square on a phone, where a letterbox leaves nothing to see. */
	.bep-body .bep-roomshots__main img { aspect-ratio: 4 / 3; max-height: 420px; }
}

/* Thumbnails to the reference's size, and no longer growing with the window. */
.bep-body .bep-roomshots__thumb { width: clamp(92px, 11vw, 150px); }
.bep-body .bep-roomshots__thumb img { height: clamp(66px, 7.4vw, 100px); }

/* The title was reaching the top of the fluid scale on a wide screen. */
.bep-body .bep-roomhead__title { font-size: clamp(25px, 2.4vw, 36px); }

/* The specification list was set at the same size as the prose it sits
   under, which made a reference table read as body copy. */
.bep-body .bep-roomrest .bep-details { font-size: 15px; }
.bep-body .bep-roomrest .bep-details span { color: var(--bep-muted); }

/* With the logo gone the panel is words and buttons, so it no longer needs
   to reserve a column for a mark. */
.bep-body .bep-roomhost { justify-content: space-between; }


/* --- The hero shows the whole photograph ---------------------------------
   The reference page appears uncropped because its photographs were shot to
   the shape of its frame. These are taken on a phone, in whatever shape the
   room allowed, so any fixed crop cuts something off — and which thing it
   cuts changes from apartment to apartment.

   So the frame stops cropping: `contain` fits the whole photograph inside
   it, at 16:9, which is the shape most room photographs are nearest to. A
   landscape shot fills the frame almost exactly; anything squarer or taller
   sits centred on a quiet backdrop with the whole room visible. Nothing is
   ever cut off, whatever is uploaded.
   -------------------------------------------------------------------------- */

.bep-body .bep-roomshots__main {
	background: var(--bep-soft-fill, #f3f6f6);
}

.bep-body .bep-roomshots__main img {
	object-fit: contain;
	aspect-ratio: 16 / 9;
	max-height: 560px;
}

@media (max-width: 760px) {
	/* 4:3 on a phone: taller, so an upright photograph still reads large. */
	.bep-body .bep-roomshots__main img { aspect-ratio: 4 / 3; max-height: 460px; }
}

/* Thumbnails keep their crop. They are picked out by shape at a glance, and
   a strip of letterboxed thumbnails reads as a row of empty boxes. */
.bep-body .bep-roomshots__thumb img { object-fit: cover; }

/* Letterbox bars are no better than a crop — they just move the problem
   into the margins. So the frame stops being a fixed shape and takes the
   shape of the photograph instead: the image is drawn at its own proportions,
   as large as the column and a sensible height allow, and the figure shrinks
   to it. Nothing is cut off and no empty panel shows around it. The hero's
   height then varies a little from one apartment to the next, which is the
   honest consequence of photographs that were not all shot to one shape. */
.bep-body .bep-roomshots__main {
	width: fit-content;
	max-width: 100%;
	/* Left-aligned, not centred: the thumbnail strip, the title and every
	   panel below start at the column's left edge, and a centred photograph
	   above them reads as a mistake rather than a choice. */
	margin-inline: 0 auto;
	background: none;
	border-radius: 0;
}

.bep-body .bep-roomshots__main img {
	object-fit: contain;
	aspect-ratio: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 600px;
	border-radius: var(--bep-radius-card);
}

@media (max-width: 760px) {
	.bep-body .bep-roomshots__main img { max-height: 70vh; }
}


/* --- Corrections measured on the live site, second pass -------------------- */

/* The carousel stretched when there was little to show. "1fr" let a single
   card take the whole rail, so a page with one other apartment drew a card
   the width of the screen with a photograph to match. Columns are now
   bounded at both ends, so a card is the same size whether there is one of
   them or ten, and the row simply starts at the left. */
.bep-body .bep-rail {
	grid-auto-columns: minmax(260px, 320px);
	justify-content: start;
}

@media (max-width: 899px) {
	/* On a phone the card is most of the width, with the next one showing at
	   the edge so it is clear the row scrolls. */
	.bep-body .bep-rail { grid-auto-columns: min(84%, 300px); }
}

/* With no price to show, the button takes the row rather than leaving a gap
   where the money would have been. */
.bep-body .bep-card__foot--noprice { grid-template-columns: 1fr; }

/* Share sits with the title now. */
.bep-body .bep-roomhead__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
}

.bep-body .bep-roomhead__top .bep-roomhead__title { margin: 0; min-width: 0; }

.bep-body .bep-roomhead__share {
	flex: 0 0 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* The specification list was three columns of short facts spread across the
   full width, so each label sat a long way from its value and the panel read
   as mostly empty. Columns are capped so a label and its value stay
   together, and the list fills from the left. */
.bep-body .bep-roomrest .bep-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 300px));
	justify-content: start;
	gap: 10px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bep-body .bep-roomrest .bep-details li {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	border: 0;
	padding: 0;
	margin: 0;
}

.bep-body .bep-roomrest .bep-details li > span { flex: 0 0 auto; }
.bep-body .bep-roomrest .bep-details li > strong { font-weight: 600; }

@media (max-width: 620px) {
	/* Share was being wrapped onto its own row above the title, which left
	   it stranded at the left with the title pushed to the right. On a phone
	   the header reads title, facts, price, then Share — so the top row
	   dissolves and the header orders its own children. */
	.bep-body .bep-roomhead { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
	.bep-body .bep-roomhead__top { display: contents; }
	.bep-body .bep-roomhead__title { order: 1; }
	.bep-body .bep-roomhead__facts { order: 2; }
	.bep-body .bep-roomhead__price { order: 3; }
	.bep-body .bep-roomhead__share { order: 4; margin-top: 14px; }
}

/* --- Amenities on a phone -------------------------------------------------
   Two columns at phone width gives each amenity about 150px, which is less
   than labels like "Fully Equipped Kitchen" or "Airport Pickup Available"
   need. They wrapped to two lines while their neighbours stayed on one, so
   the rows came out at different heights and the column of icons went
   ragged. One column gives every item a single line and puts the icons in a
   straight line down the page, which is what makes a list like this read
   cleanly. Two columns return as soon as there is room for them.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
	.bep-body .bep-amen {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: 14px 16px;
	}

	.bep-body .bep-amen__item {
		align-items: center;
		gap: 12px;
		min-height: 40px;
		font-size: 15.5px;
	}

	.bep-body .bep-amen__item i { margin-top: 0; }
}

/* Where an amenity name is long enough to wrap even with the room, the
   second line lines up under the first rather than under the icon. */
.bep-body .bep-amen__item > span { display: block; min-width: 0; }


/* --- Booking form controls on iOS ----------------------------------------
   A date input on iOS Safari ignores the height it is given and sizes
   itself from its own padding, and it centres its value. That is why the
   two date boxes came out roughly three times taller than they needed to
   be, with the date floating in the middle, while the select and the button
   beside them stayed normal — three controls in one form, three different
   shapes. Turning the native appearance off hands the sizing back to the
   stylesheet, so every control in the form is the same height and reads
   from the left like the labels above them.
   -------------------------------------------------------------------------- */

.bep-body .bep-bookbar .bep-field input,
.bep-body .bep-bookbar .bep-field select,
.bep-body .bep-bookbox .bep-field input,
.bep-body .bep-bookbox .bep-field select {
	-webkit-appearance: none;
	appearance: none;
	height: 48px;
	min-height: 48px;
	padding: 0 14px;
	text-align: left;
	line-height: normal;
	/* iOS adds its own inner shadow to form controls. */
	background-clip: padding-box;
	box-shadow: none;
}

/* A date input with the native control switched off loses its own spacing,
   so the value is centred vertically by the box rather than by the browser. */
.bep-body .bep-bookbar .bep-field input[type="date"] {
	display: flex;
	align-items: center;
}

.bep-body .bep-bookbar .bep-field input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
}

/* The select keeps a chevron, drawn rather than native so it matches. */
.bep-body .bep-bookbar .bep-field select {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b7175' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.bep-body .bep-bookbar .bep-field input:focus,
.bep-body .bep-bookbar .bep-field select:focus {
	outline: 2px solid var(--bep-accent);
	outline-offset: -1px;
	border-color: var(--bep-accent);
}

/* The button matches the fields exactly, rather than running a few pixels
   taller because its padding and theirs were set separately. */
.bep-body .bep-bookbar .bep-bookbox > button[type="submit"],
.bep-body .bep-bookbar .bep-bookbox > a.bep-btn--block {
	height: 48px;
	min-height: 48px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 620px) {
	/* On a phone the fields stack, so the spacing between them does the
	   separating and the labels sit closer to what they label. */
	.bep-body .bep-bookbar .bep-bookbox { gap: 14px; }
	.bep-body .bep-bookbar .bep-field > span { margin-bottom: 7px; }
	.bep-body .bep-bookbar__title { margin-bottom: 14px; }
}

/* --- The detail list ------------------------------------------------------
   Label and value on one line, with the rows close enough to read as a list
   rather than as separate paragraphs.
   -------------------------------------------------------------------------- */

.bep-body .bep-roomrest .bep-details li {
	align-items: baseline;
	min-height: 0;
	line-height: 1.5;
}

.bep-body .bep-roomrest .bep-details li > span { color: var(--bep-muted); }

@media (max-width: 620px) {
	.bep-body .bep-roomrest .bep-details { gap: 8px 0; font-size: 15px; }
}


/* ==========================================================================
   2.36.0 — The treatment menu
   --------------------------------------------------------------------------
   Two priced lists and a policy, in one section. The groups are separated by
   space and a heading rather than by rules, so the section stays quiet, and
   the policy is a description list because that is what it is: a term and
   what it means.
   ========================================================================== */

.bep-body .bep-menugroup { margin: 0 0 34px; }
.bep-body .bep-menugroup:last-of-type { margin-bottom: 26px; }

.bep-body .bep-menugroup__title {
	margin: 0 0 6px;
	font-family: var(--bep-font-heading);
	font-size: var(--bwm-h4, clamp(18px, calc(18px + 0.0032 * (100vw - 360px)), 21px));
	font-weight: var(--bep-weight-heading, 500);
	font-stretch: var(--bep-width-heading, 100%);
	letter-spacing: var(--bep-tracking-heading, -0.005em);
	color: var(--bep-text);
}

.bep-body .bep-menugroup__note {
	margin: 0 0 16px;
	max-width: 62ch;
	color: var(--bep-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* --- Deposits and changes -------------------------------------------------
   A term and its meaning, side by side where there is room and stacked on a
   phone. Money rules are the part guests argue about later, so they are set
   at reading size rather than as small print.
   -------------------------------------------------------------------------- */

.bep-body .bep-policy { margin: 0 0 26px; }

.bep-body .bep-policy__list { margin: 0; padding: 0; }

.bep-body .bep-policy__row {
	display: grid;
	grid-template-columns: minmax(min(100%, 190px), 240px) minmax(0, 1fr);
	gap: 4px 24px;
	padding: 12px 0;
}

.bep-body .bep-policy__row + .bep-policy__row { border-top: 1px solid var(--bep-border); }

.bep-body .bep-policy__list dt {
	margin: 0;
	font-weight: var(--bep-weight-strong, 600);
	color: var(--bep-text);
	font-size: 15px;
}

.bep-body .bep-policy__list dd {
	margin: 0;
	color: var(--bep-muted);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 620px) {
	.bep-body .bep-policy__row { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
	.bep-body .bep-menugroup { margin-bottom: 28px; }
}

/* A cell with no value is dropped from the stacked phone layout rather than
   showing its column name with nothing after it. */
@media (max-width: 620px) {
	.bep-body .bep-table .bep-table__num.is-blank { display: none; }
}

/* --- The priced menu ------------------------------------------------------
   Name on the left, price on the right, duration under the name. No table,
   because a table divides the width between its columns whether or not the
   figures fit: in the 600px column beside the booking form that broke a
   price across three lines, mid-number. Here the price takes exactly the
   room it needs and the name takes what is left, so the row holds at any
   width. No rules between rows either — the alignment is the structure.
   -------------------------------------------------------------------------- */

.bep-body .bep-pricelist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bep-body .bep-pricelist__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 0;
}

.bep-body .bep-pricelist__row + .bep-pricelist__row {
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bep-border) 55%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.bep-body .bep-pricelist__row + .bep-pricelist__row { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
}

.bep-body .bep-pricelist__icon {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--bep-accent);
	transform: translateY(1px);
}

/* The name takes what is left and may wrap; min-width:0 is what allows a
   flex item to shrink below its content width instead of pushing the price
   off the end of the row. */
.bep-body .bep-pricelist__body { flex: 1 1 auto; min-width: 0; }

.bep-body .bep-pricelist__name {
	display: block;
	font-size: clamp(15.5px, 1.1vw, 17px);
	line-height: 1.35;
	color: var(--bep-text);
}

.bep-body .bep-pricelist__note {
	display: block;
	margin-top: 3px;
	max-width: 52ch;
	color: var(--bep-muted);
	font-size: 14px;
	line-height: 1.55;
}

.bep-body .bep-pricelist__time {
	display: block;
	margin-top: 3px;
	color: var(--bep-muted);
	font-size: 13.5px;
	letter-spacing: 0.01em;
}

/* A price is never allowed to wrap: a figure broken across lines is worse
   than a figure that makes the row a little wider. */
.bep-body .bep-pricelist__price {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.bep-body .bep-pricelist__price .bep-price {
	font-size: clamp(15.5px, 1.1vw, 17px);
	font-weight: 600;
	color: var(--bep-text);
}

.bep-body .bep-pricelist__price small {
	display: block;
	margin-top: 2px;
	color: var(--bep-muted);
	font-size: 12px;
	font-weight: 400;
}

.bep-body .bep-section--dark .bep-pricelist__name,
.bep-body .bep-section--dark .bep-pricelist__price .bep-price { color: #ffffff; }
.bep-body .bep-section--dark .bep-pricelist__time,
.bep-body .bep-section--dark .bep-pricelist__note { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 480px) {
	.bep-body .bep-pricelist__row { gap: 10px; padding: 12px 0; }
	.bep-body .bep-pricelist__icon { font-size: 16px; }
}