/**
 * Space Booking - front-end styles.
 * Scoped under .sb-* so it never fights your theme.
 */

:root {
	/* Casameza brand palette. */
	--sb-accent: #6E0909;
	--sb-accent-dark: #4A0606;
	--sb-on-accent: #FFFFFF;
	--sb-gold: #C4A265;
	--sb-gold-dark: #A9884E;
	--sb-text: #0D0C0B;
	--sb-muted: rgba( 13, 12, 11, .55 );
	--sb-faint: rgba( 13, 12, 11, .25 );
	--sb-line: rgba( 13, 12, 11, .12 );
	--sb-line-soft: rgba( 13, 12, 11, .08 );
	--sb-bg: #FFFFFF;
	/* Ivory, then ivory dark. Used for tints and available day cells. */
	--sb-bg-soft: #FCFAF7;
	--sb-bg-alt: #F2EDE5;
	--sb-radius: 14px;
	--sb-radius-sm: 10px;
	/* Inputs stay square-ish; buttons are pills. */
	--sb-radius-input: 8px;
	--sb-radius-btn: 30px;
	/*
	 * The site's Elementor kit loads Inter and Playfair Display. Cormorant
	 * Garamond leads the display stack because the brand sheet asks for it:
	 * a family the browser cannot resolve is skipped, so this renders as
	 * Playfair today and picks Cormorant up on its own if the kit ever
	 * loads it. Nothing here needs to change for that to happen.
	 */
	--sb-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sb-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--sb-danger: #B3261E;
}

.sb-widget,
.sb-details,
.sb-listing-grid {
	color: var( --sb-text );
	font-family: var( --sb-font-ui );
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}

.sb-widget *,
.sb-details *,
.sb-listing-grid * {
	box-sizing: border-box;
}

/*
 * The widget shows and hides panels with the `hidden` attribute. A component
 * rule such as `.sb-price { display: flex }` outranks the browser default of
 * `[hidden] { display: none }`, so hidden elements would stay on screen. Pin
 * it once here rather than remembering it at every call site.
 */
.sb-widget [hidden],
.sb-paypage [hidden],
.sb-picker-shell [hidden],
.sb-details [hidden],
.sb-widget[hidden],
.sb-space-panel[hidden] {
	display: none !important;
}

/*
 * Themes style every <button> on the page - pill radii, dark fills, uppercase,
 * huge padding. Strip all of that back inside the widget first, then apply our
 * own styles. Without this the calendar renders as giant dark circles and the
 * text links render as buttons.
 */
.sb-widget button,
.sb-paypage button,
.sb-picker-shell button,
.sb-details button,
.sb-membership button,
.sb-cards button,
.sb-doc button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	background-image: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	color: inherit;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	cursor: pointer;
	transition: none;
	transform: none;
}

/*
 * Same reset for the interaction states. Themes hook :hover and :focus with a
 * descendant selector, which outranks a bare `.sb-widget button`, so these have
 * to match that weight rather than relying on the block above.
 */
.sb-widget button:hover,
.sb-widget button:focus,
.sb-widget button:active,
.sb-paypage button:hover,
.sb-paypage button:focus,
.sb-paypage button:active,
.sb-picker-shell button:hover,
.sb-picker-shell button:focus,
.sb-picker-shell button:active,
.sb-details button:hover,
.sb-details button:focus,
.sb-details button:active,
.sb-membership button:hover,
.sb-cards button:hover,
.sb-doc button:hover,
.sb-membership button:focus,
.sb-cards button:focus,
.sb-doc button:focus,
.sb-membership button:active,
.sb-cards button:active,
.sb-doc button:active {
	background: none;
	background-image: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

/* Keyboard focus must still be visible after that. */
.sb-widget button:focus-visible,
.sb-paypage button:focus-visible,
.sb-picker-shell button:focus-visible,
.sb-details button:focus-visible,
.sb-membership button:focus-visible,
.sb-cards button:focus-visible,
.sb-doc button:focus-visible {
	outline: 2px solid var( --sb-accent );
	outline-offset: 2px;
}

.sb-widget button::before,
.sb-widget button::after,
.sb-picker-shell button::before,
.sb-picker-shell button::after,
.sb-paypage button::before,
.sb-paypage button::after,
.sb-membership button::before,
.sb-cards button::before,
.sb-doc button::before,
.sb-membership button::after,
.sb-cards button::after,
.sb-doc button::after {
	content: none;
}

.sb-widget input,
.sb-widget select,
.sb-widget textarea,
.sb-paypage input,
.sb-paypage select,
.sb-paypage textarea {
	font: inherit;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

/* ------------------------------------------------------------------ widget */

.sb-widget {
	background: var( --sb-bg );
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius );
	box-shadow: 0 1px 2px rgba( 13, 12, 11, .04 ), 0 12px 28px rgba( 13, 12, 11, .07 );
	padding: 30px;
	max-width: 420px;
	margin: 32px 0;
}

/*
 * Small uppercase section labels - "YOUR BOOKING", "CHECK AVAILABILITY",
 * "SELECTED DATE". Exposed as a utility so page markup that wraps the widget
 * can use the same label without restating the numbers.
 */
.sb-eyebrow {
	display: block;
	margin: 0 0 10px;
	font-family: var( --sb-font-ui );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .25em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --sb-accent );
}

.sb-eyebrow--muted {
	color: var( --sb-muted );
}

.sb-widget__title,
.sb-checkout__title,
.sb-spaces__title,
.sb-details__heading {
	font-family: var( --sb-font-display );
	letter-spacing: -.01em;
}

/*
 * Sticky only helps while the panel is shorter than the viewport. Once the
 * calendar opens it can easily be taller, at which point sticky starts
 * fighting the scroll. Cap the height and let it scroll internally instead.
 */
.sb-widget__sticky {
	position: sticky;
	top: 24px;
	align-self: start;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/*
 * Page builders stack the sidebar under the content at tablet width, and a
 * sticky panel in a stacked column just fights the scroll. Release it at the
 * same breakpoint they stack at.
 */
@media ( max-width: 1024px ) {
	.sb-widget__sticky {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* Keep the panel from resizing under the cursor while content swaps in. */
.sb-picker {
	transition: min-height .12s ease;
}

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

.sb-widget__title {
	margin: 0 0 12px;
	font-size: 18px;
}

/*
 * The "Check availability / Choose your date" pair, shown when the widget is
 * rendered with labels="1".
 */
.sb-availability {
	margin: 20px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var( --sb-line-soft );
}

.sb-widget .sb-availability__title,
.sb-picker-shell .sb-availability__title {
	margin: 0;
	font-family: var( --sb-font-display );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.005em;
	color: var( --sb-text );
}

.sb-widget .sb-eyebrow + .sb-widget__title {
	margin-top: 0;
}

.sb-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sb-price {
	margin: 0;
	font-size: 14px;
	color: var( --sb-muted );
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.sb-price__from {
	font-size: 13px;
}

.sb-price__value {
	font-family: var( --sb-font-display );
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var( --sb-text );
}

.sb-price__unit {
	font-weight: 500;
	font-size: 15px;
	color: var( --sb-muted );
}

.sb-instant {
	color: var( --sb-accent );
	margin-right: 2px;
}

.sb-min-hours {
	margin: 0;
	font-size: 13px;
	color: var( --sb-muted );
}

/* Attendee bands */

.sb-attendees {
	display: block;
	margin-bottom: 16px;
}

.sb-attendees__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --sb-muted );
	margin-bottom: 5px;
}

.sb-widget .sb-attendees .sb-select {
	padding: 13px 14px;
	font-size: 15px;
	font-weight: 600;
}

/* Activity type row - sits in the page, above the facts */

.sb-activity {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	overflow: hidden;
	max-width: 640px;
	margin: 0 0 26px;
	background: var( --sb-bg-soft );
}

.sb-activity__item {
	flex: 1;
	display: flex;
	position: relative;
}

.sb-activity__item + .sb-activity__item {
	border-left: 1px solid var( --sb-line-soft );
}

.sb-activity input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.sb-activity label {
	flex: 1;
	text-align: center;
	padding: 13px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var( --sb-text );
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sb-activity input:checked + label {
	background: var( --sb-bg );
	box-shadow: inset 0 0 0 1.5px var( --sb-accent );
	border-radius: var( --sb-radius-sm );
}

.sb-activity input:focus-visible + label {
	outline: 2px solid var( --sb-accent );
	outline-offset: -2px;
}

/* Not offered here: shown, struck through, unselectable. */
.sb-activity__item.is-off label {
	color: var( --sb-muted );
	opacity: .5;
	text-decoration: line-through;
	cursor: not-allowed;
}

@media ( max-width: 520px ) {
	.sb-activity label {
		padding: 11px 4px;
		font-size: 13px;
	}
}

/* Activity modes */

.sb-modes {
	margin-bottom: 16px;
}

.sb-modes__label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var( --sb-muted );
}

.sb-modes__list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sb-mode {
	flex: 1 1 130px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sb-widget .sb-mode:hover,
.sb-picker-shell .sb-mode:hover {
	border-color: var( --sb-text );
}

.sb-mode:has( input:checked ) {
	border-color: var( --sb-accent );
	box-shadow: inset 0 0 0 1px var( --sb-accent );
}

.sb-mode__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.sb-mode__name {
	font-weight: 700;
	font-size: 14px;
}

.sb-mode__meta {
	font-size: 12px;
	color: var( --sb-muted );
}

/* Day chips */

.sb-days__list:not( :empty ) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.sb-day {
	display: flex;
	align-items: stretch;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	overflow: hidden;
}

.sb-day__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 12px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.sb-widget .sb-day__main:hover,
.sb-picker-shell .sb-day__main:hover {
	background: var( --sb-bg-soft );
}

.sb-day__date {
	font-weight: 700;
}

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

.sb-day__remove {
	width: 40px;
	border: 0;
	border-left: 1px solid var( --sb-line-soft );
	background: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var( --sb-muted );
}

.sb-widget .sb-day__remove:hover,
.sb-picker-shell .sb-day__remove:hover {
	background: var( --sb-bg-soft );
	color: var( --sb-danger );
}

.sb-days__controls {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
}

.sb-widget .sb-link,
.sb-paypage .sb-link,
.sb-picker-shell .sb-link {
	font-size: 14px;
	font-weight: 600;
	color: var( --sb-text );
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 2px 0;
}

.sb-widget .sb-link:hover,
.sb-paypage .sb-link:hover {
	opacity: .7;
}

.sb-widget .sb-link__muted,
.sb-paypage .sb-link__muted {
	color: var( --sb-muted );
	font-weight: 500;
}

/* Looks like a form control, not a call to action. */
.sb-widget .sb-picker-trigger,
.sb-picker-shell .sb-picker-trigger {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	background: var( --sb-bg );
	font-size: 15px;
	font-weight: 600;
	color: var( --sb-text );
	text-align: left;
	margin-bottom: 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sb-widget .sb-picker-trigger:hover,
.sb-picker-shell .sb-picker-trigger:hover {
	border-color: var( --sb-text );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .06 );
}

/* Calendar */

.sb-picker {
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	padding: 14px;
	margin-bottom: 14px;
}

.sb-picker__loading,
.sb-picker__error {
	font-size: 14px;
	color: var( --sb-muted );
	padding: 12px 0;
	text-align: center;
}

.sb-picker__error {
	color: var( --sb-danger );
}

.sb-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.sb-cal__title {
	font-family: var( --sb-font-display );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sb-widget .sb-cal__nav,
.sb-picker-shell .sb-cal__nav {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 20px;
	color: var( --sb-accent );
}

.sb-widget .sb-cal__nav:hover:not( :disabled ),
.sb-picker-shell .sb-cal__nav:hover:not( :disabled ) {
	background: var( --sb-bg-alt );
	color: var( --sb-accent-dark );
}

.sb-widget .sb-cal__nav:disabled,
.sb-picker-shell .sb-cal__nav:disabled {
	opacity: .25;
	cursor: default;
}

.sb-widget .sb-day__main,
.sb-picker-shell .sb-day__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 11px 14px;
	text-align: left;
	width: 100%;
}

.sb-widget .sb-day__remove,
.sb-picker-shell .sb-day__remove {
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var( --sb-line-soft );
	font-size: 20px;
	color: var( --sb-muted );
}

.sb-cal__dow,
.sb-cal__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}

.sb-cal__dow li {
	text-align: center;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var( --sb-muted );
	text-transform: uppercase;
	padding-bottom: 8px;
}

.sb-cal__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1px 0;
}

.sb-widget .sb-cal__day,
.sb-picker-shell .sb-cal__day {
	/* Fill the grid column rather than a fixed size, which overflowed the
	   cell on narrow screens and pushed the calendar out of alignment. */
	width: 100%;
	max-width: 38px;
	aspect-ratio: 1 / 1;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var( --sb-font-ui );
	font-size: 14px;
	font-weight: 500;
	color: var( --sb-text );
	transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.sb-widget .sb-cal__day:not( :disabled ):not( .is-selected ),
.sb-picker-shell .sb-cal__day:not( :disabled ):not( .is-selected ) {
	background: var( --sb-bg-alt );
}

/*
 * Hover is the darker secondary, not the accent: the accent is what marks the
 * chosen day, and painting hover the same colour made the two states
 * indistinguishable.
 */
.sb-widget .sb-cal__day:hover:not( :disabled ),
.sb-picker-shell .sb-cal__day:hover:not( :disabled ) {
	background: var( --sb-accent-dark );
	color: var( --sb-on-accent );
}

.sb-widget .sb-cal__day.is-unavailable,
.sb-picker-shell .sb-cal__day.is-unavailable {
	background: transparent;
	color: var( --sb-faint );
	opacity: 1;
	text-decoration: line-through;
	cursor: default;
}

/*
 * Today. A gold ring rather than a fill, so it never reads as the selection
 * and stays legible under one - the two can land on the same date.
 */
.sb-widget .sb-cal__day.is-today,
.sb-picker-shell .sb-cal__day.is-today {
	box-shadow: inset 0 0 0 1.5px var( --sb-gold );
}

.sb-widget .sb-cal__day.is-selected,
.sb-picker-shell .sb-cal__day.is-selected {
	background: var( --sb-accent );
	color: var( --sb-on-accent );
	font-weight: 600;
}

.sb-widget .sb-cal__day.is-booked-by-me,
.sb-picker-shell .sb-cal__day.is-booked-by-me {
	font-weight: 700;
	color: var( --sb-accent );
	box-shadow: inset 0 0 0 1.5px var( --sb-accent );
}

/* Times */

.sb-times {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var( --sb-line-soft );
}

.sb-times__date {
	font-weight: 700;
	margin-bottom: 10px;
}

.sb-times__row {
	display: flex;
	gap: 10px;
}

.sb-times__field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var( --sb-muted );
}

.sb-select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-input );
	background: var( --sb-bg );
	font: inherit;
	font-size: 14px;
	color: var( --sb-text );
}

.sb-times__hint {
	margin: 8px 0 0;
	font-size: 13px;
	min-height: 1em;
}

.sb-times__hint.is-error {
	color: var( --sb-danger );
}

.sb-times__empty {
	font-size: 14px;
	color: var( --sb-muted );
}

.sb-times__taken {
	margin: 0 0 10px;
	padding: 8px 11px;
	background: var( --sb-bg-soft );
	border-radius: 8px;
	font-size: 12.5px;
	color: var( --sb-muted );
}

.sb-times__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}

/* Warnings + breakdown */

.sb-warning {
	background: #fff6e5;
	border: 1px solid #f3d9a4;
	border-radius: var( --sb-radius-sm );
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

.sb-lines {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 12px;
	margin: 0 0 16px;
	font-size: 14px;
}

.sb-lines dt {
	color: var( --sb-muted );
}

.sb-lines dd {
	margin: 0;
	text-align: right;
}

.sb-lines__total {
	font-weight: 700;
	color: var( --sb-text ) !important;
	padding-top: 8px;
	border-top: 1px solid var( --sb-line-soft );
}

/* Buttons */

/*
 * Themes routinely style every button on the page, so these need enough
 * specificity to survive without resorting to !important everywhere.
 */
.sb-widget .sb-btn,
.sb-paypage .sb-btn,
.sb-picker-shell .sb-btn,
.sb-membership .sb-btn,
a.sb-btn {
	display: inline-block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: var( --sb-radius-btn );
	font-family: var( --sb-font-ui );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .125em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, transform .06s ease, box-shadow .18s ease;
}

.sb-widget .sb-btn__primary,
.sb-paypage .sb-btn__primary,
.sb-picker-shell .sb-btn__primary,
.sb-membership .sb-btn__primary,
a.sb-btn__primary {
	background: var( --sb-accent );
	color: var( --sb-on-accent );
	box-shadow: 0 1px 2px rgba( 13, 12, 11, .12 );
}

.sb-widget .sb-btn__primary:hover:not( :disabled ),
.sb-paypage .sb-btn__primary:hover:not( :disabled ),
.sb-membership .sb-btn__primary:hover:not( :disabled ),
a.sb-btn__primary:hover {
	background: var( --sb-accent-dark );
	box-shadow: 0 4px 12px rgba( 13, 12, 11, .16 );
}

.sb-widget .sb-btn:active:not( :disabled ),
.sb-paypage .sb-btn:active:not( :disabled ) {
	transform: translateY( 1px );
}

.sb-widget .sb-btn:disabled,
.sb-paypage .sb-btn:disabled,
.sb-membership .sb-btn:disabled {
	/* Neutral rather than a faded accent: the brand red at low opacity reads
	   as a pink button, i.e. the wrong colour, instead of an inactive one. */
	background: var( --sb-bg-alt );
	color: var( --sb-faint );
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}

.sb-widget .sb-btn__small,
.sb-paypage .sb-btn__small {
	width: auto;
	padding: 10px 20px;
	font-size: 14px;
	background: var( --sb-accent );
	color: var( --sb-on-accent );
}

/*
 * Outline: reads as the quieter of two adjacent calls to action. Fills on
 * hover rather than only changing its text colour, so the affordance is
 * obvious without relying on colour alone.
 */
.sb-widget .sb-btn__outline,
.sb-paypage .sb-btn__outline,
.sb-picker-shell .sb-btn__outline,
a.sb-btn__outline {
	background: transparent;
	border: 1.5px solid var( --sb-accent );
	color: var( --sb-accent );
	padding: 13.5px 20px;
}

.sb-widget .sb-btn__outline:hover:not( :disabled ),
.sb-paypage .sb-btn__outline:hover:not( :disabled ),
a.sb-btn__outline:hover {
	background: var( --sb-accent );
	color: var( --sb-on-accent );
}

.sb-widget .sb-btn__gold,
.sb-paypage .sb-btn__gold,
.sb-picker-shell .sb-btn__gold,
a.sb-btn__gold {
	background: var( --sb-gold );
	color: var( --sb-on-accent );
	box-shadow: 0 1px 2px rgba( 13, 12, 11, .12 );
}

.sb-widget .sb-btn__gold:hover:not( :disabled ),
.sb-paypage .sb-btn__gold:hover:not( :disabled ),
a.sb-btn__gold:hover {
	background: var( --sb-gold-dark );
	box-shadow: 0 4px 12px rgba( 13, 12, 11, .16 );
}

.sb-reassure {
	margin: 10px 0 0;
	font-size: 13px;
	color: var( --sb-muted );
	text-align: center;
}

/* ---------------------------------------------------------------- checkout */

.sb-checkout__title {
	margin: 8px 0 14px;
	font-size: 19px;
}

.sb-back {
	font-weight: 600;
	text-decoration: none;
}

.sb-summary {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px;
	background: var( --sb-bg-soft );
	border-radius: var( --sb-radius-sm );
	font-size: 14px;
}

.sb-summary li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.sb-fieldset {
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	padding: 12px 14px;
	margin: 0 0 18px;
}

.sb-fieldset legend {
	font-weight: 700;
	font-size: 14px;
	padding: 0 6px;
}

.sb-addon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	cursor: pointer;
}

.sb-addon__name {
	flex: 1;
}

.sb-addon__price em {
	color: var( --sb-muted );
	font-style: normal;
	font-size: 12px;
}

/* The sound-recording question: a required yes or no, side by side. */
.sb-sound legend {
	line-height: 1.4;
}

.sb-sound__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 4px 0 0;
}

.sb-sound__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.sb-sound__option input {
	margin: 0;
}

.sb-sound--missing {
	border-color: #b32d2e;
}

.sb-sound--missing legend {
	color: #9b1c1c;
}

.sb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.sb-field {
	margin: 0 0 14px;
}

.sb-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
}

.sb-field label small {
	font-weight: 400;
	color: var( --sb-muted );
}

.sb-widget .sb-field input[type="text"],
.sb-widget .sb-field input[type="email"],
.sb-widget .sb-field input[type="tel"],
.sb-widget .sb-field input[type="number"],
.sb-widget .sb-field textarea,
.sb-paypage .sb-field input[type="text"],
.sb-paypage .sb-field input[type="email"],
.sb-paypage .sb-field input[type="tel"],
.sb-paypage .sb-field input[type="number"],
.sb-paypage .sb-field textarea,
.sb-membership .sb-field input[type="text"],
.sb-membership .sb-field input[type="email"],
.sb-membership .sb-field input[type="tel"],
.sb-membership .sb-field input[type="number"],
.sb-membership .sb-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-input );
	font: inherit;
	font-family: var( --sb-font-ui );
	font-size: 14px;
	background: var( --sb-bg );
	color: var( --sb-text );
}

/*
 * Brand asks for the border itself to turn red on focus. A 1px border swap
 * alone is too quiet to serve as a focus indicator, so the ring stays as
 * well - it is what keyboard users actually see.
 */
.sb-field input:focus,
.sb-field textarea:focus,
.sb-select:focus {
	border-color: var( --sb-accent );
	outline: 2px solid var( --sb-accent );
	outline-offset: 1px;
}

.sb-field__check label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 13px;
}

.sb-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}

.sb-form__error {
	background: #fdecea;
	border: 1px solid #f5c6c2;
	color: var( --sb-danger );
	border-radius: var( --sb-radius-sm );
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

/* ----------------------------------------------------- space chooser */

.sb-picker-shell {
	color: var( --sb-text );
	max-width: 460px;
}

.sb-spaces__title {
	margin: 0 0 12px;
	font-size: 18px;
}

.sb-spaces__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.sb-space {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	cursor: pointer;
	transition: border-color .15s ease;
}

.sb-widget .sb-space:hover,
.sb-picker-shell .sb-space:hover,
.sb-spaces .sb-space:hover {
	border-color: var( --sb-text );
}

.sb-space:has( input:checked ) {
	border-color: var( --sb-accent );
	box-shadow: inset 0 0 0 1px var( --sb-accent );
}

.sb-space__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sb-space__name {
	font-weight: 700;
}

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

.sb-space__buyout {
	border-style: dashed;
}

.sb-picker-shell .sb-widget {
	margin: 0;
	max-width: none;
}

/* ----------------------------------------------------------------- payment */

.sb-pay__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	background: var( --sb-bg-soft );
	border-radius: var( --sb-radius-sm );
	margin-bottom: 10px;
}

.sb-pay__total strong {
	font-size: 20px;
}

.sb-pay__mode {
	margin: 0 0 18px;
	font-size: 13px;
	color: var( --sb-muted );
}

.sb-pay__loading {
	padding: 20px 0;
	text-align: center;
	font-size: 14px;
	color: var( --sb-muted );
}

.sb-pay__buttons {
	margin-bottom: 4px;
}

.sb-pay__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var( --sb-muted );
	font-size: 13px;
}

.sb-pay__divider::before,
.sb-pay__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --sb-line-soft );
}

.sb-pay__row {
	margin-bottom: 10px;
}

.sb-pay__row-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* The provider renders its own iframes into these containers. */
.sb-pay__card .card-field,
.sb-pay__row > div {
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	padding: 2px 10px;
	background: var( --sb-bg );
	min-height: 44px;
}

.sb-pay__element {
	margin-bottom: 16px;
}

.sb-pay__card .sb-btn {
	margin-top: 6px;
}

.sb-pay__mock-warning {
	background: #fff6e5;
	border: 1px dashed #d8a800;
	border-radius: var( --sb-radius-sm );
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
	color: #7a5c00;
}

.sb-pay__secure {
	margin: 14px 0 0;
	font-size: 12px;
	color: var( --sb-muted );
	text-align: center;
}

/* ------------------------------------------------------------- pay page */

.sb-paypage {
	max-width: 560px;
	margin: 40px auto;
}

.sb-paypage__ref {
	margin: -6px 0 18px;
	font-size: 13px;
	color: var( --sb-muted );
}

.sb-paypage .sb-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var( --sb-bg-soft );
	font-size: 12px;
	font-weight: 600;
	color: var( --sb-text );
}

.sb-offer {
	border: 1px solid var( --sb-accent );
	border-radius: var( --sb-radius-sm );
	padding: 16px;
	margin-top: 18px;
}

.sb-offer h3 {
	margin: 0 0 8px;
	font-size: 16px;
}

.sb-offer__rate {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 10px;
}

.sb-offer__note {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var( --sb-bg-soft );
	border-radius: var( --sb-radius-sm );
	font-size: 14px;
	border: 0;
}

.sb-offer__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.sb-offer__actions .sb-btn {
	text-decoration: none;
	line-height: 1.3;
}

/* ----------------------------------------------------------------- success */

.sb-done {
	text-align: center;
	padding: 8px 0;
}

.sb-done__icon {
	width: 52px;
	height: 52px;
	line-height: 52px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var( --sb-accent );
	color: #fff;
	font-size: 26px;
}

.sb-done__ref {
	font-weight: 700;
}

.sb-done__when {
	background: var( --sb-bg-soft );
	border-radius: var( --sb-radius-sm );
	padding: 12px;
	font-size: 13px;
	white-space: pre-wrap;
	text-align: left;
	font-family: inherit;
	margin: 12px 0;
}

.sb-done__total {
	font-size: 18px;
	font-weight: 700;
}

/* ----------------------------------------------------------------- details */

.sb-details {
	margin: 32px 0;
}

.sb-details__heading {
	margin: 28px 0 10px;
	font-size: 18px;
}

.sb-details__note {
	color: var( --sb-muted );
	font-size: 14px;
	margin: 0 0 10px;
}

.sb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-facts li {
	flex: 1 1 160px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius-sm );
	padding: 12px 14px;
}

.sb-facts__label {
	display: block;
	font-size: 12px;
	color: var( --sb-muted );
	margin-bottom: 3px;
}

.sb-facts__value {
	font-weight: 700;
}

.sb-hours {
	border-collapse: collapse;
	width: 100%;
	max-width: 420px;
	font-size: 14px;
}

.sb-hours th,
.sb-hours td {
	text-align: left;
	padding: 7px 0;
	border-bottom: 1px solid var( --sb-line-soft );
	font-weight: 400;
}

.sb-hours th {
	color: var( --sb-muted );
	width: 45%;
}

.sb-addon-list,
.sb-rules {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	max-width: 480px;
}

.sb-addon-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var( --sb-line-soft );
}

.sb-addon-list em {
	font-style: normal;
	font-weight: 400;
	color: var( --sb-muted );
	font-size: 12px;
}

.sb-rules li {
	padding: 5px 0 5px 20px;
	position: relative;
}

.sb-rules li::before {
	content: "\2022";
	position: absolute;
	left: 4px;
	color: var( --sb-muted );
}

/* ------------------------------------------------------------------- grid */

.sb-listing-grid {
	display: grid;
	gap: 24px;
	margin: 32px 0;
}

.sb-cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.sb-cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.sb-cols-4 { grid-template-columns: repeat( 4, 1fr ); }

.sb-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sb-card__media img {
	width: 100%;
	height: auto;
	border-radius: var( --sb-radius );
	display: block;
}

.sb-card__title {
	margin: 10px 0 4px;
	font-size: 16px;
}

.sb-card__meta {
	margin: 0;
	font-size: 13px;
	color: var( --sb-muted );
}

.sb-card__price {
	margin: 6px 0 0;
	font-size: 15px;
}

.sb-card__price span {
	color: var( --sb-muted );
}

.sb-notice {
	padding: 12px 14px;
	background: var( --sb-bg-soft );
	border-radius: var( --sb-radius-sm );
}

.sb-notice__error {
	background: #fdecea;
	color: var( --sb-danger );
}

/* ------------------------------------------------------------------ mobile */

@media ( max-width: 600px ) {
	.sb-widget {
		max-width: none;
		padding: 18px;
	}

	/*
	 * Sticky is pointless on a phone, and the height cap turns the widget
	 * into a scrollable box inside the page - two nested scrollbars, which is
	 * miserable on touch. Release all three.
	 */
	.sb-widget__sticky {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	/* Comfortable touch targets. */
	.sb-widget .sb-cal__day,
	.sb-picker-shell .sb-cal__day {
		max-width: 44px;
		font-size: 15px;
	}

	.sb-widget .sb-day__remove {
		width: 48px;
	}

	.sb-attendees .sb-select,
	.sb-widget .sb-select {
		font-size: 16px; /* Stops iOS zooming the page on focus. */
	}

	.sb-field input,
	.sb-field textarea {
		font-size: 16px;
	}

	.sb-grid {
		grid-template-columns: 1fr;
	}

	.sb-listing-grid[class*="sb-cols-"] {
		grid-template-columns: 1fr;
	}

	.sb-times__row {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------- dark scheme */

/*
 * Deliberately NOT tied to prefers-color-scheme. The widget sits inside
 * someone else's page: following the visitor's OS setting would drop a dark
 * panel onto a light site. Opt in per site instead.
 */
.sb-scheme-dark.sb-widget,
.sb-scheme-dark .sb-widget,
.sb-scheme-dark.sb-paypage,
.sb-scheme-dark.sb-details {
	--sb-text: #f2f3f5;
	--sb-muted: #9aa1ac;
	--sb-line: rgba( 255, 255, 255, .18 );
	--sb-line-soft: rgba( 255, 255, 255, .1 );
	--sb-bg: #16181d;
	--sb-bg-soft: #20232a;
	box-shadow: none;
}

/* ---------------------------------------------------------------- payment */

/*
 * The card field itself is an iframe owned by the payment provider, so it can
 * only be styled from the outside. Everything here dresses the box around it.
 */
.sb-paycard {
	margin: 18px 0 0;
	padding: 16px;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
}

/*
 * Compound selectors on purpose. These are h4s, and themes routinely style
 * headings through a wrapper class - the Elementor kit on this site uses
 * ".elementor-kit-NN h4" - which beats a single class and renders a form label
 * at display-heading size. font-family: inherit keeps the label in the form's
 * own type rather than the theme's display face.
 */
.sb-paycard .sb-paycard__title {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--sb-text);
}

.sb-paycard__field {
	min-height: 52px;
}

.sb-paycard__note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sb-muted);
}

.sb-paycard__mock {
	margin: 0;
	padding: 12px;
	border: 1px dashed var(--sb-line);
	border-radius: 6px;
	font-size: 13px;
	color: var(--sb-muted);
}

.sb-paycard__error {
	margin-top: 10px;
	font-size: 13px;
	color: var(--sb-danger, #b3261e);
}

/* ----------------------------------------------------------------- policy */

.sb-policy {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sb-muted);
}

.sb-policy .sb-policy__title {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--sb-text);
}

.sb-policy p {
	margin: 0 0 8px;
}

.sb-policy__list {
	margin: 0 0 8px;
	padding-left: 18px;
	list-style: disc;
}

.sb-policy__list li {
	margin: 0 0 4px;
}

.sb-policy__agree {
	margin: 16px 0 14px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--sb-muted);
}

.sb-policy__agree a {
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------------- membership */

/*
 * The plan cards. The palette is six variables so the featured card can flip
 * the whole thing to its dark treatment by redeclaring them, rather than by
 * restating every rule below with a modifier selector.
 */
.sb-membership {
	--sb-plan-paper:  var( --sb-bg-soft );
	--sb-plan-edge:   var( --sb-line );
	--sb-plan-ink:    var( --sb-text );
	--sb-plan-quiet:  var( --sb-muted );
	--sb-plan-dot:    var( --sb-accent );
	--sb-plan-rule:   var( --sb-line );
	--sb-plan-radius: 14px;
}

/*
 * Present to assistive technology, absent on screen. Used where the page
 * supplies its own visible heading for a labelled region.
 */
.sb-u-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
}

.sb-plan-chosen {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var( --sb-bg-alt );
	border-radius: var( --sb-radius-sm );
}

.sb-plan-chosen[hidden] {
	display: none !important;
}

.sb-plan-chosen .sb-eyebrow {
	margin-bottom: 4px;
}

.sb-plan-chosen__value {
	display: block;
	font-family: var( --sb-font-display );
	font-size: 18px;
	font-weight: 700;
	color: var( --sb-text );
}

.sb-membership__form {
	max-width: 1180px;
	margin: 0 auto;
}

.sb-membership__plans {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 24px;
	border: 0;
	padding: 0;
	margin: 0 0 36px;
}

.sb-membership__legend {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	font-family: var( --sb-font-ui );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var( --sb-accent );
}

/* One card. The label is the whole card so the entire thing is clickable. */
.sb-plan {
	display: flex;
	margin: 0;
	cursor: pointer;
}

/*
 * The radio stays in the accessibility tree and drives :checked, but is not
 * drawn: the card itself is the control.
 */
.sb-plan__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.sb-plan__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 30px 28px 28px;
	background: var( --sb-plan-paper );
	border: 1px solid var( --sb-plan-edge );
	border-radius: var( --sb-plan-radius );
	color: var( --sb-plan-ink );
	transition: box-shadow .18s ease, border-color .18s ease;
}

.sb-plan:hover .sb-plan__card {
	border-color: var( --sb-accent );
	box-shadow: 0 10px 30px rgba( 13, 12, 11, .09 );
}

/*
 * Selection has to be obvious without relying on colour alone, so the chosen
 * card gains a second ring and its button swaps wording.
 */
.sb-plan__input:checked + .sb-plan__card {
	border-color: var( --sb-accent );
	box-shadow: inset 0 0 0 1px var( --sb-accent ), 0 10px 30px rgba( 13, 12, 11, .1 );
}

/* Keyboard focus must be visible even though the radio itself is not. */
.sb-plan__input:focus-visible + .sb-plan__card {
	outline: 2px solid var( --sb-accent );
	outline-offset: 3px;
}

/*
 * Name and savings pill. The pill may shrink and the name may wrap: at three
 * cards across, a long name and a long pill otherwise clip each other, which
 * is exactly what happens in the design mockup.
 */
/*
 * Card contents are centred, and the type scale is fixed so the saving can
 * never shout louder than the price. Reading order down the card: name,
 * hours, the rule with the saving on its right, price, details, button.
 */
.sb-plan__head {
	display: block;
	margin: 0 0 14px;
	text-align: center;
}

.sb-plan__name {
	display: block;
	font-family: var( --sb-font-display );
	/* Smaller than the price, which is the number being compared. */
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --sb-plan-ink );
}

/* The hours figure sits directly under the name. */
.sb-plan__hours {
	display: block;
	margin: 10px 0 0;
}

.sb-plan__hours-num {
	display: block;
	font-family: var( --sb-font-display );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --sb-plan-ink );
}

.sb-plan__hours-per {
	display: block;
	margin-top: 6px;
	font-family: var( --sb-font-ui );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --sb-plan-quiet );
}

/*
 * A rule across the full width of the card with the saving on its right.
 * Drawn as a border on this span, because a <label> may not contain <hr>.
 */
.sb-plan__rule {
	display: block;
	margin: 16px 0 14px;
	padding-top: 12px;
	border-top: 1px solid var( --sb-plan-rule );
	text-align: right;
}

.sb-plan__save {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	background: var( --sb-gold );
	color: #fff;
	font-family: var( --sb-font-ui );
	/* Never larger than the price or the hours figure. */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The price: the largest thing on the card. */
.sb-plan__band {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin: 0 0 18px;
	text-align: center;
}

.sb-plan__price {
	font-family: var( --sb-font-display );
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var( --sb-plan-ink );
}

.sb-plan__period {
	font-family: var( --sb-font-ui );
	font-size: 14px;
	color: var( --sb-plan-quiet );
}

.sb-plan__blurb {
	display: block;
	margin: 0 0 18px;
	/* The studio asked for everything on this page to be easier to read: no
	 * detail text below 16px, on any screen. */
	font-size: 16px;
	line-height: 1.55;
	text-align: center;
	color: var( --sb-plan-quiet );
}

.sb-plan__features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 22px;
}

.sb-plan__feature {
	position: relative;
	display: block;
	padding-left: 22px;
	font-family: var( --sb-font-ui );
	font-size: 16px;
	line-height: 1.5;
	color: var( --sb-plan-ink );
}

.sb-plan__feature::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --sb-plan-dot );
}

/*
 * The button is pinned to the bottom. `margin-top: auto` is what keeps the
 * three cards' buttons on one line when the feature lists differ in length.
 */
.sb-plan__foot {
	display: block;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var( --sb-plan-rule );
}

/*
 * Deliberately not a <button>: the card is a radio, and a button inside a
 * label swallows the click that selects it.
 */
.sb-plan__choose {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border-radius: var( --sb-radius-btn );
	background: var( --sb-accent );
	color: var( --sb-on-accent );
	font-family: var( --sb-font-ui );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .125em;
	text-align: center;
	text-transform: uppercase;
	transition: background-color .18s ease;
}

.sb-plan:hover .sb-plan__choose {
	background: var( --sb-accent-dark );
}

/*
 * Swap the wording on the selected card without JavaScript. Both strings are
 * in the markup and one is hidden, so a screen reader announces the state
 * change the same way a sighted visitor sees it.
 */
.sb-plan__choose-on {
	display: none;
}

.sb-plan__input:checked + .sb-plan__card .sb-plan__choose-idle {
	display: none;
}

.sb-plan__input:checked + .sb-plan__card .sb-plan__choose-on {
	display: inline;
}

/*
 * The featured card. Only the palette changes -- every rule above is reused,
 * so the two variants cannot drift apart.
 */
.sb-plan--featured {
	--sb-plan-paper:  linear-gradient( 160deg, #4A0606 0%, #2E0404 100% );
	--sb-plan-edge:   var( --sb-gold );
	--sb-plan-ink:    #FFFFFF;
	--sb-plan-quiet:  rgba( 255, 255, 255, .62 );
	--sb-plan-dot:    var( --sb-gold );
	--sb-plan-rule:   rgba( 255, 255, 255, .18 );
}

.sb-plan--featured .sb-plan__card {
	box-shadow: 0 14px 40px rgba( 13, 12, 11, .22 );
}

.sb-plan--featured:hover .sb-plan__card,
.sb-plan--featured .sb-plan__input:checked + .sb-plan__card {
	border-color: var( --sb-gold );
	box-shadow: inset 0 0 0 1px var( --sb-gold ), 0 16px 44px rgba( 13, 12, 11, .3 );
}

.sb-plan--featured .sb-plan__save {
	background: var( --sb-accent );
	color: #fff;
}

.sb-plan--featured .sb-plan__price {
	color: var( --sb-gold );
}

.sb-plan--featured .sb-plan__choose {
	background: var( --sb-gold );
	color: #FFFFFF;
}

.sb-plan--featured:hover .sb-plan__choose {
	background: var( --sb-gold-dark );
}

@media ( max-width: 782px ) {
	.sb-membership__plans {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.sb-plan__card {
		padding: 24px 20px 22px;
	}

	.sb-plan__price {
		font-size: 36px;
	}
}

.sb-membership__done {
	max-width: 640px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	/* Soft rather than white: this panel replaces the form after submitting,
	   and needs to read as a distinct block on a pale page. */
	background: var(--sb-bg-soft);
	text-align: center;
}

.sb-membership__done h3 {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sb-text);
}

.sb-membership__ref {
	margin-top: 18px;
	font-weight: 600;
}

/*
 * The plan cards want the full width. The fields that follow do not - left
 * unconstrained a name box runs to over a thousand pixels, which reads as
 * broken next to the cards above it.
 */
.sb-membership__form > .sb-field,
.sb-membership__form > .sb-form__grid,
.sb-membership__form > .sb-paycard,
.sb-membership__form > .sb-policy,
.sb-membership__form > .sb-hp,
.sb-membership__form > .sb-plan-chosen,
.sb-membership__form > .sb-form__error {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Paired fields sit side by side once there is room, and stack when there
   is not. Row gap stays at zero because .sb-field carries its own margin. */
.sb-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 18px;
}

.sb-membership__form > button[type="submit"] {
	display: block;
	margin: 8px auto 0;
	min-width: 260px;
	border-radius: var( --sb-radius-btn );
}

/*
 * The what-happens-next block sits directly under the cancellation policy.
 * Without a rule of its own the two ran together as one long block of small
 * text; a hairline separates them.
 */
.sb-policy__next {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sb-line);
}

/*
 * A checkbox whose label is a whole paragraph rather than a caption. The
 * checkbox aligns to the first line instead of centring against five lines,
 * and the sentence takes the remaining width as one flex item.
 */
.sb-field__agree label {
	align-items: flex-start;
}

.sb-field__agree input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
}

.sb-agree {
	flex: 1 1 auto;
	font-size: 12px;
	line-height: 1.6;
	color: var(--sb-muted);
	text-align: left;
}

.sb-agree a {
	color: inherit;
	text-decoration: underline;
}

.sb-days__label {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ packages
 *
 * A package is several spaces sold as one booking. Its rates sit under the
 * headline price so Half Day and Full Day are visible before a date is
 * chosen, which is what stops people guessing at the hourly figure.
 */
.sb-widget .sb-pkg-rates {
	list-style: none;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius );
	background: var( --sb-bg-alt );
	display: grid;
	gap: 8px;
}

.sb-widget .sb-pkg-rate {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	white-space: normal;
}

.sb-widget .sb-pkg-rate__name {
	color: var( --sb-muted );
	font-weight: 500;
}

.sb-widget .sb-pkg-rate__hours {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var( --sb-bg );
	border: 1px solid var( --sb-line );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var( --sb-muted );
}

.sb-widget .sb-pkg-rate__price {
	color: var( --sb-text );
	font-weight: 600;
	white-space: nowrap;
}

.sb-widget .sb-pkg-includes {
	margin: -6px 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --sb-muted );
	white-space: normal;
}

/* A package name is longer than a room name, so it must be allowed to wrap
 * rather than spilling out of the chooser. */
.sb-space__package .sb-space__meta {
	white-space: normal;
}

/* --------------------------------------------------------------- cards
 *
 * The visual chooser above the booking widget. Every rule here exists to
 * stop text doing something other than sitting on its own line: the theme
 * sets `white-space: nowrap` on buttons, and a card is a button.
 */
.sb-cards {
	display: grid;
	gap: 18px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.sb-cards--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.sb-cards--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.sb-cards--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

.sb-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var( --sb-bg );
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius );
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sb-card:hover {
	border-color: var( --sb-accent );
	box-shadow: 0 10px 30px rgba( 13, 12, 11, .1 );
}

.sb-card__pick {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	/* The theme makes every button a nowrap pill. None of that applies here. */
	white-space: normal;
	border-radius: 0;
	letter-spacing: normal;
	text-transform: none;
	font: inherit;
	color: inherit;
}

.sb-card__frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var( --sb-bg-alt );
	overflow: hidden;
}

/*
 * Elementor sets ".elementor img { height: auto }", which outranks a single
 * class and left each photo at its own shape with a strip of background
 * under it. Two classes are enough to fill the frame.
 */
.sb-card__frame .sb-card__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.sb-card:hover .sb-card__media {
	transform: scale( 1.04 );
}

.sb-card__chosen {
	position: absolute;
	top: 10px;
	left: 10px;
	display: none;
	padding: 4px 10px;
	border-radius: 100px;
	background: var( --sb-accent );
	color: var( --sb-on-accent );
	font-family: var( --sb-font-ui );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sb-card.is-selected .sb-card__chosen {
	display: inline-block;
}

.sb-card.is-selected {
	border-color: var( --sb-accent );
	box-shadow: inset 0 0 0 1px var( --sb-accent );
}

.sb-card__body {
	display: block;
	padding: 16px 16px 14px;
}

.sb-card__name,
.sb-card__tag,
.sb-card__price,
.sb-card__min {
	display: block;
	white-space: normal;
	overflow-wrap: break-word;
}

.sb-card__name {
	font-family: var( --sb-font-display );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --sb-text );
}

.sb-card__tag {
	margin-top: 4px;
	font-family: var( --sb-font-ui );
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
	color: var( --sb-gold );
}

.sb-card__price {
	margin-top: 10px;
	/* A package lists three rates, one per line. */
	font-family: var( --sb-font-ui );
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --sb-text );
}

.sb-card__price + .sb-card__price {
	margin-top: 2px;
	font-weight: 500;
	font-size: 14px;
	color: var( --sb-muted );
}

.sb-card__min {
	margin-top: 3px;
	font-family: var( --sb-font-ui );
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #999;
}

.sb-card__foot {
	margin-top: auto;
	padding: 0 16px 16px;
}

.sb-card__link {
	display: block;
	padding: 10px 14px;
	border: 1px solid var( --sb-text );
	border-radius: var( --sb-radius-btn );
	color: var( --sb-text );
	font-family: var( --sb-font-ui );
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal;
	transition: border-color .18s ease, color .18s ease;
}

/* An outline button never flips to white text on a white ground. */
.sb-card__link:hover,
.sb-card__link:focus-visible {
	border-color: var( --sb-accent );
	color: var( --sb-accent );
	background: transparent;
}

@media ( max-width: 1024px ) {
	.sb-cards--4 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.sb-cards--3 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.sb-cards--2,
	.sb-cards--3,
	.sb-cards--4 { grid-template-columns: minmax( 0, 1fr ); }
}

/* ------------------------------------------------------------- document
 *
 * A card that opens a document in place. Styled to sit inside page content
 * rather than inside the booking widget, so it does not inherit the widget's
 * own box.
 */
.sb-doc {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 20px 22px;
	border: 1px solid var( --sb-line );
	border-radius: var( --sb-radius );
	background: var( --sb-bg );
}

.sb-doc__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var( --sb-accent );
	color: var( --sb-on-accent );
	font-family: var( --sb-font-ui );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
}

.sb-doc__body {
	flex: 1 1 220px;
	min-width: 0;
}

.sb-doc__title {
	margin: 0;
	font-family: var( --sb-font-display );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --sb-text );
}

.sb-doc__desc {
	margin: 6px 0 0;
	font-family: var( --sb-font-ui );
	font-size: 15px;
	line-height: 1.5;
	color: var( --sb-muted );
}

.sb-doc__cta {
	flex: 0 0 auto;
	text-decoration: none;
}

.sb-doc-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba( 13, 12, 11, .62 );
}

.sb-doc-modal[hidden] {
	display: none !important;
}

.sb-doc-modal__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 860px;
	max-height: 88vh;
	background: var( --sb-bg );
	border-radius: var( --sb-radius );
	overflow: hidden;
}

.sb-doc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var( --sb-line );
}

.sb-doc-modal__title {
	margin: 0;
	font-family: var( --sb-font-display );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --sb-text );
}

.sb-doc-modal__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --sb-line );
	border-radius: 50%;
	background: var( --sb-bg );
	color: var( --sb-text );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.sb-doc-modal__close:hover,
.sb-doc-modal__close:focus-visible {
	border-color: var( --sb-accent );
	color: var( --sb-accent );
	background: var( --sb-bg );
}

.sb-doc-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px;
	font-family: var( --sb-font-ui );
	font-size: 15.5px;
	line-height: 1.65;
	color: var( --sb-text );
}

.sb-doc-modal__body img {
	max-width: 100%;
	height: auto;
}

.sb-doc-modal__loading {
	color: var( --sb-muted );
}

.sb-doc-modal__foot {
	padding: 14px 22px;
	border-top: 1px solid var( --sb-line );
	font-family: var( --sb-font-ui );
	font-size: 13.5px;
	color: var( --sb-muted );
}

.sb-doc-modal__foot a {
	color: var( --sb-accent );
}

@media ( max-width: 600px ) {
	.sb-doc {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-doc__cta {
		width: 100%;
		text-align: center;
	}
}

/* A label above a card group. */
.sb-cards__head {
	margin: 0 0 16px;
	padding-top: 8px;
	border-top: 1px solid var( --sb-line );
}

.sb-cards__head .sb-eyebrow {
	display: block;
	margin: 12px 0 0;
}

.sb-cards__title {
	margin: 6px 0 0;
	font-family: var( --sb-font-display );
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --sb-text );
}

/* One card on its own reads as a banner, not a portrait tile. */
.sb-cards--1 { grid-template-columns: minmax( 0, 1fr ); }

.sb-cards--1 .sb-card__frame {
	aspect-ratio: 21 / 9;
}

@media ( max-width: 600px ) {
	.sb-cards--1 .sb-card__frame {
		aspect-ratio: 4 / 3;
	}
}

/*
 * The theme styles links inside content as pill buttons. The card's own link
 * is an outline button by design, so the theme's fill has to come off first.
 */
.sb-cards a.sb-card__link,
.sb-cards a.sb-card__link:hover,
.sb-cards a.sb-card__link:focus,
.sb-cards a.sb-card__link:active {
	background: none;
	background-image: none;
	box-shadow: none;
	text-decoration: none;
	font: inherit;
	min-height: 0;
	width: 100%;
}

.sb-cards a.sb-card__link {
	display: block;
	padding: 10px 14px;
	border: 1px solid var( --sb-text );
	border-radius: var( --sb-radius-btn );
	color: var( --sb-text );
	font-family: var( --sb-font-ui );
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-cards a.sb-card__link:hover,
.sb-cards a.sb-card__link:focus-visible {
	border-color: var( --sb-accent );
	color: var( --sb-accent );
}

/*
 * The picture button carries none of the theme's button look. Written with
 * the grid class in front so it outranks a theme rule that reaches buttons
 * through a descendant selector.
 */
.sb-cards button.sb-card__pick {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
	white-space: normal;
	letter-spacing: normal;
	text-transform: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	min-height: 0;
}

.sb-cards .sb-card__body {
	padding: 16px 16px 14px;
}

/*
 * Cards in a row share one height, but a name or tagline that wraps onto a
 * second line (common in French) pushed that card's price below its
 * neighbours'. The body fills the card and the price block sits at its foot,
 * so prices line up whatever the text above them runs to.
 */
.sb-cards .sb-card > .sb-card__pick {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sb-cards .sb-card__pick > .sb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sb-cards .sb-card__name + .sb-card__price,
.sb-cards .sb-card__tag + .sb-card__price {
	margin-top: auto;
	padding-top: 10px;
}

/* Name, tagline, price and minimum sit centred over the centred button. */
.sb-cards .sb-card__body,
.sb-cards button.sb-card__pick {
	text-align: center;
}

/*
 * The viewer shows a page that was designed to be a page: its headings are
 * sized for a full-width hero, which is far too large inside a dialog on a
 * phone. Bring them back to document proportions without touching the page
 * itself.
 */
.sb-doc-modal__body h1,
.sb-doc-modal__body h2 {
	font-size: 20px;
	line-height: 1.3;
	margin: 22px 0 8px;
}

.sb-doc-modal__body h3,
.sb-doc-modal__body h4 {
	font-size: 16px;
	line-height: 1.35;
	margin: 18px 0 6px;
}

.sb-doc-modal__body > *:first-child {
	margin-top: 0;
}

.sb-doc-modal__body p,
.sb-doc-modal__body li {
	font-size: 15px;
	line-height: 1.65;
}

.sb-doc-modal__body ul,
.sb-doc-modal__body ol {
	padding-left: 22px;
}

@media ( max-width: 600px ) {
	.sb-doc-modal {
		padding: 12px 10px;
	}

	.sb-doc-modal__panel {
		max-height: 92vh;
	}

	.sb-doc-modal__head {
		padding: 14px 16px;
	}

	.sb-doc-modal__title {
		font-size: 17px;
	}

	.sb-doc-modal__body {
		padding: 16px;
		font-size: 15px;
	}

	.sb-doc-modal__body h1,
	.sb-doc-modal__body h2 {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------- agreements
 *
 * Three separate boxes before the request button. A box left unticked is
 * outlined when the guest tries to send.
 */
.sb-agreements {
	border: 0;
	margin: 16px 0 8px;
	padding: 0;
	min-width: 0;
}

.sb-agreements__legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-agreement {
	margin: 0 0 6px;
}

.sb-agreement label {
	align-items: flex-start;
	line-height: 1.5;
}

.sb-agreement input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--sb-accent);
}

.sb-agreement a {
	color: var(--sb-accent);
	text-decoration: underline;
}

.sb-agreement--missing label {
	color: #9b1c1c;
}

.sb-agreement--missing input[type="checkbox"] {
	outline: 2px solid #b32d2e;
	outline-offset: 2px;
}

.sb-membership__tax {
	margin: 4px 0 18px;
	font-size: 13px;
	text-align: center;
	color: var(--sb-muted);
}

/* ------------------------------------------------------------ book a visit */
.sb-visit {
	max-width: 900px;
	margin: 0 auto;
}

.sb-visit__meta {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--sb-muted);
}

.sb-visit__pick {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (max-width: 720px) {
	.sb-visit__pick {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

.sb-visit__monthbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.sb-visit__month,
.sb-visit__date {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.sb-visit__date {
	margin: 4px 0 12px;
}

.sb-visit__nav {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--sb-line);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sb-visit__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.sb-visit__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.sb-visit__dow {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-visit__day {
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	cursor: pointer;
}

.sb-visit__day:hover:not(:disabled) {
	border-color: var(--sb-accent);
}

.sb-visit__day:disabled {
	background: transparent;
	color: #b9b3ab;
	cursor: default;
}

.sb-visit__day.is-today {
	font-weight: 700;
}

.sb-visit__day.is-selected,
.sb-visit__day.is-selected:hover {
	border-color: var(--sb-accent);
	background: var(--sb-accent);
	color: #fff;
}

.sb-visit__hint {
	margin: 0;
	font-size: 14px;
	color: var(--sb-muted);
}

.sb-visit__timegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
}

.sb-visit__time {
	padding: 10px 6px;
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}

.sb-visit__time:hover:not(:disabled) {
	border-color: var(--sb-accent);
	color: var(--sb-accent);
}

.sb-visit__time:disabled {
	background: transparent;
	color: #b9b3ab;
	text-decoration: line-through;
	cursor: default;
}

.sb-visit__form {
	margin-top: 8px;
}

.sb-visit__chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
}

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

.sb-membercard .sb-paycard {
	margin-top: 18px;
}

/* ---------------------------------------------------------------- billing */
.sb-billing {
	margin: 18px 0 6px;
}

.sb-mailing {
	margin: 10px 0 4px;
}

.sb-mailing label {
	align-items: flex-start;
	line-height: 1.5;
}

.sb-mailing input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--sb-accent);
}

.sb-field--missing {
	border-color: #b32d2e !important;
	outline: 2px solid #b32d2e;
	outline-offset: 1px;
}

/* ------------------------------------------------------------- stacked chooser
 *
 * Phones and tablets, where the cards sit above the calendar (client
 * corrections, 16 October 2026). booking.js turns each row of cards into a
 * swipeable carousel, adds a Select button to every card, and keeps the
 * calendar hidden until something is chosen. Wide screens are unchanged.
 */
.sb-card__select {
	display: none;
}

.sb-flow-wait {
	display: none !important;
}

.sb-cards__nav[hidden] {
	display: none !important;
}

@media ( max-width: 1024px ) {
	.sb-cards .sb-card__select {
		display: block;
		width: 100%;
		margin: 0;
		padding: 12px 14px;
		border: 1px solid var( --sb-accent );
		border-radius: var( --sb-radius-btn );
		background: var( --sb-accent );
		color: var( --sb-on-accent );
		font-family: var( --sb-font-ui );
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: .12em;
		line-height: 1.3;
		text-align: center;
		text-transform: uppercase;
		white-space: normal;
		cursor: pointer;
	}

	.sb-cards .sb-card__select:hover,
	.sb-cards .sb-card__select:focus-visible {
		background: var( --sb-accent-dark );
		border-color: var( --sb-accent-dark );
		color: var( --sb-on-accent );
	}

	.sb-cards .sb-card.is-selected .sb-card__select {
		background: var( --sb-bg );
		color: var( --sb-accent );
	}

	.sb-cards .sb-card__select + .sb-card__link {
		margin-top: 8px;
	}

	.sb-cards.sb-cards--flow {
		display: flex !important;
		gap: 14px;
		margin-bottom: 0;
		padding: 2px 2px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sb-cards.sb-cards--flow::-webkit-scrollbar {
		display: none;
	}

	/* Two and a bit across on a tablet, so the next card shows. */
	.sb-cards.sb-cards--flow > .sb-card {
		flex: 0 0 calc( 46% - 7px );
		scroll-snap-align: start;
	}

	.sb-cards.sb-cards--flow .sb-card__frame {
		aspect-ratio: 16 / 11;
	}

	.sb-cards__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		margin: 8px 0 30px;
	}

	/* Doubled class and !important: the site's kit styles every button. */
	.sb-cards__nav .sb-cards__arrow.sb-cards__arrow {
		display: grid !important;
		place-items: center;
		width: 34px !important;
		height: 34px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid var( --sb-line ) !important;
		border-radius: 50% !important;
		background: var( --sb-bg ) !important;
		box-shadow: none !important;
		color: var( --sb-text ) !important;
		font-family: var( --sb-font-ui ) !important;
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
		cursor: pointer;
	}

	.sb-cards__nav .sb-cards__arrow.sb-cards__arrow:hover,
	.sb-cards__nav .sb-cards__arrow.sb-cards__arrow:focus-visible {
		border-color: var( --sb-accent ) !important;
		background: var( --sb-bg ) !important;
		color: var( --sb-accent ) !important;
	}

	.sb-cards__dots {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.sb-cards__nav .sb-cards__dot.sb-cards__dot {
		display: block !important;
		width: 8px !important;
		height: 8px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: rgba( 13, 12, 11, .22 ) !important;
		box-shadow: none !important;
		cursor: pointer;
	}

	.sb-cards__nav .sb-cards__dot.sb-cards__dot.is-active {
		background: var( --sb-accent ) !important;
	}
}

/* One card and a peek of the next on a phone. */
@media ( max-width: 600px ) {
	.sb-cards.sb-cards--flow > .sb-card {
		flex-basis: 80%;
	}
}

/* On wide screens a card foot that only holds the (hidden) Select button
   takes no room, so the package cards keep their old height. */
@media ( min-width: 1025px ) {
	.sb-card__foot:not( :has( .sb-card__link ) ) {
		display: none;
	}
}

/* ------------------------------------------------------------- membership on phones
 *
 * membership.js lays the plans out side by side in a swipeable row and keeps
 * the application hidden until a plan is chosen (client corrections,
 * 16 October 2026). Every card in the row has the same height.
 */
.sb-membership--wait .sb-membership__form > :not( .sb-membership__plans ):not( .sb-plans__nav ) {
	display: none !important;
}

@media ( max-width: 782px ) {
	/* A fieldset is as wide as its content by default; the row has to
	   stay the width of the page for the cards to scroll inside it. */
	.sb-membership--row .sb-membership__plans {
		display: flex;
		min-width: 0;
		max-width: 100%;
		gap: 14px;
		margin-bottom: 0;
		padding: 2px 2px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sb-membership--row .sb-membership__plans::-webkit-scrollbar {
		display: none;
	}

	.sb-membership--row .sb-membership__plans > .sb-plan {
		flex: 0 0 84%;
		min-width: 0;
		scroll-snap-align: start;
	}

	.sb-membership--row .sb-plan__card {
		min-width: 0;
	}

	.sb-membership--row .sb-plans__nav {
		display: flex;
		margin: 8px 0 28px;
	}

	.sb-membership--wait .sb-plans__nav {
		margin-bottom: 8px;
	}
}

/* A row with a single card (The Social) stays one wide card, kept short. */
@media ( max-width: 1024px ) {
	.sb-cards--1 .sb-card__frame {
		aspect-ratio: 16 / 9;
	}
}