/*
 * Rainbow Palace Layout: the revised page shell. Everything is scoped to body.rp-shell, which the plugin adds only
 * when the new layout is on. The sidebar reuses the theme's own classes, so the theme's stylesheet draws it as it
 * does today; the rules here place it and tidy what sits around it.
 * Colours and fonts are the theme's own: palace green, sky blue, sun orange, Roboto Slab, Source Sans Pro.
 */
body.rp-shell {
	--rp-green: #007a5e;
	--rp-green-mid: #43b086;
	--rp-mint: #eff9ec;
	--rp-blue: #0077bb;
	--rp-sun: #ffaf47;
	--rp-ink: #31313f;
	--rp-display: "Roboto Slab", Georgia, serif;
	--rp-body: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	--rp-strip: 48px;
	--rp-adminbar: 0px;
	/* The theme hides horizontal overflow on html and body, which turns body into a scroll box and stops
	   position: sticky. clip hides the overflow without doing that. */
	overflow-x: clip;
}

body.rp-shell.admin-bar {
	--rp-adminbar: 32px;
}

.rp-shell .rp-icon {
	flex: none;
}

.rp-shell .rp-header a:focus-visible,
.rp-shell .rp-phonestrip a:focus-visible {
	outline: 3px solid var(--rp-sun);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Contact strip (the whole header on desktop) ---------- */
.rp-shell header#masthead.rp-header {
	position: sticky;
	top: var(--rp-adminbar);
	z-index: 99;
	width: auto;
	padding: 0;
	background: var(--rp-green);
	color: #fff;
	box-shadow: none;
}

.rp-shell .rp-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--rp-strip);
	padding: 0 32px;
	box-sizing: border-box;
}

.rp-shell .rp-brand {
	display: none;
}

.rp-shell .rp-header__tagline {
	margin: 0;
	font: 400 15px/1.3 var(--rp-body);
	text-align: left;
	color: #e6f6ee;
}

.rp-shell .rp-header__contact {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

.rp-shell .rp-header__user,
.rp-shell .rp-header__user a {
	font: 400 14px/1.3 var(--rp-body);
	color: #e6f6ee;
}

.rp-shell .rp-header__social {
	display: flex;
	gap: 14px;
}

.rp-shell .rp-header__social a {
	color: #fff;
	line-height: 1;
	text-decoration: none;
}

.rp-shell .rp-header__social a i {
	font-size: 17px;
}

.rp-shell .rp-phones {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rp-shell .rp-phones .rp-icon {
	color: var(--rp-sun);
}

.rp-shell .rp-phones a {
	font: 700 18px/1 var(--rp-display);
	letter-spacing: 0.02em;
	color: #fff;
	text-decoration: none;
}

.rp-shell .rp-phones a + a::before,
.rp-shell .rp-phonestrip a + a::before {
	content: "·";
	margin-right: 8px;
	opacity: 0.7;
}

.rp-shell .rp-phones a:hover {
	color: var(--rp-sun);
}

.rp-shell .rp-btn {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--rp-sun);
	font: 700 14px/1 var(--rp-display);
	letter-spacing: 0.03em;
	color: var(--rp-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.rp-shell .rp-btn:hover {
	background: #fff;
}

.rp-shell .rp-call,
.rp-shell .rp-phonestrip {
	display: none;
}

/* ---------- Inner pages: sidebar on the left, the page beside it ---------- */
.rp-shell .rp-frame {
	display: flex;
	align-items: flex-start;
}

.rp-shell .rp-col {
	flex: 1;
	min-width: 0;
	/* One quiet line down the page, so the split reads as a layout and not as sections cut short. */
	border-left: 1px solid #dbe9dd;
}

/* The sidebar stays in view while the page scrolls; on a short screen it scrolls inside itself. */
.rp-shell .rp-sidebar {
	flex: none;
	position: sticky;
	top: calc(var(--rp-adminbar) + var(--rp-strip));
	max-height: calc(100vh - var(--rp-adminbar) - var(--rp-strip));
	overflow-y: auto;
	padding: 18px 0 24px;
	/* The footer's photo is pulled 140px up over whatever ends the page; on a short page that is the sidebar. */
	margin-bottom: 140px;
	box-sizing: border-box;
	scrollbar-width: thin;
}

.rp-shell .rp-sidebar .sidebar-logo a {
	display: block;
}

@media (max-height: 800px) {
	.rp-shell .rp-sidebar .sidebar-logo img { max-height: 26vh; width: auto; }
	.rp-shell .rp-sidebar .sidebar-logo .rp-logo { width: calc(26vh * 226 / 269); }
	.rp-shell .rp-sidebar .sidebar-nav ul#menu-main-menu-1 li { padding: 8px 0; }
}

/* ---------- Inner-page heading: a plain H1 at the top of the content column ---------- */
.rp-shell .rp-pagehead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 30px 5% 6px;
}

.rp-shell .rp-pagehead__text {
	min-width: 0;
}

.rp-shell .rp-pagehead__title {
	margin: 0;
	font: 700 44px/1.12 var(--rp-display);
	color: var(--rp-ink);
	text-wrap: balance;
}

.rp-shell .rp-pagehead__sub {
	margin: 10px 0 0;
	font: 600 20px/1.4 var(--rp-body);
	text-align: left;
	color: var(--rp-green);
}

/* The banner photo, small: an arched castle window outlined with the theme's stitched line. */
.rp-shell .rp-arch {
	position: relative;
	flex: none;
	width: 132px;
	height: 138px;
	margin: 8px 12px 8px 0;
}

.rp-shell .rp-arch::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 3px dashed var(--rp-green-mid);
	border-radius: 999px 999px 22px 22px;
	pointer-events: none;
}

.rp-shell .rp-arch__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px 999px 16px 16px;
}

/* ---------- Theme sections that were built to sit under the banner ---------- */
/* The first section used to start a full screen down; now it follows the heading directly. */
.rp-shell .rp-pagehead + section {
	margin-top: 0;
	padding-top: 22px;
}

.rp-shell .rp-pagehead + section > .container > .content-wrapper {
	margin-top: 0;
}

/* Videos is a post-type archive: the theme prints "Archives: Videos" under the heading. */
.rp-shell.post-type-archive .rp-pagehead + .page-header {
	display: none;
}

/* The footer photo (1903 x 1147) is lazy-loaded without dimensions. On short pages the footer is on screen when it
   arrives and everything under it jumps (layout shift 0.26 to 0.34 on Registration). Reserve its space. */
.rp-shell .pre-footer-img img {
	height: auto;
	aspect-ratio: 1903 / 1147;
}

/* ---------- Home: the theme's banner and sidebar, moved up under the strip ---------- */
/* The banner was pulled up 105px to tuck its sidebar beside the old header, and the photo pushed down 110px to
   clear the old header's tagline row. Neither is there any more. */
.rp-shell section.banner-section {
	margin-top: 0;
}

.rp-shell section.banner-section .banner-contents {
	margin-top: 18px;
}

/* Desktop: the photo spans the sidebar's height, top to bottom, instead of hanging 110px lower than it. */
@media (min-width: 1024px) {
	.rp-shell section.banner-section .banner-contents {
		height: auto;
		min-height: 580px;
		align-self: stretch;
	}
}

.rp-shell section.banner-section .sidebar {
	padding-top: 18px;
	box-sizing: border-box;
}

.rp-shell section.banner-section a.go-home {
	display: none;
}

/* ---------- Click-to-load video poster ---------- */
.rp-shell .rp-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #1d2a26;
	cursor: pointer;
}

.rp-shell .rp-video--wide { aspect-ratio: 16 / 9; }
.rp-shell .rp-video--tall { aspect-ratio: 9 / 16; }

.rp-shell .rp-video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.rp-shell .rp-video:hover img { transform: scale(1.03); }

.rp-shell .rp-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: -31px 0 0 -31px;
	border-radius: 50%;
	background: var(--rp-sun);
	color: var(--rp-ink);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.rp-shell .rp-video:focus-visible {
	outline: 3px solid var(--rp-blue);
	outline-offset: 3px;
}

.rp-shell iframe.rp-video--playing { cursor: auto; }

/* ---------- Front page: "See a Day at Rainbow Palace" (templates/social.php) ---------- */
.rp-shell .rp-social-block {
	padding: 64px 5% 72px;
	background: #fff;
}

.rp-shell .rp-social-block__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.rp-shell .rp-social-block__title {
	margin: 0;
	font: 700 36px/1.2 var(--rp-display);
	text-align: center;
	text-shadow: none;
	color: var(--rp-ink);
}

.rp-shell .rp-social-block__lede {
	max-width: 56ch;
	margin: 12px auto 0;
	font: 400 19px/1.6 var(--rp-body);
	text-align: center;
	text-shadow: none;
	color: #4a4a57;
}

.rp-shell .rp-social-block__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 36px;
}

.rp-shell .rp-social-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid #dbe9dd;
	border-radius: 22px;
	background: var(--rp-mint);
}

.rp-shell .rp-social-card__name {
	margin: 0;
	font: 700 24px/1.2 var(--rp-display);
	text-align: left;
	text-shadow: none;
	color: var(--rp-ink);
}

.rp-shell .rp-social-card__handle {
	align-self: flex-start;
	margin-top: 4px;
	font: 600 16px/1.4 var(--rp-body);
	text-shadow: none;
	color: #00664f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rp-shell .rp-social-card__media {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.rp-shell .rp-social-card__media .rp-video { border-radius: 14px; }
.rp-shell .rp-social-card__media .rp-video__play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.rp-shell .rp-social-card__media .rp-video__play svg { width: 22px; height: 22px; }

.rp-shell .rp-social-card__media--photos a {
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
}

.rp-shell .rp-social-card__media--photos img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rp-shell .rp-social-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: auto;
	padding-top: 22px;
}

.rp-shell .rp-social-card__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 11px 24px;
	box-sizing: border-box;
	border: 2px solid var(--rp-ink);
	border-radius: 14px;
	background: #fff;
	font: 700 16px/1.2 var(--rp-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	color: var(--rp-ink);
}

.rp-shell .rp-social-card__btn:hover { background: #fff4e3; }

.rp-shell .rp-social-card__link {
	font: 700 16px/1.3 var(--rp-display);
	text-shadow: none;
	color: #00664f;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.rp-shell .rp-social-card a:focus-visible {
	outline: 3px solid #0b5fa5;
	outline-offset: 3px;
}

@media (max-width: 1023px) {
	.rp-shell .rp-social-block { padding: 44px 16px 52px; }
	.rp-shell .rp-social-block__title { font-size: 28px; }
	.rp-shell .rp-social-block__lede { font-size: 17px; }
	.rp-shell .rp-social-block__cards { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
	.rp-shell .rp-social-card { padding: 20px; }
	.rp-shell .rp-social-card__media { gap: 8px; }
}

/* ---------- "Schedule a tour / Call" band at the end of some pages ---------- */
.rp-shell .rp-cta-band {
	margin: 56px 5% 170px; /* the footer photo overlaps the end of every page by 140px */
	padding: 40px 32px;
	border: 1px solid #dbe9dd;
	border-radius: 24px;
	background: var(--rp-mint);
	text-align: center;
}

.rp-shell .rp-meet .rp-cta-band,
.rp-shell .rp-videos .rp-cta-band { margin-bottom: 0; }

.rp-shell .rp-cta-band__title {
	margin: 0;
	font: 700 30px/1.25 var(--rp-display);
	text-align: center;
	text-shadow: none;
	color: var(--rp-ink);
}

.rp-shell .rp-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	margin-top: 22px;
}

.rp-shell .rp-cta-band__call,
.rp-shell .rp-menu-cta__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 700 18px/1.2 var(--rp-display);
	color: #00664f;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Register and Call inside the mobile menu panel ---------- */
.rp-shell .rp-menu-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 20px 5% 28px;
}

.rp-shell .rp-menu-cta[hidden] { display: none; }
.rp-shell .rp-menu-cta .rp-btn { justify-content: center; min-height: 48px; font-size: 16px !important; }
.rp-shell .rp-menu-cta__call { justify-content: center; color: #fff; }

@media (max-width: 1023px) {
	.rp-shell .rp-cta-band { margin: 36px 16px 160px; padding: 28px 20px; }
	.rp-shell .rp-cta-band__title { font-size: 24px; }
}

/* ---------- Footer: centred, and readable ---------- */
/* White on the lime band was 2.4:1. Dark green-black on lime is 7.6:1 and keeps the photo's grass blending in. */
.rp-shell footer#colophon .site-info,
.rp-shell footer#colophon .site-info p,
.rp-shell footer#colophon .site-info a,
.rp-shell footer#colophon .footer-nav ul li a,
.rp-shell footer#colophon .footer-socials a.social-icon {
	color: #14261b;
	text-shadow: none;
}

.rp-shell footer#colophon .footer-socials a.social-icon i {
	border-color: #14261b;
}

.rp-shell footer#colophon .site-info a:hover,
.rp-shell footer#colophon .footer-nav ul li a:hover,
.rp-shell footer#colophon .footer-socials a.social-icon:hover,
.rp-shell footer#colophon .footer-socials a.social-icon i:hover {
	color: #14261b;
	border-color: #14261b;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The theme colours the current page's footer link blue with !important (1.6:1 on lime): underline it instead. */
.rp-shell footer#colophon .footer-nav ul#menu-main-menu-2 .current-menu-item.current_page_item a {
	color: #14261b !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The menu row: links centred, the three icons centred under them, as one group. */
.rp-shell footer#colophon .footer-menu {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	max-width: none;
	padding: 56px 24px 52px;
}

.rp-shell footer#colophon .footer-nav ul {
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 30px;
	width: auto;
	max-width: 100%;
	margin: 0;
}

.rp-shell footer#colophon .footer-socials {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.rp-shell footer#colophon .footer-socials > * + * { margin-left: 0; }

/* Bottom bar: centred; the green is darkened so its white text is 5.3:1 (was 4.3:1). */
.rp-shell .site-bottom-footer {
	background-color: var(--rp-green);
}

.rp-shell .site-bottom-footer .container {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 28px;
	text-align: center;
}

@media (max-width: 1023px) {
	/* keep the footer's last line clear of the fixed back-to-top button */
	.rp-shell .site-bottom-footer .container { flex-direction: column; gap: 4px; padding: 0 56px; box-sizing: border-box; }
}

/* ---------- Below 1024px: no sidebar (the theme hides it); logo row with the Responsive Menu button ---------- */
@media (max-width: 1160px) {
	.rp-shell .rp-header__tagline { display: none; }
}

@media (max-width: 1023px) {
	.rp-shell header#masthead.rp-header {
		background: #fff;
		border-bottom: 1px solid #dbe9dd;
	}

	.rp-shell .rp-header__row {
		min-height: 64px;
		gap: 12px;
		/* room for the Responsive Menu button, which is fixed at the right edge */
		padding: 0 calc(3% + 45px + 12px) 0 16px;
	}

	.rp-shell .rp-brand {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: none;
		text-decoration: none;
	}

	.rp-shell .rp-brand__castle { width: auto; height: 46px; }
	.rp-shell .rp-brand__name { width: auto; height: 24px; }

	.rp-shell .rp-header__user,
	.rp-shell .rp-header__social,
	.rp-shell .rp-phones,
	.rp-shell .rp-header__contact .rp-btn { display: none; }

	.rp-shell .rp-call {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		border-radius: 999px;
		background: var(--rp-sun);
		font: 700 15px/1 var(--rp-display);
		color: var(--rp-ink);
		text-decoration: none;
	}

	.rp-shell .rp-phonestrip {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 9px 16px;
		background: var(--rp-green);
	}

	.rp-shell .rp-phonestrip a {
		font: 700 16px/1.2 var(--rp-display);
		letter-spacing: 0.02em;
		color: #fff;
		text-decoration: none;
	}

	/* Sit the menu button inside the 64px header row instead of floating below it. The Responsive Menu
	   plugin positions it by id (menu 335), so the id is needed to win. */
	body.rp-shell #rmp_menu_trigger-335 { top: 9px; box-shadow: none; }

	.rp-shell .rp-frame { display: block; }
	.rp-shell .rp-col { border-left: 0; }

	.rp-shell .rp-pagehead__row { gap: 16px; padding: 18px 16px 4px; }
	.rp-shell .rp-pagehead__title { font-size: 30px; }
	.rp-shell .rp-pagehead__sub { font-size: 17px; margin-top: 8px; }
	.rp-shell .rp-arch { width: 84px; height: 92px; margin: 6px 8px 6px 0; }
	.rp-shell .rp-arch::after { inset: -6px; border-width: 2px; }

	.rp-shell section.banner-section .banner-contents { margin-top: 0; }
}

/* WordPress admin bar: 46px tall from 782px down. At 600px and below WordPress lets it scroll away, but the
   Responsive Menu button keeps its admin-bar offset, so pin the bar to keep header and button together
   (logged-in users only). */
@media (max-width: 782px) {
	body.rp-shell.admin-bar { --rp-adminbar: 46px; }
}

@media (max-width: 600px) {
	.rp-shell.admin-bar #wpadminbar { position: fixed; }
}

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

/* ---------- Open spots ("Only 3 spots left"), count set in wp-admin > Open spots ---------- */
.rp-shell .rp-spots-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 700 15px/1.25 var(--rp-body);
	color: var(--rp-ink);
}

.rp-shell .rp-spots-note__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border: 2px solid var(--rp-ink);
	border-radius: 50%;
	background: var(--rp-sun);
}

/* Desktop strip: beside the Register button, in two short lines. */
.rp-shell .rp-header__reg {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
}

.rp-shell .rp-spots-note--strip {
	max-width: 11em;
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
}

.rp-shell .rp-spots-note--strip .rp-spots-note__dot { border-color: #fff; }

/* Mobile menu panel (dark): under Register. */
.rp-shell .rp-spots-note--menu { justify-content: center; color: #fff; }
.rp-shell .rp-spots-note--menu .rp-spots-note__dot { border-color: #fff; }

/* Programs: under each block's Register / Call row. */
.rp-shell .rp-spots-note--program { margin-top: 14px; }

/* Phones: a slim bar under the phone numbers. */
.rp-shell .rp-spots-bar { display: none; }

/* Home, under the banner. */
.rp-shell .rp-spots {
	padding: 32px 32px 8px;
}

.rp-shell .rp-spots__inner {
	display: flex;
	align-items: center;
	gap: 20px 32px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 22px 32px;
	border: 2px solid var(--rp-ink);
	border-radius: 22px;
	background: #fff6e6;
	box-shadow: 0 4px 0 var(--rp-ink);
}

/* The number in a sun, ringed like the page-heading arch. */
.rp-shell .rp-spots__count {
	flex: none;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0;
	border: 2px solid var(--rp-ink);
	border-radius: 50%;
	background: var(--rp-sun);
	outline: 2px dashed var(--rp-green);
	outline-offset: 5px;
	font: 700 48px/1 var(--rp-display);
	color: var(--rp-ink);
}

.rp-shell .rp-spots__text { flex: 1; min-width: 0; }

.rp-shell .rp-spots__eyebrow {
	margin: 0 0 4px;
	font: 700 14px/1.2 var(--rp-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #00664f;
}

.rp-shell .rp-spots__title {
	margin: 0;
	font: 700 30px/1.15 var(--rp-display);
	color: var(--rp-ink);
}

.rp-shell .rp-spots__ages {
	margin: 6px 0 0;
	font: 400 18px/1.35 var(--rp-body);
	color: var(--rp-ink);
}

.rp-shell .rp-spots__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.rp-shell .rp-spots__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 700 17px/1.2 var(--rp-display);
	color: #00664f;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 1023px) {
	/* the strip's Register button is hidden here, so its note goes too */
	.rp-shell .rp-header__reg { display: none; }

	.rp-shell .rp-spots-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 9px 16px;
		background: #fff6e6;
		border-bottom: 2px solid var(--rp-ink);
		font: 400 15px/1.3 var(--rp-body);
		color: var(--rp-ink);
		text-align: center;
		text-decoration: none;
	}

	.rp-shell .rp-spots-bar strong { font-weight: 700; }

	/* Home has the full card just under the banner. */
	.rp-shell.home .rp-spots-bar { display: none; }

	.rp-shell .rp-spots-bar__go {
		font: 700 15px/1.3 var(--rp-display);
		color: #00664f;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.rp-shell .rp-spots { padding: 24px 16px 4px; }
	.rp-shell .rp-spots__inner { flex-wrap: wrap; padding: 20px; gap: 16px 20px; }
	.rp-shell .rp-spots__count { width: 68px; height: 68px; font-size: 38px; }
	.rp-shell .rp-spots__title { font-size: 24px; }
	.rp-shell .rp-spots__ages { font-size: 17px; }
	.rp-shell .rp-spots__actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; width: 100%; }
}