/* =========================================================
   Pedalution Event Pages – front end
   Wide (≥1100px): left | main | right, sidebars sticky
   Tablet (782–1099px): left | main, right sidebar slides out
   Phone (<782px): one column, both sidebars slide out,
   bottom bar with Book Now / Contents / Menu
   ========================================================= */

:root {
	--pep-orange: #ed8b00;
	--pep-panel: #6b6b6b;
	/* Widths (overridden from Events → Page Layout Settings) */
	--pep-max: 1540px;
	--pep-left: 240px;
	--pep-right: 240px;
	--pep-gap: 30px;
	--pep-top: calc(2rem + var(--wp-admin--admin-bar--height, 0px));
}

/* ---------- Frame ---------- */

.entry-content > .pep-page,
.pep-page {
	display: grid;
	grid-template-columns: var(--pep-left) minmax(0, 1fr) var(--pep-right);
	gap: var(--pep-gap);
	align-items: start;
	/* Break out of the theme's content width (the frame sits inside EM's
	   container) and centre on the window */
	width: min(var(--pep-max), calc(100vw - 40px)) !important;
	max-width: none !important;
	margin-left: calc(50% - min(var(--pep-max), calc(100vw - 40px)) / 2) !important;
	margin-right: 0 !important;
}

.pep-area--left  { grid-column: 1; grid-row: 1; align-self: stretch; }
.pep-area--main  { grid-column: 2; grid-row: 1; min-width: 0; }
.pep-area--right { grid-column: 3; grid-row: 1; align-self: stretch; }

/* Twenty Twenty narrows children of groups and the content column; not inside the frame */
.pep-page .pep-area > *,
.pep-page [class*="__inner-container"] > *:not(.alignleft):not(.alignright) {
	max-width: none !important;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}
.pep-page .pep-area--main > * + * { margin-top: 0; }

.pep-sticky {
	position: sticky;
	top: var(--pep-top);
	max-height: calc(100vh - var(--pep-top) - 2rem);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 2rem;
	border-radius: 10px;
	background: var(--pep-panel);
	color: #fff;
	font-size: 1.7rem;
	scrollbar-width: thin;
}
.pep-sticky > * { margin-top: 0 !important; margin-bottom: 1.6rem !important; }
.pep-sticky > *:last-child { margin-bottom: 0 !important; }
.pep-sticky a { color: #fff; }
.pep-sticky a:hover,
.pep-sticky a:focus { color: var(--pep-orange); }

.pep-drawer-close { display: none; }

/* ---------- Sections in the main column ---------- */

.pep-page .wp-block-group.is-style-pep-section {
	box-sizing: border-box;
	margin: 0 0 var(--pep-gap);
	padding: 3rem;
	border-radius: 12px;
	background-color: #fff;
	color: #000;
}
.pep-page .is-style-pep-section > .wp-block-group__inner-container { margin: 0; }
.pep-page .is-style-pep-section > :first-child,
.pep-page .is-style-pep-section > .wp-block-group__inner-container > :first-child { margin-top: 0 !important; }
.pep-page .is-style-pep-section > :last-child,
.pep-page .is-style-pep-section > .wp-block-group__inner-container > :last-child { margin-bottom: 0 !important; }

.pep-page .is-style-pep-banner {
	box-sizing: border-box;
	margin: 0 0 2rem !important;
	padding: 1rem 2rem !important;
	border-radius: 10px;
	background: #000;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.pep-page .is-style-pep-banner p { margin: 0; }
.pep-page .is-style-pep-banner a { color: var(--pep-orange); }

/* Headings & text: from Page Layout Settings → Headings & text (CSS variables set on .pep-page).
   Prefixed with .pep-page so they beat Twenty Twenty's .entry-content h2/p/li rules, which load
   later; anything set on a block in the layout editor (inline styles) still wins. */
.pep-area--main :is(h2, h3, h4, h5, h6) { scroll-margin-top: var(--pep-top); }
.pep-page :is(.pep-area--main, .pep-area--booking) h2 { margin: var(--pep-h2-above) 0 var(--pep-h2-below); font-size: var(--pep-h2-size); font-weight: var(--pep-h2-weight); line-height: var(--pep-h2-lh); letter-spacing: var(--pep-h2-ls); text-transform: var(--pep-h2-case); color: var(--pep-h2-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h3 { margin: var(--pep-h3-above) 0 var(--pep-h3-below); font-size: var(--pep-h3-size); font-weight: var(--pep-h3-weight); line-height: var(--pep-h3-lh); letter-spacing: var(--pep-h3-ls); text-transform: var(--pep-h3-case); color: var(--pep-h3-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h4 { margin: var(--pep-h4-above) 0 var(--pep-h4-below); font-size: var(--pep-h4-size); font-weight: var(--pep-h4-weight); line-height: var(--pep-h4-lh); letter-spacing: var(--pep-h4-ls); text-transform: var(--pep-h4-case); color: var(--pep-h4-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h5 { margin: var(--pep-h5-above) 0 var(--pep-h5-below); font-size: var(--pep-h5-size); font-weight: var(--pep-h5-weight); line-height: var(--pep-h5-lh); letter-spacing: var(--pep-h5-ls); text-transform: var(--pep-h5-case); color: var(--pep-h5-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h6 { margin: var(--pep-h6-above) 0 var(--pep-h6-below); font-size: var(--pep-h6-size); font-weight: var(--pep-h6-weight); line-height: var(--pep-h6-lh); letter-spacing: var(--pep-h6-ls); text-transform: var(--pep-h6-case); color: var(--pep-h6-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) p { margin: var(--pep-p-above) 0 var(--pep-p-below); font-size: var(--pep-p-size); font-weight: var(--pep-p-weight); line-height: var(--pep-p-lh); letter-spacing: var(--pep-p-ls); text-transform: var(--pep-p-case); }
.pep-page :is(.pep-area--main, .pep-area--booking) :is(ul, ol) { margin-top: 0; margin-bottom: var(--pep-list-below); font-size: var(--pep-list-size); font-weight: var(--pep-list-weight); line-height: var(--pep-list-lh); letter-spacing: var(--pep-list-ls); text-transform: var(--pep-list-case); }
.pep-page :is(.pep-area--main, .pep-area--booking) li { margin-top: var(--pep-list-above); margin-bottom: 0; font-size: inherit; line-height: inherit; }
.pep-page :is(.pep-area--main, .pep-area--booking) li > :is(ul, ol) { margin-bottom: 0; }

/* ---------- Panels in the old tab colours ----------
   Panel – orange: orange border, light see-through background (old Overview tab)
   Panel – white:  white border, dark see-through background (old Reviews tab)
   Panel – black:  black border, orange see-through background (old Booking/Details tabs)
   The panel's first heading becomes a full-width header strip in the border colour. */

/* No !important on these: anything set on the block in the layout editor
   (border, padding, colours…) is applied inline and wins. */
.pep-page .wp-block-group.is-style-pep-orange,
.pep-page .wp-block-group.is-style-pep-white,
.pep-page .wp-block-group.is-style-pep-black {
	box-sizing: border-box;
	margin: 0 0 var(--pep-gap);
	padding: 0 2.5rem 2.5rem;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	overflow: hidden;
}
.pep-page .wp-block-group.is-style-pep-orange { border-color: var(--pep-orange); background-color: rgba(255, 255, 255, .4); color: #000; }
.pep-page .wp-block-group.is-style-pep-white  { border-color: #fff; background-color: rgba(0, 0, 0, .4); color: #fff; }
.pep-page .wp-block-group.is-style-pep-black  { border-color: #000; background-color: rgba(237, 139, 0, .4); color: #000; }
.pep-page .is-style-pep-white a { color: var(--pep-orange); }

.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > h2:first-child,
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > h2:first-child {
	margin: 0 -2.5rem var(--pep-strip-below);
	padding: 1.2rem 2.5rem;
	font-size: var(--pep-strip-size);
	font-weight: var(--pep-strip-weight);
	line-height: var(--pep-strip-lh);
	/* The strip spans the panel's default side padding; if you change a panel's
	   side padding in the editor, set the heading's own colours/spacing to suit. */
	letter-spacing: var(--pep-strip-ls);
	text-transform: var(--pep-strip-case);
}
.pep-page .is-style-pep-orange > h2:first-child,
.pep-page .is-style-pep-orange > .wp-block-group__inner-container > h2:first-child { background: var(--pep-orange); color: var(--pep-strip-color, #000); }
.pep-page .is-style-pep-white > h2:first-child,
.pep-page .is-style-pep-white > .wp-block-group__inner-container > h2:first-child { background: #fff; color: var(--pep-strip-color, var(--pep-orange)); }
.pep-page .is-style-pep-black > h2:first-child,
.pep-page .is-style-pep-black > .wp-block-group__inner-container > h2:first-child { background: #000; color: var(--pep-strip-color, #fff); }

/* A panel with no heading at the top still gets its top padding */
/* (Classic themes wrap the panel's contents in an extra .wp-block-group__inner-container
   div, which the editor doesn't have; it must not get the spacing itself.) */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container { margin: 0; }
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > :first-child:not(h2):not(.wp-block-group__inner-container),
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > :first-child:not(h2) { margin-top: 2.5rem; }
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > :last-child:not(.wp-block-group__inner-container),
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* Summary box: white border, no fill (the WHEN/WHERE | metrics | BRIEF box) */
.pep-page .wp-block-group.is-style-pep-summary {
	box-sizing: border-box;
	margin: 0 0 2.5rem;
	padding: 2rem;
	border-width: 5px;
	border-style: solid;
	border-color: #fff;
	border-radius: 10px;
}
.pep-page .is-style-pep-summary .wp-block-columns { gap: 2em; margin-top: 0; margin-bottom: 0; }
.pep-page .is-style-pep-summary .wp-block-column > :first-child { margin-top: 0; }
.pep-page .is-style-pep-summary .wp-block-column > :last-child { margin-bottom: 0; }
/* Tidy spacing: groups inside the box add no space of their own (the theme gives them 3rem), so
   each section is spaced by its heading's "above" from Page Layout Settings. Alignment is left
   to the blocks (paragraph/heading alignment, or the pep-centre class). */
/* (Twenty Twenty's ".wp-block-group:not(.alignwide):not(.alignfull)" is as specific as a plain
   rule and loads later, so this one is made a step stronger.) */
.pep-page .wp-block-group.is-style-pep-summary .wp-block-group { margin-top: 0; margin-bottom: 0; }

/* pep-centre (Additional CSS class on any block or group): everything inside centred, including
   Site Reviews stars and Row/Stack contents */
.pep-page .pep-centre,
.pep-page .pep-centre :is(p, h2, h3, h4, h5, h6, li, div) { text-align: center; }
.pep-page .pep-centre :is(.glsr-summary, .glsr-summary-stars, .glsr-star-rating),
.pep-page .pep-centre .is-layout-flex { justify-content: center; }

/* Empty paragraphs (left by shortcodes and placeholders) take no space */
.pep-page p:empty { display: none; }

/* Headings inside panels */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) h3 {
	padding-bottom: .6rem;
	border-bottom: 3px solid currentColor;
}

@media (max-width: 781px) {
	.pep-page .wp-block-group.is-style-pep-orange,
	.pep-page .wp-block-group.is-style-pep-white,
	.pep-page .wp-block-group.is-style-pep-black { padding: 0 1.6rem 1.6rem; }
	.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > h2:first-child,
	.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > h2:first-child { margin-left: -1.6rem; margin-right: -1.6rem; padding: 1rem 1.6rem; font-size: var(--pep-strip-size-m); }
	/* Stacked columns: the same gap as above a heading */
	.pep-page .is-style-pep-summary .wp-block-columns { row-gap: var(--pep-h3-above, 1.5rem); }
}

/* "In Contents only" headings: not shown, but still a target for the Contents links */
.pep-page :is(h1, h2, h3, h4, h5, h6).pep-toc-only {
	display: block !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: none !important;
}
/* A panel whose header strip is hidden still gets its top padding */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .pep-toc-only:first-child + *,
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > .pep-toc-only:first-child + * { margin-top: 2.5rem !important; }

/* ---------- Book Now ---------- */

.pep-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1.4rem 2rem;
	border: 0;
	border-radius: 100px;
	background: var(--pep-orange);
	color: #000 !important;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
}
.pep-btn:hover,
.pep-btn:focus { background: #000; color: var(--pep-orange) !important; text-decoration: none; }
.pep-btn--alt { background: #000; color: var(--pep-orange) !important; }
.pep-btn--alt:hover,
.pep-btn--alt:focus { background: var(--pep-orange); color: #000 !important; }
.pep-btn--done { background: #fff; }
.pep-btn.is-disabled { background: #d6d6d6; color: #444 !important; cursor: default; }

/* ---------- Contents ---------- */

.pep-toc__title { margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pep-toc__list { margin: 0; padding: 0; list-style: none; }
.pep-toc__list li { margin: 0; }
.pep-toc__list a {
	display: block;
	padding: .6rem 0 .6rem 1.2rem;
	border-left: 3px solid transparent;
	text-decoration: none;
	line-height: 1.3;
}
.pep-toc__list .is-h3 a { padding-left: 2.4rem; font-size: .9em; }
.pep-toc__list a.is-active { border-left-color: var(--pep-orange); color: var(--pep-orange); }
.pep-toc[data-empty] { display: none; }

/* ---------- Menu ---------- */

.pep-menu__title { margin: 0 0 1rem; font-weight: 700; }
.pep-menu__list,
.pep-menu__list .sub-menu { margin: 0; padding: 0; list-style: none; }
.pep-menu__list li { position: relative; margin: 0; }
.pep-menu__list a { display: block; padding: .5rem 3rem .5rem 0; }
.pep-menu__list .sub-menu { display: none; padding-left: 1.4rem; }
.pep-menu__list li.is-open > .sub-menu { display: block; }
.pep-menu__toggle {
	position: absolute;
	top: .2rem;
	right: 0;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	transition: transform .15s;
}
.pep-menu__list li.is-open > .pep-menu__toggle { transform: rotate(180deg); }

/* ---------- Booking pop-up ---------- */

/* Basket mode: second button ("keep browsing") under EM's submit button, and the note after adding */
.pep-modal .pep-mb-more {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 1.4rem 2rem;
	border: 2px solid var(--pep-bf-btn-bg, #000);
	border-radius: 0;
	background: transparent;
	color: var(--pep-bf-btn-bg, #000);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}
.pep-modal .pep-mb-more:hover,
.pep-modal .pep-mb-more:focus { background: var(--pep-bf-btn-bg, #000); color: var(--pep-bf-btn-fg, #fff); }
.pep-modal .pep-mb-more[disabled] { opacity: .5; cursor: default; }
.pep-modal .pep-mb-more.hidden { display: none; }
.pep-toast {
	position: fixed;
	left: 50%;
	bottom: 3rem;
	z-index: 100001;
	transform: translateX(-50%);
	padding: 1.2rem 2.4rem;
	border-radius: 100px;
	background: #000;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
	transition: opacity .6s;
}
.pep-toast.is-gone { opacity: 0; }
@media (max-width: 781px) { .pep-toast { bottom: 8rem; } }

.pep-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, .65);
}
.pep-modal[hidden] { display: none; }
/* A pop-up placed straight in a page's text (e.g. the login or contact pop-up on an ordinary
   page) would otherwise pick up the theme's width and margins for text blocks and only cover
   the middle of the screen – clicks beside it then didn't close it. */
.pep-modal.pep-modal { width: auto !important; max-width: none !important; margin: 0 !important; }
/* The pop-up's last panel never leaves a strip of white under it (page panel spacing). */
.pep-modal .pep-modal__body > :last-child:not(#pep-x) { margin-bottom: 0 !important; }
.pep-modal__box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 90rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background: #fff;
	color: #000;
	font-size: 1.7rem;
}
/* The close button sits in the top right corner of the pop-up's contents and stays
   there while they scroll (a zero-height sticky bar, so it takes no space). */
.pep-modal__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	height: 0;
}
.pep-modal__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 2.6rem;
	line-height: 1;
}
.pep-modal__body { flex: 1 0 auto; padding: 5rem 3rem 3rem; }
.pep-modal__body > :first-child { margin-top: 0; }
.pep-modal__body > :last-child { margin-bottom: 0 !important; }
/* When the pop-up is one Group (e.g. Panel – black), the Group is the box: no white
   frame round it. The white behind only shows through see-through panel fills. */
.pep-modal__body:has(> .wp-block-group:only-child) { display: flex; flex-direction: column; padding: 0; }
.pep-modal__body > .wp-block-group:only-child { flex: 1 0 auto; margin: 0 !important; }

/* The close button fades back while the form scrolls on phones (front.js adds is-scrolling) */
.pep-modal__close { transition: opacity .3s; }
@media (max-width: 781px) {
	.pep-modal.is-scrolling .pep-modal__close { opacity: .25; }
}

/* Booking form (Events Manager) in the pop-up. Colours and spacing: Page Layout Settings → Booking form. */
.pep-modal .em-event-booking-form section { padding: 0; }
.pep-modal .em-booking-form-details { width: 100%; }
.pep-modal .em-tickets { border-width: 1px; }
.pep-modal :is(input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=month], input[type=time], input[type=datetime], input[type=datetime-local], input[type=week], input[type=number], input[type=search], input[type=tel], input[type=color], textarea) { padding: var(--pep-bf-pad, 8px); }
.pep-modal .em-booking-submit,
.pep-modal input[type=submit].em-booking-submit {
	width: 100%;
	border-color: var(--pep-bf-btn-bg, #000) !important;
	background: var(--pep-bf-btn-bg, #000) !important;
	color: var(--pep-bf-btn-fg, #fff) !important;
}
@media (max-width: 600px) {
	.pep-modal .em-booking-form label,
	.pep-modal form.em-booking-form :is(select, input[type=text], input[type=email], input[type=tel], input[type=number], textarea) { width: 100%; }
}
html.pep-lock,
html.pep-lock body { overflow: hidden; }

/* ---------- Gallery ---------- */

.pep-gallery__heading { margin-top: 0; }

/* ---------- Bottom bar and slide-out panels (hidden on wide screens) ---------- */

.pep-bar { display: none; }
/* The bar and scrim can land straight inside .entry-content (e.g. on EM's Events page), where
   Twenty Twenty gives every child a width of 100% - 4rem, auto side margins and a bottom margin –
   which would pull a fixed bar in from the edges and up off the bottom. */
.entry-content > .pep-bar,
.entry-content > .pep-scrim,
.pep-bar,
.pep-scrim { width: auto !important; max-width: none !important; margin: 0 !important; }
.pep-scrim {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(0, 0, 0, .5);
}
.pep-scrim[hidden] { display: none; }

@media (max-width: 1099px) {
	.entry-content > .pep-page,
	.pep-page { grid-template-columns: var(--pep-left) minmax(0, 1fr); gap: 24px; }

	.pep-area--right {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99995;
		width: min(86vw, 34rem);
		overflow-y: auto;
		background: var(--pep-panel);
		transform: translateX(105%);
		transition: transform .2s ease;
	}
	.pep-area--right.is-open { transform: none; box-shadow: -4px 0 20px rgba(0, 0, 0, .35); }
	.pep-area--right .pep-sticky { position: static; max-height: none; overflow: visible; padding-top: 6rem; border-radius: 0; }
	.pep-area--right .pep-drawer-close { display: flex; }

	/* A circle whatever the theme does to buttons (padding, min-height, letter spacing…) */
	.pep-drawer-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 1;
		box-sizing: border-box !important;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 4rem !important;
		height: 4rem !important;
		min-width: 4rem !important;
		min-height: 0 !important;
		max-width: 4rem !important;
		max-height: 4rem !important;
		aspect-ratio: 1;
		padding: 0 !important;
		margin: 0 !important;
		border-radius: 50%;
		background: #000;
		color: #fff;
		font-size: 2.6rem;
		line-height: 1;
		letter-spacing: 0 !important;
	}

}

@media (max-width: 781px) {
	.entry-content > .pep-page,
	.pep-page {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100vw - 2.4rem) !important;
		margin-left: calc(50% - 50vw + 1.2rem) !important;
	}
	.pep-area--main { grid-column: 1; }

	.pep-area--left {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99995;
		width: min(86vw, 34rem);
		overflow-y: auto;
		background: var(--pep-panel);
		transform: translateX(-105%);
		transition: transform .2s ease;
	}
	.pep-area--left.is-open { transform: none; box-shadow: 4px 0 20px rgba(0, 0, 0, .35); }
	.pep-area--left .pep-sticky { position: static; max-height: none; overflow: visible; padding-top: 6rem; border-radius: 0; }
	.pep-area--left .pep-drawer-close { display: flex; }
	/* The bottom bar already has Book Now */
	.pep-area--left .pep-book { display: none; }


	.pep-page .wp-block-group.is-style-pep-section { padding: 2rem; }
	.pep-page .is-style-pep-banner { font-size: 1.9rem; }
	.pep-page :is(.pep-area--main, .pep-area--booking) h2 { font-size: var(--pep-h2-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h3 { font-size: var(--pep-h3-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h4 { font-size: var(--pep-h4-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h5 { font-size: var(--pep-h5-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h6 { font-size: var(--pep-h6-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) p { font-size: var(--pep-p-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) :is(ul, ol) { font-size: var(--pep-list-size-m); }

	.pep-modal { padding: 0; }
	.pep-modal__box { max-width: none; max-height: none; height: 100%; border-radius: 0; }
	.pep-modal__body { padding: 6rem 2rem 4rem; }
	.pep-modal__body > .wp-block-group:only-child { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pep-area--left,
	.pep-area--right,
	.pep-menu__toggle { transition: none; }
}

/* =========================================================
   Carried over from the old single event format
   ========================================================= */

/* Summary box (WHEN/WHERE | Metrics | BRIEF) */
.pep-page #Metrics { width: 100%; margin: 0; }
.pep-page #Metrics td { border: hidden; text-align: center; vertical-align: middle; }
.pep-page .img-center { display: block; width: 35px; height: 35px; margin: 0 auto; }
.pep-page #Metrics .enquiry-link { display: inline-flex; align-items: center; gap: 10px; }
.pep-page #Metrics .enquiry-link img { flex-shrink: 0; width: 35px; height: 35px; }
.pep-page .ev-tags { margin-top: 1em; text-align: center; }
.pep-page .ev-tags .emecp-tagcards { margin: 0; }

/* Route map: full width of its white section */
.pep-page #over-map-box { position: relative; z-index: 2; display: block; margin: 0 -3rem 2rem; }
@media (max-width: 781px) { .pep-page #over-map-box { margin: 0 -2rem 2rem; } }

/* Coupon code (EM Coupons): Apply/Remove button, white with black border */
.emc-coupons .em-coupon-code-fields { align-items: stretch; }
.emc-coupons .em-coupon-code-button {
	background: #fff !important;
	color: #000 !important;
	border: 2px solid #000;
	border-radius: 0;
	padding: 0 2rem;
	margin: 0;
	height: auto;
	min-height: 0;
	opacity: 1;
}
.emc-coupons .em-coupon-code-button:hover,
.emc-coupons .em-coupon-code-button:focus { text-decoration: underline; }
.emc-coupons .em-coupon-code-button:disabled { opacity: .6; cursor: wait; }

/* Less space between the cover image and the page (Twenty Twenty pads the
   article top by 8rem), and the three columns start level */
body.pep-event .post-inner { padding-top: 4rem; }
body.pep-event .entry-content > .em,
body.pep-event .entry-content .em-view-container,
body.pep-event .entry-content .em-event-single { margin-top: 0 !important; padding-top: 0 !important; }
.pep-page { margin-top: 0 !important; }
.pep-page .pep-area--main > * { margin-top: 0 !important; }
.pep-page .pep-area > .pep-sticky > :first-child { margin-top: 0 !important; }

/* Twenty Twenty sets overflow:hidden on #site-content, which stops position:sticky
   working. clip still hides sideways overflow but leaves sticky alone. */
body.pep-event #site-content { overflow: visible !important; overflow-x: clip !important; }

/* ---------- Venue pages ---------- */

/* "Next event here" box in the left sidebar */
.pep-next { margin: 0 0 2rem; }
.pep-next p { margin: 0 0 .6rem; }
.pep-next__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.4rem; }
.pep-next__name a { color: inherit; font-weight: 700; }
.pep-next__when { font-size: 1.5rem; opacity: .85; }
.pep-next .pep-btn { margin-top: .8rem; }
.pep-next__none { font-size: 1.5rem; opacity: .85; }

/* Venue map: framed like the route map */
.pep-venue-map { margin: 0 0 var(--pep-gap); border: 5px solid #fff; border-radius: 10px; overflow: hidden; background: #fff; }
.pep-venue-map .leaflet-container { margin: 0; }

.pep-map-key { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: .8rem 1.2rem; list-style: none; background: #fff; color: #000; font-size: 1.4rem; }
.pep-map-key li { margin: 0; display: flex; align-items: center; gap: .6rem; }
.pep-map-key span { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; }

/* ---------- Category and tag pages ---------- */

.pep-subcats { margin-top: 2rem; }
.pep-subcats__title { margin: 0 0 .8rem; font-weight: 700; }
.pep-subcats ul { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pep-subcats li { margin: 0; }
/* Colours from the block's settings (default white with black border and text; orange on hover) */
.pep-page .pep-subcats a { display: inline-block; padding: .4rem 1.2rem; border: 3px solid var(--pep-sc-fg-border, var(--pep-sc-fg, #000)); border-radius: 100px; background: var(--pep-sc-bg, #fff); color: var(--pep-sc-fg, #000) !important; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
/* Multicolour categories (tricolour, rainbow): gradient border, as on the category cards */
.pep-page .pep-subcats a.is-multi { border-color: transparent; background: linear-gradient(var(--pep-sc-bg, #fff), var(--pep-sc-bg, #fff)) padding-box, var(--pep-sc-multi) border-box; }
.pep-page .pep-subcats a.is-multi:hover, .pep-page .pep-subcats a.is-multi:focus { border-color: transparent; background: linear-gradient(var(--pep-sc-hoverbg, #ed8b00), var(--pep-sc-hoverbg, #ed8b00)) padding-box, var(--pep-sc-multi) border-box; }
.pep-page .pep-subcats a:hover, .pep-page .pep-subcats a:focus { background: var(--pep-sc-hoverbg, #ed8b00); border-color: var(--pep-sc-hoverbg, #ed8b00); color: var(--pep-sc-hoverfg, #000) !important; }

/* Fold-down sections (Details block), e.g. past events */
.pep-page .wp-block-details > summary { cursor: pointer; padding: .8rem 0; font-weight: 700; }
.pep-page .wp-block-details[open] > summary { margin-bottom: 1.5rem; }

/* AddToAny's own buttons under the content: the layouts have them in the right sidebar
   (this stylesheet only loads on pages using a layout) */
.addtoany_content_bottom, .addtoany_content_top { display: none !important; }

.pep-parent-cat { margin: 0 0 2rem; }

/* ---------- Bucket and checkout pages ---------- */

/* Bucket: "Proceed to checkout" (black, like the pop-up's checkout button) above
   "Empty bucket" (outline, like "keep browsing"), stacked full width */
.pep-page .em-cart-actions form { display: flex; flex-direction: column-reverse; gap: 1rem; margin: 2rem 0 0; }
.pep-page .em-cart-actions button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.4rem 2rem;
	border: 2px solid var(--pep-bf-btn-bg, #000);
	border-radius: 0;
	background: var(--pep-bf-btn-bg, #000);
	color: var(--pep-bf-btn-fg, #fff);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}
.pep-page .em-cart-actions button.em-cart-actions-empty { background: transparent; color: var(--pep-bf-btn-bg, #000); }
.pep-page .em-cart-actions button.em-cart-actions-empty:hover,
.pep-page .em-cart-actions button.em-cart-actions-empty:focus { background: var(--pep-bf-btn-bg, #000); color: var(--pep-bf-btn-fg, #fff); }
.pep-page .em-cart-actions button:not(.em-cart-actions-empty):hover,
.pep-page .em-cart-actions button:not(.em-cart-actions-empty):focus { opacity: .85; }

/* Checkout: keep a gap between the card form and the button (Stripe's form changes height as it loads) */
.pep-page-content .em-booking-submit,
.pep-page-content input[type=submit].em-form-submit { margin-top: 2rem !important; }

/* Groups, columns etc. in page layouts: none of Twenty Twenty's own spacing (3rem above and below
   groups and columns, 3.2rem under each column, 2rem padding in coloured groups). Space comes
   from the layout instead – the heading/text settings, the Ped panel styles, and whatever is set
   on a block in the editor (Dimensions → margin/padding), which always wins. */
.pep-page :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text):not([style*="margin-top"]):not(.is-style-pep-banner) { margin-top: 0 !important; }
.pep-page :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text):not([style*="margin-bottom"]):not([class*="is-style-pep-"]) { margin-bottom: 0 !important; }
.pep-page .wp-block-column:not([style*="margin-bottom"]) { margin-bottom: 0 !important; }
.pep-page .wp-block-group.has-background:not([style*="padding"]):not([class*="is-style-pep-"]) { padding: 0; }
/* Ped sections and panels keep their gap below (the theme's margin used to win over it) */
.pep-page .wp-block-group:is(.is-style-pep-section, .is-style-pep-orange, .is-style-pep-white, .is-style-pep-black):not([style*="margin-bottom"]) { margin-bottom: var(--pep-gap) !important; }
.pep-page .wp-block-group.is-style-pep-summary:not([style*="margin-bottom"]) { margin-bottom: 2.5rem !important; }

/* ---------- "Booked with us before?" login step ---------- */
.pep-login .pep-modal__box { max-width: 52rem; }
.pep-login__inner { text-align: center; }
.pep-login .wp-block-separator { margin: 2.4rem auto 1.6rem; border-color: currentColor; opacity: .4; }
.pep-login__title { margin: 0 0 .6rem; font-size: 2.6rem; }
.pep-login__intro { margin: 0 0 2rem; }
.pep-login__form { text-align: left; }
.pep-login__form .lwa { margin: 0 auto; max-width: 40rem; }
.pep-login__or { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 1.6rem; color: #6b6b6b; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; }
.pep-login__or::before,
.pep-login__or::after { content: ""; flex: 1; border-top: 1px solid #c3c4c7; }
.pep-login__skip { display: block; width: 100%; max-width: 40rem; margin: 0 auto; }
.pep-login__note { margin: 1.2rem auto 0; max-width: 40rem; font-size: 1.5rem; }
.pep-login .pep-modal__box { background: var(--pep-panel); color: #fff; }
.pep-login :is(.pep-login__title, .pep-login__intro, .pep-login__note) { color: #fff; }
.pep-login .pep-login__or { color: rgba(255, 255, 255, .75); }
.pep-login .pep-login__or::before,
.pep-login .pep-login__or::after { border-top-color: rgba(255, 255, 255, .4); }
/* Your Login With Ajax styling is made for the dark sidebar (white Log In button and text), so the box matches it */
.pep-login .pep-login__form a { color: inherit !important; }
.pep-login .pep-login__form a:hover,
.pep-login .pep-login__form a:focus { color: var(--pep-orange) !important; }

/* Room under the booking form: a gap between the last question and the buttons, and space below them */
.pep-modal form.em-booking-form { padding-bottom: 3rem; }
.pep-modal .em-booking-submit,
.pep-modal input[type=submit].em-booking-submit { margin-top: 2rem !important; }
.pep-page-content form.em-booking-form { padding-bottom: 2rem; }

/* Bucket and checkout summaries: Spaces and Price keep their width (no "Space s" / "£7.5 0") */
.pep-page .em-cart-table table { width: 100%; }
.pep-page .em-cart-table :is(.em-cart-title-spaces, .em-cart-table-spaces) { width: 7.5rem; min-width: 7.5rem; white-space: nowrap; text-align: center; }
.pep-page .em-cart-table :is(.em-cart-title-price, .em-cart-table-price),
.pep-page .em-cart-table tr > :last-child { width: 9rem; min-width: 9rem; white-space: nowrap; }
.pep-page .em-cart-table tr > :only-child { width: auto; min-width: 0; white-space: normal; }

/* EM notices (e.g. "Your booking payment has been cancelled" after Stripe's back arrow): white with a
   black edge (red for errors) instead of EM's green and red. (EM's own rules are
   ".em .em-notice.em-notice-success" with !important, so these are made more specific.) */
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice {
	margin: 0 0 2rem !important;
	padding: 1.4rem 1.8rem !important;
	border: 0 !important;
	border-left: 6px solid #000 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #000 !important;
	font-weight: 600;
	box-shadow: none !important;
}
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice p { margin: 0 !important; color: inherit !important; font-size: inherit; }
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice a { color: inherit !important; }
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice-error { border-left-color: #c00 !important; }


/* Ped Login button: Log in (opens the login pop-up) / Log out, with the bike-and-door icons */
.pep-login-wrap { margin: 0 0 2rem; }
.pep-login-btn { display: flex !important; align-items: center; justify-content: center; gap: 1rem; width: 100%; }
.pep-login-btn .pep-ico { flex: none; width: auto; height: 2.4rem; }
/* Opened from the Ped Login button there's nothing to carry on to, so no "continue without" button */
.pep-login[data-pep-via="button"] .pep-login__skip { display: none !important; }
/* Login pop-up blocks ticked for other openings (Show to → Opens from) */
.pep-login .pep-from-off { display: none !important; }

/* Ped Cart: title like Contents, a tight list of ride codes with the date underneath */
.pep-cart { margin: 0 0 2rem; }
.pep-cart[hidden], .pep-checkout-wrap[hidden] { display: none !important; }
.pep-cart__title { margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pep-cart__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.pep-cart__list li { margin: 0 0 .9rem !important; padding: 0 !important; line-height: 1.3; }
.pep-cart__list li::before { content: none !important; }
.pep-cart__list a { color: inherit; font-weight: 700; }
.pep-cart__when { display: block; font-size: .85em; opacity: .85; }
.pep-cart__empty { margin: 0; opacity: .85; }
/* Ped Checkout button */
.pep-checkout-wrap { margin: 0 0 2rem; }
.pep-checkout-btn { display: block !important; width: 100%; text-align: center; }

/* Ped Cart: "−" to remove a ride (right-aligned) and "Empty bucket", both orange */
.pep-cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pep-cart__remove { padding: 0 .2rem; border: 0; background: none; color: var(--pep-orange, #ed8b00) !important; cursor: pointer; font: inherit; font-size: 1.3em; font-weight: 700; line-height: 1; }
.pep-cart__remove:hover, .pep-cart__remove:focus-visible { color: #fff !important; background: none; }
.pep-cart.is-busy { opacity: .5; pointer-events: none; }
/* "Empty bucket" (.pep-btn--alt: black, orange words) and "Checkout" (.pep-btn--done: white – only on an
   event page whose ride isn't in the bucket yet), smaller, side by side, the same size, each on two lines */
.pep-cart__actions { display: flex; gap: .6rem; margin-top: .8rem; }
.pep-cart__actions .pep-btn { display: flex; flex: 1 1 0; align-items: center; justify-content: center; width: auto; min-width: 0; padding: .6rem 1rem; font-size: .9em; }

/* Ped Contact: "Organiser: Will Pomeroy ✉". The text wraps like any paragraph; the envelope sits
   beside it, centred, 2rem away, in a 35px-wide slot – the series logo's size – so the text edges
   line up with a logo row below. Text-sized on one line, the full 35px once the text wraps
   (front.js adds is-wrapped). The row sits by the line's text alignment – the block's Align
   setting, or whatever the column/your CSS gives it – and when that's left, the envelope goes
   before the name (front.js adds is-start). */
.pep-contact-line { margin: var(--pep-p-above, 5px) 0 0; }
.pep-contact-line__in { display: inline-flex; align-items: center; gap: 2rem; max-width: 100%; vertical-align: top; text-align: inherit; }
.pep-contact-line.is-start .pep-contact-ico { order: -1; width: auto; } /* flush with the left edge */
.pep-contact-line.has-text-align-left { text-align: left; }
.pep-contact-line.has-text-align-center { text-align: center; }
.pep-contact-line.has-text-align-right { text-align: right; }
.pep-contact-line__text { margin: 0 !important; text-align: inherit; }
.pep-page .pep-contact-btn {
	display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: none; white-space: normal;
	text-decoration: underline; text-underline-offset: .15em; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pep-page .pep-contact-btn:hover,
.pep-page .pep-contact-btn:focus-visible { text-decoration-thickness: 2px; background: none; color: inherit; }
.pep-page .pep-contact-btn:focus-visible { outline: 3px solid var(--pep-orange, #ed8b00); outline-offset: 2px; }
.pep-page .pep-contact-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 35px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.pep-contact-ico .pep-ico-mail { display: block; width: 1.4em; height: 1.4em; transition: width .15s, height .15s; }
.pep-contact-line.is-wrapped .pep-ico-mail { width: 35px; height: 35px; }
/* the pop-up: grey like the login pop-up */
.pep-contact .pep-modal__box { max-width: 46rem; background: var(--pep-panel, #6b6b6b); color: #fff; }
.pep-contact .pep-modal__body { padding: 4rem 3rem 3rem; text-align: center; }
.pep-contact__title { margin: 0 0 1rem; font-size: 2.4rem; font-weight: 700; text-transform: uppercase; }
.pep-contact__intro { margin: 0 0 2rem; }
.pep-contact__q { display: block; margin: 0 0 .8rem; font-weight: 700; }
.pep-contact__row { display: flex; gap: 1rem; justify-content: center; }
.pep-contact__row input { width: 7rem; text-align: center; font-size: 1.8rem; }
.pep-contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pep-contact__msg { min-height: 1.5em; margin: 1rem 0 0; color: #fff; font-weight: 600; }
.pep-contact__ok { margin: 0 0 2rem; color: #fff; font-weight: 600; }
.pep-contact__mark { font-weight: 900; font-size: 1.3em; line-height: 1; }
.pep-contact__mark.is-wrong { color: #e4002b; }
.pep-contact__mark.is-right { color: #2ecc40; }
.pep-contact__done .pep-btn { display: block; width: 100%; }
.pep-contact__write textarea { display: block; width: 100%; box-sizing: border-box; margin: 0 0 1.2rem; font-size: 1.7rem; text-align: left; resize: vertical; }
.pep-contact__write .pep-btn { display: block; width: 100%; }
.pep-contact__note { margin: 0 0 1.2rem; }

/* Rider board fields in the booking form – styled like the folding allergies section
   (Booking Form Outputs): ticks fold away under the choice; the message's tip sits above its title */
.pep-rb-box { display: block; margin: .25em 0 .75em; border: 1px solid rgba(0,0,0,.28); border-radius: 4px; overflow: hidden; }
.pep-rb-dd { margin: 0; border: 0; }
.pep-rb-box .pep-rb-msg { display: block; margin: 0; padding: .75em .9em .9em; border-top: 1px solid rgba(0,0,0,.28); }
.pep-rb-box .pep-rb-msg[hidden] { display: none; }
.pep-rb-box .pep-rb-msg textarea { width: 100%; box-sizing: border-box; }
.pep-rb-box .pep-rb-note { margin-top: 0; }
.pep-rb-dd > summary { list-style: none; display: flex; align-items: center; gap: .6em; padding: .65em .9em; cursor: pointer; font-weight: 600; background: rgba(0,0,0,.06); user-select: none; }
.pep-rb-dd > summary::-webkit-details-marker { display: none; }
.pep-rb-dd > summary::before { content: ""; flex: 0 0 auto; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.pep-rb-dd[open] > summary::before { transform: rotate(45deg); }
.pep-rb-dd > summary::after { content: "Show options"; margin-left: auto; font-weight: 400; font-size: .85em; opacity: .75; white-space: nowrap; }
.pep-rb-dd[open] > summary::after { content: "Hide"; }
.pep-rb-dd > summary:hover { background: rgba(0,0,0,.1); }
.pep-rb-dd > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.pep-rb-dd[open] > summary { border-bottom: 1px solid rgba(0,0,0,.28); }
.pep-rb-dd:not(.has-choice) > summary { font-weight: 400; }
.pep-rb-dd__list { display: block; margin: 0; padding: .6em .9em .8em; line-height: 2; }
.pep-rb-dd__list label { display: block; cursor: pointer; }
.pep-rb-dd__list input { margin-right: .4em; }
.pep-rb-note { margin: .25em 0 .6em; padding: .5em .75em; border-left: 3px solid currentColor; background: rgba(0,0,0,.04); font-size: .9em; line-height: 1.5; }

/* Pop-up contents on their way (PEP_Lazy) */
.pep-modal__wait { margin: 2rem 0; text-align: center; color: #666; }
.ped-count { font-variant-numeric: tabular-nums; }

/* ---------- Bottom bar (phones and tablets) ----------
   One row: Contents (list icon) left, Menu right, Book Now filling the space between. Bucket
   countdowns sit right of Book Now at the same size ("MS300 closes" / "4d 03h 29m"); two or more
   stack on one line each and Book Now narrows. With none, the same spot can hold a checkout button.
   On event pages the bar waits below the screen until the Summary box has gone (front.js). */
@media (max-width: 1099px) {
	.pep-bar {
		--pep-bar-h: 4.6rem;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99980;
		display: flex;
		align-items: stretch;
		gap: .8rem;
		padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
		background: #000;
		transition: transform .25s ease;
	}
	.pep-bar.is-away { transform: translateY(110%); }
	.pep-bar > * { margin: 0 !important; }
	.pep-bar__btn {
		order: 1;
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: .8rem;
		height: var(--pep-bar-h);
		box-sizing: border-box;
		padding: 0 1.1rem;
		border: 2px solid #fff;
		border-radius: 100px;
		background: transparent;
		color: #fff;
		font-size: 1.6rem;
		font-weight: 700;
		text-transform: none;
	}
	.pep-bar__btn svg { display: block; width: auto; height: 2.4rem; }
	.pep-bar__btn .pep-ico-login { height: 2.8rem; }
	.pep-bar__btn--menu { order: 4; margin-left: auto !important; }
	.pep-bar__book { order: 2; display: flex; flex: 1 1 0; min-width: 0; }
	.pep-bar__counts { order: 3; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; gap: .2rem; min-width: 0; text-decoration: none; color: inherit; }
	.pep-bar__counts:empty { display: none; }
	/* Book Now (and the checkout button in the countdown spot): wording from Page Layout Settings,
	   big; a line break or wording too long for the space wraps, smaller, within the same height */
	:is(.pep-bar__book, .pep-bar__counts) .pep-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--pep-bar-h); box-sizing: border-box; padding: 0 1rem; overflow: hidden; font-size: 2rem; line-height: 1; letter-spacing: .02em; text-align: center; white-space: normal; }
	:is(.pep-bar__book, .pep-bar__counts) .pep-btn:has(br) { font-size: 1.5rem; line-height: 1.1; }
	/* One countdown: a pill the size of Book Now, two lines */
	.pep-bar__count { display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--pep-bar-h); box-sizing: border-box; padding: 0 1rem; border-radius: 999px; background: #fff; color: #b32d2e; font-size: 1.3rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }
	.pep-bar__count b { color: #000; }
	.pep-bar__what, .pep-bar__count .ped-count { display: block; }
	/* Two or more: one line each, stacked, at their full width; Book Now takes what's left (wrapping if it must) */
	.pep-bar:has(.pep-bar__count + .pep-bar__count) .pep-bar__counts { flex: 0 0 auto; }
	.pep-bar__count + .pep-bar__count, .pep-bar__count:has(+ .pep-bar__count) { display: block; height: auto; padding: .1rem .9rem; font-size: 1.2rem; }
	:is(.pep-bar__count + .pep-bar__count, .pep-bar__count:has(+ .pep-bar__count)) :is(.pep-bar__what, .ped-count) { display: inline; }
	body.pep-event, body:has(.pep-bar__count) { padding-bottom: 6rem; }
}
/* Tablets keep the left column on the page, so no Contents button until phone width */
@media (min-width: 782px) and (max-width: 1099px) { .pep-bar__btn[data-pep-drawer="left"] { display: none; } }
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) { .pep-bar { transition: none; } }