/* =====================================================================
   DragonZone — theme.css
   Only what theme.json + blocks can't express. Organised in 9 blocks:
     1. Plugin CSS-var aliases (so .cmp-* re-themes)
     2. Block style implementations (dark-hero, card, gold-accent, hatch…)
     3. Kicker utility
     4. Plugin component overrides (buttons, cards, alerts, chips, modal,
        steppers, tables, forms — the WCAG fix + sharp corners)
     5. Waiver banner
     6. Mobile tab bars
     7. Header / footer / nav fine-tuning
     8. Responsive
     9. Print
   ===================================================================== */


/* 1 — Plugin CSS-var aliases ------------------------------------------ */
:root {
	--cmp-primary:        var(--wp--preset--color--primary);
	--cmp-primary-hover:  var(--wp--preset--color--primary-hover);
	--cmp-on-primary:     var(--wp--preset--color--on-primary);
	--cmp-text:           var(--wp--preset--color--text);
	--cmp-text-light:     var(--wp--preset--color--text-light);
	--cmp-border:         var(--wp--preset--color--border);
	--cmp-bg:             var(--wp--preset--color--bg);
	--cmp-white:          var(--wp--preset--color--white);
	--cmp-success:        var(--wp--preset--color--success);
	--cmp-warning:        var(--wp--preset--color--warning);
	--cmp-danger:         var(--wp--preset--color--danger);
	--cmp-font:           var(--wp--preset--font-family--body);
	/* Soft, rounded corners throughout — the inherited 4px was deliberately
	   sharp/aggressive for a fight gym; a family play centre reads friendlier
	   (and less "corporate form") with generous rounding. */
	--cmp-radius:         14px;

	/* theme-only */
	--mm-black: var(--wp--preset--color--black);
	--mm-ink:   var(--wp--preset--color--ink);
	--mm-steel: var(--wp--preset--color--steel);

	/* DragonZone brand additions */
	--dz-display:      var(--wp--preset--font-family--display);
	--dz-secondary:    var(--wp--preset--color--secondary);
	--dz-accent:       var(--wp--preset--color--accent);
	--dz-sky:          var(--wp--preset--color--sky);
	--dz-cream:        var(--wp--preset--color--cream);
	--dz-radius-lg:    24px;
	--dz-radius-pill:  999px;
	/* Minimum comfortable touch target (WCAG 2.5.5 / Apple HIG). */
	--dz-tap:          48px;
	--dz-shadow:       0 2px 8px rgba(34, 48, 26, .08), 0 8px 24px rgba(34, 48, 26, .06);
}

html, body {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Balanced headline wrapping (no one-word last lines on phone heroes),
   orphan-free body text. Both degrade to normal wrapping in old engines. */
h1, h2, h3 {
	text-wrap: balance;
}
p, li {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------
 * `.has-text-color` slug collision fix.
 *
 * This palette's ink/body colour is slugged "text". WordPress always adds
 * a generic `.has-text-color` MARKER class to any block with a custom
 * text colour (regardless of which colour was actually chosen) alongside
 * the specific `.has-{slug}-color` class — normally `.has-text-color`
 * carries no colour rule of its own. But because a real palette entry is
 * *also* slugged "text", WP's palette-to-CSS generator additionally emits
 * `.has-text-color{ color: var(--wp--preset--color--text) !important }`
 * for that entry, so the "marker" class silently starts carrying ink.
 * Every element that sets a non-"text" textColor (e.g. white heading on a
 * green band, white button text on a red button) ends up with TWO
 * same-specificity `!important` rules on `color`, decided purely by
 * source order in the generated stylesheet — which was turning several
 * intentionally-white/coloured headings and buttons back to ink
 * (discovered on the homepage party band, closing CTA band and its
 * buttons). Fix: whenever the marker class is paired with a specific
 * `has-{slug}-color` class, the two-class selector below outranks both
 * single-class rules and restores the intended colour.
 * -------------------------------------------------------------------- */
.has-primary-color.has-text-color        { color: var(--wp--preset--color--primary) !important; }
.has-primary-hover-color.has-text-color  { color: var(--wp--preset--color--primary-hover) !important; }
.has-on-primary-color.has-text-color     { color: var(--wp--preset--color--on-primary) !important; }
.has-secondary-color.has-text-color      { color: var(--wp--preset--color--secondary) !important; }
.has-secondary-soft-color.has-text-color { color: var(--wp--preset--color--secondary-soft) !important; }
.has-accent-color.has-text-color         { color: var(--wp--preset--color--accent) !important; }
.has-accent-soft-color.has-text-color    { color: var(--wp--preset--color--accent-soft) !important; }
.has-sky-color.has-text-color            { color: var(--wp--preset--color--sky) !important; }
.has-sky-soft-color.has-text-color       { color: var(--wp--preset--color--sky-soft) !important; }
.has-cream-color.has-text-color          { color: var(--wp--preset--color--cream) !important; }
.has-black-color.has-text-color          { color: var(--wp--preset--color--black) !important; }
.has-ink-color.has-text-color            { color: var(--wp--preset--color--ink) !important; }
.has-steel-color.has-text-color          { color: var(--wp--preset--color--steel) !important; }
.has-text-light-color.has-text-color     { color: var(--wp--preset--color--text-light) !important; }
.has-border-color.has-text-color         { color: var(--wp--preset--color--border) !important; }
.has-bg-color.has-text-color             { color: var(--wp--preset--color--bg) !important; }
.has-white-color.has-text-color          { color: var(--wp--preset--color--white) !important; }
.has-success-color.has-text-color        { color: var(--wp--preset--color--success) !important; }
.has-warning-color.has-text-color        { color: var(--wp--preset--color--warning) !important; }
.has-danger-color.has-text-color         { color: var(--wp--preset--color--danger) !important; }

* { box-sizing: border-box; }


/* 2 — Block style implementations ------------------------------------- */

/* Front-page hero — right-bleed photo placeholder.
   At <= 900px viewport the photo would crowd the text, so we hide it. */
.mm-hero { position: relative; overflow: hidden; }
.mm-hero__photo { z-index: 0; }
.mm-hero__content { position: relative; z-index: 1; }
@media (max-width: 900px) {
	.mm-hero__photo { display: none !important; }
	.mm-hero__content-inner { max-width: 100% !important; }
	/* Disciplines grid collapses 3→2 columns; inline style needs !important */
	.mm-disciplines-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
	.mm-disciplines-grid { grid-template-columns: 1fr !important; }
}

/* Dark hero band — applied to a core/group. Provides the diagonal hatch
   overlay automatically when paired with .is-style-mm-hatch. */
/* DragonZone: the inherited hero was flat gym-black with 900-weight, tightly
   tracked type. Same structural band, re-skinned as deep forest green (the
   brand's dark) with a soft meadow wash, and the typography relaxed.

   The templates set font-weight/letter-spacing/colour INLINE on their <h1>,
   and inline styles beat stylesheets — hence the !important on the type
   rules below. That is deliberate and confined to hero headings; it lets one
   change re-skin all 28 page templates without a risky find-and-replace
   across their markup (`color:#FFFFFF` is a substring of
   `background-color:#FFFFFF`, and the white ledes are shared with genuinely
   dark sections like the footer). */
.is-style-dark-hero {
	background:
		radial-gradient(120% 140% at 85% 0%, rgba(169, 228, 242, .22) 0%, rgba(169, 228, 242, 0) 55%),
		linear-gradient(165deg, #2F4224 0%, #22301A 100%);
	color: var(--wp--preset--color--white);
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: clamp(44px, 7vw, 88px);
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
	position: relative;
	overflow: hidden;
	border-bottom-left-radius: var(--dz-radius-lg);
	border-bottom-right-radius: var(--dz-radius-lg);
}
.is-style-dark-hero > * { position: relative; z-index: 1; }
.is-style-dark-hero a:not(.wp-block-button__link) { color: var(--wp--preset--color--accent); }
.is-style-dark-hero h1, .is-style-dark-hero h2, .is-style-dark-hero h3 { color: var(--wp--preset--color--white); }

/* Relax the inherited display type: Fredoka, lighter weight, normal tracking,
   and a line-height that doesn't collide on a wrapped phone headline. */
.is-style-dark-hero h1,
.is-style-dark-hero h2 {
	font-family: var(--dz-display) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.12 !important;
}
.is-style-dark-hero .mm-hero-lede,
.is-style-dark-hero p {
	font-size: clamp(17px, 2.2vw, 19px) !important;
	line-height: 1.6 !important;
}


/* Dark surface — softer than hero, no hatch overlay by default */
.is-style-dark {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.is-style-dark h1, .is-style-dark h2, .is-style-dark h3 { color: var(--wp--preset--color--white); }

/* Hero lede paragraphs — sit at the LEFT edge of the centered 1320px
   constrained content column, NOT at the section padding edge. WP's
   constrained layout caps direct children at contentSize (1320) and
   auto-centers them. The H1/breadcrumb fill 1320 so they look "left
   aligned" at the column edge. But the lede has max-width:620, which
   the same auto-margin rule would centre horizontally inside the 1320
   column — making it visually centred on the page instead of flush
   under the H1.
   The calc() trick reproduces the auto-centring offset by hand: at
   viewports wider than 1320+padding it pushes the lede right by
   (parentWidth − 1320)/2 so its left edge meets the column edge; at
   narrower viewports it falls back to 0 (lede sits at section padding
   edge, same as everything else). */
.is-style-dark-hero > p,
.is-style-dark-hero p.has-text-color,
.mm-hero-lede {
	margin-left: max(0px, calc((100% - 1320px) / 2)) !important;
	margin-right: auto !important;
}
.mm-hero-lede {
	max-width: 620px;
	margin-top: 18px !important;
}

/* Card */
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
}

/* Gold-left accent stripe — the dominant visual rhythm */
.is-style-gold-accent {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
}

/* Diagonal hatch overlay — MMA gym texture, out of keeping with the soft-play
   storybook brand. Neutralised everywhere: the class is still applied by
   several not-yet-converted templates, but it no longer paints anything. */
.is-style-mm-hatch {
	position: relative;
	overflow: hidden;
}
.is-style-mm-hatch::before {
	content: none;
}
.is-style-mm-hatch > * { position: relative; z-index: 1; }

/* Button variants */
.wp-block-button.is-style-gold > .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-gold > .wp-block-button__link:hover,
.wp-block-button.is-style-gold > .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary-hover);
	border-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.is-style-dark > .wp-block-button__link {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--black);
}
.wp-block-button.is-style-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--text);
	border: 1.5px solid var(--wp--preset--color--text);
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost-light > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 1.5px solid rgba(255,255,255,.35);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.6);
}

/* WP global styles inject `.has-text-color { color: var(--text) !important }`
   which overrides our inline white-on-dark text on every hero subhead. Reset
   the color so the inline `style="color:..."` on the element wins.
   `unset` is used so the existing inline color can take effect. */
.is-style-dark-hero :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.is-style-dark      :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.mm-waiver-banner   :is(p, h1, h2, h3, h4, span, li, a).has-text-color,
.is-style-dark-hero :is(p, h1, h2, h3, h4, span, li, a).has-background-color,
.is-style-dark      :is(p, h1, h2, h3, h4, span, li, a).has-background-color {
	color: unset !important;
}

/* Defensive: prevent text inside our chrome containers from collapsing to
   one character per line if a flex/grid container is squeezed too narrow.
   Common cause of the "letter-by-letter stacking" symptom. */
.mm-header *,
.mm-footer *,
.is-style-dark-hero *,
.is-style-dark * {
	word-break: normal;
	overflow-wrap: normal;
}

/* WP's wp-block-library inline CSS sets `.wp-block-column { word-break:
   break-word; overflow-wrap: break-word; min-width: 0; }`. In tight flex
   layouts this lets the column shrink below its content's minimum word
   width and breaks text letter-by-letter. Restore sensible defaults so
   words wrap on word boundaries only. */
.wp-block-column {
	word-break: normal;
	overflow-wrap: normal;
}

/* WP global styles add `:where(.wp-site-blocks) > * { margin-block-start:
   24px }` between every top-level child of <div.wp-site-blocks>. This
   creates an unwanted white gap between the header template-part and our
   hero band, and between our last content section and the footer. Each
   of our sections owns its own vertical padding, so we zero the gap. */
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
:where(.is-layout-constrained) > .wp-block-template-part {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 3 — Kicker utility -------------------------------------------------- */
/* `display: flex` (not inline-flex) so the paragraph remains block-level
   and respects WP's `.is-layout-constrained > * { margin-left: auto;
   margin-right: auto; max-width: ... }` rules. With inline-flex, auto
   margins are ignored and the kicker stays flush against section padding
   instead of aligning with the h2/h1/heading siblings inside the
   constrained content area. */
.is-style-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-hover);
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.is-style-kicker::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--primary);
}
.is-style-kicker-dark,
.is-style-dark-hero .is-style-kicker,
.is-style-dark .is-style-kicker {
	color: var(--wp--preset--color--primary);
}

/* Breadcrumb pattern — small uppercase trail used in hero bands */
.mm-crumb {
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	margin-bottom: 14px;
}
.mm-crumb .current { color: var(--wp--preset--color--primary); }


/* 4 — Plugin component overrides (.cmp-*) ----------------------------- */

/* Buttons — DragonZone pill spec: fully rounded, Fredoka 18px/600, 48px min
   tall, normal case. (Was: sharp 4px corners + uppercase MMA tracking.) */
.cmp-btn,
.cmp-btn:visited {
	border-radius: var(--dz-radius-pill, 999px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--dz-display, var(--wp--preset--font-family--display));
	font-size: 18px;
	padding: 12px 26px;
	border-width: 2px;
	border-style: solid;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--dz-tap, 48px);
	cursor: pointer;
	transition: background .15s ease;
}
.cmp-btn-primary,
.cmp-btn-primary:visited {
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	border-color: var(--cmp-primary);
}
.cmp-btn-primary:hover,
.cmp-btn-primary:focus {
	background: var(--cmp-primary-hover);
	border-color: var(--cmp-primary-hover);
	color: var(--cmp-on-primary);
}
/* Secondary = light outline, not a dark fill — no dark panels/buttons in
   content per the DragonZone brand (dark is reserved for the footer). */
.cmp-btn-secondary,
.cmp-btn-secondary:visited {
	background: var(--cmp-white);
	color: var(--cmp-primary);
	border-color: var(--cmp-primary);
}
.cmp-btn-secondary:hover,
.cmp-btn-secondary:focus {
	background: var(--cmp-primary);
	color: var(--cmp-white);
	border-color: var(--cmp-primary);
}
.cmp-btn-outline-danger {
	background: var(--cmp-white);
	color: var(--cmp-danger);
	border-color: var(--cmp-danger);
}
.cmp-btn-danger {
	background: var(--cmp-danger);
	color: var(--cmp-white);
	border-color: var(--cmp-danger);
}
.cmp-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.cmp-btn-block { width: 100%; }
.cmp-btn-link {
	background: transparent;
	border: none;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: 0;
	min-height: 0;
	color: var(--cmp-text);
	text-transform: none;
	letter-spacing: 0;
}

/* `[cmp_today]` and the schedule/session-card components (`.cmp-today-*`,
   `.cmp-session-*`, `.cmp-schedule*`) are no longer styled from the theme —
   ownership moved to plugin CSS (see plugin/ agent's work), which now ships
   its own light re-skin of these components. The theme must not override
   them, so the old dark-panel block that lived here has been removed. */

/* Cards / panels — sharp corners, 1 px border, mostly white */
.cmp-pricing-card,
.cmp-credit-pack-card,
.cmp-session-card,
.cmp-family-member,
.cmp-membership-card,
.cmp-stat-card,
.cmp-instructor-card,
.cmp-class-card,
.cmp-location-card,
.cmp-empty-state {
	border-radius: 4px;
	border: 1px solid var(--cmp-border);
	background: var(--cmp-white);
}
.cmp-session-card,
.cmp-family-member { border-left: 3px solid var(--cmp-primary); }

/* Location cards on the home strip — brief design:
   gold left rail, 22/24 padding, name + pin row + hours.
   Plugin emits .cmp-location-card inside .mm-locations__list, so we scope to
   keep this from leaking into admin location pages. */
.mm-locations__list .cmp-location-card,
.mm-locations__list .cmp-location {
	padding: 22px 24px !important;
	background: #FFF !important;
	border: 1px solid #E2E8F0 !important;
	border-left: 3px solid var(--cmp-primary) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.mm-locations__list .cmp-location-card h3,
.mm-locations__list .cmp-location-card h4,
.mm-locations__list .cmp-location h3,
.mm-locations__list .cmp-location h4 {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
	color: var(--cmp-text) !important;
	margin: 0 0 8px !important;
}
.mm-locations__list .cmp-location-card p,
.mm-locations__list .cmp-location p,
.mm-locations__list .cmp-location-card address,
.mm-locations__list .cmp-location address {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #475569 !important;
	margin: 0 0 4px !important;
	font-style: normal !important;
}
.mm-locations__list .cmp-location-card .cmp-hours,
.mm-locations__list .cmp-location .cmp-hours,
.mm-locations__list .cmp-location-card small,
.mm-locations__list .cmp-location small {
	font-size: 13px !important;
	color: #64748B !important;
	display: block;
	margin-top: 4px;
}

/* Locations section — mobile: stack columns, map on top */
@media (max-width: 900px) {
	.mm-locations__inner { grid-template-columns: 1fr !important; gap: 36px !important; }
	.mm-locations__map { aspect-ratio: 16/10 !important; }
}

/* Pricing card — match design brief
   Rounded card, ink Fredoka plan name, big red Fredoka price ("Free" for
   zero-cost tiers), and a sage credits chip — stacks to bottom for the
   (theme-injected) CTA. */
.cmp-pricing-cards { gap: 16px !important; }
.cmp-pricing-card {
	border-radius: var(--dz-radius-lg, 16px) !important;
	border: 1px solid var(--cmp-border) !important;
	padding: 36px 28px 28px !important;
	text-align: left !important;
	box-shadow: 0 4px 16px rgba(15,23,42,.04) !important;
	background: var(--cmp-white) !important;
	color: var(--cmp-text) !important;
	display: flex !important;
	flex-direction: column !important;
}
.cmp-pricing-card__name {
	font-family: var(--dz-display, inherit) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
	color: var(--cmp-text) !important;
	margin: 0 !important;
}
.cmp-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 14px !important;
}
.cmp-pricing-card__amount {
	font-family: var(--dz-display, inherit) !important;
	font-size: 44px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	color: var(--cmp-primary) !important;
}
.cmp-pricing-currency { font-size: 0.6em; vertical-align: top; margin-right: 2px; opacity: 0.85; }
.cmp-pricing-card__period {
	font-size: 15px !important;
	font-weight: 500;
	opacity: 0.6;
	color: var(--cmp-text) !important;
}
.cmp-pricing-card__credits {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 14px;
	background: var(--wp--preset--color--secondary-soft, #DDF0D6);
	color: #2E7D32 !important;
	font-family: var(--dz-display, inherit);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 999px;
	border: none;
}
.cmp-pricing-card__description {
	margin-top: 12px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cmp-text-light);
	flex: 1;
}
/* CTA button injected via :after pseudo — links via a real anchor wrapping
   the card would be ideal but the plugin doesn't render one. We render a
   gold "Choose tier" button at the bottom of every card via a CSS-styled
   anchor that the plugin emits as `.cmp-pricing-card a` if any, otherwise
   we use a pseudo-element with a static href is impossible — so we apply
   a hover state inviting click on the whole card. */
.cmp-pricing-card a:not(.wp-element-button) {
	margin-top: 24px;
	background: var(--cmp-primary);
	color: var(--cmp-on-primary) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 14px 22px;
	border-radius: 4px;
	border: 1.5px solid var(--cmp-primary);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14.5px;
}
.cmp-pricing-card a:not(.wp-element-button):hover {
	background: var(--cmp-primary-hover);
	border-color: var(--cmp-primary-hover);
}

/* Featured/accent tier variant — was a solid black card; DragonZone has no
   dark panels in content, so "most popular" reads as a warm gold-soft wash
   + border instead of an inverted-colour card. */
.cmp-pricing-card.is-featured,
.cmp-pricing-card--featured,
.cmp-pricing-card.is-popular,
.cmp-tier-card.is-selected {
	background: var(--wp--preset--color--accent-soft, #FDF1D8) !important;
	color: var(--cmp-text) !important;
	border: 2px solid var(--wp--preset--color--accent, #F0B94A) !important;
	box-shadow: 0 16px 40px rgba(240,185,74,.28) !important;
}
.cmp-pricing-card.is-featured .cmp-pricing-card__name,
.cmp-pricing-card--featured .cmp-pricing-card__name,
.cmp-pricing-card.is-popular .cmp-pricing-card__name { color: var(--cmp-primary) !important; }
.cmp-pricing-card.is-featured .cmp-pricing-card__amount,
.cmp-pricing-card--featured .cmp-pricing-card__amount,
.cmp-pricing-card.is-popular .cmp-pricing-card__amount,
.cmp-pricing-card.is-featured .cmp-pricing-card__period,
.cmp-pricing-card--featured .cmp-pricing-card__period,
.cmp-pricing-card.is-popular .cmp-pricing-card__period { color: var(--cmp-text) !important; }

/* Alerts — left accent + tone-coloured bg */
.cmp-alert {
	border-radius: 4px;
	border: 1px solid transparent;
	border-left: 3px solid currentColor;
	padding: 12px 14px;
	font-size: 14px;
}
.cmp-alert-success { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-alert-warning { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.cmp-alert-error,
.cmp-alert-danger  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.cmp-alert-info    { background: #E0F2FE; color: #075985; border-color: #7DD3FC; }
.cmp-alert strong, .cmp-alert b { font-weight: 700; }

/* Chips / badges
 * Plugin emits `.cmp-member-tier-badge` (extra word vs. our original
 * `.cmp-tier-badge`), and `.cmp-waiver-needed-badge`, `.cmp-booked-badge`,
 * `.cmp-you-badge`. Selectors below cover both legacy and live plugin output. */
.cmp-tier-badge,
.cmp-member-tier-badge,
.cmp-status-badge,
.cmp-waiver-needed-badge,
.cmp-booked-badge,
.cmp-you-badge,
.cmp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	background: #F1F5F9;
	color: var(--cmp-text);
	border: 1px solid var(--cmp-border);
}
.cmp-chip-gold,    .cmp-tier-badge-gold,    .cmp-tier-badge[data-tier="gold"],
.cmp-member-tier-badge,
.cmp-booked-badge { background: var(--cmp-primary); color: var(--cmp-on-primary); border-color: var(--cmp-primary); }
.cmp-chip-dark,    .cmp-tier-badge-dark    { background: var(--mm-black); color: var(--cmp-primary); border-color: var(--mm-black); }
.cmp-chip-success, .cmp-status-success     { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-chip-warning, .cmp-status-warning,
.cmp-you-badge                             { background: #FEF3C7; color: #A16207; border-color: #FCD34D; }
.cmp-chip-danger,  .cmp-status-danger,
.cmp-waiver-needed-badge                   { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }

/* Plugin's own waiver banner (separate from our .mm-waiver-banner) — soft-pink
   inline form near the booking flow. Keep it stylistically aligned. */
.cmp-waiver-banner {
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	border-left: 4px solid var(--cmp-danger);
	padding: 14px 18px;
	border-radius: 4px;
	color: #7F1D1D;
}

/* Membership stat blocks emitted by [cmp_my_membership] */
.cmp-membership-stat { padding: 24px 28px; border: 1px solid var(--cmp-border); background: var(--cmp-white); }
.cmp-stat-label      { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--cmp-primary-hover); text-transform: uppercase; }
.cmp-stat-value      { font-size: 44px; font-weight: 900; letter-spacing: -0.025em; line-height: 1; margin-top: 8px; }

/* -----------------------------------------------------------------------
 * Customer payment-health UX (plugin v1.17.4+, post-refactor)
 *
 * The plugin exposes CSS variables for banner geometry + danger/warning
 * colour sets, and emits state-modifier classes (--critical / --warning)
 * + proper inner classes (__title / __body) instead of inline styles.
 * We override the vars for brand alignment (square 4px corners, our
 * spacing) and style the inner elements with Inter typography — no
 * !important needed.
 * --------------------------------------------------------------------- */

/* Override plugin geometry vars — brand uses square 4px corners
   throughout, slightly tighter spacing. Colour vars left at plugin
   defaults; they're already in our red/amber range. */
:root {
	--cmp-payment-banner-radius:  4px;
	--cmp-payment-banner-padding: 16px 20px;
	--cmp-payment-banner-margin:  0 0 24px;
}

.cmp-payment-banner,
.cmp-manage-sub__payment-banner {
	font-family: inherit;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.cmp-payment-banner__title,
.cmp-manage-sub__payment-banner__title {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -0.005em;
	font-family: inherit;
}
.cmp-payment-banner__body,
.cmp-manage-sub__payment-banner__body {
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}
.cmp-payment-banner .cmp-btn {
	flex-shrink: 0;
}

/* Membership status badge — emitted by [cmp_my_membership] header card.
   8 states map to brand palette. Each variant is a small uppercase pill
   matching our existing chip aesthetic (border-radius 999px, weight 700,
   letter-spacing 0.04em — same family as .cmp-chip / .cmp-tier-badge). */
.cmp-membership-status,
.cmp-manage-sub__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
	font-family: inherit;
}
.cmp-membership-status.active,
.cmp-manage-sub__status--active { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cmp-membership-status.trialing,
.cmp-manage-sub__status.cmp-manage-sub__status--trialing {
	/* Doubled-up class on the manage-sub selector to win specificity over
	   the plugin's inline <style> in manage-subscription.php that ties
	   active+trialing to the same green palette. */
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	border-color: var(--cmp-primary);
}
.cmp-membership-status.pending,
.cmp-manage-sub__status--pending { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.cmp-membership-status.pending_cancel,
.cmp-manage-sub__status--pending_cancel { background: #FEF3C7; color: #A16207; border-color: #FCD34D; }
.cmp-membership-status.cancelled,
.cmp-manage-sub__status--cancelled { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.cmp-membership-status.on_hold,
.cmp-manage-sub__status--on_hold { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.cmp-membership-status.expired,
.cmp-manage-sub__status--expired { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.cmp-membership-status.inactive,
.cmp-manage-sub__status--inactive { background: #F1F5F9; color: #64748B; border-color: #CBD5E1; }

/* ⓘ info icon — plugin v1.17.4 ships Heroicons SVG inside the span with
   width/height 1em + inherits parent colour via currentColor. We bump
   the size a touch so it's discoverable at 11px badge font-size. */
.cmp-membership-status__info,
.cmp-manage-sub__status-info {
	font-size: 1em;
}

/* Pending-status explanatory paragraph. Plugin default is plain text in
   muted colour; we promote it to a soft-gold note panel since "Pending"
   represents a state the user needs to register. */
.cmp-membership-status__note,
.cmp-manage-sub__status-note {
	padding: 12px 16px;
	margin: 12px 0 16px;
	background: #FEF9E7;
	border-left: 3px solid #FCD34D;
	font-size: 13.5px;
	line-height: 1.55;
	color: #78350F;
	font-family: inherit;
}

/* Manage Subscription "Update Payment Method" button. Default is just
   .cmp-btn-secondary. The --urgent modifier promotes it to a red action
   button so it reads "different from the gold/dark buttons around it,
   you need to do this now." Doubled-up selector for specificity over
   .cmp-btn-primary's gold without needing !important. */
.cmp-btn.cmp-manage-sub__portal-btn--urgent {
	background: #B91C1C;
	border-color: #B91C1C;
	color: #FFFFFF;
}
.cmp-btn.cmp-manage-sub__portal-btn--urgent:hover,
.cmp-btn.cmp-manage-sub__portal-btn--urgent:focus {
	background: #991B1B;
	border-color: #991B1B;
	color: #FFFFFF;
}

/* Booking-modal inner wrapper class */
.cmp-booking-modal-content { padding: 0; }
.cmp-topup-modal           { border-radius: 4px; }

/* Modal — square, dark header, blur backdrop.
   Selectors cover both `.cmp-modal-*` (generic) and `.cmp-booking-modal-*`
   (which is what the schedule's Book Session modal actually emits).
   The booking modal overlay is always in the DOM; the plugin toggles
   the `.active` class to show it. We MUST NOT force `display: flex`
   on the overlay itself — that would make the modal appear on page
   load. Only paint when active. */
.cmp-modal-overlay.active,
.cmp-booking-modal-overlay.active {
	position: fixed;
	inset: 0;
	background: rgba(10,10,10,.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9000;
}
.cmp-modal-overlay:not(.active),
.cmp-booking-modal-overlay:not(.active) { display: none !important; }
.cmp-modal,
.cmp-booking-modal {
	background: var(--cmp-white);
	border-radius: 4px;
	box-shadow: 0 24px 80px rgba(0,0,0,.35);
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}
.cmp-modal-header,
.cmp-booking-modal-header {
	background: var(--mm-black) !important;
	color: var(--cmp-white) !important;
	padding: 24px 28px !important;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
	margin: 0 !important;
}
.cmp-modal-header::before,
.cmp-booking-modal-header::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.08;
	background: repeating-linear-gradient(135deg,
		var(--cmp-primary) 0 1px, transparent 1px 30px);
	pointer-events: none;
}
.cmp-modal-header > *,
.cmp-booking-modal-header > * { position: relative; }
.cmp-modal-header h2,
.cmp-modal-header h3,
.cmp-booking-modal-header h2,
.cmp-booking-modal-header h3 {
	color: var(--cmp-white) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}
.cmp-modal-body,
.cmp-booking-modal-body { padding: 24px 28px !important; overflow-y: auto; }
.cmp-modal-footer,
.cmp-booking-modal-footer {
	padding: 18px 28px !important;
	background: #FAFBFC !important;
	border-top: 1px solid var(--cmp-border) !important;
	display: flex !important;
	gap: 10px !important;
	justify-content: flex-end !important;
	margin: 0 !important;
}
.cmp-modal-close,
.cmp-booking-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.15) !important;
	border-radius: 50% !important;
	color: var(--cmp-white) !important;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cmp-modal-close:hover,
.cmp-booking-modal-close:hover {
	background: rgba(255,255,255,.16) !important;
	border-color: rgba(255,255,255,.28) !important;
}
/* Footer-mounted close button (Cancel) keeps regular button styling */
.cmp-booking-modal-footer .cmp-booking-modal-close {
	position: static;
	width: auto;
	height: auto;
	background: var(--cmp-white) !important;
	color: var(--mm-black) !important;
	border: 1.5px solid var(--mm-black) !important;
	border-radius: 4px !important;
	padding: 12px 22px !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Booking-modal body content: name, datetime, location, spots, "book for myself" radio.
   Plugin emits these as plain text blocks; style them to feel close to brief. */
.cmp-booking-modal-body h3,
.cmp-booking-modal-body h4 {
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 8px !important;
}
.cmp-booking-modal-body p { margin: 0 0 6px !important; font-size: 14.5px; color: var(--cmp-text); }
.cmp-booking-modal-body p:has(+ p) { color: var(--cmp-text-light); }
.cmp-booking-modal-body .cmp-booking-spots,
.cmp-booking-modal-body .cmp-spots-available { color: #16A34A !important; font-weight: 700; }
.cmp-booking-modal-body label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 12px 14px !important;
	border: 1px solid var(--cmp-border);
	background: #F8FAFC;
	margin: 4px 0 !important;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 600;
}
.cmp-booking-modal-body label input[type="radio"] { accent-color: var(--cmp-primary); }
.cmp-booking-modal-body .cmp-insufficient-credits,
.cmp-booking-modal-body .cmp-payment-warning {
	margin-top: 12px !important;
	padding: 12px 14px !important;
	background: #FEF7CD !important;
	border: 1px solid var(--cmp-primary) !important;
	border-left: 3px solid var(--cmp-primary) !important;
	font-size: 13.5px;
	color: var(--cmp-text);
}
.cmp-booking-modal-body .cmp-insufficient-credits a,
.cmp-booking-modal-body .cmp-payment-warning a {
	color: var(--mm-black) !important;
	font-weight: 700;
	border-bottom: 1px solid var(--mm-black);
	text-decoration: none !important;
}

/* Stepper — used by [cmp_register] and [cmp_cancel_membership] */
.cmp-stepper {
	display: grid;
	grid-template-columns: repeat(var(--mm-stepper-count, 5), 1fr);
	background: var(--cmp-white);
	border: 1px solid var(--cmp-border);
}
.cmp-stepper-item {
	padding: 18px 20px;
	border-right: 1px solid var(--cmp-border);
	border-bottom: 3px solid transparent;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--cmp-white);
}
.cmp-stepper-item:last-child { border-right: none; }
.cmp-stepper-item.is-active {
	background: #FFFBEB;
	border-bottom-color: var(--cmp-primary);
}
.cmp-stepper-item.is-done { color: var(--cmp-text); }

/* Tables — member-facing */
.cmp-credit-table,
.cmp-booking-table,
table.cmp-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cmp-white);
}
.cmp-credit-table th,
.cmp-booking-table th,
table.cmp-table th {
	background: var(--mm-black);
	color: var(--cmp-white);
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 20px;
}
.cmp-credit-table td,
.cmp-booking-table td,
table.cmp-table td {
	padding: 14px 20px;
	border-bottom: 1px solid #F1F5F9;
	font-size: 14px;
}
.cmp-credit-table tr:nth-child(even) td,
.cmp-booking-table tr:nth-child(even) td { background: #FAFBFC; }

/* Form rows */
.cmp-form-row,
.cmp-form-row label {
	font-family: inherit;
}
.cmp-form-row input[type="text"],
.cmp-form-row input[type="email"],
.cmp-form-row input[type="tel"],
.cmp-form-row input[type="password"],
.cmp-form-row input[type="number"],
.cmp-form-row select,
.cmp-form-row textarea,
input[type="text"].cmp-input,
input[type="email"].cmp-input,
select.cmp-input,
textarea.cmp-input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #CBD5E1;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: var(--cmp-white);
}
.cmp-form-row textarea, textarea.cmp-input { height: auto; min-height: 96px; padding: 12px 14px; }
.cmp-form-row label,
label.cmp-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cmp-text);
	display: block;
	margin-bottom: 6px;
}

/* Toggle / radio cards (the "select your tier" pattern) */
.cmp-toggle-group,
.cmp-tier-picker {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cmp-toggle-option,
.cmp-tier-option {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 20px;
	border: 1px solid var(--cmp-border);
	background: var(--cmp-white);
	border-radius: 4px;
	cursor: pointer;
}
.cmp-toggle-option.is-selected,
.cmp-tier-option.is-selected {
	border: 2px solid var(--cmp-primary);
	background: #FFFBEB;
}

/* Empty states */
.cmp-empty-state {
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cmp-empty-state__icon {
	width: 64px;
	height: 64px;
	background: var(--mm-black);
	color: var(--cmp-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}


/* 5 — Waiver banner --------------------------------------------------- */
.mm-waiver-banner {
	background: var(--wp--preset--color--danger-band);
	color: var(--cmp-white);
	border-bottom: 2px solid var(--cmp-danger);
	padding: 14px clamp(20px, 4vw, 40px);
}
.mm-waiver-banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.mm-waiver-banner__icon {
	width: 36px;
	height: 36px;
	background: var(--cmp-danger);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.mm-waiver-banner__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FCA5A5;
}
.mm-waiver-banner__body {
	font-size: 14.5px;
	font-weight: 600;
	margin-top: 2px;
}
.mm-waiver-banner__cta .wp-block-button__link,
.mm-waiver-banner__cta {
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 13px;
}

/* Payment-retry banner — shown during the processor's automatic-retry
 * window. Amber/warning rather than red — payment will likely recover and
 * we don't want the member to panic. Same structure as the waiver banner
 * so they stack if both fire. */
.mm-payment-retry-banner {
	background: #78350F;          /* deep amber */
	color: #FFF;
	border-bottom: 2px solid #B45309;
	padding: 14px clamp(20px, 4vw, 40px);
}
.mm-payment-retry-banner__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.mm-payment-retry-banner__icon {
	width: 36px;
	height: 36px;
	background: #F59E0B;
	color: #0F172A;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
}
.mm-payment-retry-banner__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FCD34D;
}
.mm-payment-retry-banner__body {
	font-size: 14.5px;
	font-weight: 600;
	margin-top: 2px;
}
.mm-payment-retry-banner__cta {
	background: #FCD34D;
	color: #0F172A;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border-radius: 4px;
	font-size: 13px;
	text-decoration: none;
}


/* 6 — Mobile tab bars -------------------------------------------------- */
.mm-mobile-tabs {
	display: none;
}
.mm-mobile-tabs__btn {
	background: transparent;
	border: none;
	padding: 8px 0;
	cursor: pointer;
	font-family: inherit;
	color: #94A3B8;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: center;
	text-decoration: none;
	display: block;
}
.mm-mobile-tabs__btn.is-active { color: var(--mm-black); }
.mm-mobile-tabs__btn::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: transparent;
}
.mm-mobile-tabs__btn.is-active::before { background: var(--cmp-primary); }


/* 7 — Header / footer / nav ------------------------------------------ */

/* Logged-out / logged-in shared header chrome */
.mm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--cmp-text);
	border-bottom: 2px solid rgba(78,154,63,.2);
}
.mm-logo__img { height: 44px; width: auto; display: block; }
.mm-header__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
	height: 80px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
}
.mm-nav {
	display: flex;
	/* Never wrap: a two-line pill nav reads as broken. The media queries
	   below swap to the burger menu well before space actually runs out. */
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: clamp(16px, 2.4vw, 32px);
	justify-content: center;
}
.mm-nav a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cmp-text);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: var(--dz-radius-pill);
	transition: background-color .15s ease, color .15s ease;
}
.mm-nav a.is-active,
.mm-nav a[aria-current="page"] {
	color: var(--cmp-primary);
	background: var(--wp--preset--color--secondary-soft, #DDF0D6);
}
.mm-nav a:hover { background: var(--wp--preset--color--secondary-soft, #DDF0D6); color: var(--cmp-text); }

.mm-header__auth { display: flex; gap: 10px; align-items: center; }
.mm-header__auth .mm-login {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cmp-text);
	padding: 0 12px;
	text-decoration: none;
}
.mm-header__auth .mm-login:hover { color: var(--cmp-primary); }
/* Header "Book a session" CTA — compact on the smallest screens. */
.mm-book-btn { height: 48px; padding: 0 20px; }

/* Logged-in credit pill */
.mm-credit-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--wp--preset--color--accent, #F0B94A);
	border: none;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cmp-text);
}
.mm-credit-pill__icon { color: var(--cmp-text); display: inline-flex; }

/* Account chip */
.mm-account-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	background: var(--wp--preset--color--secondary-soft, #DDF0D6);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
}
.mm-account-chip__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cmp-primary);
	color: var(--cmp-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.mm-account-chip__meta { display: flex; flex-direction: column; line-height: 1.2; }
.mm-account-chip__name { font-size: 13px; font-weight: 700; color: var(--cmp-text); }
.mm-account-chip__tier {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--cmp-primary);
	text-transform: uppercase;
}

/* Mobile menu toggle (logged-out + logged-in) */
.mm-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.mm-menu-toggle svg { width: 22px; height: 22px; }

/* Footer */
.mm-footer {
	background: var(--wp--preset--color--black, #22301A);
	color: var(--cmp-white);
	padding: 56px clamp(20px, 4vw, 40px) 32px;
}
.mm-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr;
	gap: 56px;
}
.mm-footer h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--cmp-primary);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.mm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-footer a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; }
.mm-footer a:hover { color: var(--cmp-primary); }
.mm-footer__legal {
	max-width: 1320px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.1);
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: rgba(255,255,255,.5);
}
.mm-footer__socials { display: flex; gap: 12px; margin-top: 22px; }
.mm-footer__socials a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mm-footer__socials a:hover { background: rgba(255,255,255,.05); }


/* 8 — Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.mm-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
	.cmp-stepper { grid-template-columns: 1fr 1fr; }
	.cmp-stepper-item { border-right: none; border-bottom: 1px solid var(--cmp-border); }
}

/* Collapse the inline nav well before it actually runs out of room. At 80px
   header height the logo + four pill links + "Log in" + the Book CTA need
   roughly 1000px; between 720 and 1000 they used to squeeze and wrap into a
   two-line header. Below this point the links live in the overlay menu. */
@media (max-width: 1000px) {
	.mm-nav { display: none; }
	.mm-menu-toggle { display: inline-flex; }

	/* The header keeps the primary "Book" CTA + hamburger; the text
	   "Log in" moves into the overlay menu. */
	.mm-header__auth .mm-login { display: none !important; }
}

/* The logged-in header is wider still — five links plus the account chip —
   so it trades the inline nav for the burger earlier. */
@media (max-width: 1140px) {
	.mm-header.is-logged-in .mm-nav { display: none; }
	.mm-header.is-logged-in .mm-menu-toggle { display: inline-flex; }
}

@media (max-width: 720px) {
	.mm-header__inner { grid-template-columns: auto 1fr auto; }
	.mm-book-btn { padding: 0 16px; }

	/* Logged-in: keep the avatar as the account button but drop the name —
	   logo + Book + avatar + burger is all a phone header can carry. */
	.mm-account-chip__meta { display: none; }

	.mm-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.mm-footer__legal { flex-direction: column; gap: 6px; }

	.is-style-dark-hero h1 { font-size: 44px !important; }

	/* Mobile tab bars visible only on member-hub / instructor-hub */
	body.page-template-page-member-hub,
	body.page-template-page-instructor-hub {
		padding-bottom: 80px;
	}
	body.page-template-page-member-hub .mm-mobile-tabs,
	body.page-template-page-instructor-hub .mm-mobile-tabs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--cmp-white);
		border-top: 1px solid var(--cmp-border);
		padding: 8px 0 22px;
		z-index: 100;
		box-shadow: 0 -8px 24px rgba(10,10,10,.08);
	}

	/* Sticky single-CTA strips collapse to bottom */
	.mm-sticky-cta {
		position: sticky;
		bottom: 0;
		z-index: 50;
		background: var(--cmp-primary);
		color: var(--cmp-on-primary);
		padding: 14px 18px;
		box-shadow: 0 -10px 30px rgba(0,0,0,.25);
	}
}

@media (max-width: 420px) {
	.is-style-dark-hero h1 { font-size: 36px !important; }
}


/* 9 — Print ----------------------------------------------------------- */
/* Print rules scoped to the two pages members actually print: their membership
   and their bookings. Other pages use the browser's default print. */
@media print {
	body.page-template-page-my-membership .mm-header,
	body.page-template-page-my-membership .mm-footer,
	body.page-template-page-my-membership .mm-waiver-banner,
	body.page-template-page-my-membership .mm-mobile-tabs,
	body.page-template-page-my-membership .mm-sticky-cta,
	body.page-template-page-my-membership .wp-block-buttons,
	body.page-template-page-my-membership .cmp-btn,
	body.page-template-page-my-membership .cmp-modal-overlay,
	body.page-template-page-my-bookings .mm-header,
	body.page-template-page-my-bookings .mm-footer,
	body.page-template-page-my-bookings .mm-waiver-banner,
	body.page-template-page-my-bookings .mm-mobile-tabs,
	body.page-template-page-my-bookings .mm-sticky-cta,
	body.page-template-page-my-bookings .wp-block-buttons,
	body.page-template-page-my-bookings .cmp-btn,
	body.page-template-page-my-bookings .cmp-modal-overlay {
		display: none !important;
	}
	body.page-template-page-my-membership,
	body.page-template-page-my-bookings { background: #fff !important; color: #000 !important; }
	body.page-template-page-my-membership .is-style-dark-hero,
	body.page-template-page-my-membership .is-style-dark,
	body.page-template-page-my-bookings .is-style-dark-hero,
	body.page-template-page-my-bookings .is-style-dark {
		background: #fff !important;
		color: #000 !important;
		border-bottom: 2px solid #000;
	}
	body.page-template-page-my-membership .is-style-dark-hero h1,
	body.page-template-page-my-membership .is-style-dark-hero h2,
	body.page-template-page-my-membership .is-style-dark-hero h3,
	body.page-template-page-my-membership .is-style-dark h1,
	body.page-template-page-my-membership .is-style-dark h2,
	body.page-template-page-my-membership .is-style-dark h3,
	body.page-template-page-my-bookings .is-style-dark-hero h1,
	body.page-template-page-my-bookings .is-style-dark-hero h2,
	body.page-template-page-my-bookings .is-style-dark-hero h3,
	body.page-template-page-my-bookings .is-style-dark h1,
	body.page-template-page-my-bookings .is-style-dark h2,
	body.page-template-page-my-bookings .is-style-dark h3 { color: #000 !important; }
	body.page-template-page-my-membership .is-style-dark-hero::before,
	body.page-template-page-my-membership .is-style-mm-hatch::before,
	body.page-template-page-my-bookings .is-style-dark-hero::before,
	body.page-template-page-my-bookings .is-style-mm-hatch::before { display: none !important; }
	body.page-template-page-my-membership .cmp-chip-gold,
	body.page-template-page-my-membership .cmp-tier-badge-gold,
	body.page-template-page-my-bookings .cmp-chip-gold,
	body.page-template-page-my-bookings .cmp-tier-badge-gold {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #000 !important;
	}
	body.page-template-page-my-membership a,
	body.page-template-page-my-bookings a { color: #000 !important; text-decoration: underline; }
}


/* =========================================================================
 * /my-membership/ — responsive overrides for the dashboard.
 *
 * Desktop layouts are set via inline `style="grid-template-columns:..."`
 * on widget containers in functions.php. At narrower viewports we override
 * with !important so the hero card stops squishing, the body collapses to
 * one column, and the heavier widget rows (Upcoming, Family, Session
 * Notes) restructure to stacked / wrappable blocks.
 *
 * Breakpoints follow the brief's narrow / mobile thinking:
 *   ≤ 980px : tablet — hero stacks, body collapses to 1col
 *   ≤ 640px : phone — stat row stacks, widget rows simplify
 * ======================================================================= */

@media (max-width: 980px) {
	/* Hero: greeting + action buttons on top, member card below */
	.mm-hero-row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	/* Body: stack so each widget is full-width */
	.mm-membership-body {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	/* Member card max-width so it doesn't stretch corner-to-corner on tablet */
	.mm-member-card { max-width: 520px; }
}

@media (max-width: 640px) {
	/* Stat row collapses to one column */
	.mm-stat-row {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.mm-stat-tile,
	.mm-stat-tile.cmp-stat-card { padding: 20px !important; }
	.mm-stat-tile [style*="font-size:56px"] { font-size: 40px !important; }

	/* Hero greeting H1 shrinks */
	.mm-hero-row h1.mm-hero-greeting,
	.mm-hero-row h1 {
		font-size: clamp(36px, 10vw, 56px) !important;
	}
	/* Hero action buttons full-width so they don't crowd */
	.mm-membership-actions { flex-direction: column; align-items: stretch; }
	.mm-membership-actions a { justify-content: center; }

	/* Member card header chips wrap and shrink slightly */
	.mm-member-card { max-width: none; }

	/* Upcoming Sessions: date pill spans rows on the left; time / class
	   info / status chip / manage button stack on the right. Anchored via
	   inline-style attribute since the desktop grid is set inline. */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] {
		grid-template-columns: 64px 1fr !important;
		column-gap: 16px !important;
		row-gap: 6px !important;
		padding: 16px 18px !important;
	}
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :first-child {
		grid-row: 1 / span 4 !important;
		align-self: start !important;
	}
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(n+2) {
		grid-column: 2 !important;
		justify-self: start !important;
	}
	/* Time becomes a small subtitle above the class name */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(2) {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #64748B !important;
	}
	/* Manage button: right-align on its own row */
	.mm-upcoming > div > div[style*="grid-template-columns:64px 80px 2fr auto auto"] > :nth-child(5) {
		justify-self: end !important;
	}

	/* Family rows: flex with wrap so monogram + name + tier chip + discount
	   pill all stay on one line; chips wrap to a second line only when the
	   name is genuinely too long. */
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 10px !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :first-child {
		flex: 0 0 36px !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(2) {
		flex: 1 1 140px !important; /* take available, shrink down to 140 */
		min-width: 0 !important;
	}
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(3),
	.mm-family > div > div[style*="grid-template-columns:36px 1fr auto auto"] > :nth-child(4) {
		flex: 0 0 auto !important;
	}

	/* Family CTA card body padding tightens */
	.mm-family-cta { padding: 16px 18px !important; }

	/* Session-notes row date pill + class info stack */
	.mm-session-notes .mm-session-note-row > div {
		grid-template-columns: 56px 1fr !important;
		gap: 14px !important;
	}
	.mm-session-notes .mm-note-edit-btn {
		grid-column: 1 / -1 !important;
		justify-self: end !important;
		margin-top: -8px !important;
	}

	/* Quick links rows: ensure proper line wrapping */
	.mm-quick-links a { padding: 12px 14px !important; }

	/* Credit history row: tighten padding */
	.mm-credit-history > div[style*="grid-template-columns:70px"] {
		grid-template-columns: 60px 1fr auto !important;
		padding: 12px 18px !important;
	}

	/* Member card body padding tighter on phone */
	.mm-member-card > div { padding-left: 20px !important; padding-right: 20px !important; }
}


/* =========================================================================
 * /manage-subscription/ — responsive overrides.
 * Body grid stacks on tablet; switch-tier radio rows collapse to 2-col on
 * very narrow viewports so price stays readable.
 * ======================================================================= */

@media (max-width: 980px) {
	.mm-manage-sub-body { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (max-width: 640px) {
	/* Hero header chips wrap on phone */
	.mm-manage-sub-card > div:first-child {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.mm-manage-sub-card > div:first-child > span {
		margin-top: 6px;
	}

	/* Switch-tier radio rows: stack price below the name/description */
	.mm-manage-sub-card .mm-tier-radio {
		grid-template-columns: 24px 1fr !important;
		row-gap: 6px !important;
	}
	.mm-manage-sub-card .mm-tier-radio > :last-child {
		grid-column: 2 !important;
		justify-self: start !important;
		font-size: 16px !important;
	}
}


/* =========================================================================
 * /instructor-hub/ — responsive overrides.
 * Tablet: side rail moves below the session list. Phone: session card
 * actions stack vertically; detail panel (plan + roster) goes 1-col.
 * ======================================================================= */

@media (max-width: 980px) {
	/* Collapse the 2-col grid to a flex column so aside children can be
	 * reordered around the sessions list via `order`. `display: contents`
	 * on the aside hoists its kids into the flex parent. */
	.mm-instructor-body { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: stretch !important; }
	.mm-instructor-body > aside { display: contents !important; }
	.mm-instructor-body > div:first-child { order: 2; }
	.mm-instructor-body .mm-instructor-quick-actions { order: 1; }
	.mm-instructor-body .mm-instructor-stats        { order: 3; }
	.mm-instructor-body .mm-instructor-tip          { order: 4; }
}

@media (max-width: 640px) {
	/* Session card top row: stack content + buttons */
	.mm-instructor-session > div:first-child {
		grid-template-columns: 56px 1fr !important;
		row-gap: 12px !important;
	}
	.mm-instructor-session > div:first-child > :first-child {
		grid-row: 1 / span 2 !important;
		align-self: start !important;
	}
	.mm-instructor-session > div:first-child > :nth-child(2) {
		grid-column: 2 !important;
	}
	.mm-instructor-session > div:first-child > :nth-child(3) {
		grid-column: 1 / -1 !important;
		justify-content: flex-start !important;
	}
	/* Detail panel: stack plan + roster vertically */
	.mm-instructor-session .mm-detail-panel > div {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

/* =======================================================================
 * /locations/ — responsive overrides.
 * Tablet: stack photo above the text. Phone: tighten card padding and
 * stretch the two CTAs full-width.
 * ======================================================================= */

@media (max-width: 820px) {
	.mm-location-card { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
	.mm-location-card > div:last-child { padding: 24px 22px !important; }
	.mm-location-card h3 { font-size: 23px !important; }
	.mm-location-card__cta { flex-direction: column !important; align-items: stretch !important; }
	.mm-location-card__cta a { justify-content: center !important; }
}

/* =======================================================================
 * /my-bookings/ — small polish to the plugin's booking-list output.
 * Upgrade "Cannot cancel" from plain italic text to a soft pill so it
 * matches the rest of the page's badge language without competing with
 * primary actions.
 * ======================================================================= */

/* Logged-out empty state. The plugin's shortcode emits a small card with a
 * heading, a one-liner of context, and a primary "Log in" CTA — give it a
 * gold-left accent + breathing room so it feels intentional rather than a
 * placeholder. Lives on a white .cmp-my-bookings wrapper. */
.cmp-bookings-empty-loggedout {
	max-width: 560px;
	padding: 28px 32px;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	background: #FAFAFA;
}
.cmp-bookings-empty-loggedout h3 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--mm-ink, #0F172A);
}
.cmp-bookings-empty-loggedout p {
	margin: 0 0 20px;
	color: #475569;
	line-height: 1.55;
}
.cmp-bookings-empty-loggedout .cmp-btn-primary {
	display: inline-block;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	padding: 12px 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12.5px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-bookings-empty-loggedout .cmp-btn-primary:hover,
.cmp-bookings-empty-loggedout .cmp-btn-primary:focus {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}

.cmp-booking-locked {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background: #F1F5F9;
	color: #64748B;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid #E2E8F0;
	font-style: normal;
}

/* The plugin's "Download Calendar" link contains a stray <br> between the
 * dashicon and the label, which stacks them vertically inside our
 * inline-flex button. Strip the linebreak so icon + text sit side-by-side. */
.cmp-bookings-header .cmp-btn br { display: none; }
.cmp-bookings-header .cmp-btn .dashicons {
	line-height: 1;
	vertical-align: middle;
}

/* "Booked" affordance on the schedule list — appears in place of the BOOK
 * button on sessions the current user already has a live booking for.
 * Reads as confirmed (gold tick + soft gold fill) and links to /my-bookings/.
 * Deliberately not a "ghost" style — needs enough weight to feel decisive
 * on a row that otherwise looks identical to bookable ones. */
.cmp-btn-booked,
a.cmp-btn-booked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(219, 173, 2, 0.12);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 8px 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.cmp-btn-booked:hover,
.cmp-btn-booked:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
}
.cmp-btn-booked .cmp-booked-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}
.cmp-btn-booked:hover .cmp-booked-check,
.cmp-btn-booked:focus .cmp-booked-check {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}

/* The plugin emits the Download Calendar button with .cmp-btn-secondary,
 * which the theme paints solid dark — on the white .cmp-my-bookings card
 * that reads as a heavy, secondary block sat next to the section heading.
 * Promote it to a gold-ghost treatment so the action reads as an
 * available export, not an afterthought button. Scoped to the
 * bookings-header so we don't reflow the secondary style elsewhere. */
.cmp-bookings-header .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 10px 16px;
}
.cmp-bookings-header .cmp-btn-secondary .dashicons {
	color: var(--mm-gold, #DBAD02);
}
.cmp-bookings-header .cmp-btn-secondary:hover,
.cmp-bookings-header .cmp-btn-secondary:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border-color: var(--mm-gold, #DBAD02);
}
.cmp-bookings-header .cmp-btn-secondary:hover .dashicons,
.cmp-bookings-header .cmp-btn-secondary:focus .dashicons {
	color: var(--mm-ink, #0F172A);
}

/* The plugin's booking row uses display:flex + justify-content:space-between.
 * Past rows have only 2 children (date + details), so the details column
 * gets shoved to the right. Force the details column to grow and fill the
 * gap so the layout stays consistent across upcoming + recent rows. */
.cmp-booking-item .cmp-booking-details {
	flex: 1 1 auto !important;
	min-width: 0;
}
/* Hide any empty .cmp-booking-meta paragraph the plugin emits when our
 * attendee filter strips the only span inside it. */
.cmp-booking-meta:empty,
.cmp-booking-attendee:empty { display: none !important; }

/* =======================================================================
 * /pricing/ — responsive overrides.
 * The full-layout tier grid + credit-packs strip are inline-styled at
 * fixed 3-col / 1fr+2fr. Stack them on smaller screens.
 * ======================================================================= */

@media (max-width: 900px) {
	.mm-pricing-teaser--full { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 0 !important; }
	.mm-credit-packs { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 28px !important; }
	.mm-credit-packs > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 560px) {
	.mm-credit-packs > div:last-child { grid-template-columns: 1fr !important; }
	.mm-credit-packs { padding: 28px 22px !important; }
	.mm-credit-packs h3 { font-size: 28px !important; }
}

/* =======================================================================
 * /register/ — promote tiers with _cmp_tier_badge.
 * The plugin renders 3 identical cards. JS adds .mm-tier-card--promoted
 * to badged tiers; these rules lift them visually: order to first, gold
 * border on the inner, shadow lift, and a top-anchored badge ribbon.
 * ======================================================================= */

.cmp-tier-card.mm-tier-card--promoted {
	order: -1;                  /* float to the top of the grid */
	overflow: visible !important; /* so the badge can sit above the card */
	position: relative;
}
.cmp-tier-card.mm-tier-card--promoted .cmp-tier-card__inner {
	border-color: #DBAD02 !important;
	border-width: 2px !important;
	box-shadow: 0 12px 32px rgba(219, 173, 2, 0.18);
	padding-top: 34px !important;  /* room for the ribbon */
}
.mm-tier-card__badge {
	position: absolute;
	top: -12px;
	left: 24px;
	background: #DBAD02;
	color: #0A0A0A;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 2px;
	z-index: 2;
}

/* =======================================================================
 * /register-simple/ — the plugin's `.cmp-simple-header` heading + subtitle
 * sit between the hero and the white form card, on the dark page
 * background. The plugin styles them dark slate (#0F172A) assuming a
 * light backdrop; override to gold + muted-white so they're legible.
 * ======================================================================= */

.cmp-simple-header { text-align: center; padding: 24px 16px 0; }
.cmp-simple-header h2 {
	color: #FFFFFF !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em;
	font-size: clamp(28px, 4vw, 36px);
	margin: 0;
}
.cmp-simple-header > p,
.cmp-simple-header > .cmp-simple-subtitle,
.cmp-simple-header > div { color: rgba(255, 255, 255, 0.7) !important; font-size: 16px; margin-top: 8px; }

/* The plugin's tier picker on /register-simple/ is flex row-nowrap with
 * 180px min-width children, so 3 cards exceed the 480px form column and
 * the third is hidden behind an overflow-x: auto scroller. Let them wrap
 * so all three are visible. */
.cmp-simple-tiers { flex-wrap: wrap !important; overflow-x: visible !important; }
.cmp-simple-tiers > * { min-width: 0 !important; flex: 1 1 140px !important; }

/* /register-simple/ — the plugin's "I agree to the Club Rules & Privacy Policy"
 * checkbox sits inside a `.cmp-simple-card--submit` wrapper that the plugin
 * deliberately styles as `background: transparent` (so the submit button
 * floats on whatever surface the page provides). On our dark `is-style-dark`
 * main wrapper that leaves the surrounding "I agree to the" / "&" text
 * black-on-dark and effectively invisible. Lift the colour when we're on
 * the dark surface. The Club Rules / Privacy Policy links already get the
 * brand gold from the plugin's own CSS, so we only touch the wrapping copy. */
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree,
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree span {
	color: rgba(255, 255, 255, 0.85);
}
.is-style-dark .cmp-simple-card--submit .cmp-simple-agree a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}


/* =====================================================================
 *  WooCommerce Checkout (/checkout/) — block theme overrides
 *  ---------------------------------------------------------------------
 *  All rules are scoped under .mm-checkout-main (the wrapping <main>
 *  added by templates/page-checkout.html) so other Woo surfaces
 *  (cart, my-account) are left untouched until they get their own pass.
 * ===================================================================== */

.mm-checkout-main {
	font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif;
}

/* Two-column shell — force fluid distribution so the columns don't wrap
 * at viewports under ~1100px. Woo's default flex bases let the sidebar
 * push past the container and drop below; pin sizes via flex instead. */
.mm-checkout-main .wc-block-components-sidebar-layout {
	gap: 28px;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	flex-wrap: nowrap;
	align-items: flex-start;
}
.mm-checkout-main .wc-block-checkout__main {
	flex: 1 1 0;
	min-width: 0;
}
.mm-checkout-main .wc-block-checkout__sidebar {
	flex: 0 0 340px;
	min-width: 0;
}

/* --- LEFT COLUMN: each section becomes a white card with gold accent --- */
.mm-checkout-main .wc-block-components-checkout-step {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 28px 32px;
	margin-bottom: 16px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.mm-checkout-main .wc-block-components-checkout-step__heading {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}
.mm-checkout-main .wc-block-components-checkout-step__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0;
	text-transform: none;
}

/* --- Form inputs: match the brand input language used on signup --- */
.mm-checkout-main .wc-block-components-text-input,
.mm-checkout-main .wc-blocks-components-select {
	margin-top: 12px;
}
.mm-checkout-main .wc-block-components-text-input input.input-text,
.mm-checkout-main .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	padding: 14px 16px;
	font-size: 15px;
	min-height: 50px;
	color: var(--wp--preset--color--black);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-checkout-main .wc-block-components-text-input input.input-text:focus,
.mm-checkout-main .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(219, 173, 2, 0.22);
	outline: none;
}
.mm-checkout-main .wc-block-components-text-input label,
.mm-checkout-main .wc-blocks-components-select__label {
	color: rgba(15, 23, 42, 0.65);
	font-size: 13px;
	font-weight: 500;
}
.mm-checkout-main .wc-block-components-text-input.is-active label,
.mm-checkout-main .wc-blocks-components-select.is-active .wc-blocks-components-select__label {
	color: var(--wp--preset--color--primary);
}
.mm-checkout-main .wc-block-components-address-form__address_2-toggle {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 13.5px;
}

/* Checkbox + radio accents */
.mm-checkout-main .wc-block-components-checkbox__input,
.mm-checkout-main .wc-block-components-radio-control__input {
	accent-color: var(--wp--preset--color--primary);
}

/* --- Payment method block: tighter card, gold-when-checked.
 * Woo positions the radio dot absolutely on the left edge of the option,
 * so the label needs left padding to clear it. Use 44px so the radio +
 * its hit-target sit cleanly to the left of "Credit / Debit Card". */
.mm-checkout-main .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 16px 18px 16px 44px;
	background: #FAFBFC;
}
.mm-checkout-main .wc-block-components-radio-control__option-checked {
	border-color: var(--wp--preset--color--primary) !important;
	background: rgba(219, 173, 2, 0.06) !important;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary);
}
.mm-checkout-main .wc-block-components-radio-control__input {
	left: 14px;
}

/* Gateway "Test Mode" pill — calmer */
.mm-checkout-main .woocommerce-test-mode-badge {
	background: rgba(219, 173, 2, 0.15);
	color: #B6900E;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 2px 10px;
	text-transform: uppercase;
}

/* --- Order-note toggle + terms text --- */
.mm-checkout-main .wc-block-checkout__add-note .wc-block-components-checkbox__label {
	font-weight: 600;
	color: var(--wp--preset--color--black);
}
.mm-checkout-main .wc-block-checkout__terms {
	font-size: 13px;
	color: rgba(15, 23, 42, 0.6);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 16px;
	margin-top: 8px;
}
.mm-checkout-main .wc-block-checkout__terms a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* --- Actions row: solid gold PLACE ORDER + ghost return-to-cart --- */
.mm-checkout-main .wc-block-checkout__actions_row {
	margin-top: 24px;
	gap: 16px;
}
.mm-checkout-main .wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 52px;
	padding: 0 28px;
	transition: filter 0.15s ease;
}
.mm-checkout-main .wc-block-components-checkout-place-order-button:hover {
	filter: brightness(0.94);
}
.mm-checkout-main .wc-block-components-checkout-return-to-cart-button {
	color: rgba(15, 23, 42, 0.7);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.mm-checkout-main .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--primary);
}

/* --- RIGHT COLUMN: dark sticky order-summary aside --- */
.mm-checkout-main .wc-block-checkout__sidebar {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: 28px;
	border: 1px solid rgba(219, 173, 2, 0.45);
	box-shadow: 0 12px 32px rgba(10, 10, 10, 0.18);
	position: sticky;
	top: 24px;
}
.mm-checkout-main .wc-block-components-checkout-order-summary__title {
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 12px;
	margin-bottom: 14px;
}
.mm-checkout-main .wc-block-components-checkout-order-summary__title-text {
	color: var(--wp--preset--color--primary);
}

/* Items — names, descriptions, prices */
.mm-checkout-main .wc-block-components-order-summary-item__image { display: none; }
.mm-checkout-main .wc-block-components-product-name {
	color: var(--wp--preset--color--white);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.mm-checkout-main .wc-block-components-product-metadata__description {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin-top: 4px;
}
.mm-checkout-main .wc-block-components-product-details__name {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mm-checkout-main .wc-block-components-product-details__value {
	color: var(--wp--preset--color--white);
}
.mm-checkout-main .wc-block-components-product-price__value,
.mm-checkout-main .wc-block-components-formatted-money-amount,
.mm-checkout-main .wc-block-formatted-money-amount {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.mm-checkout-main .wc-block-components-order-summary-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 0 22px;
	margin-bottom: 6px;
}
.mm-checkout-main .wc-block-components-order-summary-item:last-child {
	margin-bottom: 0;
}
/* Stack the price-and-name rows with proper rhythm, keep description below */
.mm-checkout-main .wc-block-components-order-summary-item__quantity { display: none; }
.mm-checkout-main .wc-block-components-product-name + .wc-block-components-product-price {
	margin-top: 4px;
}

/* Coupon expander */
.mm-checkout-main .wc-block-components-totals-coupon {
	padding: 10px 0;
}
.mm-checkout-main .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 0;
}
.mm-checkout-main .wc-block-components-totals-coupon input.input-text {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--white);
}
.mm-checkout-main .wc-block-components-totals-coupon button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-weight: 700;
}

/* Subtotal / discount / fees / tax / total rows */
.mm-checkout-main .wc-block-components-totals-wrapper {
	padding: 6px 0;
}
.mm-checkout-main .wc-block-components-totals-item {
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	padding: 12px 0;
	border: 0;
	line-height: 1.4;
}
.mm-checkout-main .wc-block-components-totals-item__label { color: rgba(255, 255, 255, 0.7); }
.mm-checkout-main .wc-block-components-totals-footer-item {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 22px;
	padding-bottom: 6px;
	margin-top: 12px;
	font-size: 16px;
}
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.mm-checkout-main .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--wp--preset--color--primary);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* Tiny reassurance line under the totals — uses a generated ::after on the
 * sidebar to avoid needing a template change. */
.mm-checkout-main .wc-block-checkout__sidebar::after {
	content: "Secure card payment. No account needed.";
	display: block;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

/* Responsive: stack on small screens, sidebar non-sticky */
@media (max-width: 900px) {
	.mm-checkout-main .wc-block-components-sidebar-layout {
		flex-direction: column;
	}
	.mm-checkout-main .wc-block-checkout__sidebar {
		position: static;
		margin-top: 24px;
	}
}

/* Mobile checkout — Woo collapses the sidebar into an "ORDER SUMMARY £xx.xx"
 * expandable accordion at the top of the form, and rerenders the totals/coupon
 * section as a separate block above the PLACE ORDER button. Adjust:
 *  - hide our ::after security disclaimer on mobile (it has nothing to
 *    anchor it to next to a collapsed accordion and looks orphaned), AND
 *  - dress the separate totals block to look like the dark branded sidebar so
 *    the bottom of the checkout stays on-brand instead of dropping back to a
 *    plain light card. The repeated "Order summary" heading + ADD COUPONS +
 *    totals get the same gold-on-black treatment.
 */
@media (max-width: 781px) {
	/* Woo renders the WC checkout block twice on mobile: a collapsed
	 * "ORDER SUMMARY £xx.xx" accordion in the desktop sidebar slot (sized
	 * around its hidden teleport-target content, so ~340px tall even though
	 * the visible label is one line), AND the real totals card inside the
	 * actions block below the form. Drop the duplicated top sidebar so the
	 * mobile checkout flows linearly: hero → form → order summary → place. */
	.mm-checkout-main .wc-block-checkout__sidebar {
		display: none;
	}

	/* Restyle the bottom Order Summary card as the dark/gold branded version
	 * — matches the desktop sidebar look, just stacked under the form on
	 * mobile. The element itself is .wp-block-woocommerce-checkout-order-summary-block
	 * (with secondary class .checkout-order-summary-block-fill-wrapper for the
	 * mobile "fill" placement). No outer .wc-block-components-checkout-step
	 * wraps it on mobile, so paint the block element directly. */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block {
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
		border: 1px solid rgba(219, 173, 2, 0.45);
		border-left: 3px solid var(--wp--preset--color--primary);
		padding: 24px 22px;
		margin-top: 18px;
		box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-checkout-step__title {
		color: var(--wp--preset--color--primary);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-bottom: 12px;
		margin: 0 0 14px;
	}
	/* Subtotal / Total rows inside the bottom card */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-item__label {
		color: rgba(255, 255, 255, 0.7);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-footer-item {
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		color: rgba(255, 255, 255, 0.7);
	}
	/* Product line item: name/description on dark */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-name {
		color: var(--wp--preset--color--white);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-metadata__description {
		color: rgba(255, 255, 255, 0.6);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-details__name {
		color: rgba(255, 255, 255, 0.55);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-product-details__value {
		color: var(--wp--preset--color--white);
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-order-summary-item {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	/* Coupon expander input on dark */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wc-block-components-totals-coupon input.input-text {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.2);
		color: var(--wp--preset--color--white);
	}

	/* Strip the per-row nested boxes Woo emits inside the order-summary block.
	 * Each sub-block (cart-items, coupon, subtotal, fee, discount, shipping,
	 * tax, totals) ships with its own border + padding that looks like a
	 * second layer of cards inside our dark wrapper. Flatten them so the
	 * dark card reads as one continuous surface, just with hairline dividers
	 * between groups. */
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block > div {
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-cart-items-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-subtotal-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-fee-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-discount-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-shipping-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-taxes-block,
	.mm-checkout-main .wp-block-woocommerce-checkout-order-summary-block
	.wp-block-woocommerce-checkout-order-summary-totals-block {
		padding: 0;
		margin: 0;
	}
}


/* =====================================================================
 *  WooCommerce Order Confirmation (/checkout/order-received/{id}/)
 *  ---------------------------------------------------------------------
 *  Scoped to .mm-order-confirmation-main, the <main> wrapper added by
 *  templates/order-confirmation.html. Each WC sub-block becomes a
 *  white card with the brand's gold-left accent stripe, matching the
 *  signup + checkout language.
 * ===================================================================== */

.mm-order-confirmation-main {
	font-family: var(--wp--preset--font-family--inter), system-ui, sans-serif;
}

.mm-order-confirmation-main > .wc-block-order-confirmation-status,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-status,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-summary,
.mm-order-confirmation-main > .wp-block-woocommerce-order-confirmation-totals-wrapper,
.mm-order-confirmation-main > .wc-block-order-confirmation-address-wrapper {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 28px 32px;
	margin-bottom: 18px;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

/* --- Status: "Order completed / Thank you" --- */
.mm-order-confirmation-main .wc-block-order-confirmation-status {
	padding: 32px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status h1 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0 0 8px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status h1::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-weight: 900;
	border-radius: 50%;
	margin-right: 12px;
	font-size: 16px;
	vertical-align: -6px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-status p {
	font-size: 15px;
	color: rgba(15, 23, 42, 0.7);
	margin: 0;
}

/* --- Summary: key/value list (Order#, Date, Total, Email, Payment) --- */
.mm-order-confirmation-main .wc-block-order-confirmation-summary {
	padding-top: 24px;
	padding-bottom: 24px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0;
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item__key {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.55);
}
.mm-order-confirmation-main .wc-block-order-confirmation-summary-list-item__value {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

/* --- Totals wrapper: "Order details" + the table --- */
.mm-order-confirmation-main .wc-block-order-confirmation-totals-wrapper h2,
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper h2,
.mm-order-confirmation-main .wc-block-order-confirmation-billing-wrapper h2 {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	margin: 0 0 18px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.55);
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table thead th:last-child,
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table td:last-child {
	text-align: right;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table td {
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 15px;
	color: var(--wp--preset--color--black);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__product a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	text-decoration: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__product a:hover {
	color: var(--wp--preset--color--primary);
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table tfoot th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.6);
	padding-top: 16px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-totals__table tfoot td {
	padding-top: 16px;
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--primary);
	border-bottom: 0;
}

/* --- Address wrapper: only Billing renders for digital memberships --- */
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper {
	/* The wrapper IS the card; remove inner column borders */
	padding: 28px 32px;
}
.mm-order-confirmation-main .wc-block-order-confirmation-billing-wrapper {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}
.mm-order-confirmation-main .wc-block-order-confirmation-billing-address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(15, 23, 42, 0.85);
}
.mm-order-confirmation-main .woocommerce-customer-details--phone {
	margin-top: 10px;
	font-size: 14px;
	color: rgba(15, 23, 42, 0.65);
}
.mm-order-confirmation-main .woocommerce-customer-details--phone::before {
	content: "Phone: ";
	font-weight: 700;
	color: rgba(15, 23, 42, 0.55);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-right: 6px;
}
/* Hide the shipping column entirely on digital memberships — no shipping
 * info ever exists, but Woo still emits the wrapper structure. */
.mm-order-confirmation-main .wc-block-order-confirmation-address-wrapper > .wp-block-column:first-child:not(:has(.wc-block-order-confirmation-shipping-address)) {
	display: none;
}

/* --- "Next steps" CTA row (theme-specific, defined in the template) --- */
.mm-order-confirmation-main .mm-next-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 8px;
}
.mm-order-confirmation-main .mm-next-step {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	padding: 22px 24px;
	border: 1px solid rgba(219, 173, 2, 0.45);
	box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
	align-items: start;
}
.mm-order-confirmation-main .mm-next-step__num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-size: 18px;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mm-order-confirmation-main .mm-next-step__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--white);
}
.mm-order-confirmation-main .mm-next-step__desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 4px;
	line-height: 1.5;
}
.mm-order-confirmation-main .mm-next-step__cta {
	display: inline-block;
	margin-top: 10px;
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.mm-order-confirmation-main .mm-next-step__cta:hover {
	color: var(--wp--preset--color--white);
}

/* =======================================================================
 * /login/ — Magic Login form theming.
 * The shortcode [magic_login_form] (HandyPlugins Magic Login Pro) emits a
 * minimal form inside #magic-login-shortcode. Style the input + button to
 * match brand language (gold focus, gold CTA, dark text) without touching
 * the plugin. Scoped to the .mm-login-card wrapper so we never re-style
 * the same elements if the shortcode shows up elsewhere.
 * ======================================================================= */

.mm-login-card #magic-login-shortcode,
.mm-login-card .magic-login-form {
	margin: 0;
}
.mm-login-card #magic-login-shortcode form,
.mm-login-card .magic-login-form form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-login-card #magic-login-shortcode label,
.mm-login-card .magic-login-form label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-ink, #0F172A);
}
.mm-login-card #magic-login-shortcode input[type="text"],
.mm-login-card #magic-login-shortcode input[type="email"],
.mm-login-card .magic-login-form input[type="text"],
.mm-login-card .magic-login-form input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	font-size: 16px;
	color: var(--mm-ink, #0F172A);
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-login-card #magic-login-shortcode input[type="text"]:focus,
.mm-login-card #magic-login-shortcode input[type="email"]:focus,
.mm-login-card .magic-login-form input[type="text"]:focus,
.mm-login-card .magic-login-form input[type="email"]:focus {
	outline: none;
	border-color: var(--mm-gold, #DBAD02);
	box-shadow: 0 0 0 2px rgba(219, 173, 2, 0.2);
}
.mm-login-card #magic-login-shortcode .magic-login-submit,
.mm-login-card .magic-login-form .magic-login-submit,
.mm-login-card #magic-login-shortcode input[type="submit"],
.mm-login-card .magic-login-form input[type="submit"],
.mm-login-card #magic-login-shortcode button[type="submit"],
.mm-login-card .magic-login-form button[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: 14px 22px;
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-login-card #magic-login-shortcode .magic-login-submit:hover,
.mm-login-card .magic-login-form .magic-login-submit:hover,
.mm-login-card #magic-login-shortcode input[type="submit"]:hover,
.mm-login-card .magic-login-form input[type="submit"]:hover,
.mm-login-card #magic-login-shortcode button[type="submit"]:hover,
.mm-login-card .magic-login-form button[type="submit"]:hover {
	background: var(--mm-ink, #0F172A);
	color: var(--mm-gold, #DBAD02);
}
.mm-login-card .info,
.mm-login-card .magic-login-form .info {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FEFCE8;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	color: #92400E;
	font-size: 14px;
	line-height: 1.5;
}
.mm-login-card .success,
.mm-login-card .magic-login-form .success {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #F0FDF4;
	border-left: 4px solid #16A34A;
	color: #166534;
	font-size: 14px;
	line-height: 1.5;
}
.mm-login-card .error,
.mm-login-card .magic-login-form .error,
.mm-login-card #login_error {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #FEF2F2;
	border-left: 4px solid #B91C1C;
	color: #991B1B;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.mm-login-card {
		padding: 28px 22px !important;
	}
}

/* =======================================================================
 * /my-membership/ + /instructor-hub/ — Rank request UI (v1.20.0).
 * Member's request modal + instructor's pending-inbox list + the direct
 * Promote-a-member screen all share these tokens.
 * ======================================================================= */

/* Member "Wrong or no rank?" card (sits in the /my-membership/ grid). */
.mm-rank-card .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 12px 18px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-rank-card .cmp-btn-secondary:hover,
.mm-rank-card .cmp-btn-secondary:focus {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
}

/* Rank-request modal — branded form fields inside the existing cmp-booking-modal shell. */
.cmp-rank-modal .cmp-rank-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.cmp-rank-modal .cmp-rank-field label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-ink, #0F172A);
}
.cmp-rank-modal .cmp-rank-field input[type="text"],
.cmp-rank-modal .cmp-rank-field input[type="number"],
.cmp-rank-modal .cmp-rank-field select,
.cmp-rank-modal .cmp-rank-field textarea {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	color: var(--mm-ink, #0F172A);
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
}
.cmp-rank-modal .cmp-rank-field textarea {
	resize: vertical;
	min-height: 60px;
}
.cmp-rank-modal .cmp-rank-field input:focus,
.cmp-rank-modal .cmp-rank-field select:focus,
.cmp-rank-modal .cmp-rank-field textarea:focus {
	outline: none;
	border-color: var(--mm-gold, #DBAD02);
	box-shadow: 0 0 0 2px rgba(219, 173, 2, 0.2);
}

/* Instructor inbox of pending requests. */
.cmp-rank-inbox-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.cmp-rank-request-item {
	border: 1px solid #E2E8F0;
	border-left: 4px solid var(--mm-gold, #DBAD02);
	background: #FAFAFA;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cmp-rank-request-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.cmp-rank-request-meta strong {
	font-size: 15px;
	color: var(--mm-ink, #0F172A);
}
.cmp-rank-request-discipline {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #64748B;
}
.cmp-rank-request-ask {
	font-size: 16px;
	color: var(--mm-ink, #0F172A);
	display: flex;
	gap: 8px;
	align-items: center;
}
.cmp-rank-request-arrow {
	color: var(--mm-gold, #DBAD02);
	font-weight: 800;
}
.cmp-rank-request-note {
	margin: 0;
	font-size: 13.5px;
	font-style: italic;
	color: #475569;
	padding-left: 12px;
	border-left: 2px solid #E2E8F0;
}
.cmp-rank-request-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.cmp-rank-request-when {
	font-size: 12px;
	color: #64748B;
}
.cmp-rank-request-actions {
	display: flex;
	gap: 8px;
}
.cmp-rank-request-actions .cmp-btn {
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}
.cmp-rank-request-actions .cmp-btn-primary {
	background: var(--mm-gold, #DBAD02);
	color: var(--mm-ink, #0F172A);
	border: 1px solid var(--mm-gold, #DBAD02);
}
.cmp-rank-request-actions .cmp-btn-secondary {
	background: transparent;
	color: var(--mm-ink, #0F172A);
	border: 1px solid #E2E8F0;
}

/* Direct Promote-a-member screen. */
.cmp-rank-promote-search input[type="search"] {
	border-radius: 0;
}
.cmp-rank-promote-results {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cmp-rank-promote-result {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	text-decoration: none;
	color: var(--mm-ink, #0F172A);
	font-size: 14px;
	transition: border-color 0.15s ease;
}
.cmp-rank-promote-result:hover,
.cmp-rank-promote-result:focus {
	border-color: var(--mm-gold, #DBAD02);
}
.cmp-rank-promote-result span {
	color: #64748B;
	font-size: 13px;
}


/* ============================================================================
   DZ — MOBILE-FIRST & ACCESSIBILITY LAYER
   ----------------------------------------------------------------------------
   DragonZone's audience is parents AND grandparents booking on a phone, often
   one-handed, sometimes with a toddler attached. This layer is deliberately
   last in the file so it wins over the inherited gym styling.

   Rules of the house:
     - Nothing interactive smaller than 48px.
     - No input font below 16px (iOS silently zooms the page otherwise).
     - Visible focus on everything, always.
     - Motion is optional.
   ========================================================================== */

/* --- Headings use the display face -------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--dz-display);
	font-weight: 600;
}

/* --- Touch targets ------------------------------------------------------ */
.wp-block-button__link,
.cmp-btn,
button:not(.is-link),
input[type="submit"],
input[type="button"],
.dz-btn {
	min-height: var(--dz-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--dz-display);
	font-weight: 600;
	border-radius: var(--dz-radius-pill);
	text-decoration: none;
	line-height: 1.2;
	/* Stops iOS shrinking tapped buttons and killing the hit area. */
	touch-action: manipulation;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
/* Tactile press. The global prefers-reduced-motion rule (end of file)
   flattens this along with everything else. */
.dz-btn:active {
	transform: scale(0.96);
}

/* Primary/secondary intent, mapped onto the brand rather than gold-on-black. */
.dz-btn--primary {
	background: var(--cmp-primary);
	color: var(--wp--preset--color--on-primary);
	border: 2px solid var(--cmp-primary);
}
.dz-btn--primary:hover,
.dz-btn--primary:focus-visible {
	background: var(--cmp-primary-hover);
	border-color: var(--cmp-primary-hover);
	color: #fff;
}
.dz-btn--secondary {
	background: var(--dz-secondary);
	color: #fff;
	border: 2px solid var(--dz-secondary);
}
/* theme.json's global button style gives every `.wp-block-button__link` a
   2px solid *primary* (red) border by default — fine for red buttons, but
   it leaves a mismatched red ring around buttons whose background was
   swapped to another preset colour (e.g. the green "Enquire" pill on the
   Premium party card) since only backgroundColor was set on those blocks,
   not borderColor. Match the border to whichever background preset is
   actually in use so filled pills never show a contrasting ring. */
.wp-block-button__link.has-secondary-background-color { border-color: var(--dz-secondary); }
.wp-block-button__link.has-accent-background-color     { border-color: var(--wp--preset--color--accent); }
.dz-btn--quiet {
	background: #fff;
	color: var(--cmp-text);
	border: 2px solid var(--cmp-border);
}

/* --- Forms: the booking flow lives or dies here -------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="search"],
select, textarea,
.cmp-input, .cmp-select {
	min-height: var(--dz-tap);
	/* 16px minimum: below this iOS Safari zooms on focus and the parent loses
	   their place in the form. Non-negotiable. */
	font-size: 16px;
	font-family: var(--wp--preset--font-family--body);
	padding: 12px 14px;
	border: 2px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	background: #fff;
	color: var(--cmp-text);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
label, .cmp-label {
	font-weight: 700;
	display: inline-block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--small);
}
/* Number steppers (child/adult counts) deserve real buttons, not tiny arrows. */
.dz-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.dz-stepper button {
	width: var(--dz-tap);
	height: var(--dz-tap);
	border-radius: 50%;
	border: 2px solid var(--cmp-border);
	background: #fff;
	font-size: 24px;
	line-height: 1;
	color: var(--cmp-text);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.dz-stepper button:hover,
.dz-stepper button:focus-visible {
	border-color: var(--dz-secondary);
	background: var(--wp--preset--color--secondary-soft, #DDF0D6);
}
.dz-stepper button:active {
	transform: scale(0.96);
}
.dz-stepper input {
	width: 4ch;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	border: 0;
	min-height: auto;
	/* The global form rule gives inputs 12px/14px padding; at 4ch wide and
	   border-box that left ~20px for a 20px digit — the count was clipped
	   to an unreadable sliver. */
	padding: 0;
	/* Equal-width digits: 1 → 10 must not nudge the +/- buttons. */
	font-variant-numeric: tabular-nums;
}

/* --- Focus: visible for everyone, not just keyboard purists -------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--cmp-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Readability -------------------------------------------------------- */
p, li {
	max-width: 68ch;
}
.dz-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.6;
	color: var(--cmp-text);
}

/* --- Cards -------------------------------------------------------------- */
.dz-card {
	background: #fff;
	border: 2px solid var(--cmp-border);
	border-radius: var(--dz-radius-lg);
	padding: clamp(20px, 5vw, 28px);
	box-shadow: var(--dz-shadow);
	/* Cards are always a light surface, so pin the text to ink. Without
	   this a card inside a light-on-dark band (the homepage party section
	   sets has-white-color on the whole group) inherits the band's white
	   text — white headings on white boxes. */
	color: var(--cmp-text);
}

/* --- Mobile layout ------------------------------------------------------ */
@media (max-width: 781px) {
	/* Anything laid out in columns collapses to one column and full-width
	   buttons — thumb-friendly, no horizontal scanning. */
	.dz-stack-mobile,
	.dz-stack-mobile > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.dz-cta-group .wp-block-button,
	.dz-cta-group .dz-btn {
		width: 100%;
	}
	.dz-cta-group .wp-block-button__link,
	.dz-cta-group .dz-btn {
		width: 100%;
	}
	/* Nothing should ever scroll sideways on a phone. */
	body {
		overflow-x: hidden;
	}
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Skip link ---------------------------------------------------------- */
.dz-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cmp-primary);
	color: #fff;
	padding: 14px 20px;
	z-index: 10000;
	border-radius: 0 0 var(--cmp-radius) 0;
	font-weight: 700;
}
.dz-skip-link:focus {
	left: 0;
}

/* ========================================================================
   DragonZone landing page — storybook re-skin (translated from Mowgli
   HomeScreen). Character + meadow artwork are decorative CSS layers so the
   copy stays editable; images live in ../images/. No animation on the
   characters (per brand direction — they must sit still).
   ======================================================================== */

/* --- Hero: meadow background + frosted content card + dragon mascot ------
   This is "Tier A" marketing hero (per the Mowgli spec): used on the
   homepage, and — generalised, no per-template CSS needed — on Prices,
   Parties and Locations. A white wavy divider curves into the section
   below; the big dragon mascot on the right is homepage-only
   (`.dz-hero--home`) so inner pages keep just the fairy-dragon card peek. */
.dz-hero--meadow {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 8vw, 96px) 0 clamp(56px, 9vw, 96px);
	background:
		linear-gradient(120deg, rgba(169,228,242,.35) 0%, rgba(221,240,214,.30) 40%, rgba(247,251,244,.85) 100%),
		url('../images/bg-meadow.png') center bottom / cover no-repeat;
	background-color: var(--wp--preset--color--sky-soft, #E8F7FC);
}
/* Wavy white divider curving into the (light) section that follows. */
.dz-hero--meadow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(28px, 5vw, 52px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C220,90 420,0 720,30 C1020,60 1220,10 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	z-index: 1;
	pointer-events: none;
}
.dz-hero__card {
	position: relative;
	z-index: 2;
	max-width: 540px;
	margin: 0 auto;
	background: rgba(255,255,255,.88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: var(--dz-radius-lg);
	padding: clamp(24px, 6vw, 48px);
	box-shadow: 0 24px 60px rgba(34,48,26,.16);
}
.dz-hero__title { margin-top: 0; }
.dz-hero__title-accent { color: var(--cmp-primary); }
.dz-hero__note { margin-bottom: 0; }
/* Fairy-dragon peeking over the card corner. */
.dz-hero__card::before {
	content: "";
	position: absolute;
	top: -34px;
	left: -14px;
	width: 68px;
	height: 68px;
	background: url('../images/character-fairydragon.png') center / contain no-repeat;
	filter: drop-shadow(0 6px 8px rgba(34,48,26,.25));
	pointer-events: none;
}
/* Dragon mascot — homepage only. On mobile it stands large in the meadow
   below the card (bottom-anchored, partially overlapping the card's lower
   edge); on wider screens it moves beside the card instead. */
.dz-hero--meadow.dz-hero--home {
	padding-bottom: clamp(260px, 66vw, 320px);
}
.dz-hero--meadow.dz-hero--home::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(78vw, 320px);
	height: clamp(220px, 58vw, 300px);
	background: url('../images/character-dragon.png') center bottom / contain no-repeat;
	filter: drop-shadow(0 18px 28px rgba(34,48,26,.30));
	z-index: 1;
	pointer-events: none;
}
@media (min-width: 900px) {
	.dz-hero--meadow.dz-hero--home { padding-bottom: clamp(56px, 9vw, 96px); }
	.dz-hero__card { margin: 0 0 0 clamp(16px, 6vw, 80px); }
	.dz-hero--meadow.dz-hero--home::after {
		left: auto;
		transform: none;
		right: clamp(16px, 6vw, 96px);
		bottom: 0;
		width: clamp(260px, 34vw, 460px);
		height: 90%;
	}
}

/* --- Quick-fact badges -------------------------------------------------- */
.dz-facts .wp-block-column { display: flex; }
.dz-fact {
	flex: 1;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 2px solid var(--wp--preset--color--secondary-soft, #DDF0D6);
	border-radius: var(--dz-radius-lg);
	padding: clamp(16px, 4vw, 24px);
	box-shadow: var(--dz-shadow);
}
.dz-fact__icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary-soft, #DDF0D6);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}
/* Simple inline-SVG glyphs (ink #22301A) so the pastel circles aren't empty. */
.dz-fact--sky .dz-fact__icon {
	background-color: var(--wp--preset--color--sky, #A9E4F2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322301A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M2 20c0-3.3 3.1-6 7-6s7 2.7 7 6'/%3E%3Ccircle cx='17' cy='8' r='2.6'/%3E%3Cpath d='M15.4 14.2c2.7.5 4.6 2.6 4.6 5.8'/%3E%3C/svg%3E");
}
.dz-fact--meadow .dz-fact__icon {
	background-color: var(--wp--preset--color--secondary-soft, #DDF0D6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322301A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8.5' cy='6' rx='2' ry='2.6' transform='rotate(-18 8.5 6)'/%3E%3Cellipse cx='8.5' cy='13' rx='2.3' ry='3' transform='rotate(-8 8.5 13)'/%3E%3Cellipse cx='16' cy='10' rx='2' ry='2.6' transform='rotate(18 16 10)'/%3E%3Cellipse cx='16' cy='18' rx='2.3' ry='3' transform='rotate(8 16 18)'/%3E%3C/svg%3E");
}
.dz-fact--gold .dz-fact__icon {
	background-color: var(--wp--preset--color--accent-soft, #FDF1D8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322301A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16l1.5-5.5A2 2 0 0 1 7.4 9h9.2a2 2 0 0 1 1.9 1.5L20 16'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1.5'/%3E%3Ccircle cx='7.5' cy='20' r='1.4'/%3E%3Ccircle cx='16.5' cy='20' r='1.4'/%3E%3C/svg%3E");
}
.dz-fact__text > * { margin: 0; }
.dz-fact__title { font-family: var(--dz-display); font-weight: 700; color: var(--wp--preset--color--text, #22301A); font-size: var(--wp--preset--font-size--h4, 20px); }
.dz-fact__sub { color: var(--cmp-text-light, #5C6B52); font-size: var(--wp--preset--font-size--small, 15px); }

/* --- Section scaffolding ------------------------------------------------ */
.dz-section--sky { background: var(--wp--preset--color--sky-soft, #E8F7FC); }
.dz-section--cream { background: var(--wp--preset--color--cream, #FDF6EC); }
.dz-section__title { text-align: center; }
.dz-section__sub { text-align: center; color: var(--cmp-text-light, #5C6B52); max-width: 60ch; margin-left: auto; margin-right: auto; }
/* Fairy-dragon accent floating above a section title. */
.dz-section__title--fairy::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 8px;
	background: url('../images/character-fairydragon.png') center / contain no-repeat;
	filter: drop-shadow(0 4px 6px rgba(34,48,26,.2));
}

/* --- Adventure-zone cards -----------------------------------------------
   NOTE: overflow lives on `.dz-zone__media` (clips its own square corners
   to match the card's rounded top), not on `.dz-zone` itself — the zone
   container needs visible overflow so its peeking character can sit
   outside the card edge without being clipped. */
.dz-zone {
	position: relative;
	background: #fff;
	border-radius: var(--dz-radius-lg);
	box-shadow: var(--dz-shadow);
}
.dz-zone > .wp-block-heading { padding: 0 24px; margin-top: 20px; }
.dz-zone > p { padding: 0 24px 24px; color: var(--cmp-text-light, #5C6B52); }
.dz-zone__media {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--dz-radius-lg) var(--dz-radius-lg) 0 0;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--secondary-soft, #DDF0D6), rgba(78,154,63,.28));
}
.dz-zone__media--sky { background: linear-gradient(135deg, var(--wp--preset--color--sky-soft, #E8F7FC), rgba(169,228,242,.4)); }
.dz-zone__media--gold { background: linear-gradient(135deg, var(--wp--preset--color--accent-soft, #FDF1D8), rgba(240,185,74,.4)); }
/* One character per zone, rendered large inside its pastel media area at
   all widths (mobile included) instead of an empty placeholder circle. */
.dz-zone__icon {
	width: 78%;
	max-width: 132px;
	height: 84%;
	background: center / contain no-repeat;
	filter: drop-shadow(0 6px 10px rgba(34,48,26,.22));
}
.dz-zone--knight .dz-zone__icon { background-image: url('../images/character-knight.png'); }
.dz-zone--girl .dz-zone__icon { background-image: url('../images/character-girl.png'); }
.dz-zone--dragon .dz-zone__icon { background-image: url('../images/character-dragon.png'); }

/* --- Party band ---------------------------------------------------------
   `.dz-section__sub` sets its own (dark ink) colour for use on light
   sections, which — since it targets the paragraph directly — would beat
   the inherited white text color set on these green/red bands. Restore
   soft-white here for WCAG AA contrast. */
.dz-party .dz-section__sub,
.dz-cta-band .dz-section__sub { color: rgba(255,255,255,.92); }
.dz-party { position: relative; overflow: hidden; }
.dz-party-card { position: relative; text-align: left; }
.dz-party-card--premium { background: var(--wp--preset--color--accent, #F0B94A); border-color: var(--wp--preset--color--accent, #F0B94A); }
.dz-badge {
	position: absolute;
	top: -12px;
	right: 16px;
	font-family: var(--dz-display);
	font-weight: 700;
	font-size: 13px;
	padding: 5px 14px;
	border-radius: var(--dz-radius-pill);
	color: #fff;
}
.dz-badge--red { background: var(--cmp-primary); }
.dz-price { font-size: 15px; color: var(--cmp-text-light, #5C6B52); }
.dz-price strong { font-family: var(--dz-display); font-size: 34px; color: var(--cmp-primary); margin-right: 4px; }
@media (min-width: 1000px) {
	.dz-party--dragon::before {
		content: "";
		position: absolute;
		left: -50px;
		bottom: 0;
		width: 190px;
		height: 240px;
		background: url('../images/character-dragon.png') center bottom / contain no-repeat;
		opacity: .9;
		filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
		pointer-events: none;
	}
}

/* --- Button variants used on the landing page --------------------------- */
.dz-btn--outline { background: #fff; color: var(--cmp-primary); border: 2px solid var(--cmp-primary); }
.dz-btn--outline:hover, .dz-btn--outline:focus-visible { background: var(--cmp-primary); color: #fff; }
.dz-btn--outline-green { background: #fff; color: var(--dz-secondary); border: 2px solid var(--dz-secondary); }
.dz-btn--outline-green:hover, .dz-btn--outline-green:focus-visible { background: var(--dz-secondary); color: #fff; }
.dz-btn--gold { background: var(--wp--preset--color--accent, #F0B94A); color: var(--cmp-text); border: 2px solid var(--wp--preset--color--accent, #F0B94A); }
.dz-btn--gold:hover, .dz-btn--gold:focus-visible { background: #D4A540; border-color: #D4A540; }
.dz-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.4); }
.dz-btn--ghost:hover, .dz-btn--ghost:focus-visible { background: rgba(255,255,255,.22); }

/* --- Closing CTA band with dragon --------------------------------------- */
.dz-cta-band { position: relative; }
.dz-cta-band--dragon::after {
	content: "";
	display: block;
	width: 128px;
	height: 128px;
	margin: 24px auto 0;
	background: url('../images/character-dragon.png') center bottom / contain no-repeat;
	filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
}

/* --- Small note callout ------------------------------------------------- */
.dz-note {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--wp--preset--color--accent-soft, #FDF1D8);
	border-radius: var(--cmp-radius);
	color: var(--wp--preset--color--warning, #B26A00);
	font-size: var(--wp--preset--font-size--small, 15px);
	max-width: none;
}

/* ========================================================================
   Simple page hero — "Tier B" (Mowgli spec): a flat meadow-green band with
   a small fairy-dragon above a white Fredoka heading. Used on Play
   sessions, Schedule, Book a visit and other simple/utility pages, in
   place of the old MMA dark-hero + diagonal hatch. Replaces
   `.is-style-dark-hero` on the templates this task converts.
   ======================================================================== */
.dz-hero-band {
	position: relative;
	background-color: var(--wp--preset--color--secondary, #4E9A3F);
	background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
	background-size: 15px 15px;
	color: #fff;
	padding: clamp(40px, 7vw, 64px) clamp(20px, 4vw, 40px) clamp(32px, 6vw, 48px);
}
.dz-hero-band__mascot {
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	background: url('../images/character-fairydragon.png') center / contain no-repeat;
	filter: drop-shadow(0 6px 8px rgba(0,0,0,.2));
}
.dz-hero-band h1,
.dz-hero-band__title {
	color: #fff;
	margin: 0 0 10px;
}
.dz-hero-band p,
.dz-hero-band__lede {
	color: rgba(255,255,255,.92);
	margin: 0;
	max-width: 620px;
	font-size: var(--wp--preset--font-size--lede, 18px);
	line-height: 1.6;
}

/* ========================================================================
   Login card — light, centred, fairy-dragon peeking the top-right corner.
   ======================================================================== */
.dz-login-card {
	position: relative;
	max-width: 480px;
	margin: 0 auto;
	overflow: visible;
}
.dz-login-card::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -10px;
	width: 76px;
	height: 76px;
	background: url('../images/character-fairydragon.png') center / contain no-repeat;
	filter: drop-shadow(0 6px 8px rgba(34,48,26,.25));
	pointer-events: none;
}
.dz-login-card .dz-lede { text-align: center; }
.dz-login-links { color: var(--cmp-text-light, #5C6B52); line-height: 1.8; }
.dz-login-links a { color: var(--cmp-primary); font-weight: 700; text-decoration: none; }
.dz-login-links a:hover { text-decoration: underline; }

/* ========================================================================
   404 — fairy-dragon, big red "404", ink heading, two pill actions.
   ======================================================================== */
.dz-404 { text-align: center; }
.dz-404__mascot {
	width: 140px;
	height: 140px;
	margin: 0 auto 8px;
	background: url('../images/character-fairydragon.png') center / contain no-repeat;
	filter: drop-shadow(0 10px 14px rgba(34,48,26,.22));
}
.dz-404__code {
	color: var(--cmp-primary);
	margin: 0 0 4px;
	line-height: 1;
}

/* --- Contact page grid ---------------------------------------------------
   Was inline display:grid with fixed 1fr/1.2fr columns, which cannot
   respond to a phone: the two columns squeezed side by side and the map
   iframe collapsed to zero width. Classes so media queries can reach it. */
.dz-contact-grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 60px;
	align-items: start;
}
.dz-contact-map {
	aspect-ratio: 5 / 4;
	position: relative;
	overflow: hidden;
	border-radius: var(--dz-radius-lg);
	border: 2px solid var(--cmp-border);
}
@media (max-width: 880px) {
	.dz-contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.dz-contact-map { aspect-ratio: 4 / 3; }
}

/* --- Contact "how to reach us" methods ----------------------------------
   The three rows (Email / Facebook / In person) are now native blocks so
   the copy is editable in the page editor (Pages -> Contact). These classes
   replace the former inline styles; each row's icon stays a small HTML block
   (a decorative SVG that a client never needs to touch). */
.dz-contact-methods { display: flex; flex-direction: column; gap: 36px; }
.dz-contact-method { display: flex; gap: 18px; align-items: flex-start; }
/* These groups get WP's is-layout-flow margins between children; the grid/flex
   gaps above already handle spacing, so cancel the injected margins to keep the
   map aligned to the top of the intro column and the rows evenly spaced. */
.dz-contact-grid > *,
.dz-contact-methods > *,
.dz-contact-method > * { margin-block-start: 0; margin-block-end: 0; }
.dz-contact-method__icon {
	width: 44px; height: 44px; flex-shrink: 0;
	background: #22301A; color: #F0B94A;
	display: flex; align-items: center; justify-content: center;
}
.dz-contact-method__text h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.dz-contact-method__text p { margin: 0 0 6px; color: #475569; font-size: 15px; line-height: 1.55; }
.dz-contact-method__text a { color: #22301A; font-weight: 700; border-bottom: 1px solid #F0B94A; text-decoration: none; }

/* --- WooCommerce My Account area (below the custom cards) ---------------
   Woo's default output rendered as a bare link list; style the endpoint
   nav as brand pills and give the content column breathing room. */
.mm-account-woo .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 24px 0 0;
}
.mm-account-woo .woocommerce-MyAccount-navigation li { margin: 0; }
.mm-account-woo .woocommerce-MyAccount-navigation a {
	display: inline-block;
	padding: 10px 18px;
	border: 2px solid var(--cmp-border);
	border-radius: var(--dz-radius-pill);
	background: #fff;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	color: var(--cmp-text);
}
.mm-account-woo .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--secondary-soft, #DDF0D6);
	border-color: var(--wp--preset--color--secondary, #4E9A3F);
}
.mm-account-woo .woocommerce-MyAccount-content {
	background: #fff;
	border: 2px solid var(--cmp-border);
	border-radius: var(--dz-radius-lg);
	padding: clamp(20px, 5vw, 28px);
}
.mm-account-woo .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Grid-blowout guard: a grid track defaults to min-width:auto (min-content),
   so any wide child inside these shortcode-filled columns can force the
   whole track — and the page — wider than a phone viewport. min-width:0
   lets the tracks shrink and the content wrap. */
.mm-membership-body { min-width: 0; }
.mm-membership-body > div { min-width: 0; }

/* The upcoming-session row is a 5-column desktop grid (date/time/name/
   status/manage) with fixed px tracks — it can't fit a phone-width card, so
   "Manage" used to overflow the page. Re-lay it as a tidy two-row grid:
   [date] [time] [booked] / [date] [name] [manage]. */
@media (max-width: 600px) {
	.mm-upcoming__row {
		grid-template-columns: 64px 1fr auto !important;
		gap: 6px 14px !important;
	}
	.mm-upcoming__row > :nth-child(1) { grid-row: 1 / span 2; }          /* date badge */
	.mm-upcoming__row > :nth-child(2) { grid-column: 2; grid-row: 1; }   /* time */
	.mm-upcoming__row > :nth-child(4) { grid-column: 3; grid-row: 1; justify-self: end; } /* booked */
	.mm-upcoming__row > :nth-child(3) { grid-column: 2; grid-row: 2; }   /* name */
	.mm-upcoming__row > :nth-child(5) { grid-column: 3; grid-row: 2; justify-self: end; } /* manage */
}

/* Logged-out login form on My Account: WooCommerce renders a bare default
   form here, which was the one screen on the site not in the brand's card
   style. Wrap it as a centred card with branded inputs and button. */
.mm-account-woo .woocommerce-form-login {
	max-width: 460px;
	margin: 24px auto 0;
	background: #fff;
	border: 2px solid var(--cmp-border);
	border-radius: var(--dz-radius-lg);
	padding: clamp(20px, 5vw, 28px);
	box-shadow: var(--dz-shadow);
}
.mm-account-woo .woocommerce-form-login .woocommerce-form-row { margin-bottom: 16px; }
.mm-account-woo .woocommerce-form-login label { font-weight: 700; }
.mm-account-woo .woocommerce-form-login input[type="text"],
.mm-account-woo .woocommerce-form-login input[type="email"],
.mm-account-woo .woocommerce-form-login input[type="password"] {
	width: 100%;
	min-height: var(--dz-tap);
	font-size: 16px;
	padding: 12px 14px;
	border: 2px solid var(--cmp-border);
	border-radius: var(--cmp-radius);
	background: #fff;
	box-sizing: border-box;
}
.mm-account-woo .woocommerce-form-login .button,
.mm-account-woo .woocommerce-form-login button[type="submit"] {
	background: var(--cmp-primary);
	color: #fff;
	border: 0;
	border-radius: var(--dz-radius-pill);
	min-height: var(--dz-tap);
	padding: 0 28px;
	font-family: var(--dz-display);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.mm-account-woo .woocommerce-form-login .button:hover,
.mm-account-woo .woocommerce-form-login button[type="submit"]:hover { background: var(--wp--preset--color--primary-hover, #A32716); }
.mm-account-woo .woocommerce-form-login .button:active,
.mm-account-woo .woocommerce-form-login button[type="submit"]:active { transform: scale(0.96); }
.mm-account-woo .woocommerce-form-login .woocommerce-LostPassword a {
	color: var(--cmp-primary);
	font-weight: 600;
}
/* WooCommerce prints an <h2>Login</h2> above the form — centre it over the card. */
.mm-account-woo .u-column1 > h2,
.mm-account-woo .woocommerce > h2:first-child {
	text-align: center;
}