/* Photo masks. The plugin replaces these with full URLs built from this
   site's own uploads folder, so they're right on staging and live alike. */
:root {
	--srl-mask-43: url("/wp-content/uploads/2026/04/SRL_imgMask_4-3.svg");
	--srl-mask-34: url("/wp-content/uploads/2026/04/SRL_imgMask_3-4.svg");
	--srl-mask-sq: url("/wp-content/uploads/2026/04/SRL_imgMask_SQ.svg");
}

/* Stone Rock – Sauna Timetable
   Colours and fonts are variables: override them in your theme or Elementor custom CSS. */
:where(.srl-tt, .srl-cards) {
	--srl-ink: #3D2C26;
	--srl-muted: #5A4A40;
	--srl-cream: #F7F4ED;
	--srl-today: #EFE6D6;
	--srl-line: #E4DCCB;
	--srl-tag-line: #D9CFBB;
	--srl-surface: #FFFFFF;
	--srl-btn: #A84E3F;
	--srl-btn-hover: #8E4134;
	--srl-display: "DM Serif Display", Georgia, serif;
	--srl-body: inherit;
	--srl-radius: 16px;
	color: var(--srl-ink);
	font-family: var(--srl-body);
}

.srl-tt [hidden],
.srl-cards [hidden] { display: none !important; }

/* Filters */
.srl-tt__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.srl-tt__pill {
	font: inherit;
	font-size: 15px;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--srl-ink);
	background: transparent;
	color: var(--srl-ink);
	cursor: pointer;
	line-height: 1.2;
}
.srl-tt__pill:hover { background: var(--srl-today); }
.srl-tt__pill.is-active {
	background: var(--srl-ink);
	color: var(--srl-cream);
}

/* Selected-session card */
/* The card sits side by side whenever the timetable itself is at least 600px wide,
   and stacks below that. Sized from the timetable's own width, not the screen,
   so it behaves the same inside any Elementor or Bricks container. */
:where(.srl-tt) {
	container-type: inline-size;
	container-name: srl-tt;
}
.srl-tt .srl-tt__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 24px;
	padding: 16px;
	background: var(--srl-surface);
	border: 1px solid var(--srl-line);
	border-radius: var(--srl-radius);
	scroll-margin-top: 120px; /* Clears a sticky header when scrolled into view. */
}
@container srl-tt (min-width: 600px) {
	.srl-tt .srl-tt__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 32px;
		padding: 24px;
		align-items: center;
	}
}
.srl-tt .srl-tt__media {
	display: block;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: var(--srl-today);
}
.srl-tt .srl-tt__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.srl-tt .srl-tt__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.srl-tt__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
}
.srl-tt__badge {
	align-self: flex-start;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 3px 12px;
	border-radius: 999px;
	color: #FFFFFF;
	background: var(--srl-c, #5E653A);
}
.srl-tt__title,
.srl-cards__title {
	margin: 0;
	font-family: var(--srl-display);
	font-weight: 400;
	line-height: 1.1;
	color: var(--srl-ink);
}
.srl-tt__title { font-size: clamp(28px, 3vw, 36px); }
.srl-tt__desc { margin: 0; }
.srl-tt__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.srl-tt__tags li {
	margin: 0;
	font-size: 14px;
	padding: 4px 12px;
	border: 1px solid var(--srl-tag-line);
	border-radius: 999px;
}
.srl-tt__runs,
.srl-cards__when {
	margin: 0;
	font-size: 15px;
	color: var(--srl-muted);
}
.srl-tt__runs strong,
.srl-cards__when strong { color: var(--srl-ink); font-weight: 600; }
.srl-tt__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 6px;
}
.srl-tt__price {
	font-family: var(--srl-display);
	font-size: 28px;
	line-height: 1;
}
.srl-tt__btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background: var(--srl-btn);
	color: #FFFFFF !important;
	text-decoration: none !important;
	font-weight: 500;
	line-height: 1.2;
}
.srl-tt__btn:hover { background: var(--srl-btn-hover); }
.srl-tt__btn--ghost {
	background: transparent;
	color: var(--srl-ink) !important;
	border: 1.5px solid var(--srl-ink);
	padding: 12px 24px;
}
.srl-tt__btn--ghost:hover { background: var(--srl-today); }

/* Week grid */
/* Narrow: one row of days that scrolls sideways. Wide: all seven days in one row. */
.srl-tt .srl-tt__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 1fr);
	grid-template-columns: none;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
@container srl-tt (min-width: 760px) {
	.srl-tt .srl-tt__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		overflow-x: visible;
		padding-bottom: 0;
	}
}
.srl-tt .srl-tt__day {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 12px 8px;
	border-radius: 14px;
	scroll-snap-align: start;
}
.srl-tt__day.is-today { background: var(--srl-today); }
.srl-tt__dayhead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 4px 4px 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--srl-line);
}
.srl-tt__dayname { font-weight: 600; font-size: 16px; }
.srl-tt__today {
	display: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--srl-btn);
}
.srl-tt__day.is-today .srl-tt__today { display: inline; }
.srl-tt__slots {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.srl-tt__none {
	font-size: 14px;
	color: var(--srl-muted);
	padding: 4px;
}
.srl-tt .srl-tt__slot,
.srl-tt .srl-tt__pill {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-shadow: none;
	font-weight: 400;
	margin: 0;
	box-sizing: border-box;
	white-space: normal;
}
.srl-tt .srl-tt__slot {
	display: block;
	font: inherit;
	text-align: left;
	width: 100%;
	min-height: 56px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1.5px solid var(--srl-line);
	background: var(--srl-surface);
	color: var(--srl-ink);
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease;
}
.srl-tt__slot:hover { border-color: var(--srl-c); }
.srl-tt__slot.is-selected {
	background: var(--srl-c);
	border-color: var(--srl-c);
	color: #FFFFFF;
}
.srl-tt__slot.is-dimmed { opacity: .35; }
.srl-tt__time {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
}
.srl-tt__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--srl-c);
	flex: none;
}
.srl-tt__slot.is-selected .srl-tt__dot { background: #FFFFFF; }
.srl-tt__name {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.3;
}
.srl-tt__note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-style: italic;
	opacity: .85;
}

.srl-tt__pill:focus-visible,
.srl-tt__slot:focus-visible,
.srl-tt__btn:focus-visible {
	outline: 2px solid var(--srl-ink);
	outline-offset: 2px;
}

/* Session cards */
.srl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}
.srl-cards__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--srl-surface);
	border: 1px solid var(--srl-line);
	border-radius: var(--srl-radius);
}
.srl-cards__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--srl-today);
}
.srl-cards__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.srl-cards__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}
.srl-cards__title { font-size: 26px; }
.srl-cards__short { margin: 0; font-size: 16px; }
.srl-cards__item .srl-tt__tags li { font-size: 13px; padding: 3px 10px; }
.srl-cards__foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.srl-cards__foot .srl-tt__price { font-size: 22px; }
.srl-cards__foot .srl-tt__btn { padding: 10px 22px; font-size: 15px; }

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

/* -------------------------------------------------------------------------
   Button isolation
   The site's global button styles (Elementor kit, theme) target every
   <button> and its :hover/:focus/:active states. These rules pin the
   timetable's own buttons to the design in every state.
   ---------------------------------------------------------------------- */

/* Timetable slots */
.srl-tt button.srl-tt__slot,
.srl-tt button.srl-tt__slot:hover,
.srl-tt button.srl-tt__slot:focus,
.srl-tt button.srl-tt__slot:active,
.srl-tt button.srl-tt__slot:visited {
	display: block !important;
	width: 100% !important;
	min-height: 56px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	box-sizing: border-box !important;
	background: var(--srl-surface) !important;
	background-image: none !important;
	color: var(--srl-ink) !important;
	border: 1.5px solid var(--srl-line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: var(--srl-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: left !important;
	white-space: normal !important;
	transform: none !important;
	cursor: pointer;
}
.srl-tt button.srl-tt__slot:hover {
	border-color: var(--srl-c) !important;
}
.srl-tt button.srl-tt__slot.is-selected,
.srl-tt button.srl-tt__slot.is-selected:hover,
.srl-tt button.srl-tt__slot.is-selected:focus,
.srl-tt button.srl-tt__slot.is-selected:active {
	background: var(--srl-c) !important;
	border-color: var(--srl-c) !important;
	color: #FFFFFF !important;
}
.srl-tt button.srl-tt__slot.is-dimmed { opacity: .35 !important; }
.srl-tt button.srl-tt__slot span { color: inherit !important; }
.srl-tt button.srl-tt__slot .srl-tt__time {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-size: 15px !important;
	font-weight: 600 !important;
}
.srl-tt button.srl-tt__slot .srl-tt__name {
	display: block !important;
	margin-top: 2px;
	font-size: 14px !important;
	font-weight: 400 !important;
}
.srl-tt button.srl-tt__slot .srl-tt__dot {
	background: var(--srl-c) !important;
}
.srl-tt button.srl-tt__slot.is-selected .srl-tt__dot {
	background: #FFFFFF !important;
}

/* Filter pills */
.srl-tt button.srl-tt__pill,
.srl-tt button.srl-tt__pill:hover,
.srl-tt button.srl-tt__pill:focus,
.srl-tt button.srl-tt__pill:active {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	box-sizing: border-box !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--srl-ink) !important;
	border: 1.5px solid var(--srl-ink) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: var(--srl-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	transform: none !important;
	cursor: pointer;
}
.srl-tt button.srl-tt__pill:hover {
	background: var(--srl-today) !important;
}
.srl-tt button.srl-tt__pill.is-active,
.srl-tt button.srl-tt__pill.is-active:hover,
.srl-tt button.srl-tt__pill.is-active:focus,
.srl-tt button.srl-tt__pill.is-active:active {
	background: var(--srl-ink) !important;
	color: var(--srl-cream) !important;
	border-color: var(--srl-ink) !important;
}

/* Keyboard focus ring (only for keyboard users) */
.srl-tt button.srl-tt__slot:focus-visible,
.srl-tt button.srl-tt__pill:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}
.srl-tt button.srl-tt__slot:focus:not(:focus-visible),
.srl-tt button.srl-tt__pill:focus:not(:focus-visible) {
	outline: none !important;
}

/* Book buttons in the card and session cards */
.srl-tt a.srl-tt__btn,
.srl-cards a.srl-tt__btn,
.srl-tt a.srl-tt__btn:visited,
.srl-cards a.srl-tt__btn:visited {
	background: var(--srl-btn) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 999px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.srl-tt a.srl-tt__btn:hover,
.srl-cards a.srl-tt__btn:hover,
.srl-tt a.srl-tt__btn:focus,
.srl-cards a.srl-tt__btn:focus {
	background: var(--srl-btn-hover) !important;
	color: #FFFFFF !important;
}
.srl-tt a.srl-tt__btn--ghost,
.srl-tt a.srl-tt__btn--ghost:visited {
	background: transparent !important;
	color: var(--srl-ink) !important;
	border: 1.5px solid var(--srl-ink) !important;
}
.srl-tt a.srl-tt__btn--ghost:hover,
.srl-tt a.srl-tt__btn--ghost:focus {
	background: var(--srl-today) !important;
	color: var(--srl-ink) !important;
}

/* -------------------------------------------------------------------------
   Image outside the panel (matches the site's existing cards)
   Stacked: the photo is inset from the sides and the white panel overlaps
   its bottom edge. Side by side: the photo sits to the left of a white panel
   that is a little taller than it.
   Optional: set --srl-media-mask to the same mask image the site uses for
   its organic photo edges, e.g. --srl-media-mask: url(/wp-content/uploads/mask.svg);
   ---------------------------------------------------------------------- */
:where(.srl-tt, .srl-cards) {
	--srl-panel-radius: 24px;
	--srl-media-radius: 14px;
	--srl-media-mask: none;
}

.srl-tt .srl-tt__card {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	gap: 0;
	align-items: stretch;
}
.srl-tt .srl-tt__media,
.srl-cards .srl-cards__media {
	position: relative;
	z-index: 0;
	margin: 0 20px;
	border-radius: var(--srl-media-radius);
	overflow: hidden;
	-webkit-mask-image: var(--srl-media-mask);
	mask-image: var(--srl-media-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.srl-tt .srl-tt__body {
	position: relative;
	z-index: 1;
	margin-top: -16px;
	padding: 32px 28px;
	background: var(--srl-surface);
	border-radius: var(--srl-panel-radius);
}
@container srl-tt (min-width: 600px) {
	.srl-tt .srl-tt__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 0;
		padding: 0;
		align-items: center;
	}
	.srl-tt .srl-tt__media {
		margin: 28px 0;
	}
	.srl-tt .srl-tt__body {
		align-self: stretch;
		justify-content: center;
		margin-top: 0;
		padding: 48px 56px;
	}
}

/* Session cards */
.srl-cards .srl-cards__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.srl-cards .srl-cards__body {
	position: relative;
	z-index: 1;
	margin-top: -16px;
	padding: 32px 28px;
	background: var(--srl-surface);
	border-radius: var(--srl-panel-radius);
}
.srl-cards .srl-cards__item:not(:has(.srl-cards__media)) .srl-cards__body {
	margin-top: 0;
}

/* Site photo mask (organic edges). Root-relative so it works on staging and live,
   as long as the file exists at the same path on both. */
:where(.srl-tt, .srl-cards) {
	--srl-media-mask: var(--srl-mask-43);
	--srl-media-radius: 0;
}

/* Tablet (Elementor's tablet breakpoint, 768–1024px): portrait 3:4 photos with the matching mask. */
@media (min-width: 768px) and (max-width: 1024px) {
	:where(.srl-tt, .srl-cards) {
		--srl-media-mask: var(--srl-mask-34);
	}
	.srl-tt .srl-tt__media,
	.srl-cards .srl-cards__media {
		aspect-ratio: 3 / 4;
	}
}

/* Card below the timetable */
.srl-tt .srl-tt__card {
	margin: 32px 0 0;
}

/* -------------------------------------------------------------------------
   Card layout by screen width (Elementor breakpoints):
   stacked at 767px and below, image and panel side by side from 768px.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.srl-tt .srl-tt__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}
	.srl-tt .srl-tt__media {
		margin: 0 20px;
	}
	.srl-tt .srl-tt__body {
		align-self: auto;
		margin-top: -16px;
		padding: 32px 28px;
	}
}
@media (min-width: 768px) {
	.srl-tt .srl-tt__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 0;
		align-items: center;
	}
	.srl-tt .srl-tt__media {
		margin: 28px 0;
	}
	.srl-tt .srl-tt__body {
		align-self: stretch;
		justify-content: center;
		margin-top: 0;
		padding: 48px 56px;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.srl-tt .srl-tt__body { padding: 40px 36px; }
}

/* -------------------------------------------------------------------------
   Scroll arrows for the week row
   ---------------------------------------------------------------------- */
.srl-tt .srl-tt__scroller {
	position: relative;
}
.srl-tt .srl-tt__grid {
	position: relative;
	scrollbar-width: none;
}
.srl-tt .srl-tt__grid::-webkit-scrollbar {
	display: none;
}
.srl-tt button.srl-tt__arrow,
.srl-tt button.srl-tt__arrow:hover,
.srl-tt button.srl-tt__arrow:focus,
.srl-tt button.srl-tt__arrow:active {
	position: absolute !important;
	top: 50% !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: -22px 0 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background: var(--srl-surface) !important;
	background-image: none !important;
	color: var(--srl-ink) !important;
	border: 1.5px solid var(--srl-ink) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(61, 44, 38, .18) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	transform: none !important;
	cursor: pointer;
}
.srl-tt button.srl-tt__arrow:hover {
	background: var(--srl-today) !important;
}
.srl-tt button.srl-tt__arrow--prev { left: -6px !important; }
.srl-tt button.srl-tt__arrow--next { right: -6px !important; }
.srl-tt button.srl-tt__arrow:disabled,
.srl-tt button.srl-tt__arrow:disabled:hover {
	opacity: 0 !important;
	pointer-events: none;
}
.srl-tt button.srl-tt__arrow[hidden] {
	display: none !important;
}
.srl-tt button.srl-tt__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
}
.srl-tt button.srl-tt__arrow:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}
.srl-tt button.srl-tt__arrow:focus:not(:focus-visible) {
	outline: none !important;
}

/* -------------------------------------------------------------------------
   v1.0.8: arrows above the row, plain chevrons; week switches to the
   scrolling row below 1000px so day headings have room.
   ---------------------------------------------------------------------- */
.srl-tt .srl-tt__scroller {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
}
.srl-tt .srl-tt__scroller .srl-tt__grid {
	flex: 1 1 100%;
	min-width: 0;
}
.srl-tt button.srl-tt__arrow,
.srl-tt button.srl-tt__arrow:hover,
.srl-tt button.srl-tt__arrow:focus,
.srl-tt button.srl-tt__arrow:active {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--srl-ink) !important;
}
.srl-tt button.srl-tt__arrow:hover {
	background: var(--srl-today) !important;
}
.srl-tt button.srl-tt__arrow svg {
	width: 24px;
	height: 24px;
}
.srl-tt button.srl-tt__arrow:disabled,
.srl-tt button.srl-tt__arrow:disabled:hover {
	opacity: .3 !important;
	background: transparent !important;
	pointer-events: none;
	cursor: default;
}

/* Scrolling row up to 999px wide; all seven days in one row from 1000px. */
@container srl-tt (min-width: 760px) {
	.srl-tt .srl-tt__grid {
		grid-auto-flow: column;
		grid-auto-columns: minmax(150px, 1fr);
		grid-template-columns: none;
		overflow-x: auto;
	}
}
@container srl-tt (min-width: 1000px) {
	.srl-tt .srl-tt__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		overflow-x: visible;
	}
}

/* "Today" drops under the day name instead of crowding it. */
.srl-tt .srl-tt__dayhead {
	flex-wrap: wrap;
	gap: 2px 8px;
}
.srl-tt .srl-tt__dayname {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   v1.0.9: white panel overlaps the photo
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.srl-tt .srl-tt__body { margin-top: -50px; }
}
@media (min-width: 768px) {
	.srl-tt .srl-tt__body {
		margin-top: 0;
		margin-left: -20px;
	}
}

/* -------------------------------------------------------------------------
   Limited slots per day with "+ N more" / "Show fewer"
   ---------------------------------------------------------------------- */
.srl-tt:not(.is-expanded) .srl-tt__slot--extra {
	display: none !important;
}
.srl-tt button.srl-tt__more,
.srl-tt button.srl-tt__more:hover,
.srl-tt button.srl-tt__more:focus,
.srl-tt button.srl-tt__more:active {
	display: block !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	box-sizing: border-box !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--srl-btn) !important;
	border: 1.5px dashed var(--srl-tag-line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: var(--srl-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center !important;
	transform: none !important;
	cursor: pointer;
}
.srl-tt button.srl-tt__more:hover {
	border-color: var(--srl-btn) !important;
	background: var(--srl-surface) !important;
}
.srl-tt button.srl-tt__more:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}
.srl-tt button.srl-tt__more:focus:not(:focus-visible) {
	outline: none !important;
}

/* -------------------------------------------------------------------------
   v1.0.10: photo inset from the white panel, centred.
   Column: narrower than the panel. Row: shorter than the panel.
   Change --srl-media-inset to adjust.
   ---------------------------------------------------------------------- */
:where(.srl-tt, .srl-cards) {
	--srl-media-inset: 32px;
}
@media (max-width: 767px) {
	.srl-tt .srl-tt__media {
		margin: 0 var(--srl-media-inset) !important;
		align-self: start;
		justify-self: stretch;
	}
}
@media (min-width: 768px) {
	.srl-tt .srl-tt__card {
		align-items: stretch;
	}
	.srl-tt .srl-tt__media {
		margin: var(--srl-media-inset) 0 !important;
		align-self: center;
	}
	.srl-tt .srl-tt__body {
		align-self: stretch;
	}
}
.srl-cards .srl-cards__media {
	margin: 0 var(--srl-media-inset) !important;
}

/* v1.0.11: white panel corner radius */
:where(.srl-tt, .srl-cards) {
	--srl-panel-radius: 15px;
}
@media (max-width: 767px) {
	:where(.srl-tt, .srl-cards) {
		--srl-panel-radius: 10px;
	}
}

/* v1.0.12: member and non-member prices */
.srl-tt .srl-tt__prices,
.srl-cards .srl-tt__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 20px;
}
.srl-tt .srl-tt__price-item,
.srl-cards .srl-tt__price-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.srl-tt .srl-tt__price-label,
.srl-cards .srl-tt__price-label {
	font-size: 13px;
	line-height: 1.2;
	color: var(--srl-muted);
}
.srl-cards .srl-tt__prices { gap: 4px 16px; }

/* -------------------------------------------------------------------------
   v1.0.14: description paragraphs and "Read more"
   --srl-desc-lines sets how many lines show before "Read more".
   ---------------------------------------------------------------------- */
:where(.srl-tt) {
	--srl-desc-lines: 5;
}
@media (max-width: 767px) {
	:where(.srl-tt) { --srl-desc-lines: 6; }
}
.srl-tt .srl-tt__desc {
	line-height: 1.55;
}
.srl-tt .srl-tt__desc p {
	margin: 0 0 0.75em;
	line-height: inherit;
}
.srl-tt .srl-tt__desc p:last-child {
	margin-bottom: 0;
}
.srl-tt .srl-tt__desc:not(.is-open) {
	max-height: calc(var(--srl-desc-lines) * 1.55em);
	overflow: hidden;
}
/* Soften the cut-off line when clamped. */
.srl-tt .srl-tt__desc.is-cut {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55em), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55em), transparent);
}
.srl-tt .srl-tt__body .srl-tt__desc + .srl-tt__readmore {
	margin-top: -8px !important;
}
.srl-tt button.srl-tt__readmore,
.srl-tt button.srl-tt__readmore:hover,
.srl-tt button.srl-tt__readmore:focus,
.srl-tt button.srl-tt__readmore:active {
	align-self: flex-start !important;
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--srl-btn) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--srl-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}
.srl-tt button.srl-tt__readmore:hover {
	color: var(--srl-btn-hover) !important;
}
.srl-tt button.srl-tt__readmore[hidden] {
	display: none !important;
}
.srl-tt button.srl-tt__readmore:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}
.srl-tt button.srl-tt__readmore:focus:not(:focus-visible) {
	outline: none !important;
}

/* -------------------------------------------------------------------------
   v1.0.16: 4 lines before "Read more" (5 when stacked on phones), and the
   photo stays at the top in row layout when the text is expanded.
   ---------------------------------------------------------------------- */
:where(.srl-tt) {
	--srl-desc-lines: 4;
}
@media (max-width: 767px) {
	:where(.srl-tt) { --srl-desc-lines: 5; }
}
@media (min-width: 768px) {
	.srl-tt .srl-tt__media {
		align-self: start;
	}
}

/* v1.0.17: screen-reader-only text ("opens in a new tab") */
.srl-tt .srl-tt__sr,
.srl-cards .srl-tt__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -------------------------------------------------------------------------
   v1.0.18: card max 1200px wide (image included), centred on the page.
   Row layout: photo vertically centred, moving to the top only while the
   description is expanded with "Read more".
   ---------------------------------------------------------------------- */
:where(.srl-tt, .srl-cards) {
	--srl-card-max: 1200px;
}
.srl-tt .srl-tt__card {
	max-width: var(--srl-card-max);
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 768px) {
	.srl-tt .srl-tt__card .srl-tt__media {
		align-self: center;
	}
	.srl-tt .srl-tt__card.is-desc-open .srl-tt__media {
		align-self: start;
	}
}

/* -------------------------------------------------------------------------
   v1.0.19: timetable card photo shape follows the layout.
   Row (768px+): portrait 3:4 with the 3:4 mask.
   Column (767px and below): landscape 4:3 with the 4:3 mask.
   Session cards are always stacked, so they stay 4:3 at every size.
   ---------------------------------------------------------------------- */
:where(.srl-cards) {
	--srl-media-mask: var(--srl-mask-43);
}
.srl-cards .srl-cards__media {
	aspect-ratio: 4 / 3;
}
@media (max-width: 767px) {
	:where(.srl-tt) {
		--srl-media-mask: var(--srl-mask-43);
	}
	.srl-tt .srl-tt__card .srl-tt__media {
		aspect-ratio: 4 / 3;
	}
}
@media (min-width: 768px) {
	:where(.srl-tt) {
		--srl-media-mask: var(--srl-mask-34);
	}
	.srl-tt .srl-tt__card .srl-tt__media {
		aspect-ratio: 3 / 4;
	}
}
/* A narrower photo column on wider screens so the portrait image doesn't
   tower over the panel. */
@media (min-width: 1025px) {
	.srl-tt .srl-tt__card {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}

/* v1.0.20: in row layout the description height is fitted to the photo by
   the script, so the CSS line limit applies only when stacked. */
@media (min-width: 768px) {
	.srl-tt .srl-tt__card .srl-tt__body {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   v1.0.22: booking buttons styled like the site's buttons (sentence case).
   Primary: solid terracotta pill. Secondary: terracotta outline.
   ---------------------------------------------------------------------- */
:where(.srl-tt, .srl-cards) {
	--srl-btn-fill: #CA6858;
	--srl-btn-fill-hover: #B5594A;
}
.srl-tt a.srl-tt__btn,
.srl-cards a.srl-tt__btn,
.srl-tt a.srl-tt__btn:visited,
.srl-cards a.srl-tt__btn:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 11px 30px !important;
	box-sizing: border-box !important;
	background: var(--srl-btn-fill) !important;
	color: #FFFFFF !important;
	border: 1.5px solid var(--srl-btn-fill) !important;
	border-radius: 999px !important;
	font-family: var(--srl-body) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.5px !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.srl-tt a.srl-tt__btn:hover,
.srl-cards a.srl-tt__btn:hover,
.srl-tt a.srl-tt__btn:focus,
.srl-cards a.srl-tt__btn:focus {
	background: var(--srl-btn-fill-hover) !important;
	border-color: var(--srl-btn-fill-hover) !important;
	color: #FFFFFF !important;
}
.srl-tt a.srl-tt__btn--ghost,
.srl-tt a.srl-tt__btn--ghost:visited {
	background: transparent !important;
	color: var(--srl-btn-fill) !important;
	border: 1.5px solid var(--srl-btn-fill) !important;
}
.srl-tt a.srl-tt__btn--ghost:hover,
.srl-tt a.srl-tt__btn--ghost:focus {
	background: var(--srl-btn-fill) !important;
	color: #FFFFFF !important;
	border-color: var(--srl-btn-fill) !important;
}
.srl-cards .srl-cards__foot a.srl-tt__btn {
	padding: 10px 24px !important;
	font-size: 15px !important;
}
@media (prefers-reduced-motion: reduce) {
	.srl-tt a.srl-tt__btn,
	.srl-cards a.srl-tt__btn { transition: none; }
}

/* v1.0.23: keep empty buttons hidden (the button display rule above must not
   override the hidden state used when a link or label is blank). */
.srl-tt a.srl-tt__btn[hidden],
.srl-cards a.srl-tt__btn[hidden],
.srl-tt button[hidden],
.srl-tt .srl-tt__prices[hidden] {
	display: none !important;
}

/* v1.0.24: booking buttons kept together as a pair. */
.srl-tt .srl-tt__btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

/* v1.0.26: on really small screens (480px and under) the buttons stack
   full width under the prices, so long labels fit. Otherwise they sit
   side by side as a pair. */
@media (max-width: 480px) {
	.srl-tt .srl-tt__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.srl-tt .srl-tt__actions .srl-tt__prices {
		align-self: flex-start;
	}
	.srl-tt .srl-tt__btns {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
	}
	.srl-tt .srl-tt__btns a.srl-tt__btn {
		width: 100% !important;
		text-align: center !important;
		white-space: normal !important;
	}
}

/* -------------------------------------------------------------------------
   v1.0.27: price and button layout that can't overflow the panel.
   Prices on their own line; buttons underneath.
   Two buttons: equal widths side by side when they fit, otherwise each one
   spans the full width, stacked. One button: natural width (full width on
   small phones).
   ---------------------------------------------------------------------- */
.srl-tt .srl-tt__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	min-width: 0;
}
.srl-tt .srl-tt__actions .srl-tt__prices {
	align-self: flex-start;
}
.srl-tt .srl-tt__btns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	width: 100%;
	min-width: 0;
}
.srl-tt .srl-tt__btns.has-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.srl-tt .srl-tt__btns a.srl-tt__btn {
	max-width: 100% !important;
	white-space: normal !important;
	text-align: center !important;
}
.srl-tt .srl-tt__btns.has-two a.srl-tt__btn {
	width: 100% !important;
}

/* v1.1.1: session card columns by screen width.
   3 columns above 1200px, 2 from 768px to 1200px, 1 at 767px and below. */
.srl-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px) {
	.srl-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.srl-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* v1.1.2: card="no" — slots are plain, non-clickable blocks with the same look. */
.srl-tt div.srl-tt__slot {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 10px 12px;
	box-sizing: border-box;
	background: var(--srl-surface);
	color: var(--srl-ink);
	border: 1.5px solid var(--srl-line);
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	cursor: default;
	transition: opacity .15s ease;
}
.srl-tt div.srl-tt__slot .srl-tt__time {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
}
.srl-tt div.srl-tt__slot .srl-tt__name {
	display: block;
	margin-top: 2px;
	font-size: 14px;
}
.srl-tt div.srl-tt__slot.is-dimmed { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
	.srl-tt div.srl-tt__slot { transition: none; }
}

/* -------------------------------------------------------------------------
   v1.2.0: rows layout (default when card="no", or layout="rows").
   Days stacked down the page; each day's slots run across and scroll
   sideways when there are more than --srl-row-slots (per_row).
   ---------------------------------------------------------------------- */
.srl-tt--rows .srl-tt__scroller > .srl-tt__arrow {
	display: none !important;
}
.srl-tt.srl-tt--rows .srl-tt__grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: visible;
	padding-bottom: 0;
	grid-template-columns: none;
}
.srl-tt.srl-tt--rows .srl-tt__day {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 12px;
	border-bottom: 1px solid var(--srl-line);
	border-radius: 14px;
	scroll-snap-align: none;
}
.srl-tt.srl-tt--rows .srl-tt__dayhead {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}
.srl-tt.srl-tt--rows .srl-tt__dayname {
	font-size: 17px;
}
.srl-tt .srl-tt__rownav {
	display: flex;
	gap: 2px;
	margin-left: -10px;
}
.srl-tt.srl-tt--rows .srl-tt__slots {
	display: flex;
	flex-direction: row;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	min-width: 0;
}
.srl-tt.srl-tt--rows .srl-tt__slots::-webkit-scrollbar {
	display: none;
}
.srl-tt.srl-tt--rows .srl-tt__slot,
.srl-tt.srl-tt--rows button.srl-tt__slot,
.srl-tt.srl-tt--rows button.srl-tt__slot:hover,
.srl-tt.srl-tt--rows button.srl-tt__slot:focus,
.srl-tt.srl-tt--rows button.srl-tt__slot:active {
	flex: 0 0 calc((100% - (var(--srl-row-slots, 4) - 1) * 8px) / var(--srl-row-slots, 4)) !important;
	width: auto !important;
	min-width: 140px !important;
	scroll-snap-align: start;
}
.srl-tt.srl-tt--rows .srl-tt__none {
	padding: 10px 4px;
}

/* Phones: day name above its slots, two slots visible across. */
@media (max-width: 767px) {
	.srl-tt.srl-tt--rows .srl-tt__day {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 12px 8px;
	}
	.srl-tt.srl-tt--rows .srl-tt__dayhead {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
	}
	.srl-tt .srl-tt__rownav {
		margin-left: auto;
		margin-right: -8px;
	}
	.srl-tt.srl-tt--rows .srl-tt__slot,
	.srl-tt.srl-tt--rows button.srl-tt__slot,
	.srl-tt.srl-tt--rows button.srl-tt__slot:hover,
	.srl-tt.srl-tt--rows button.srl-tt__slot:focus,
	.srl-tt.srl-tt--rows button.srl-tt__slot:active {
		flex-basis: calc((100% - 8px) / 2) !important;
	}
}
.srl-tt.srl-tt--rows .srl-tt__day {
	border-radius: 0;
}
.srl-tt.srl-tt--rows .srl-tt__day.is-today {
	border-radius: 14px;
	border-bottom-color: transparent;
}

/* v1.2.1: rows layout on phones — "Today" sits at the right-hand end of the
   day heading, centred on the day name; arrows (if any) follow it. */
@media (max-width: 767px) {
	.srl-tt.srl-tt--rows .srl-tt__dayhead {
		align-items: center;
		gap: 8px;
		min-height: 28px;
	}
	.srl-tt.srl-tt--rows .srl-tt__dayname {
		margin-right: auto;
		line-height: 1.2;
	}
	.srl-tt.srl-tt--rows .srl-tt__today {
		line-height: 1;
		padding-top: 1px; /* optical centring of the small capitals */
	}
	.srl-tt.srl-tt--rows .srl-tt__rownav {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
   v1.3.0: rows layout with the card ("split").
   From 1025px: timetable on the left, the card in a column on the right
   that stays in view while scrolling. Up to 1024px: card below the
   timetable, behaving as before (side by side 768–1024px, stacked below).
   ---------------------------------------------------------------------- */
:where(.srl-tt) {
	--srl-split-card: 380px;   /* width of the card column */
	--srl-sticky-top: 120px;   /* clears a sticky site header */
}
.srl-tt .srl-tt__main {
	min-width: 0;
}
.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card {
	margin-top: 32px;
}
.srl-tt .srl-tt__title:focus {
	outline: none;
}
.srl-tt .srl-tt__title:focus-visible {
	outline: 2px solid var(--srl-ink);
	outline-offset: 4px;
}

@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--srl-split-card);
		gap: 32px;
		align-items: start;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card {
		position: sticky;
		top: var(--srl-sticky-top);
		max-width: none;
		margin: 0;
		/* Single column: photo above the white panel. */
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0;
		align-items: stretch;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__media {
		aspect-ratio: 4 / 3;
		-webkit-mask-image: var(--srl-mask-43);
		mask-image: var(--srl-mask-43);
		margin: 0 var(--srl-media-inset) !important;
		align-self: auto !important;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__body {
		margin: -50px 0 0 !important;
		padding: 36px 28px 28px;
		align-self: auto;
		justify-content: flex-start;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__title {
		font-size: 28px;
	}
	/* Narrower timetable column: smaller day label column. */
	.srl-tt.srl-tt--split .srl-tt__day {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 12px;
	}
}

/* v1.3.0 fix: the price/button area stacks vertically; it must never wrap
   into a second column (that pushed the buttons out of the panel). */
.srl-tt .srl-tt__actions {
	flex-wrap: nowrap !important;
}
.srl-tt .srl-tt__actions > .srl-tt__btns {
	flex: 0 0 auto !important;
	width: 100%;
	max-width: 100%;
}

/* v1.3.1: split layout — card column about 40% of the width, timetable 60%.
   Change --srl-split-card to adjust (e.g. 35%). */
:where(.srl-tt) {
	--srl-split-card: 40%;
}
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__split {
		grid-template-columns: minmax(0, 1fr) minmax(320px, var(--srl-split-card));
	}
}

/* -------------------------------------------------------------------------
   v1.3.2: when the timetable card is in column form (beside the timetable
   on screens over 1024px, or stacked at 767px and below), the prices and
   button match the session cards: prices left, compact button right.
   A second button drops onto its own line beneath, with the first.
   ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__actions {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		margin-top: auto;
		padding-top: 10px;
	}
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__actions .srl-tt__prices { gap: 4px 16px; align-self: center; }
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__price { font-size: 22px; }
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__actions > .srl-tt__btns {
		flex: 0 1 auto !important;
		width: auto !important;
		display: flex !important;
	}
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		flex: 1 1 100% !important;
		width: 100% !important;
		display: grid !important;
	}
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__btns a.srl-tt__btn {
		width: auto !important;
		padding: 10px 24px !important;
		font-size: 15px !important;
	}
	.srl-tt.srl-tt--split .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		width: 100% !important;
	}
}
@media (max-width: 767px) {
	.srl-tt .srl-tt__card .srl-tt__actions {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding-top: 10px;
	}
	.srl-tt .srl-tt__card .srl-tt__actions .srl-tt__prices { gap: 4px 16px; align-self: center !important; }
	.srl-tt .srl-tt__card .srl-tt__price { font-size: 22px; }
	.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns {
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 100%;
		display: flex !important;
		flex-direction: row !important;
	}
	.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		flex: 1 1 100% !important;
		width: 100% !important;
		display: grid !important;
	}
	.srl-tt .srl-tt__card .srl-tt__btns a.srl-tt__btn {
		width: auto !important;
		padding: 10px 24px !important;
		font-size: 15px !important;
	}
	.srl-tt .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		width: 100% !important;
	}
}

/* v1.3.3: timetable and card centred against each other (over 1024px);
   paired buttons always the same height, even when one label wraps. */
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__split {
		align-items: center;
	}
}
.srl-tt .srl-tt__btns.has-two,
.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
	align-items: stretch !important;
}
.srl-tt .srl-tt__btns.has-two a.srl-tt__btn {
	height: auto !important;
	align-self: stretch !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* v1.3.4: when the card is in row format (photo beside the text, 768px and
   up, except the column card beside the timetable over 1024px), two buttons
   always sit side by side at equal widths. Long labels wrap inside them. */
@media (min-width: 768px) {
	.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.srl-tt .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* v1.3.5: a single button sits on the price line, right-aligned, in every
   card format; a minimum width keeps one-word labels from looking stubby.
   (Two buttons keep their own row beneath the prices.) */
@media (min-width: 768px) {
	.srl-tt .srl-tt__card .srl-tt__actions {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px 16px !important;
	}
	.srl-tt .srl-tt__card .srl-tt__actions .srl-tt__prices {
		align-self: center !important;
	}
	.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns:not(.has-two) {
		flex: 0 1 auto !important;
		width: auto !important;
		display: flex !important;
	}
	.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}
.srl-tt .srl-tt__card .srl-tt__btns:not(.has-two) a.srl-tt__btn,
.srl-cards a.srl-tt__btn {
	min-width: 140px;
}
@media (max-width: 767px) {
	.srl-tt .srl-tt__card .srl-tt__btns:not(.has-two) a.srl-tt__btn,
	.srl-cards a.srl-tt__btn {
		min-width: 104px;
	}
}

/* v1.3.6: two buttons always sit side by side, at equal width and height,
   in every card format. Long labels wrap inside the buttons. */
.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two,
.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
	flex: 1 1 100% !important;
	width: 100% !important;
}
@media (max-width: 767px), (min-width: 1025px) {
	.srl-tt .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		padding: 10px 14px !important;
		font-size: 15px !important;
		line-height: 1.25 !important;
	}
}

/* -------------------------------------------------------------------------
   v1.3.6: two buttons always side by side (equal width and height, labels
   wrap), never stacked. With a single price, the buttons share the price's
   line when there's room (at least 260px), otherwise they take the line
   below, still side by side.
   ---------------------------------------------------------------------- */
.srl-tt .srl-tt__card .srl-tt__actions {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px 16px !important;
}
.srl-tt .srl-tt__card .srl-tt__actions .srl-tt__prices {
	flex: 0 0 auto;
	align-self: center !important;
}
.srl-tt .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two,
.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: stretch !important;
	gap: 10px !important;
	flex: 1 1 100% !important;
	width: 100% !important;
}
.srl-tt .srl-tt__card .srl-tt__actions.has-single-price > .srl-tt__btns.has-two,
.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions.has-single-price > .srl-tt__btns.has-two {
	flex: 1 1 260px !important;
	width: auto !important;
	min-width: 0;
}
.srl-tt .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
	width: 100% !important;
	min-width: 0 !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	line-height: 1.25 !important;
}

/* v1.3.8: session cards show the full description as paragraphs. */
.srl-cards .srl-cards__desc {
	font-size: 16px;
	line-height: 1.55;
}
.srl-cards .srl-cards__desc p {
	margin: 0 0 0.75em;
}
.srl-cards .srl-cards__desc p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   v1.4.0: session cards — clamped full description with "Read more",
   which opens the session in an off-canvas panel from the right.
   ---------------------------------------------------------------------- */
:where(.srl-cards) {
	--srl-card-desc-lines: 4;
	--srl-panel-width: 520px;
}
.srl-cards .srl-cards__desc {
	max-height: calc(var(--srl-card-desc-lines) * 1.55em);
	overflow: hidden;
}
.srl-cards .srl-cards__desc.is-open {
	max-height: none;
}
.srl-cards .srl-cards__desc.is-cut {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55em), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.55em), transparent);
}
.srl-cards button.srl-cards__more,
.srl-cards button.srl-cards__more:hover,
.srl-cards button.srl-cards__more:focus,
.srl-cards button.srl-cards__more:active {
	align-self: flex-start !important;
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: -4px 0 0 !important;
	padding: 4px 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--srl-btn) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--srl-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}
.srl-cards button.srl-cards__more:hover { color: var(--srl-btn-hover) !important; }
.srl-cards button.srl-cards__more[hidden] { display: none !important; }
.srl-cards button.srl-cards__more:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}

/* Off-canvas panel */
html.srl-panel-lock,
html.srl-panel-lock body {
	overflow: hidden;
}
.srl-cards dialog.srl-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(var(--srl-panel-width), 100vw);
	max-width: 100vw;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--srl-surface);
	color: var(--srl-ink);
	box-shadow: -12px 0 40px rgba(61, 44, 38, 0.18);
	transform: translateX(100%);
	transition: transform .3s ease;
	overflow: hidden;
}
.srl-cards dialog.srl-panel.is-open {
	transform: translateX(0);
}
.srl-cards dialog.srl-panel::backdrop {
	background: rgba(42, 30, 26, 0);
	transition: background-color .3s ease;
}
.srl-cards dialog.srl-panel.is-open::backdrop {
	background: rgba(42, 30, 26, 0.45);
}
.srl-cards .srl-panel__inner {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.srl-cards button.srl-panel__close,
.srl-cards button.srl-panel__close:hover,
.srl-cards button.srl-panel__close:focus,
.srl-cards button.srl-panel__close:active {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--srl-surface) !important;
	color: var(--srl-ink) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(61, 44, 38, 0.2) !important;
	cursor: pointer;
}
.srl-cards button.srl-panel__close:hover { background: var(--srl-today) !important; }
.srl-cards button.srl-panel__close:focus-visible {
	outline: 2px solid var(--srl-ink) !important;
	outline-offset: 2px !important;
}
.srl-cards button.srl-panel__close:focus:not(:focus-visible) { outline: none !important; }
.srl-cards .srl-panel__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--srl-today);
}
.srl-cards .srl-panel__media[hidden] { display: none; }
.srl-cards .srl-panel__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}
.srl-cards .srl-panel__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px 40px;
}
.srl-cards .srl-panel__media[hidden] + .srl-panel__body {
	padding-top: 72px; /* clear the close button */
}
.srl-cards .srl-panel__body [hidden] { display: none !important; }
.srl-cards .srl-panel__title {
	margin: 0;
	font-family: var(--srl-display);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.1;
	color: var(--srl-ink);
}
.srl-cards .srl-panel__desc {
	font-size: 16px;
	line-height: 1.6;
}
.srl-cards .srl-panel__desc p { margin: 0 0 0.85em; }
.srl-cards .srl-panel__desc p:last-child { margin-bottom: 0; }
.srl-cards .srl-panel__when {
	margin: 0;
	font-size: 15px;
	color: var(--srl-muted);
}
.srl-cards .srl-panel__when strong { color: var(--srl-ink); font-weight: 600; }
.srl-cards .srl-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding-top: 6px;
}
.srl-cards .srl-panel__actions .srl-tt__prices { flex: 0 0 auto; }
.srl-cards .srl-panel__actions .srl-tt__price { font-size: 26px; }
.srl-cards .srl-panel__btns {
	display: flex;
	flex: 0 1 auto;
}
.srl-cards .srl-panel__btns.has-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 10px;
	flex: 1 1 100%;
}
.srl-cards .srl-panel__actions.has-single-price .srl-panel__btns.has-two {
	flex: 1 1 260px;
}
.srl-cards .srl-panel__btns a.srl-tt__btn {
	min-width: 140px;
	padding: 11px 26px !important;
	font-size: 16px !important;
}
.srl-cards .srl-panel__btns.has-two a.srl-tt__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0;
	padding: 10px 14px !important;
	font-size: 15px !important;
	line-height: 1.25 !important;
	text-align: center !important;
	white-space: normal !important;
}
@media (max-width: 767px) {
	.srl-cards .srl-panel__body { padding: 24px 20px 32px; }
	.srl-cards .srl-panel__title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.srl-cards dialog.srl-panel,
	.srl-cards dialog.srl-panel::backdrop { transition: none; }
}
/* Outline style for the second button inside the panel. */
.srl-cards a.srl-tt__btn--ghost,
.srl-cards a.srl-tt__btn--ghost:visited {
	background: transparent !important;
	color: var(--srl-btn-fill) !important;
	border: 1.5px solid var(--srl-btn-fill) !important;
}
.srl-cards a.srl-tt__btn--ghost:hover,
.srl-cards a.srl-tt__btn--ghost:focus {
	background: var(--srl-btn-fill) !important;
	color: #FFFFFF !important;
	border-color: var(--srl-btn-fill) !important;
}

/* v1.4.1: two buttons always take their own row beneath the price(s), now
   that a single price can carry a label underneath. A single button still
   sits beside the price. */
.srl-tt .srl-tt__card .srl-tt__actions.has-single-price > .srl-tt__btns.has-two,
.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions.has-single-price > .srl-tt__btns.has-two,
.srl-cards .srl-panel__actions.has-single-price .srl-panel__btns.has-two {
	flex: 1 1 100% !important;
	width: 100% !important;
}

/* v1.4.2: optional minimum heights (shortcode card_height / slot_height,
   or set the variables in custom CSS), and no divider above "today". */
/* v1.4.3: card_height applies only when the card sits beside the timetable. */
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__body {
		min-height: var(--srl-card-min-height, 0);
		box-sizing: border-box;
	}
}
.srl-tt .srl-tt__slot,
.srl-tt button.srl-tt__slot,
.srl-tt button.srl-tt__slot:hover,
.srl-tt button.srl-tt__slot:focus,
.srl-tt button.srl-tt__slot:active,
.srl-tt.srl-tt--rows .srl-tt__slot,
.srl-tt.srl-tt--rows button.srl-tt__slot {
	min-height: var(--srl-slot-min-height, 56px) !important;
}
.srl-tt.srl-tt--rows .srl-tt__day.is-before-today {
	border-bottom-color: transparent;
}

/* -------------------------------------------------------------------------
   v1.4.4: timetable layout, card below the timetable in row format
   (768–1024px). Same price/button sizes as the column card; details at the
   top of the panel, price and buttons at the bottom; a less tall, square
   photo by default (shortcode photo_ratio changes it; card_width caps the
   card's width).
   ---------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__media {
		aspect-ratio: var(--srl-row-photo-ratio, 1 / 1);
		-webkit-mask-image: var(--srl-row-photo-mask, var(--srl-mask-sq));
		mask-image: var(--srl-row-photo-mask, var(--srl-mask-sq));
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__body {
		justify-content: flex-start !important;
		padding: 32px 36px;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__title {
		font-size: 28px;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions {
		margin-top: auto !important;
		padding-top: 10px;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__price {
		font-size: 22px;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__actions .srl-tt__prices {
		gap: 4px 16px;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__btns:not(.has-two) a.srl-tt__btn {
		padding: 10px 24px !important;
		font-size: 15px !important;
	}
	.srl-tt.srl-tt--split .srl-tt__split > .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		padding: 10px 14px !important;
		font-size: 15px !important;
	}
}

/* v1.5.1: filter pills centred over the timetable. */
.srl-tt .srl-tt__filters {
	justify-content: center;
}

/* v1.5.2: pills centred across the whole block (timetable and card), in
   #3D2C26; the script evens out wrapped lines so none is left on its own. */
:where(.srl-tt) {
	--srl-pill: #3D2C26;
}
.srl-tt .srl-tt__filters {
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.srl-tt button.srl-tt__pill,
.srl-tt button.srl-tt__pill:hover,
.srl-tt button.srl-tt__pill:focus,
.srl-tt button.srl-tt__pill:active {
	color: var(--srl-pill) !important;
	border-color: var(--srl-pill) !important;
}
.srl-tt button.srl-tt__pill.is-active,
.srl-tt button.srl-tt__pill.is-active:hover,
.srl-tt button.srl-tt__pill.is-active:focus,
.srl-tt button.srl-tt__pill.is-active:active {
	background: var(--srl-pill) !important;
	border-color: var(--srl-pill) !important;
	color: var(--srl-cream) !important;
}
.srl-tt button.srl-tt__pill:focus-visible {
	outline-color: var(--srl-pill) !important;
}
@media (max-width: 359px) {
	.srl-tt .srl-tt__filters { gap: 6px; }
	.srl-tt button.srl-tt__pill,
	.srl-tt button.srl-tt__pill:hover,
	.srl-tt button.srl-tt__pill:focus,
	.srl-tt button.srl-tt__pill:active {
		font-size: 14px !important;
		padding: 6px 12px !important;
	}
}

/* v1.5.3: space under the pills when they're centred across the timetable
   and card (over 1024px). Shortcode filters_gap, or --srl-filters-gap. */
@media (min-width: 1025px) {
	.srl-tt.srl-tt--split .srl-tt__filters {
		margin-bottom: var(--srl-filters-gap, 40px);
	}
}

/* v1.5.4: session cards show 3 lines before "Read more" (shortcode lines="2" etc.). */
:where(.srl-cards) {
	--srl-card-desc-lines: 3;
}

/* -------------------------------------------------------------------------
   v1.6.0: featured session cards. Full width of the grid, photo on the left
   and the white panel on the right (768px and up), like the timetable card.
   Gaps left by a full-width card are filled by the cards that follow.
   ---------------------------------------------------------------------- */
.srl-cards {
	grid-auto-flow: row dense;
}
@media (min-width: 950px) {
	.srl-cards .srl-cards__item.is-featured {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__media {
		margin: var(--srl-media-inset) 0 !important;
		aspect-ratio: 4 / 3;
		align-self: center;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__body {
		align-self: stretch;
		justify-content: center;
		margin: 0 0 0 -20px;
		padding: 40px 48px;
		--srl-card-desc-lines: 5;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__title {
		font-size: 32px;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__foot {
		margin-top: 8px;
	}
}
@media (min-width: 950px) and (max-width: 1024px) {
	.srl-cards .srl-cards__item.is-featured .srl-cards__body {
		padding: 32px 32px;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__title {
		font-size: 28px;
	}
}

/* v1.6.1: featured cards use a square photo (with the square mask) in the
   row layout, in a slightly narrower photo column. */
@media (min-width: 950px) {
	.srl-cards .srl-cards__item.is-featured {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__media {
		aspect-ratio: 1 / 1;
		-webkit-mask-image: var(--srl-mask-sq);
		mask-image: var(--srl-mask-sq);
	}
}

/* v1.6.2: featured cards — 70% wide and centred on screens 1400px and up
   (featured_width), and 4 lines of text before "Read more" (featured_lines). */
@media (min-width: 950px) {
	.srl-cards .srl-cards__item.is-featured .srl-cards__body {
		--srl-card-desc-lines: var(--srl-featured-lines, 4);
	}
}
@media (min-width: 1400px) {
	.srl-cards .srl-cards__item.is-featured {
		width: var(--srl-featured-max, 70%);
		max-width: 100%;
		justify-self: center;
	}
}

/* v1.6.3: featured cards share the timetable card's width, --srl-card-max
   (default 1200px), centred, from 768px up. Set it once for both, e.g.
   .srl-tt, .srl-cards { --srl-card-max: 1100px; }, or use card_width /
   featured_width in the shortcode. Replaces the 70% rule. */
@media (min-width: 950px) {
	.srl-cards .srl-cards__item.is-featured {
		width: 100%;
		max-width: var(--srl-featured-max, var(--srl-card-max, 1200px));
		justify-self: center;
	}
}
@media (min-width: 1400px) {
	.srl-cards .srl-cards__item.is-featured {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   v1.7.0: featured session cards use exactly the timetable card's row
   layout (768px and up): square masked photo in a 5/12 column, inset 32px
   above and below; white panel 7/12, overlapping the photo by 20px, its
   height matched to the photo; details at the top, price and buttons at the
   bottom; same type sizes, spacing and buttons (both buttons shown).
   ---------------------------------------------------------------------- */
@media (min-width: 950px) {
	.srl-cards .srl-cards__item.is-featured {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__media {
		aspect-ratio: 1 / 1;
		margin: var(--srl-media-inset) 0 !important;
		align-self: center;
		-webkit-mask-image: var(--srl-mask-sq);
		mask-image: var(--srl-mask-sq);
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__body {
		align-self: stretch;
		justify-content: flex-start;
		margin: 0 0 0 -20px;
		padding: 32px 36px;
		gap: 14px;
		--srl-card-desc-lines: 99; /* height is fitted to the photo by the script */
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__title {
		font-size: 28px;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__desc {
		font-size: inherit;
		line-height: 1.55;
	}
	.srl-cards .srl-cards__item.is-featured .srl-cards__foot {
		margin-top: auto;
		padding-top: 10px;
		flex-wrap: wrap;
		gap: 12px 16px;
	}
	.srl-cards .srl-cards__item.is-featured .srl-tt__price { font-size: 22px; }
	.srl-cards .srl-cards__item.is-featured .srl-tt__prices { gap: 4px 16px; }
	.srl-cards .srl-cards__item.is-featured .srl-cards__foot > a.srl-tt__btn {
		min-width: 140px;
		padding: 10px 24px !important;
		font-size: 15px !important;
	}
	.srl-cards .srl-cards__item.is-featured .srl-tt__btns.has-two {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 10px;
		flex: 1 1 100%;
		width: 100%;
	}
	.srl-cards .srl-cards__item.is-featured .srl-tt__btns.has-two a.srl-tt__btn {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0;
		padding: 10px 14px !important;
		font-size: 15px !important;
		line-height: 1.25 !important;
		text-align: center !important;
		white-space: normal !important;
	}
}

/* v1.7.1: between 768px and 949px a featured card uses the normal stacked
   card layout, on its own row, one column wide and centred across the two. */
@media (min-width: 768px) and (max-width: 949px) {
	.srl-cards .srl-cards__item.is-featured {
		grid-column: 1 / -1;
		justify-self: center;
		width: var(--srl-featured-stack-width, calc((100% - 24px) / 2));
		max-width: 100%;
	}
}
/* Featured cards with two buttons, at every size: price on its line, the
   two buttons side by side beneath at equal width and height. */
.srl-cards .srl-cards__item.is-featured .srl-cards__foot {
	flex-wrap: wrap;
	gap: 12px 16px;
}
.srl-cards .srl-cards__item.is-featured .srl-tt__btns.has-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 10px;
	flex: 1 1 100%;
	width: 100%;
}
.srl-cards .srl-cards__item.is-featured .srl-tt__btns.has-two a.srl-tt__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0;
	padding: 10px 14px !important;
	font-size: 15px !important;
	line-height: 1.25 !important;
	text-align: center !important;
	white-space: normal !important;
}

/* -------------------------------------------------------------------------
   v1.7.3: one style for every booking button and filter pill.
   Padding 10px 20px, 15px text, 0.5px letter spacing. Buttons 500 weight,
   filter pills lighter (400). The :not(#srl-none) adds an ID's weight so
   this always wins over the earlier, more specific size rules.
   ---------------------------------------------------------------------- */
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:visited,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:hover,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:focus,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:active {
	padding: 10px 20px !important;
	font-size: 15px !important;
	letter-spacing: 0.5px !important;
	font-weight: 500 !important;
}
.srl-tt:not(#srl-none) button.srl-tt__pill,
.srl-tt:not(#srl-none) button.srl-tt__pill:hover,
.srl-tt:not(#srl-none) button.srl-tt__pill:focus,
.srl-tt:not(#srl-none) button.srl-tt__pill:active,
.srl-tt:not(#srl-none) button.srl-tt__pill.is-active {
	padding: 10px 20px !important;
	font-size: 15px !important;
	letter-spacing: 0.5px !important;
	font-weight: 400 !important;
}
/* Phones: the pills sit in one row that scrolls sideways, so the full-size
   pills never leave one stranded on a line of its own. */
@media (max-width: 480px) {
	.srl-tt:not(#srl-none) .srl-tt__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		max-width: none !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
	.srl-tt .srl-tt__filters::-webkit-scrollbar { display: none; }
	.srl-tt:not(#srl-none) button.srl-tt__pill {
		flex: 0 0 auto;
		white-space: nowrap !important;
		scroll-snap-align: start;
	}
}
/* v1.7.4: no minimum height on buttons and pills, so the 10px top and
   bottom padding sets their height. */
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:visited,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:hover,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:focus,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:active,
.srl-tt:not(#srl-none) button.srl-tt__pill,
.srl-tt:not(#srl-none) button.srl-tt__pill:hover,
.srl-tt:not(#srl-none) button.srl-tt__pill:focus,
.srl-tt:not(#srl-none) button.srl-tt__pill:active,
.srl-tt:not(#srl-none) button.srl-tt__pill.is-active {
	min-height: 0 !important;
	height: auto !important;
	line-height: 1.2 !important;
}
/* v1.7.5: 8px top/bottom padding and no minimum width on buttons and pills. */
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:visited,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:hover,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:focus,
:is(.srl-tt, .srl-cards):not(#srl-none) a.srl-tt__btn:active,
.srl-tt:not(#srl-none) button.srl-tt__pill,
.srl-tt:not(#srl-none) button.srl-tt__pill:hover,
.srl-tt:not(#srl-none) button.srl-tt__pill:focus,
.srl-tt:not(#srl-none) button.srl-tt__pill:active,
.srl-tt:not(#srl-none) button.srl-tt__pill.is-active {
	padding: 8px 20px !important;
	min-width: 0 !important;
}

/* v1.7.6: timetable card on phones (767px and under) — two buttons stack,
   each full width, under the price. */
@media (max-width: 767px) {
	.srl-tt:not(#srl-none) .srl-tt__card .srl-tt__actions > .srl-tt__btns.has-two {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		gap: 10px !important;
	}
	.srl-tt:not(#srl-none) .srl-tt__card .srl-tt__btns.has-two a.srl-tt__btn {
		width: 100% !important;
	}
}