/* CPBookingCal guest wizard (§7.1/§12). All colours are the CSS custom
   properties set inline on .cpbc-wizard by the shortcode — no hard-coded hex
   below this line except transparent/inherit. */

[x-cloak] {
	display: none !important;
}

/* Fonts from Bookings -> Customize. A guest root carries the custom property
   only when the studio chose a font; otherwise nothing is set and the
   theme's own fonts show (its heading rules reach our h1-h3 as they are). */
[style*="--cpbc-font-body"] {
	font-family: var(--cpbc-font-body);
}

[style*="--cpbc-font-heading"] :is(h1, h2, h3) {
	font-family: var(--cpbc-font-heading);
}

.cpbc-wizard {
	/* The background lives on the rounded panel only — the outer wrapper is
	   transparent so the tint is clipped to the card in any theme layout. */
	background: transparent;
	padding: 12px 0;
	color: var(--cpbc-text);
	min-width: 0; /* allow shrinking inside flex/column blocks */
}

/* Themes style bare <button>/<input> aggressively (min-widths, padding,
   shadows) — inside narrow column blocks that inflates the day grid until it
   overflows the card. Reset the pieces layout depends on. */
.cpbc-wizard button {
	box-sizing: border-box;
	margin: 0;
	min-width: 0;
	min-height: 0;
	font-family: inherit;
	line-height: 1.2;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

/* The form is as wide as its calendar: seven days (--cpbc-day, the
   design's day size; 48px is Medium), the space between them, and the
   form's edges (its padding at most 28px each side, its 1px border). A form
   that needs more room for its own content says so with --cpbc-form-scale.
   Declared on the activity layout too, so its form column takes this width. */
.cpbc-activity-layout,
.cpbc-panel {
	--cpbc-form-w: calc((7 * var(--cpbc-day, 48px) + 6 * var(--cpbc-days-gap, 4px) + 58px) * var(--cpbc-form-scale, 1));
}

/* On a phone the form fills the screen, and the days share its width. */
@media (max-width: 599px) {
	.cpbc-panel {
		max-width: none;
	}
}

.cpbc-panel {
	background: var(--cpbc-bg);
	border: 1px solid color-mix(in srgb, var(--cpbc-accent) 25%, transparent);
	border-radius: calc(var(--cpbc-radius-card, 12px) * 1.5);
	padding: clamp(12px, 7%, 28px);
	max-width: var(--cpbc-form-w);
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden; /* clip anything (incl. bg) to the rounded rectangle */
}

.cpbc-h {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--cpbc-text);
}

.cpbc-alert {
	background: color-mix(in srgb, var(--cpbc-full) 8%, var(--cpbc-surface));
	color: var(--cpbc-full);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
	font-size: 15px;
}

/* --- Step 1: calendar --- */
.cpbc-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.cpbc-navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--cpbc-surface);
	border: 1px solid var(--cpbc-border);
	border-radius: var(--cpbc-radius-button, 8px);
	width: 40px;
	height: 40px;
	cursor: pointer;
	color: var(--cpbc-text);
}
.cpbc-navicon {
	display: block;
	width: 20px;
	height: 20px;
}

.cpbc-navbtn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* minmax(0, 1fr): a plain 1fr track cannot shrink below its content's
   intrinsic minimum, so seven of them blow out of narrow column blocks —
   minmax(0, …) lets the cells actually share whatever width exists.
   The days fill the form; the day size sets the form's width (above). */

.cpbc-dow {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	text-align: center;
	font-size: 12px;
	color: var(--cpbc-muted);
	margin-bottom: 4px;
}

.cpbc-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--cpbc-days-gap, 4px);
	background: var(--cpbc-days-ground, transparent);
	border: var(--cpbc-days-edge, 0);
	margin-bottom: 12px;
}

.cpbc-daybtn {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border-radius: var(--cpbc-radius-day, var(--cpbc-radius-button, 8px));
	border: 0;
	background: var(--cpbc-daycard);
	color: var(--cpbc-muted);
	font-size: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: default;
	overflow: hidden;
}

/* Out-of-month lead/tail cells look like ordinary days, just without a
   number (owner, 2026-08-24) — the base .cpbc-daybtn card carries the look.
   (The '' === '' selDate match that painted them as selected is guarded in
   the markup.) */
.cpbc-daybtn.is-blank {
	background: var(--cpbc-daycard);
}

.cpbc-daybtn.is-avail {
	background: var(--cpbc-available-bg);
	border: 1px solid var(--cpbc-available-border);
	color: var(--cpbc-text);
	cursor: pointer;
}

.cpbc-daybtn.is-sel {
	background: var(--cpbc-accent);
	color: var(--cpbc-accent-text);
}

/* Under the number: "Full", or how many of the day's starts are booked ("1/3"). */
.cpbc-daybtn em {
	font-style: normal;
	font-size: 9px;
	line-height: 1;
	color: inherit;
	opacity: 0.75;
}

.cpbc-daybtn.is-full em {
	color: var(--cpbc-full);
	opacity: 1;
}

/* --- Step 1: slots + summary --- */
.cpbc-slots {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.cpbc-slotbtn {
	background: var(--cpbc-surface);
	border: 1px solid var(--cpbc-border);
	border-radius: var(--cpbc-radius-button, 8px);
	padding: 10px 12px;
	text-align: left;
	cursor: pointer;
	color: var(--cpbc-text);
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.cpbc-slotbtn.is-sel {
	border-color: var(--cpbc-accent);
	box-shadow: inset 0 0 0 1px var(--cpbc-accent);
}

.cpbc-slotbtn:disabled {
	opacity: 0.5;
	cursor: default;
}

.cpbc-slotbtn span {
	color: var(--cpbc-muted);
	font-size: 13px;
}

/* Appointments (design §7.3): the chosen-member line above the calendar. */
.cpbc-who-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--cpbc-text);
}

.cpbc-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--cpbc-accent);
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}

.cpbc-linkbtn:focus-visible {
	outline: 2px solid var(--cpbc-accent);
	outline-offset: 2px;
}

.cpbc-summary {
	background: var(--cpbc-summary-bg);
	border-radius: var(--cpbc-radius-card, 12px);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 15px;
}

.cpbc-summary-date {
	font-weight: 600;
}

/* --- Step 2: form --- */
.cpbc-panel label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin: 12px 0 4px;
}

.cpbc-panel input,
.cpbc-panel select,
.cpbc-panel textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--cpbc-surface);
	border: 1px solid var(--cpbc-border);
	border-radius: var(--cpbc-radius-button, 8px);
	padding: 12px;
	font-size: 16px;
	font-weight: 400;
	color: var(--cpbc-text);
	margin-top: 4px;
	font-family: inherit;
}

/* A theme's own select height would cut the chosen text under our padding. */
.cpbc-panel select {
	height: auto;
	line-height: 1.4;
}

.cpbc-panel input:focus,
.cpbc-panel select:focus,
.cpbc-panel textarea:focus {
	outline: 2px solid var(--cpbc-accent);
	outline-offset: 0;
	border-color: var(--cpbc-accent);
}

.cpbc-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.cpbc-help {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--cpbc-muted);
	margin-top: 4px;
}

.cpbc-total {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--cpbc-border);
	margin-top: 16px;
	padding-top: 12px;
	font-size: 17px;
}

/* --- Buttons --- */
.cpbc-primary,
.cpbc-secondary {
	border-radius: var(--cpbc-radius-button, 8px);
	/* The design's lettering: as written, or capitals. */
	text-transform: var(--cpbc-button-case, none);
	letter-spacing: var(--cpbc-button-tracking, normal);
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	margin-top: 16px;
}

.cpbc-primary {
	background: var(--cpbc-accent);
	color: var(--cpbc-accent-text);
	border: 0;
}

.cpbc-primary:disabled {
	opacity: 0.5;
	cursor: default;
}

.cpbc-secondary {
	background: var(--cpbc-surface);
	border: 1px solid var(--cpbc-border);
	color: var(--cpbc-text);
}

.cpbc-btnrow {
	display: flex;
	gap: 8px;
}

.cpbc-btnrow .cpbc-primary,
.cpbc-btnrow .cpbc-secondary {
	width: auto;
	flex: 1;
}

/* --- single offering page (classic-theme bundled template) --- */
/* Self-contained: the template wraps this in the theme's get_header()/
   get_footer(), so it must constrain and centre itself rather than trust the
   theme's content container (a page-builder theme may give it none). */
.cpbc-single-offering {
	max-width: 1080px;
	margin: 0 auto;
	padding: 32px 16px;
}

.cpbc-single-offering .cpbc-single-title {
	margin: 0 0 20px;
}

.cpbc-single-offering .cpbc-single-image {
	margin: 0 0 24px;
}

.cpbc-single-offering .cpbc-single-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.cpbc-single-offering .cpbc-single-content {
	margin-bottom: 24px;
}

.cpbc-single-offering .post-navigation {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--cpbc-border, #e2dcd2);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

/* --- an activity page: the description and the booking form side by side,
   the form on the side its activity preset chooses; one above the other,
   the description first, where the page is narrower. --- */
.cpbc-activity-layout {
	container-type: inline-size;
}

.cpbc-activity-layout__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 40px;
}

.cpbc-activity-layout__text > :first-child {
	margin-top: 0;
}

.cpbc-activity-layout__image {
	margin: 0 0 20px;
}

.cpbc-activity-layout__image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* The Customize preview draws the image in both places: one is hidden. */
.cpbc-activity-layout[data-image="top"] .cpbc-activity-layout__image {
	display: none;
}

/* Under the description, the form fills the width. */
@container (max-width: 799px) {
	.cpbc-activity-layout .cpbc-panel {
		max-width: none;
	}
}

/* Beside it, the form's column is as wide as the form (the day size). */
@container (min-width: 800px) {
	.cpbc-activity-layout__in {
		grid-template-columns: minmax(0, 1fr) var(--cpbc-form-w);
		align-items: start;
	}

	.cpbc-activity-layout[data-side="left"] .cpbc-activity-layout__in {
		grid-template-columns: var(--cpbc-form-w) minmax(0, 1fr);
	}

	.cpbc-activity-layout[data-side="left"] .cpbc-activity-layout__form {
		order: -1;
	}
}

/* --- /events archive + [cpbc_events] cards (§21.4) --- */
.cpbc-events-archive-page {
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 16px;
}

.cpbc-events-archive-header h1 {
	font-size: 28px;
}

.cpbc-event-row {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0;
	border-bottom: 1px solid var(--cpbc-border, #e2dcd2);
}

.cpbc-event-row-body {
	flex: 1;
	min-width: 0;
}

.cpbc-event-row-when {
	font-weight: 600;
	color: var(--cpbc-muted, #6b6358);
	margin-bottom: 4px;
}

.cpbc-event-row-title {
	margin: 0 0 6px;
	font-size: 22px;
}

.cpbc-event-row-title a {
	text-decoration: none;
	color: var(--cpbc-text, #2e2a26);
}

.cpbc-event-row-status {
	color: var(--cpbc-available-border, #5fa86b);
	font-weight: 600;
	margin-bottom: 8px;
}

.cpbc-event-row-excerpt {
	color: var(--cpbc-muted, #6b6358);
	margin: 0 0 12px;
}

.cpbc-event-row-cta {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 10px 18px;
	border-radius: var(--cpbc-radius-button, 8px);
	background: var(--cpbc-accent, #c06a43);
	color: var(--cpbc-accent-text, #ffffff);
	font-weight: 600;
	text-decoration: none;
}

.cpbc-event-row-image {
	position: relative;
	flex: 0 0 320px;
	max-width: 40%;
	overflow: hidden;
	border-radius: var(--cpbc-radius-card, 12px);
}

/* The site's ribbons (Customize → Options → Ribbons) in their own colors. */
.cpbc-ev-ribbon[data-ribbon],
.cpbc-ev-entry-flag[data-ribbon] {
	background: var(--cpbc-ribbon);
	color: var(--cpbc-ribbon-text);
}

.cpbc-event-row-image img {
	width: 100%;
	height: auto;
	border-radius: var(--cpbc-radius-card, 12px);
	display: block;
}

/* §22.4 list view (reference: docs/References/TEC HotPots list view):
   month badges + date tiles on the --cpbc-ev-* accent tokens, which ride
   the same defaults ← global-settings colours layer as the wizard palette
   (the future colour-settings UI lands there). */

.cpbc-events-archive-header h1 {
	font-size: 34px;
	margin: 0 0 8px;
}

.cpbc-ev-month {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 36px 0 4px;
}

.cpbc-ev-month span {
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
}

.cpbc-ev-month::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--cpbc-border, #e2dcd2);
}

.cpbc-ev-tile {
	flex: 0 0 64px;
	text-align: center;
}

.cpbc-ev-tile-dow {
	display: block;
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 0;
}

.cpbc-ev-tile-day {
	display: block;
	background: var(--cpbc-surface, #ffffff);
	color: var(--cpbc-text, #2e2a26);
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-top: none;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	padding: 12px 0 10px;
}

.cpbc-event-row .cpbc-event-row-when {
	color: var(--cpbc-text, #2e2a26);
	font-weight: 400;
	font-size: 15px;
}

.cpbc-event-row-title {
	font-size: 26px;
}

.cpbc-event-row-location {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--cpbc-muted, #6b6358);
}

.cpbc-event-row-location strong {
	color: var(--cpbc-text, #2e2a26);
}

@media (max-width: 640px) {
	.cpbc-event-row {
		flex-direction: column-reverse;
	}
	.cpbc-event-row-image {
		flex-basis: auto;
		max-width: 100%;
	}
	.cpbc-ev-tile {
		display: none; /* the when-line carries the date on small screens */
	}
}

/* §22.4 month view (reference: docs/References/TEC HotPots month view):
   the toolbar (month nav + view switcher) and the grid — accent DOW row,
   day-number strips, thumbnail entries. The grid keeps a working minimum
   width and scrolls inside its own wrapper on small screens. */

.cpbc-ev-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.cpbc-ev-toolbar .cpbc-ev-viewtitle {
	margin: 0 0 0 6px;
	font-size: 34px;
}

.cpbc-ev-navbtn,
.cpbc-ev-today {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cpbc-surface, #ffffff);
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-radius: var(--cpbc-radius-button, 8px);
	color: var(--cpbc-text, #2e2a26);
	text-decoration: none;
}

.cpbc-ev-navbtn {
	width: 34px;
	height: 34px;
	font-size: 20px;
	line-height: 1;
}

.cpbc-ev-today {
	padding: 7px 14px;
	font-size: 14px;
}

.cpbc-ev-switcher {
	margin-left: auto;
	display: flex;
	gap: 4px;
}

.cpbc-ev-viewbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-radius: var(--cpbc-radius-button, 8px);
	font-size: 14px;
	color: var(--cpbc-muted, #6b6358);
	text-decoration: none;
}

.cpbc-ev-viewbtn.is-current {
	color: var(--cpbc-ev-accent, #7b3b3b);
	font-weight: 600;
}

.cpbc-ev-monthwrap {
	overflow-x: auto;
}

.cpbc-ev-monthgrid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	min-width: 640px;
	border-left: 1px solid var(--cpbc-border, #e2dcd2);
	border-top: 1px solid var(--cpbc-border, #e2dcd2);
}

.cpbc-ev-monthgrid .cpbc-ev-dow {
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--cpbc-border, #e2dcd2);
}

.cpbc-ev-cell {
	background: var(--cpbc-ev-cell, var(--cpbc-surface, #ffffff));
	border-right: 1px solid var(--cpbc-border, #e2dcd2);
	border-bottom: 1px solid var(--cpbc-border, #e2dcd2);
	min-height: 120px;
	min-width: 0;
}

/* The day number is Text on a light tint of the event dates color, so it reads
   whatever that color is (Text on Day cells is a checked pair); today takes the
   event dates pair itself. */
.cpbc-ev-cellnum {
	display: block;
	background: color-mix(in srgb, var(--cpbc-ev-accent, #7b3b3b) 16%, var(--cpbc-ev-cell, var(--cpbc-surface, #ffffff)));
	color: var(--cpbc-text, #2e2a26);
	font-size: 13px;
	font-weight: 600;
	padding: 4px 8px;
}

.cpbc-ev-cell.is-out .cpbc-ev-cellnum {
	background: color-mix(in srgb, var(--cpbc-ev-accent, #7b3b3b) 6%, var(--cpbc-ev-cell, var(--cpbc-surface, #ffffff)));
	color: var(--cpbc-muted, #6b6358);
}

.cpbc-ev-cell.is-today .cpbc-ev-cellnum {
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
}

.cpbc-ev-entry {
	padding: 8px 8px 10px;
	font-size: 13px;
}

.cpbc-ev-entry-img {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 6px;
}

.cpbc-ev-entry-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* Across the picture's top right corner: a band of one width, its words
   centered on the corner's diagonal (the card's sash, mirrored), so long
   words cut short instead of sliding the band off the corner. */
.cpbc-ev-ribbon {
	position: absolute;
	top: 26px;
	right: -42px;
	width: 172px;
	box-sizing: border-box;
	padding: 5px 30px;
	overflow: hidden;
	transform: rotate(45deg);
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 1;
}

/* A month cell's picture is small: a shorter band, closer to its corner. */
.cpbc-ev-entry-img .cpbc-ev-ribbon {
	top: 14px;
	right: -46px;
	width: 140px;
	padding: 3px 24px;
	font-size: 9px;
}

.cpbc-ev-entry-flag {
	display: inline-block;
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 2px 6px;
	margin-bottom: 4px;
}

.cpbc-ev-entry-time {
	color: var(--cpbc-muted, #6b6358);
	font-size: 12px;
	margin-bottom: 2px;
}

.cpbc-ev-entry-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.cpbc-ev-entry-title a {
	color: var(--cpbc-text, #2e2a26);
	text-decoration: none;
}

.cpbc-ev-entry-location {
	font-size: 12px;
	font-weight: 400;
	color: var(--cpbc-muted, #6b6358);
}

/* Custom fields (M3-S5): checkbox/radio rows read as one line. */
.cpbc-panel .cpbc-check {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 400;
}

.cpbc-panel .cpbc-check input {
	width: auto;
	display: inline-block;
	margin: 0;
}

/* ---- the cards on the list pages and the upcoming grid (Frontend\Cards) ----
 * The list carries the card design as data attributes; a list without them
 * (an older add-on's) draws as the Photo preset. Highlight falls back to
 * the Buttons pair. The list's width, not the window's, decides how many
 * cards fit a row. */
.cpbc-cards-root {
	container-type: inline-size;
}
.cpbc-kind-grid {
	--cpbc-cards-gap: 20px;
	--cpbc-cards-hl: var(--cpbc-highlight, var(--cpbc-accent, #a85530));
	--cpbc-cards-hl-text: var(--cpbc-highlight-text, var(--cpbc-accent-text, #fff));
	list-style: none;
	margin: 24px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--cpbc-cards-gap);
}
.cpbc-kind-grid[data-gap="none"] { --cpbc-cards-gap: 0px; }
.cpbc-kind-grid[data-gap="small"] { --cpbc-cards-gap: 10px; }
.cpbc-kind-grid[data-gap="large"] { --cpbc-cards-gap: 30px; }
.cpbc-kind-grid[data-gap="largest"] { --cpbc-cards-gap: 40px; }
.cpbc-kind-grid[data-per-row="1"] { grid-template-columns: minmax(0, 1fr); }
.cpbc-kind-grid[data-per-row="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpbc-kind-grid[data-per-row="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpbc-kind-grid[data-per-row="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Every card in the list as tall as the tallest one, so the rows match.
   Not with one card to a row: there it would only add gaps. */
.cpbc-kind-grid[data-layout="rows"]:not([data-per-row="1"]) { grid-auto-rows: 1fr; }
@container (max-width: 899px) {
	.cpbc-kind-grid[data-per-row="3"],
	.cpbc-kind-grid[data-per-row="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 599px) {
	.cpbc-kind-grid[data-per-row] { grid-template-columns: minmax(0, 1fr); }
	.cpbc-kind-grid[data-layout="rows"][data-per-row] { grid-auto-rows: auto; }
	/* Side by side on a phone: one row that swipes, the next card showing at the edge. */
	.cpbc-kind-grid[data-layout="rows"][data-phone="swipe"] {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}
	.cpbc-kind-grid[data-layout="rows"][data-phone="swipe"] > .cpbc-kind-cell {
		flex: 0 0 80%;
		scroll-snap-align: center;
	}
}
.cpbc-kind-cell {
	margin: 0;
	min-width: 0;
}
.cpbc-kind-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--cpbc-surface, #fff);
	border: 1px solid var(--cpbc-border, #e5e7eb);
	border-radius: var(--cpbc-radius-card, 12px);
	overflow: hidden;
}
.cpbc-kind-grid[data-frame="none"] .cpbc-kind-card { border-color: transparent; }
.cpbc-kind-grid[data-shadow="soft"] .cpbc-kind-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.cpbc-kind-grid[data-shadow="deep"] .cpbc-kind-card { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); }
.cpbc-kind-grid[data-align="center"] .cpbc-kind-card { text-align: center; }

.cpbc-kind-card-image {
	position: relative;
	display: block;
}
/* A ribbon across the card's top left corner, in its own colors. With a
   ribbon, the featured card's badge moves to the top right, and a date
   badge beside it to the photo's foot. */
.cpbc-kind-card-corner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 112px;
	height: 112px;
	overflow: hidden;
	border-top-left-radius: var(--cpbc-radius-card, 12px);
	pointer-events: none;
}
.cpbc-kind-card-sash {
	position: absolute;
	top: 26px;
	left: -42px;
	width: 172px;
	box-sizing: border-box;
	padding: 5px 30px;
	overflow: hidden;
	background: var(--cpbc-ribbon);
	color: var(--cpbc-ribbon-text);
	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-45deg);
}
/* Without a photo at the top, the ribbon is a tag over the text. */
.cpbc-kind-card-tagline {
	padding: 12px 16px 0;
}
.cpbc-kind-card-tagline .cpbc-kind-card-sash {
	position: static;
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 3px 10px;
	border-radius: 4px;
	box-shadow: none;
	transform: none;
}
.cpbc-kind-card.has-ribbon .cpbc-kind-card-badge {
	right: 10px;
	left: auto;
}
.cpbc-kind-card.has-ribbon:has(.cpbc-kind-card-badge) .cpbc-kind-card-date {
	top: auto;
	bottom: 10px;
}
/* A date badge: the month on the buttons' color, the day under it, at the
   photo's top right (the featured card's badge takes the top left). Without
   a photo it leads the card. */
.cpbc-kind-card-date {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 48px;
	overflow: hidden;
	border-radius: var(--cpbc-radius-button, 8px);
	background: var(--cpbc-surface, #ffffff);
	color: var(--cpbc-text, #2e2a26);
	box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
	text-align: center;
	line-height: 1;
}
.cpbc-kind-card-date-mon {
	padding: 4px 6px;
	background: var(--cpbc-accent);
	color: var(--cpbc-accent-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.cpbc-kind-card-date-day {
	padding: 5px 6px 6px;
	font-size: 22px;
	font-weight: 700;
}
.cpbc-kind-card-dateline {
	padding: 14px 16px 0;
}
.cpbc-kind-card-dateline .cpbc-kind-card-date {
	position: static;
	display: inline-flex;
	box-shadow: none;
	border: 1px solid var(--cpbc-border, #e2dcd2);
}
.cpbc-kind-card-image a {
	display: block;
}
.cpbc-kind-card-image img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}
.cpbc-kind-grid[data-shape] .cpbc-kind-card-image img { height: auto; aspect-ratio: 16 / 9; }
.cpbc-kind-grid[data-shape="standard"] .cpbc-kind-card-image img { aspect-ratio: 4 / 3; }
.cpbc-kind-grid[data-shape="square"] .cpbc-kind-card-image img { aspect-ratio: 1 / 1; }
.cpbc-kind-grid[data-shape="tall"] .cpbc-kind-card-image img { aspect-ratio: 3 / 4; }

.cpbc-kind-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}
/* With the buttons lined up, the body that holds the button fills the card
   and the button sits at its foot. */
.cpbc-kind-grid:not([data-lineup]) .cpbc-kind-card-body,
.cpbc-kind-grid[data-lineup="on"] .cpbc-kind-card-body--end {
	flex: 1;
}
.cpbc-kind-card-title {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.3;
}
.cpbc-kind-grid[data-name-size="large"] .cpbc-kind-card-title {
	font-size: 1.45em;
	font-weight: 800;
	line-height: 1.2;
}
.cpbc-kind-card-title a {
	text-decoration: none;
	color: inherit;
}
.cpbc-kind-card-title a:hover,
.cpbc-kind-card-title a:focus {
	text-decoration: underline;
}
.cpbc-kind-card-line,
.cpbc-kind-card-text {
	margin: 0;
}
.cpbc-kind-card-line,
.cpbc-kind-card-location,
.cpbc-kind-card-price,
.cpbc-package-card-deposit {
	color: var(--cpbc-muted, #555);
}
.cpbc-kind-card-when {
	font-weight: 600;
}
/* The editors' card preview: the parts the card type leaves out, under the card. */
.cpbc-card-off {
	margin: 12px 0 0;
	color: var(--cpbc-muted, #555);
	font-size: 13px;
}
/* The place: plain text after a small pin, so it reads as where, not as a
   second title. */
.cpbc-kind-card-location {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.cpbc-kind-card-pin {
	flex: none;
	align-self: center;
	width: 0.9em;
	height: 0.9em;
}
.cpbc-kind-grid[data-align="center"] .cpbc-kind-card-location {
	justify-content: center;
}
.cpbc-kind-card-amount {
	color: var(--cpbc-text, #2e2a26);
	font-size: 1.9em;
	font-weight: 800;
	line-height: 1.1;
}
.cpbc-kind-grid[data-price-size="largest"] .cpbc-kind-card-amount {
	font-size: 3.6em;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
}
.cpbc-kind-grid[data-price-size="largest"] .woocommerce-Price-currencySymbol {
	font-size: 0.4em;
	vertical-align: top;
	position: relative;
	top: 0.3em;
	margin-right: 2px;
}

.cpbc-kind-card-incl {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.cpbc-kind-card-incl li {
	position: relative;
	padding-left: 24px;
}
.cpbc-kind-card-incl li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 11px;
	height: 6px;
	border-left: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(-45deg);
}
.cpbc-kind-grid[data-marker="dot"] .cpbc-kind-card-incl li::before {
	left: 6px;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	transform: none;
}
.cpbc-kind-grid[data-marker="none"] .cpbc-kind-card-incl li { padding-left: 0; }
.cpbc-kind-grid[data-marker="none"] .cpbc-kind-card-incl li::before { content: none; }
.cpbc-kind-grid[data-align="center"] .cpbc-kind-card-incl {
	align-self: center;
	text-align: left;
}

.cpbc-kind-card-cta {
	margin-top: auto;
	align-self: flex-start;
	/* Full width inside the card's padding, never past its edge. */
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}
.cpbc-kind-grid[data-lineup="off"] .cpbc-kind-card-cta { margin-top: 10px; }
/* The button's place in its text column, whatever the text's alignment. */
.cpbc-kind-grid[data-button-align]:not([data-button-align="full"]) .cpbc-kind-card-cta { width: auto; }
.cpbc-kind-grid[data-button-align="center"] .cpbc-kind-card-cta { align-self: center; }
.cpbc-kind-grid[data-button-align="right"] .cpbc-kind-card-cta { align-self: flex-end; }
.cpbc-kind-grid[data-button-align="full"] .cpbc-kind-card-cta { align-self: stretch; }

/* The band: the name (and the short line) on the Highlight colour, edge to edge. */
.cpbc-kind-card-band {
	display: grid;
	gap: 4px;
	padding: 16px;
	background: var(--cpbc-cards-hl);
	color: var(--cpbc-cards-hl-text);
}
.cpbc-kind-card-band .cpbc-kind-card-line { color: inherit; }

/* The thick frame: the card on the Highlight colour, its photo on the Cards colour. */
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card {
	padding: 12px;
	border: 0;
	border-radius: calc(var(--cpbc-radius-card, 12px) + 6px);
	background: var(--cpbc-cards-hl);
	color: var(--cpbc-cards-hl-text);
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-image {
	border: 6px solid var(--cpbc-surface, #fff);
	border-radius: calc(var(--cpbc-radius-card, 12px) * 0.6);
	overflow: hidden;
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-body { padding: 12px 6px 6px; }
.cpbc-kind-grid[data-frame="thick"] :is(.cpbc-kind-card-line, .cpbc-kind-card-location, .cpbc-kind-card-price, .cpbc-kind-card-amount, .cpbc-package-card-deposit) {
	color: inherit;
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-band {
	border-radius: calc(var(--cpbc-radius-card, 12px) * 0.6);
	background: var(--cpbc-cards-hl-text);
	color: var(--cpbc-cards-hl);
}
.cpbc-kind-grid[data-frame="thick"][data-frame-button="inverse"] .cpbc-kind-card-cta {
	background: var(--cpbc-cards-hl-text);
	color: var(--cpbc-cards-hl);
}

/* The photo beside the text, on the left or the right. */
.cpbc-kind-card--beside {
	flex-direction: row;
}
.cpbc-kind-grid[data-side="right"] .cpbc-kind-card--beside {
	flex-direction: row-reverse;
}
/* The text decides the card's height, never the picture: the picture fills
   its column and is cropped, so a tall upload does not stretch the card. */
.cpbc-kind-card--beside > .cpbc-kind-card-image {
	position: relative;
	flex: 0 0 40%;
	min-height: 160px;
}
.cpbc-kind-card--beside > .cpbc-kind-card-image a {
	position: absolute;
	inset: 0;
}
.cpbc-kind-grid .cpbc-kind-card--beside > .cpbc-kind-card-image img {
	height: 100%;
	aspect-ratio: auto;
}
.cpbc-kind-card-side {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card--beside .cpbc-kind-card-body { padding: 6px 6px 6px 14px; }
.cpbc-kind-grid[data-frame="thick"][data-side="right"] .cpbc-kind-card--beside .cpbc-kind-card-body { padding: 6px 14px 6px 6px; }

/* The photo behind: it fills the card, and the text sits on a panel in the
   Cards colour, never on the photo itself. */
.cpbc-kind-card--behind {
	min-height: 420px;
	justify-content: flex-end;
}
.cpbc-kind-card--behind > .cpbc-kind-card-image {
	position: absolute;
	inset: 0;
	border: 0;
}
.cpbc-kind-card--behind > .cpbc-kind-card-image a {
	height: 100%;
}
.cpbc-kind-grid .cpbc-kind-card--behind > .cpbc-kind-card-image img {
	height: 100%;
	aspect-ratio: auto;
}
.cpbc-kind-card-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 14px;
	border-radius: calc(var(--cpbc-radius-card, 12px) * 0.8);
	background: var(--cpbc-surface, #fff);
	color: var(--cpbc-text, #2e2a26);
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card--behind { padding: 0; }
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-panel :is(.cpbc-kind-card-line, .cpbc-kind-card-location, .cpbc-kind-card-price, .cpbc-package-card-deposit) {
	color: var(--cpbc-muted, #555);
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-panel .cpbc-kind-card-amount { color: var(--cpbc-text, #2e2a26); }
.cpbc-kind-grid[data-frame="thick"][data-frame-button="inverse"] .cpbc-kind-card-panel .cpbc-kind-card-cta {
	background: var(--cpbc-accent);
	color: var(--cpbc-accent-text);
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-panel .cpbc-kind-card-body { padding: 14px 16px 16px; }
.cpbc-kind-empty {
	max-width: 560px;
	margin: 24px 0;
}
.cpbc-kind-blurb {
	font-size: 1.05em;
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * "What's on" (docs/whats-on-calendar.md): one calendar for events,
 * classes and courses, kind chips, a booking panel beside it. Reuses the
 * archive's toolbar/switcher/month-grid rules above; these add the layout,
 * the compact items and the panel. Kind colour is never the only carrier
 * of meaning — every item also names its kind for assistive tech.
 * ------------------------------------------------------------------ */
.cpbc-wo {
	--cpbc-wo-event: #a1373f;
	--cpbc-wo-class: #1f6f6b;
	--cpbc-wo-course: #2f5d9e;
}
/* Header spans the width; the body puts the calendar and the panel side by
 * side with aligned tops (owner, 2026-09-05). */
.cpbc-wo-body {
	display: grid;
	gap: 20px;
	align-items: start;
}
.cpbc-wo.has-panel .cpbc-wo-body {
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
.cpbc-wo-cal {
	min-width: 0;
}
.cpbc-wo-title {
	font-size: 22px;
	font-weight: 600;
}
.cpbc-wo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 14px;
}
.cpbc-wo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-radius: 999px;
	font-size: 14px;
	color: var(--cpbc-muted, #6b6358);
	text-decoration: none;
	background: var(--cpbc-surface, #ffffff);
}
.cpbc-wo-chip.is-on {
	color: var(--cpbc-text, #2b2622);
	border-color: currentColor;
	font-weight: 600;
}
.cpbc-wo-chip:not(.is-on) .cpbc-wo-dot {
	opacity: 0.35;
}
.cpbc-wo-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cpbc-muted, #6b6358);
	flex: none;
}
.kind-event .cpbc-wo-dot { background: var(--cpbc-wo-event); }
.kind-class .cpbc-wo-dot { background: var(--cpbc-wo-class); }
.kind-course .cpbc-wo-dot { background: var(--cpbc-wo-course); }
.cpbc-wo .cpbc-ev-cell {
	min-height: 120px;
	padding-bottom: 4px;
}
.cpbc-wo-item {
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 6px;
	font-size: 13px;
	line-height: 1.35;
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
}
/* Month cells: two lines per entry (owner, 2026-09-05) — the dot beside
 * line 1 (time · session · state), the title on line 2, each line clipped. */
.cpbc-wo-month .cpbc-wo-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 5px;
	row-gap: 1px;
	align-items: start;
}
.cpbc-wo-month .cpbc-wo-item .cpbc-wo-dot {
	grid-row: 1;
	margin-top: 5px;
}
.cpbc-wo-month .cpbc-wo-meta,
.cpbc-wo-month .cpbc-wo-ttl {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cpbc-wo-month .cpbc-wo-meta {
	grid-column: 2;
}
/* The title starts at the left edge, under the dot (owner, 2026-09-05). */
.cpbc-wo-month .cpbc-wo-ttl {
	grid-column: 1 / span 2;
	grid-row: 2;
}
.cpbc-wo-month .cpbc-wo-meta {
	font-size: 12px;
	line-height: 1.3;
}
.cpbc-wo-month .cpbc-wo-ttl {
	line-height: 1.3;
}
.cpbc-wo-item:hover,
.cpbc-wo-item:focus-visible {
	background: color-mix(in srgb, var(--cpbc-ev-accent, #7b3b3b) 10%, var(--cpbc-surface, #ffffff));
}
.cpbc-wo-item.is-selected {
	background: color-mix(in srgb, var(--cpbc-ev-accent, #7b3b3b) 18%, var(--cpbc-surface, #ffffff));
}
.cpbc-wo-item .cpbc-wo-dot {
	position: relative;
	top: 1px;
}
.cpbc-wo-time {
	color: var(--cpbc-muted, #6b6358);
	flex: none;
}
.cpbc-wo-ttl {
	font-weight: 600;
}
.cpbc-wo-sess,
.cpbc-wo-run {
	color: var(--cpbc-muted, #6b6358);
	font-size: 12px;
	font-weight: 400;
}
.cpbc-wo-state,
.cpbc-wo-stateline,
.cpbc-run-session-mark {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cpbc-muted, #6b6358);
}
/* Past / started / under way: dimmed TEXT (owner, 2026-09-05) — the muted
 * ink keeps AA contrast on the surface; sold-out stays full ink with its word. */
.cpbc-wo-item.is-past,
.cpbc-wo-item.is-started,
.cpbc-wo-item.is-underway,
.cpbc-wo-item.is-past .cpbc-wo-ttl,
.cpbc-wo-item.is-started .cpbc-wo-ttl,
.cpbc-wo-item.is-underway .cpbc-wo-ttl {
	color: var(--cpbc-muted, #6b6358);
	font-weight: 400;
}
.cpbc-wo-item.is-past .cpbc-wo-dot,
.cpbc-wo-item.is-started .cpbc-wo-dot,
.cpbc-wo-item.is-underway .cpbc-wo-dot {
	opacity: 0.45;
}
.cpbc-wo-more {
	display: block;
	padding: 2px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cpbc-ev-accent, #7b3b3b);
	text-decoration: none;
}
.cpbc-wo-day {
	position: relative;
}
/* A day's heading: its full name is read, a date tile is seen. */
.cpbc-wo-dayhead {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}
.cpbc-wo-dayname {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.cpbc-wo-tile,
.cpbc-wo-tile-dow,
.cpbc-wo-tile-day {
	display: block;
}
.cpbc-wo-tile-dow {
	background: var(--cpbc-ev-accent, #7b3b3b);
	color: var(--cpbc-ev-accent-text, #ffffff);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	padding: 4px 0;
}

/* The list: a date tile at the left of each day (as the events list), its
   items at the right, the times in one column. */
.cpbc-wo-list {
	display: grid;
}
.cpbc-wo-list .cpbc-wo-day,
.cpbc-wo-week .cpbc-wo-day {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 18px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--cpbc-border, #e2dcd2);
}
.cpbc-wo-list .cpbc-wo-tile-day,
.cpbc-wo-week .cpbc-wo-tile-day {
	background: var(--cpbc-surface, #ffffff);
	color: var(--cpbc-text, #2e2a26);
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-top: none;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	padding: 10px 0 9px;
}
.cpbc-wo-day.is-today .cpbc-wo-tile-day {
	color: var(--cpbc-ev-accent, #7b3b3b);
	border-color: var(--cpbc-ev-accent, #7b3b3b);
}
.cpbc-wo-list .cpbc-wo-item,
.cpbc-wo-week .cpbc-wo-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	row-gap: 2px;
	align-items: baseline;
	padding: 6px 8px;
	font-size: 15px;
}
/* A narrow screen: the time on the first line, the name under it. */
.cpbc-wo-list .cpbc-wo-ttl,
.cpbc-wo-week .cpbc-wo-ttl {
	grid-column: 2;
}
/* A wide list: the times in one column, the names beside them. */
@media (min-width: 720px) {
	.cpbc-wo-list .cpbc-wo-item {
		grid-template-columns: 9px minmax(9.5em, max-content) minmax(0, 1fr);
		column-gap: 10px;
	}
	.cpbc-wo-list .cpbc-wo-ttl {
		grid-column: auto;
	}
}
.cpbc-wo-list .cpbc-wo-meta,
.cpbc-wo-week .cpbc-wo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
}
.cpbc-wo-list .cpbc-wo-items li + li,
.cpbc-wo-week .cpbc-wo-items li + li {
	border-top: 1px solid color-mix(in srgb, var(--cpbc-border, #e2dcd2) 60%, transparent);
}

/* The week, on a screen wide enough: seven columns like the month, each
   day showing every item (an item's time on its first line, its name
   under it). A day with nothing is an empty column; it still says so to a
   screen reader. */
@media (min-width: 720px) {
	.cpbc-wo-weekwrap {
		overflow-x: auto;
	}
	.cpbc-wo-week {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		min-width: 640px;
		border-left: 1px solid var(--cpbc-border, #e2dcd2);
		border-top: 1px solid var(--cpbc-border, #e2dcd2);
	}
	.cpbc-wo-week .cpbc-wo-day {
		display: block;
		min-width: 0;
		min-height: 200px;
		padding: 0 0 6px;
		background: var(--cpbc-ev-cell, var(--cpbc-surface, #ffffff));
		border-top: 0;
		border-right: 1px solid var(--cpbc-border, #e2dcd2);
		border-bottom: 1px solid var(--cpbc-border, #e2dcd2);
	}
	.cpbc-wo-week .cpbc-wo-tile-dow {
		font-size: 12px;
		padding: 10px 0;
	}
	.cpbc-wo-week .cpbc-wo-tile-day {
		background: color-mix(in srgb, var(--cpbc-ev-accent, #7b3b3b) 16%, var(--cpbc-ev-cell, var(--cpbc-surface, #ffffff)));
		border: 0;
		font-size: 13px;
		font-weight: 600;
		text-align: left;
		padding: 4px 8px;
	}
	.cpbc-wo-week .cpbc-wo-day.is-today .cpbc-wo-tile-day {
		background: var(--cpbc-ev-accent, #7b3b3b);
		color: var(--cpbc-ev-accent-text, #ffffff);
	}
	.cpbc-wo-week .cpbc-wo-items {
		padding: 4px 2px 0;
	}
	.cpbc-wo-week .cpbc-wo-item {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 5px;
		row-gap: 1px;
		align-items: start;
		padding: 4px 6px;
		font-size: 13px;
		line-height: 1.3;
	}
	.cpbc-wo-week .cpbc-wo-item .cpbc-wo-dot {
		margin-top: 4px;
	}
	.cpbc-wo-week .cpbc-wo-meta {
		font-size: 12px;
	}
	.cpbc-wo-week .cpbc-wo-ttl {
		grid-column: 1 / span 2;
	}
	.cpbc-wo-week .cpbc-wo-items li + li {
		border-top: 0;
	}
	.cpbc-wo-week .cpbc-wo-empty {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
.cpbc-wo-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cpbc-wo-items li {
	margin: 0;
}
.cpbc-wo-empty {
	color: var(--cpbc-muted, #6b6358);
	font-size: 14px;
	margin: 4px 0 0;
}
.cpbc-wo-panel {
	position: relative;
	background: var(--cpbc-surface, #ffffff);
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-radius: 10px;
	padding: 18px 20px 20px;
	min-width: 0;
}
.cpbc-wo-panel:focus {
	outline: 2px solid var(--cpbc-ev-accent, #7b3b3b);
	outline-offset: 2px;
}
.cpbc-wo-close {
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 13px;
	color: var(--cpbc-muted, #6b6358);
}
.cpbc-wo-kind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--cpbc-muted, #6b6358);
}
.cpbc-wo-panel-title {
	margin: 0 28px 8px 0;
	font-size: 20px;
	line-height: 1.3;
}
.cpbc-wo-photo-wrap img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	margin-bottom: 10px;
}
.cpbc-wo-when,
.cpbc-wo-place {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--cpbc-muted, #6b6358);
}
.cpbc-wo-panel .cpbc-wizard {
	margin-top: 12px;
}
.cpbc-wo-cta {
	font-weight: 600;
}
@media (max-width: 719px) {
	.cpbc-wo.has-panel .cpbc-wo-body {
		grid-template-columns: minmax(0, 1fr);
	}
	.cpbc-wo-title {
		font-size: 18px;
	}
}

/* No up/down arrows on any number field: typing is faster than clicking a
   small arrow. It stays a number field for the keyboard and the browser's
   own check. */
.cpbc-wizard input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.cpbc-wizard input[type="number"]::-webkit-outer-spin-button,
.cpbc-wizard input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}