/* ==========================================================================
   MLS THEME — main stylesheet
   Brand fonts: Protest Strike (headings) + Rubik (body) — per spec.
   The v6 design uses Fraunces/Inter; we map those CSS uses to Protest/Rubik
   so the brand standards are honoured while the layout stays identical.
   ========================================================================== */

:root {
	--orange: #F26725;
	--orange-dark: #d9541a;
	--orange-light: rgba(242, 103, 37, 0.1);
	--teal: #005C7F;
	--teal-dark: #004863;
	--teal-darker: #003045;
	--teal-light: rgba(0, 92, 127, 0.08);
	--ink: #0F1A21;
	--muted: #333537;
	--line: #E8E4DC;
	--paper: #FAF8F4;
	--paper-warm: #F3EDE3;
	--white: #FFFFFF;
	--green: #15803d;
	--purple: #9333ea;

	/* Per-type color cues — same color binds the filter chip and the cards.
	 * Very light warm peach / cool slate / dusty mauve.
	 */
	--type-inperson-bg:        #FEF3EC;
	--type-inperson-bg-hover:  #FCE3D2;
	--type-inperson-strong:    #C95F2C;

	--type-online-bg:          #EEF3F8;
	--type-online-bg-hover:    #DCE6EF;
	--type-online-strong:      #466A8E;

	--type-recorded-bg:        #F5EEF1;
	--type-recorded-bg-hover:  #E8D6DE;
	--type-recorded-strong:    #8A5C73;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 16px;
	--radius-full: 999px;
	--shadow-sm: 0 4px 14px -4px rgba(0,0,0,0.1);
	--shadow-md: 0 20px 40px -20px rgba(15, 26, 33, 0.18);
	--transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

	/* Per brand standards: Protest Strike for headings, Rubik for body. */
	--font-display: 'Protest Strike', Georgia, serif;
	--font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	background: var(--paper);
	color: var(--ink);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	font-weight: 300;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
}

h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 22px; }
h4 { font-size: 20px; }

p { margin: 0 0 1em; }

em { font-style: normal; color: var(--orange); }

.serif, .display { font-family: var(--font-display); font-style: normal; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 12px; background: var(--orange); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 9999;
}
.skip-link:focus { left: 12px; }

/* ============ BUTTONS ============ */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px; border-radius: var(--radius-sm);
	font-size: 16px; font-weight: 500; border: none; cursor: pointer;
	transition: var(--transition); font-family: inherit; white-space: nowrap;
	text-decoration: none;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(242,103,37,0.5); }
/* `.btn-dark` is kept as a class (used in many templates) but styled as an
 * orange button so every primary CTA across the theme is the same colour. */
.btn-dark { background: var(--orange); color: #fff; }
.btn-dark:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(242, 103, 37, 0.5); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--orange); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
body .btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light-small {
	background: #fff; color: var(--teal); padding: 11px 20px; font-size: 15px;
	border-radius: var(--radius-sm); font-weight: 500; display: inline-flex;
	align-items: center; gap: 6px; transition: var(--transition);
}
.btn-light-small:hover { background: var(--orange); color: #fff; transform: translateY(-1px); gap: 10px; }

.kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 500; letter-spacing: 0.15em;
	text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
	font-family: var(--font-body);
}
.kicker::before { content: '●'; font-size: 8px; }

/* ============ HEADER / NAV ============ */
.mls-header {
	position: relative; z-index: 100;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	/* Note: backdrop-filter intentionally removed. It was creating a stacking
	 * context that trapped position:fixed children (the mobile slide-out)
	 * behind the header. The header is in normal flow (position: relative),
	 * so the blur effect was invisible anyway — solid paper bg is cleaner. */
}

/* Visibility utilities used in the header CTA. */
.mls-mobile-only { display: none; }
.mls-desktop-only { display: inline; }
@media (max-width: 1024px) {
	.mls-desktop-only { display: none; }
	.mls-mobile-only  { display: inline; }
}
.nav-inner {
	max-width: 1400px; margin: 0 auto; padding: 14px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-logo img,
.nav-logo .custom-logo,
.custom-logo-link img { height: 70px; width: auto; max-width: 320px; object-fit: contain; }

.mls-nav .nav-links,
.mls-nav .menu { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }
.mls-nav .menu li,
.mls-nav .nav-links li { position: relative; }
.mls-nav a { font-size: 16px; font-weight: 400; padding: 6px 0; position: relative; display: inline-flex; align-items: center; gap: 4px; }
.mls-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--orange); transition: all 0.25s; transform: translateX(-50%); }
.mls-nav a:hover, .mls-nav a.active, .mls-nav .current-menu-item > a { color: var(--orange); }
.mls-nav a:hover::after, .mls-nav a.active::after, .mls-nav .current-menu-item > a::after { width: 100%; }

/* Caret on items that have a sub-menu — sits AFTER the label text. The
 * existing ::after on every .mls-nav a is the orange underline; that one
 * uses absolute positioning at the bottom, so this inline ::after for the
 * caret doesn't conflict with it. We just add a small inline-block element
 * AFTER the text via a sibling span trick — done by appending it as a
 * separate after-pseudo here would clash, so we use the parent <li>'s
 * ::after instead, positioned next to the link.
 */
.mls-nav .menu-item-has-children > a,
.mls-nav .nav-links .has-children > a { padding-right: 16px; }

.mls-nav .menu-item-has-children > a::before,
.mls-nav .nav-links .has-children > a::before {
	content: '';
	position: absolute;
	right: 15px; top: 50%;
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
	transition: transform 0.2s, opacity 0.2s;
}
.mls-nav .menu-item-has-children:hover > a::before {
	transform: translateY(-30%) rotate(225deg);
	opacity: 1;
}

/* Dropdown */
.mls-nav .sub-menu {
	position: absolute; top: 100%; left: -16px;
	min-width: 220px; padding: 10px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	list-style: none; margin: 0;
	display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
	z-index: 50;
}
.mls-nav .menu-item-has-children:hover > .sub-menu,
.mls-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity 0.18s, transform 0.18s, visibility 0s;
}
.mls-nav .sub-menu li { width: 100%; }
.mls-nav .sub-menu a {
	display: block; padding: 9px 14px; font-size: 14px; font-weight: 400;
	color: var(--ink); border-radius: var(--radius-sm);
}
.mls-nav .sub-menu a::after { display: none; }
.mls-nav .sub-menu a:hover { background: var(--paper); color: var(--orange); }
.mls-nav .sub-menu .current-menu-item > a { background: var(--orange-light); color: var(--orange); }

/* Third-level (rare but supported) */
.mls-nav .sub-menu .sub-menu { top: -10px; left: 100%; }

.nav-cta { display: flex; gap: 10px; align-items: center; }

.menu-toggle {
	display: none; background: transparent; border: 1.5px solid var(--line);
	width: 44px; height: 44px; border-radius: var(--radius-sm);
	color: var(--ink); cursor: pointer;
	align-items: center; justify-content: center;
	flex-direction: column; gap: 5px;
}
.menu-toggle-bar {
	display: block; width: 18px; height: 2px;
	background: currentColor; border-radius: 2px;
	transition: transform 0.25s, opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-out CTA section — hidden on desktop. */
.mls-nav-cta-mobile { display: none; }

/* Close button — only shown inside the open mobile slide-out (CSS in the
 * 1024 media-query block reveals it). */
.mls-nav-close {
	display: none;
	position: absolute; top: 14px; right: 14px;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--paper); border: 1px solid var(--line);
	color: var(--ink); cursor: pointer;
	align-items: center; justify-content: center;
	transition: var(--transition); z-index: 5;
}
.mls-nav-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mls-nav-close svg { display: block; }

/* Backdrop for the mobile menu. */
.mls-nav-backdrop {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(15, 26, 33, 0.45);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.25s;
}
.mls-nav-backdrop.is-visible { opacity: 1; }
.mls-nav-backdrop[hidden] { display: none; }

/* Mobile sub-menu toggle button (injected by JS). */
.mls-submenu-toggle {
	background: transparent; border: 1px solid var(--line);
	width: 36px; height: 36px; border-radius: var(--radius-sm);
	display: none; align-items: center; justify-content: center;
	color: var(--ink); cursor: pointer; flex-shrink: 0;
	transition: transform 0.2s, background 0.2s;
}
.mls-submenu-toggle svg { display: block; transition: transform 0.25s; }
.mls-submenu-toggle:hover { background: var(--paper); border-color: var(--orange); color: var(--orange); }
.mls-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-content { padding-top: 0; }

/* ============ HERO SLIDER (Elementor or homepage) ============ */
.mls-hero {
	position: relative; height: 78vh; min-height: 560px; max-height: 760px;
	overflow: hidden; background: var(--ink);
}
.mls-hero .slides { position: absolute; inset: 0; }
.mls-hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.mls-hero .slide.active { opacity: 1; z-index: 2; }
.mls-hero .slide-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transform: scale(1.08); transition: transform 8s ease-out;
}
.mls-hero .slide.active .slide-bg { transform: scale(1); }
/* Background video — sits on top of the slide-bg image (which acts as the
 * poster / loading state / iOS-no-autoplay fallback). object-fit:cover so
 * the video crops cleanly to fill the hero like the image background does. */
.mls-hero .slide-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
	pointer-events: none;
}
.mls-hero .slide::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(15,26,33,0.85) 0%, rgba(15,26,33,0.5) 50%, rgba(15,26,33,0.3) 100%);
}
.mls-hero .slide-content {
	position: relative; z-index: 3; max-width: 1400px; margin: 0 auto; padding: 0 32px;
	height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff;
}
.mls-hero .slide-kicker {
	display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 24px;
	opacity: 0; transform: translateY(20px);
}
.mls-hero .slide-kicker::before { content: ''; width: 36px; height: 1.5px; background: var(--orange); }
.mls-hero h1,
.mls-hero .mls-hero-title {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -0.025em;
	max-width: 780px; margin-bottom: 28px; color: #fff;
	opacity: 0; transform: translateY(20px);
}
.mls-hero h1 em,
.mls-hero .mls-hero-title em { font-style: italic; font-weight: 400; color: var(--orange); }
.mls-hero .slide-desc {
	font-size: 18px; max-width: 520px; color: rgba(255,255,255,0.85); margin-bottom: 36px;
	line-height: 1.55; opacity: 0; transform: translateY(20px);
}
.mls-hero .slide-actions {
	display: flex; gap: 14px; flex-wrap: wrap;
	opacity: 0; transform: translateY(20px);
}
.mls-hero .slide.active .slide-kicker { animation: mls-slideUp 0.9s 0.3s forwards; }
.mls-hero .slide.active h1,
.mls-hero .slide.active .mls-hero-title { animation: mls-slideUp 0.9s 0.45s forwards; }
.mls-hero .slide.active .slide-desc { animation: mls-slideUp 0.9s 0.6s forwards; }
.mls-hero .slide.active .slide-actions { animation: mls-slideUp 0.9s 0.75s forwards; }

@keyframes mls-slideUp { to { opacity: 1; transform: translateY(0); } }

.slider-arrows {
	position: absolute; bottom: 40px; right: 40px; z-index: 10; display: flex; gap: 10px;
}
.slider-arrow {
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 18px;
	display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.slider-arrow:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.05); }

.slider-dots {
	position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 10;
	display: flex; gap: 10px;
}
.slider-dots .dot {
	width: 36px; height: 3px; background: rgba(255,255,255,0.3);
	border: none; padding: 0; border-radius: 2px; transition: all 0.3s;
	position: relative; overflow: hidden;
}
.slider-dots .dot.active { background: rgba(255,255,255,0.25); }
.slider-dots .dot.active::before {
	content: ''; position: absolute; inset: 0; background: var(--orange);
	transform: scaleX(0); transform-origin: left;
	animation: mls-dotFill 6s linear forwards;
}
@keyframes mls-dotFill { to { transform: scaleX(1); } }

/* ============ EDITORIAL INTRO ============ */
.editorial-intro { padding: 110px 0 90px; background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: end; }
.hero-label {
	display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 28px;
}
.hero-label::before { content: ''; width: 36px; height: 1.5px; background: var(--orange); }
.editorial-headline {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(56px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.035em; color: var(--ink);
}
.editorial-headline em { font-style: italic; font-weight: 400; color: var(--orange); }
.editorial-headline .outlined { -webkit-text-stroke: 2px var(--ink); color: transparent; font-style: italic; }
.hero-meta { display: flex; flex-direction: column; gap: 32px; padding-bottom: 20px; }
.hero-desc { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 460px; font-weight: 300; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-image-row { margin-top: 80px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; align-items: end; }
.hero-img { position: relative; overflow: hidden; border-radius: 6px; background-size: cover; background-position: center; }
.hero-img-1 { aspect-ratio: 3/4; background: linear-gradient(135deg, #1a3a4a 0%, #0a1419 50%, #2a1a0a 100%); }
.hero-img-2 { aspect-ratio: 16/10; background: radial-gradient(ellipse at center, #1a4560 0%, #061821 70%); }
.hero-img-3 { aspect-ratio: 3/4; background: linear-gradient(180deg, #F26725 0%, #c04410 60%, #5a1f05 100%); }
.img-caption {
	position: absolute; bottom: 14px; left: 14px; right: 14px;
	color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase;
	display: flex; justify-content: space-between; z-index: 2;
}

/* ============ WELCOME BANNER ============ */
.welcome-banner {
	background: linear-gradient(135deg, var(--teal) 0%, var(--teal-darker) 100%);
	color: #fff; padding: 70px 0; position: relative; overflow: hidden;
}
.welcome-banner::before {
	content: ''; position: absolute; top: -100px; right: -100px;
	width: 400px; height: 400px; border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 103, 37, 0.15), transparent 70%);
}
.welcome-banner::after {
	content: ''; position: absolute; bottom: -50px; left: -50px;
	width: 300px; height: 300px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
}
.welcome-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.welcome-content h2 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 16px; color: #fff; }
.welcome-content h2 em { font-style: italic; color: var(--orange); font-weight: 400; }
.welcome-content p { font-size: 17px; color: rgba(255,255,255,0.8); max-width: 500px; margin-bottom: 28px; line-height: 1.6; }
.welcome-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
.welcome-stat { padding-left: 20px; border-left: 2px solid var(--orange); }
.ws-num { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.ws-label { font-size: 15px; color: rgba(255,255,255,0.65); margin-top: 6px; letter-spacing: 0.02em; }

/* ============ SECTION BASICS ============ */
section { padding: 100px 0; }
section.compact { padding: 60px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head.left { text-align: left; }
.section-title { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; max-width: 720px; margin: 0 auto 16px; }
.section-head.left .section-title { margin-left: 0; }
.section-title em { font-style: italic; color: var(--orange); font-weight: 400; }
.section-sub { font-size: 17px; color: var(--muted); max-width: 600px; margin: 0 auto; }
.section-head.left .section-sub { margin-left: 0; }

/* ============ CLASSES (homepage + reusable) ============ */
.classes { background: var(--paper); }
.classes-head { margin-bottom: 48px; }
.classes-head-top { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.classes-head-top .kicker { justify-content: center; }
.classes-head-top .section-title { margin: 0 auto 16px; text-align: center; }
.classes-sub { font-size: 17px; color: var(--muted); max-width: 540px; margin: 0 auto; line-height: 1.55; }
.classes-head-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-chip {
	padding: 10px 20px; border-radius: var(--radius-full); border: 1.5px solid var(--line);
	font-size: 15px; font-weight: 500; background: #fff; cursor: pointer;
	transition: all 0.2s; font-family: inherit; color: var(--ink); text-decoration: none;
}
.filter-chip:hover { border-color: var(--orange); color: var(--orange); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Type-coloured filter chips. The same colour binds the chip to the card. */
.filter-chip[data-filter="inperson"]        { background: var(--type-inperson-bg); border-color: transparent; color: var(--type-inperson-strong); }
.filter-chip[data-filter="inperson"]:hover  { background: var(--type-inperson-bg-hover); border-color: transparent; color: var(--type-inperson-strong); }
.filter-chip[data-filter="inperson"].active { background: var(--type-inperson-strong); color: #fff; border-color: var(--type-inperson-strong); }

.filter-chip[data-filter="online"]          { background: var(--type-online-bg); border-color: transparent; color: var(--type-online-strong); }
.filter-chip[data-filter="online"]:hover    { background: var(--type-online-bg-hover); border-color: transparent; color: var(--type-online-strong); }
.filter-chip[data-filter="online"].active   { background: var(--type-online-strong); color: #fff; border-color: var(--type-online-strong); }

.filter-chip[data-filter="recorded"]        { background: var(--type-recorded-bg); border-color: transparent; color: var(--type-recorded-strong); }
.filter-chip[data-filter="recorded"]:hover  { background: var(--type-recorded-bg-hover); border-color: transparent; color: var(--type-recorded-strong); }
.filter-chip[data-filter="recorded"].active { background: var(--type-recorded-strong); color: #fff; border-color: var(--type-recorded-strong); }

.class-grid {
	display: grid;
	grid-template-columns: repeat(var(--mls-cols, 3), 1fr);
	gap: 28px;
}
.class-card {
	background: #fff; border-radius: var(--radius-md); overflow: hidden;
	border: 1px solid var(--line); transition: var(--transition);
	display: flex; flex-direction: column;
}
.class-card.hidden { display: none; }
.class-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(15, 26, 33, 0.18); border-color: transparent; }
.class-media {
	aspect-ratio: 2 / 1;
	position: relative;
	overflow: hidden;
}
/* Home-page events grid (wrapped in <section class="classes">) uses a wider
 * card so multi-line titles and category meta have room. Instructor cards
 * (under .reviews) keep the default square. */
.classes .class-media { aspect-ratio: 2 / 1; }
.class-media-img {
	position: absolute; inset: 0; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--font-display); font-size: 22px; text-align: center; padding: 20px;
}
.class-card:hover .class-media-img { transform: scale(1.06); }

.m1 { background: linear-gradient(160deg, #FFB88A 0%, #F26725 45%, #8a3510 100%); }
.m2 { background: linear-gradient(160deg, #FFCFB3 0%, #F26725 50%, #5a1f05 100%); }
.m3 { background: linear-gradient(160deg, #5c9fb8 0%, #005C7F 45%, #002838 100%); }
.m4 { background: linear-gradient(160deg, #7f3fbf 0%, #c73475 50%, #005C7F 100%); }
.m5 { background: linear-gradient(160deg, #e8c998 0%, #b08550 45%, #5a3a1a 100%); }
.m6 { background: linear-gradient(160deg, #355a35 0%, #0f2a15 60%, #000 100%); }
.m7 { background: linear-gradient(160deg, #F26725 0%, #8B2F0C 50%, #2a0f03 100%); }
.m8 { background: linear-gradient(160deg, #1f1f1f 0%, #F26725 50%, #1f1f1f 100%); }
.m9 { background: linear-gradient(160deg, #7a9db8 0%, #3a5f7a 50%, #1a2a3a 100%); }
.m10 { background: linear-gradient(160deg, #d4a574 0%, #8B4513 50%, #2a1a0a 100%); }
.m11 { background: linear-gradient(160deg, #2a2a5a 0%, #0a0f2a 50%, #000 100%); }
.m12 { background: linear-gradient(160deg, #b8608a 0%, #7a2a4f 50%, #2a0a1a 100%); }

.class-date {
	position: absolute; top: 16px; left: 16px;
	background: #fff; padding: 8px 12px; border-radius: 10px;
	text-align: center; z-index: 2; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.2); min-width: 52px;
}
.class-date span { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.class-date strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); line-height: 1; }

.class-tag {
	position: absolute; top: 16px; right: 16px;
	background: rgba(15, 26, 33, 0.85); backdrop-filter: blur(8px); color: #fff;
	padding: 7px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
	text-transform: uppercase; border-radius: var(--radius-full); z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
}
.class-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.class-tag.inperson::before { background: var(--orange); }
.class-tag.recorded::before { background: #c084fc; }
.class-tag.free::before { background: #facc15; }

.class-body { padding: 24px 24px 22px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.class-cat { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.class-title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; }
.class-title a { color: var(--ink); }
.class-title a:hover { color: var(--orange); }
.class-desc { font-size: 16px; color: var(--muted); line-height: 1.55; font-weight: 300; }
.class-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); margin-top: auto; }
.class-price { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.class-price small { font-size: 13px; color: var(--muted); font-family: var(--font-body); font-weight: 300; }
.class-price.free { color: var(--green); }

.register-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 18px; background: var(--orange); color: #fff;
	border-radius: var(--radius-full); font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.register-btn:hover { background: var(--orange-dark); color: #fff; gap: 10px; }

.view-all {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--orange); font-weight: 500; font-size: 16px;
	padding: 10px 0; transition: gap 0.2s;
}
.view-all:hover { gap: 14px; }

/* ============ HOW IT WORKS ============ */
.how { background: #fff; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step {
	background: var(--paper); padding: 44px 36px 100px; border-radius: var(--radius-lg);
	border: 1px solid var(--line); position: relative; transition: all 0.3s; min-height: 260px;
}
.step:hover { background: #fff; border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(242, 103, 37, 0.2); }
.step-num { font-family: var(--font-display); font-size: 64px; font-weight: 400; color: var(--orange); line-height: 0.9; letter-spacing: -0.04em; margin-bottom: 18px; display: block; }
.step-icon { position: absolute; bottom: 36px; right: 36px; width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--orange-light); display: flex; align-items: center; justify-content: center; color: var(--orange); }
.step h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 12px; letter-spacing: -0.02em; color: var(--ink); }
.step p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 300px; font-weight: 300; }

/* ============ REVIEWS ============ */
.reviews { padding: 140px 0; background: var(--paper-warm); position: relative; }
.reviews-head { margin-bottom: 80px; max-width: 800px; }
.reviews-head .section-title { text-align: left; margin-left: 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ---- Reviews slider / carousel (optional layout on the Reviews widget) ----
 * Cards keep the exact same `.review` styling as the grid — only the
 * container changes. `--rv-cols` is written by JS on resize so the slide
 * width always matches the responsive column count. */
.mls-rv-slider { position: relative; }
.mls-rv-viewport { overflow: hidden; }
.mls-rv-track {
	display: flex;
	gap: 32px;
	will-change: transform;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mls-rv-slider.is-dragging .mls-rv-track { transition: none; }
.mls-rv-slide {
	flex: 0 0 calc((100% - (32px * (var(--rv-cols, 3) - 1))) / var(--rv-cols, 3));
	min-width: 0;
	display: flex;
}
.mls-rv-slide > .review {
	width: 100%;
	/* Equal-height cards regardless of review length. */
	display: flex;
	flex-direction: column;
}
.mls-rv-slide > .review .review-author { margin-top: auto; }

/* Arrows — sit under the track, right-aligned, matching the hero arrows. */
.mls-rv-arrows {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 32px;
}
.mls-rv-arrow {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1.5px solid rgba(10, 20, 25, 0.14);
	background: var(--paper);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	font-family: inherit;
}
.mls-rv-arrow:hover:not(:disabled) {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	transform: translateY(-2px);
}
.mls-rv-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* Dots */
.mls-rv-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 28px;
}
.mls-rv-dots:empty { display: none; }
.mls-rv-dot {
	width: 9px; height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(10, 20, 25, 0.18);
	cursor: pointer;
	transition: all 0.25s;
}
.mls-rv-dot:hover { background: rgba(242, 103, 37, 0.5); }
.mls-rv-dot.is-active { background: var(--orange); width: 26px; border-radius: 999px; }

/* When arrows and dots are both on, pull the dots up next to the arrows row. */
.mls-rv-slider .mls-rv-arrows + .mls-rv-dots { margin-top: -36px; }
@media (max-width: 640px) {
	.mls-rv-track { gap: 20px; }
	.mls-rv-slide { flex-basis: calc((100% - (20px * (var(--rv-cols, 1) - 1))) / var(--rv-cols, 1)); }
	.mls-rv-slider .mls-rv-arrows + .mls-rv-dots { margin-top: 20px; }
	.mls-rv-arrows { justify-content: center; }
}
.review { background: var(--paper); padding: 40px 36px; border-radius: 4px; position: relative; border: 1px solid rgba(10,20,25,0.08); }
.review::before { content: '"'; position: absolute; top: -20px; left: 30px; font-family: var(--font-display); font-size: 140px; line-height: 1; color: var(--orange); font-weight: 400; }
.review-stars { color: var(--orange); font-size: 16px; letter-spacing: 2px; margin-bottom: 20px; position: relative; }
.review-text { font-family: var(--font-display); font-size: 20px; line-height: 1.45; font-weight: 400; color: var(--ink); margin-bottom: 28px; letter-spacing: -0.01em; }
.review-author { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(10,20,25,0.1); }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; font-family: var(--font-display); font-weight: 400; font-size: 18px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--orange), #8a3510); overflow: hidden; }
.review-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.review-name { font-weight: 500; font-size: 16px; color: var(--ink); }
.review-role { font-size: 13px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; }

/* ============ NEWSLETTER ============ */
.newsletter { background: var(--ink); color: #fff; padding: 90px 0; position: relative; overflow: hidden; }
.newsletter::before { content: ''; position: absolute; top: -300px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(242,103,37,0.25), transparent 60%); }
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.newsletter h2 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 20px; color: #fff; }
.newsletter h2 em { font-style: italic; color: var(--orange); }
.newsletter > .container > .newsletter-grid > div > p { color: rgba(255,255,255,0.7); font-size: 16px; margin-bottom: 24px; max-width: 460px; }
.perks { display: grid; gap: 12px; padding: 0; list-style: none; }
.perks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255,255,255,0.85); }
.perks li::before { content: '✓'; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.newsletter-form { background: #fff; padding: 40px 36px; border-radius: var(--radius-lg); color: var(--ink); }
.newsletter-form h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 6px; }
.newsletter-form .form-sub { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
	width: 100%; padding: 14px 16px; border: 1.5px solid var(--line);
	border-radius: 10px; font-size: 16px; font-family: inherit;
	background: var(--paper); transition: all 0.2s; color: var(--ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.checkbox-row { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); margin: 18px 0 20px; }
.checkbox-row input { accent-color: var(--orange); width: 16px; height: 16px; }
.newsletter-form button { width: 100%; padding: 16px; background: var(--orange); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.25s; font-family: inherit; }
.newsletter-form button:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(242, 103, 37, 0.6); }

/* ============ FOOTER ============ */
.mls-footer { background: var(--paper); border-top: 1px solid var(--line); padding: 72px 0 28px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.footer-brand img,
.footer-brand .custom-logo { height: 60px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: 16px; max-width: 340px; line-height: 1.6; margin-bottom: 20px; font-weight: 300; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 16px; transition: all 0.2s; font-weight: 500; }
.socials a:hover { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateY(-2px); }
.footer-col h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.footer-col a, .footer-col li { color: var(--muted); font-size: 16px; }
.footer-col a { display: inline-block; transition: color 0.2s, transform 0.2s; }
.footer-col a:hover { color: var(--orange); transform: translateX(4px); }
.footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); flex-wrap: wrap; gap: 12px; }

/* ============ PAGE HERO ============ */
.page-hero { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-darker) 100%); color: #fff; padding: 80px 0 60px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -150px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 103, 37, 0.18), transparent 60%); }
.page-hero::after { content: ''; position: absolute; bottom: -200px; left: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 60%); }
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span { color: var(--orange); }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 6vw, 80px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; margin-bottom: 18px; max-width: 900px; color: #fff; }
.page-hero h1 em { font-style: italic; color: var(--orange); font-weight: 400; }
.page-hero p { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 620px; line-height: 1.55; }

/* ============ EVENTS TOOLBAR ============ */
.events-toolbar {
	background: #fff;
	border-bottom: 1px solid var(--line);
	padding: 20px 0 30px;
	/* Lift the toolbar into its own stacking context so the date picker
	 * dropdown reliably paints above the event-cards section below it.
	 * Modern.css applies `animation: mls-modern-rise … both` to .event-card,
	 * which leaves a persistent `transform: translateY(0)` after the
	 * animation ends. That transform creates a stacking context on every
	 * card — and without an explicit z-index here, those card stacking
	 * contexts win against the picker's `z-index: 100` because painting
	 * order falls back to DOM order (cards come later). */
	position: relative;
	z-index: 50;
}
.toolbar-inner { padding: 20px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.search-box {
	display: flex; align-items: center; gap: 10px; background: var(--paper);
	border: 1.5px solid var(--line); padding: 6px 6px 6px 18px; border-radius: var(--radius-full);
	flex: 1; max-width: 520px; transition: all 0.2s;
}
.search-box:focus-within { border-color: var(--orange); background: #fff; }
.search-box svg { color: var(--muted); flex-shrink: 0; }
.search-box input { border: none; background: transparent; outline: none; font-size: 16px; font-family: inherit; flex: 1; color: var(--ink); padding: 8px 0; }
.search-box input::placeholder { color: var(--muted); }
.search-box .mls-find-events { padding: 9px 18px; font-size: 14px; border-radius: 20px; }

.toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.today-btn {
	padding: 10px 18px; border-radius: var(--radius-full); border: 1.5px solid var(--orange);
	background: rgba(242, 103, 37, 0.08); color: var(--orange); font-size: 15px; font-weight: 500;
	font-family: inherit; text-decoration: none;
}

/* Date nav arrows. */
.date-nav { display: flex; gap: 4px; }
.date-nav a, .date-nav button {
	width: 38px; height: 38px; border-radius: var(--radius-sm);
	border: 1.5px solid var(--line); background: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); font-size: 16px; font-family: inherit; cursor: pointer;
	transition: var(--transition); text-decoration: none;
}
.date-nav a:hover { border-color: var(--orange); color: var(--orange); }
.date-nav button[disabled] { opacity: 0.4; cursor: not-allowed; }

.date-range {
	font-family: var(--font-display); font-size: 18px; padding: 0 12px;
	color: var(--ink); white-space: nowrap;
}

/* List / Month view switcher (with icons) */
.mls-view-switcher { display: inline-flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.mls-view-switcher a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: 6px; font-size: 14px; font-weight: 500;
	color: var(--muted); text-decoration: none; transition: var(--transition);
	line-height: 1;
}
.mls-view-switcher a svg { display: block; flex-shrink: 0; }
.mls-view-switcher a:hover { color: var(--orange); }
.mls-view-switcher a.active { background: var(--ink); color: #fff; }

/* Toolbar bottom row: filters left, date controls right. */
.mls-toolbar-bottom {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; padding: 14px 0 4px;
}
.mls-toolbar-bottom .filters { flex: 1 1 auto; }
.mls-toolbar-bottom .mls-date-bar { padding: 0; flex: 0 0 auto; }


/* Subscribe to calendar dropdown */
.mls-subscribe-wrap { position: relative; }
.mls-subscribe-toggle { cursor: pointer; }
.mls-subscribe-menu {
	/* Open upward — the toggle lives at the bottom of the events page right
	 * above the footer, so a downward-opening menu gets clipped. Anchoring
	 * the menu's bottom to the button's top opens it cleanly above. */
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	box-shadow: var(--shadow-md); padding: 8px; z-index: 20; min-width: 220px;
	display: flex; flex-direction: column; gap: 2px;
}
.mls-subscribe-menu[hidden] { display: none; }
.mls-subscribe-menu a {
	padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink);
	text-decoration: none; transition: background 0.15s;
}
.mls-subscribe-menu a:hover { background: var(--paper); color: var(--orange); }

/* ----- Date bar + picker ----- */
.mls-date-bar {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 10px 0 22px;
}
.today-btn-secondary { padding: 6px 14px; font-size: 14px; border-radius: 8px; }

.mls-date-picker { position: relative; }
.mls-date-picker-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; border: none; cursor: pointer;
	font-family: var(--font-display); font-size: 22px; line-height: 1;
	color: var(--ink); padding: 6px 4px; font-weight: 400;
}
.mls-date-picker-toggle:hover { color: var(--orange); }
.mls-date-picker-chev { display: inline-flex; align-items: center; transition: transform 0.2s; line-height: 0; }
.mls-date-picker-chev svg { display: block; }
.mls-date-picker-toggle[aria-expanded="true"] .mls-date-picker-chev { transform: rotate(180deg); }

.mls-date-picker-panel {
	position: absolute; top: calc(100% + 6px); right: 0;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-md); box-shadow: var(--shadow-md);
	padding: 14px; z-index: 100; min-width: 320px;
}
.mls-date-picker-panel[hidden] { display: none; }

.mls-dp-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 4px 6px 12px; gap: 8px;
}
.mls-dp-header button {
	background: transparent; border: none; font-size: 18px; cursor: pointer;
	width: 30px; height: 30px; border-radius: 6px; color: var(--ink);
}
.mls-dp-header button:hover { background: var(--paper); color: var(--orange); }
.mls-dp-title {
	font-family: var(--font-display); font-size: 18px; font-weight: 400;
	color: var(--ink);
}

.mls-dp-dow {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 2px; margin-bottom: 4px;
}
.mls-dp-dow span {
	font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
	color: var(--muted); text-align: center; padding: 4px 0;
	text-transform: uppercase;
}

.mls-dp-day-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.mls-dp-day {
	background: transparent; border: none; cursor: pointer;
	padding: 8px 0; border-radius: 6px;
	font-size: 14px; font-weight: 400; color: var(--ink);
	min-height: 36px; transition: background 0.15s;
}
.mls-dp-day:hover { background: var(--paper); color: var(--orange); }
.mls-dp-day.is-other-month { color: var(--muted); opacity: 0.45; }
.mls-dp-day.is-today { font-weight: 600; color: var(--orange); }
.mls-dp-day.is-selected {
	background: var(--orange); color: #fff !important;
	font-weight: 500;
}

.mls-dp-month-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
	padding: 6px 4px;
}
.mls-dp-month {
	background: transparent; border: none; cursor: pointer;
	padding: 18px 0; border-radius: 6px;
	font-size: 14px; color: var(--ink); transition: background 0.15s;
}
.mls-dp-month:hover { background: var(--paper); color: var(--orange); }
.mls-dp-month.is-selected {
	background: var(--orange); color: #fff !important; font-weight: 500;
}

/* ----- Month calendar (events archive) ----- */
.mls-month-grid {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-md); overflow: hidden;
}
.mls-month-grid-header {
	display: grid; grid-template-columns: repeat(7, 1fr);
	background: var(--paper); border-bottom: 1px solid var(--line);
}
.mls-month-grid-dow {
	padding: 12px 16px; font-size: 12px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.mls-month-grid-body {
	display: grid; grid-template-columns: repeat(7, 1fr);
}
.mls-month-cell {
	min-height: 130px; padding: 10px;
	border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
	background: #fff; display: flex; flex-direction: column; gap: 6px;
}
.mls-month-cell:nth-child(7n) { border-right: none; }
.mls-month-cell.is-other-month { background: var(--paper); }
.mls-month-cell.is-today .mls-month-cell-day { color: var(--orange); }
.mls-month-cell-day {
	font-family: var(--font-display); font-size: 20px; font-weight: 400;
	color: var(--ink); line-height: 1;
}
.mls-month-cell.is-other-month .mls-month-cell-day { color: var(--muted); opacity: 0.55; }
.mls-month-cell-day a {
	color: inherit; text-decoration: underline; text-decoration-color: var(--line);
}
.mls-month-cell-day a:hover { color: var(--orange); text-decoration-color: var(--orange); }

.mls-month-event {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--orange-light); color: var(--ink);
	padding: 6px 10px; border-radius: var(--radius-sm);
	font-size: 13px; line-height: 1.25;
	border-left: 3px solid var(--orange);
	transition: var(--transition);
}
.mls-month-event:hover {
	background: var(--orange); color: #fff; transform: translateY(-1px);
}

/* Type-coloured month chips — matches the list-view card backgrounds and
 * the filter chips so the calendar reads at a glance. */
.mls-month-event[data-event-type="online"] {
	background: var(--type-online-bg);
	border-left-color: var(--type-online-strong);
}
.mls-month-event[data-event-type="online"]:hover {
	background: var(--type-online-strong);
	color: #fff;
}
.mls-month-event[data-event-type="recorded"] {
	background: var(--type-recorded-bg);
	border-left-color: var(--type-recorded-strong);
}
.mls-month-event[data-event-type="recorded"]:hover {
	background: var(--type-recorded-strong);
	color: #fff;
}

.mls-month-event-time {
	font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
	color: var(--muted);
}
.mls-month-event:hover .mls-month-event-time { color: rgba(255,255,255,0.85); }
.mls-month-event-title {
	font-weight: 500; overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

@media (max-width: 1024px) {
	.mls-month-cell { min-height: 90px; padding: 6px; }
	.mls-month-cell-day { font-size: 16px; }
	.mls-month-event { padding: 4px 6px; font-size: 11px; }
	.mls-month-event-time { display: none; }
	.mls-date-picker-panel { min-width: 280px; }
}
@media (max-width: 640px) {
	.mls-month-grid-dow { padding: 8px 4px; font-size: 10px; }
	.mls-month-cell { min-height: 56px; }
	.mls-month-event-title { -webkit-line-clamp: 1; font-size: 10px; }
	.mls-date-picker-panel { left: -20px; right: -20px; min-width: 0; }
}

/* ============ EVENTS LIST ============ */
.events-page { padding: 80px 0 120px; background: var(--paper); }
.month-group { margin-bottom: 72px; }
.month-header { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.month-header h2 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 400; letter-spacing: -0.025em; line-height: 1; }
.month-header h2 em { font-style: italic; color: var(--orange); }
.month-count { background: var(--ink); color: #fff; padding: 6px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; }
.events-list { display: grid; gap: 24px; }

.event-card {
	display: grid; grid-template-columns: 90px 1fr 260px; gap: 32px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 28px; transition: var(--transition); align-items: start;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(15, 26, 33, 0.18); border-color: transparent; }

/* Type-coloured event cards on the archive (matches the filter chips). */
.event-card[data-cats~="inperson"] { background: var(--type-inperson-bg); border-color: transparent; }
.event-card[data-cats~="online"]   { background: var(--type-online-bg);   border-color: transparent; }
.event-card[data-cats~="recorded"] { background: var(--type-recorded-bg); border-color: transparent; }
.event-card[data-cats~="inperson"] .event-date,
.event-card[data-cats~="online"] .event-date,
.event-card[data-cats~="recorded"] .event-date { background: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(15,26,33,0.04); }

.event-date { text-align: center; padding: 14px 8px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.event-date .dow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.event-date .day { font-family: var(--font-display); font-size: 42px; font-weight: 400; line-height: 1; color: var(--orange); margin: 4px 0; }
.event-date .mo { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

.event-body { min-width: 0; }
.event-meta {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 10px; flex-wrap: wrap;
}
.event-meta .dot-sep { color: var(--muted); font-weight: 400; }
.event-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 10px; }
.event-title a { color: var(--orange); }
.event-title a:hover { color: var(--orange-dark); }
.event-location { font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.event-location strong { font-weight: 500; }
.event-location span { color: var(--muted); }
.event-desc {
	font-size: 16px; font-weight: 400; color: #000; line-height: 1.55; margin-bottom: 14px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.event-tag { padding: 5px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.event-tag.price { background: rgba(242, 103, 37, 0.1); color: var(--orange); }
.event-tag.price.free { background: rgba(34, 197, 94, 0.1); color: var(--green); }
.event-tag.level { background: rgba(0, 92, 127, 0.08); color: var(--teal); }

/* Get Tickets / Add to Cart action row on event cards */
.event-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.event-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--orange);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	text-decoration: unset;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	transition: var(--transition);
	border-radius: 20px;
}
.event-card-cta:hover { background: var(--orange-dark); color: #fff; text-decoration-color: #fff; }
/* When rendered as a <button> inside the in-person Register-Now form,
 * fully strip the browser's native button chrome so the result is
 * pixel-identical to the <a class="event-card-cta"> used by online and
 * recorded events. Without these resets Chrome/Safari draw an inset
 * border + a default focus ring that show through as a faint outer ring
 * around the orange pill. */
button.event-card-cta {
	border: 0;
	margin: 0;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	text-align: center;
}
button.event-card-cta:focus { outline: none; }
button.event-card-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}
.event-card-cta-form {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.event-card-cta-meta {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.22);
	padding: 2px 10px;
	border-radius: var(--radius-full);
	text-decoration: none;
	letter-spacing: -0.01em;
}

/* Secondary "Learn More" link — sits before the orange "Register Now"
 * button on every event card, so the card always has a clear path to the
 * detail page even when there's nothing to register for. */
.event-card-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--teal);
	color: #fff;
	border: 1.5px solid var(--teal);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	transition: var(--transition);
}
.event-card-cta-secondary svg { color: #fff; transition: transform 0.2s; }
.event-card-cta-secondary:hover {
	background: var(--teal-dark);
	border-color: var(--teal-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -6px rgba(0, 92, 127, 0.5);
}
.event-card-cta-secondary:hover svg { transform: translateX(2px); }

.event-card-stock {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: 0.02em;
}
/* Sold out / sale-window-closed pill — replaces the Register button when
 * there's no in-stock ticket the user could buy. */
.event-card-stock--soldout {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: rgba(15, 26, 33, 0.06);
	color: var(--muted);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.event-card-registered {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: var(--radius-sm);
	background: rgba(34,197,94,0.1); color: var(--green);
	font-size: 14px; font-weight: 500;
}

.event-media {
	aspect-ratio: 16 / 11;
	border-radius: 0px;
	overflow: hidden;
	position: relative;
	background: transparent;
	align-self: center;
}
.event-media-img {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 20px;
	background-size: cover; background-position: center;
	color: #fff; text-decoration: none;
}
/* When the card has a real uploaded image, render the <img> uncropped so
 * the full photo is visible. Letterboxes (paper-tinted gutter) appear
 * around portrait/wide images that don't match the 16/11 box, but the
 * image itself is never cropped. */
.event-media-img.has-image {
	padding: 0;
	background: transparent;
}
.event-media-img.has-image img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}
.event-media-label { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); letter-spacing: -0.015em; line-height: 1.15; }

/* Instructor row on the event card — small avatar + "with <name>". */
.event-instructor-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--muted);
}
.event-instructor-row__avatar {
	width: 26px; height: 26px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--paper);
	flex-shrink: 0;
}
.event-instructor-row__label {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--muted);
}
.event-instructor-row__name {
	font-weight: 600;
	color: var(--ink);
	transition: color 0.15s;
}
.event-instructor-row__name:hover { color: var(--orange); }

.pagination, .mls-pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.page-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-full); font-size: 16px; font-weight: 500; color: var(--ink); font-family: inherit; transition: all 0.2s; text-decoration: none; }
.page-btn:hover { border-color: var(--orange); color: var(--orange); gap: 12px; }
.page-btn:disabled, .page-btn[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.empty-state, .mls-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 16px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.mls-empty-state .btn { margin-top: 14px; }
.empty-state.hidden { display: none; }

/* ============ EVENT SINGLE ============ */
.event-hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 0;
}
.event-hero-bg { position: absolute; inset: 0; }
.event-hero-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.event-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,26,33,0.3) 0%, rgba(15,26,33,0.6) 50%, rgba(15,26,33,0.92) 100%); }
.event-hero-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #1a3f55 0%, #0a2233 40%, #051118 100%); }
.event-hero-content { position: relative; z-index: 2; color: #fff; padding-top: 60px; padding-bottom: 60px; width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.event-hero-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 24px; }
.event-hero-breadcrumb a { color: rgba(255,255,255,0.65); }
.event-hero-breadcrumb a:hover { color: var(--orange); }
.event-hero-breadcrumb span { color: rgba(255,255,255,0.4); }
.event-hero-meta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.event-hero-cat { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.event-hero-price { background: var(--orange); padding: 6px 16px; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 16px; font-weight: 400; color: #fff; }
.event-hero-price.free { background: var(--green); }
.event-hero-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; max-width: 800px; margin-bottom: 32px; color: #fff; }
.event-hero-details { display: flex; gap: 36px; flex-wrap: wrap; margin-bottom: 36px; }
.event-hero-detail { display: flex; align-items: flex-start; gap: 12px; }
.event-hero-detail svg { color: var(--orange); margin-top: 2px; flex-shrink: 0; }
.event-hero-detail strong { font-size: 16px; font-weight: 500; color: #fff; display: block; }
.event-hero-detail span { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 2px; display: block; }
.event-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.event-single-body { padding: 80px 0 120px; background: var(--paper); }
.event-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.event-content { min-width: 0; }
.event-featured-img {
	margin: 0 0 32px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--paper);
}
/* Every class banner shows at the 1980×990 shape it is designed for — the
 * same 2:1 as the home-page cards and the calendar list. A banner made at
 * another size fills the box from its centre. */
.event-featured-img img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 2 / 1; object-fit: cover; object-position: center;
}
.event-content .entry-content h2 { font-family: var(--font-display); font-size: 32px; font-weight: 400; margin: 48px 0 20px; letter-spacing: -0.02em; }
.event-content .entry-content h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 36px 0 16px; }
.event-content .entry-content p { font-size: 17px; line-height: 1.7; margin-bottom: 20px; color: var(--ink); }
.event-content .entry-content ul { margin: 0 0 24px 0; padding-left: 0; list-style: none; }
.event-content .entry-content ul li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.event-content .entry-content ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.event-content .entry-content strong { font-weight: 500; color: var(--ink); }
.event-content .entry-content img { border-radius: var(--radius-md); margin: 32px 0; }

.event-instructor {
	margin-top: 0;
	padding: 40px;
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	display: inline-block;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	align-items: start;
}
.event-instructor-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--paper); }
.event-instructor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.event-instructor h3 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin-bottom: 8px; }
.event-instructor-bio p { font-size: 16px; line-height: 1.65; color: var(--muted); margin-bottom: 14px; font-weight: 300; }

.event-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.event-nav-link { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); transition: var(--transition); }
.event-nav-link:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.event-nav-link.next { text-align: right; }
.event-nav-dir { font-size: 13px; color: var(--muted); font-weight: 500; }
.event-nav-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.25; }

.event-sidebar { position: sticky; top: 20px; }
.event-sidebar-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; }
.event-sidebar-card-header { background: var(--ink); color: #fff; padding: 20px 24px; }
.event-sidebar-card-header h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin: 0; color: #fff; }
.event-sidebar-row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.event-sidebar-row svg { color: var(--orange); margin-top: 2px; flex-shrink: 0; }
.event-sidebar-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-sidebar-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.event-sidebar-value { font-size: 15px; font-weight: 500; color: var(--ink); }
.event-sidebar-price { font-family: var(--font-display); font-size: 24px; color: var(--orange); }
.event-sidebar-sub { font-size: 13px; color: var(--muted); font-weight: 300; }
.event-sidebar-cta { padding: 24px; }
.event-sidebar-share { margin-top: 24px; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 24px; }
.event-sidebar-share h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.event-share-links { display: flex; gap: 10px; flex-wrap: wrap; }
.event-share-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	background: var(--paper);
	transition: var(--transition);
	text-decoration: none;
}
.event-share-btn svg { flex-shrink: 0; color: var(--orange); transition: color 0.15s; }
.event-share-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.event-share-btn:hover svg { color: #fff; }

/* Mini toast that pops out from the bottom-right when a share button copies
 * the URL to the clipboard. Fades + slides in/out. */
.mls-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: var(--ink);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 16px 36px -12px rgba(15, 26, 33, 0.4);
	z-index: 9999;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}
.mls-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.event-meeting-card {
	background: linear-gradient(135deg, var(--teal) 0%, var(--teal-darker) 100%);
	color: #fff; padding: 28px; border-radius: var(--radius-lg); margin: 32px 0;
}
.event-meeting-card h3 { color: #fff; font-family: var(--font-display); margin-bottom: 8px; }
.event-meeting-card p { color: rgba(255,255,255,0.8); margin-bottom: 16px; }
.event-meeting-card a.btn { background: #fff; color: var(--ink); }
.event-meeting-card a.btn:hover { background: var(--orange); color: #fff; }

/* ============ AUTH PAGES ============ */
.mls-auth-page { background: var(--paper); padding: 80px 0 120px; min-height: 70vh; }
.mls-auth-card { max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 50px 44px; box-shadow: var(--shadow-md); }
.mls-auth-card h1,
.mls-auth-card h2 { font-family: var(--font-display); font-size: 38px; line-height: 1.05; margin-bottom: 12px; font-weight: 400; }
.mls-auth-card > p { color: var(--muted); margin-bottom: 28px; font-size: 15px; }
.mls-auth-card .form-group { margin-bottom: 14px; }

/* Our register-form's two-column rows (first/last name etc.) — only on
 * <div class="form-row">. WC's <p class="form-row"> wrapper around its
 * submit button is excluded so it doesn't get squished into a grid cell. */
.mls-auth-card div.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

/* ----- WooCommerce form normalization (My Account / Login / Register) -----
 * Kill WC's default bordered container around login/register so we don't get
 * a card-inside-card look, then standardize the inner field markup so WC's
 * <p class="form-row"> rows render the same as our own .form-group rows. */
.mls-auth-card form.login,
.mls-auth-card form.register,
.mls-auth-card form.checkout_coupon,
.mls-auth-card form.woocommerce-form-login,
.mls-auth-card form.woocommerce-form-register,
.mls-auth-card form.woocommerce-ResetPassword {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.mls-auth-card p.form-row,
.mls-auth-card p.woocommerce-form-row,
.mls-auth-card .woocommerce-form-row {
	display: block;
	margin: 0 0 14px;
	padding: 0;
}

.mls-auth-card label,
.mls-auth-card .form-row label,
.mls-auth-card .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ink);
}
.mls-auth-card label .required,
.mls-auth-card label .optional { color: var(--orange); text-decoration: none; margin-left: 2px; }

.mls-auth-card input[type="text"],
.mls-auth-card input[type="email"],
.mls-auth-card input[type="password"],
.mls-auth-card input.input-text {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	font-size: 16px;
	font-family: inherit;
	background: var(--paper);
	color: var(--ink);
	transition: all 0.2s;
}
.mls-auth-card input:focus { outline: none; border-color: var(--orange); background: #fff; }

/* Submit button — full width, no inline-block from WC. */
.mls-auth-card form .button,
.mls-auth-card form button[type="submit"],
.mls-auth-card form .woocommerce-Button,
.mls-auth-card form .woocommerce-button {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	margin: 8px 0 0 !important;
	padding: 14px 22px !important;
	font-size: 16px !important;
	float: none !important;
}

/* Privacy notice (rendered by WC for the register form). */
.mls-auth-card .woocommerce-privacy-policy-text,
.mls-auth-card .woocommerce-privacy-policy-text p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
	margin: 14px 0 18px;
}

/* "Lost password?" link */
.mls-auth-card .lost_password {
	margin: 18px 0 0;
	text-align: center;
}
.mls-auth-card .lost_password a {
	color: var(--orange);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.mls-auth-card .lost_password a:hover { text-decoration: underline; }

/* Remember-me row */
.mls-auth-card .checkbox-row,
.mls-auth-card .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--muted);
	margin: 6px 0 18px;
}
.mls-auth-card .checkbox-row input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }

/* WC notices inside the card */
.mls-auth-card .woocommerce-notices-wrapper { margin-bottom: 0; }
.mls-auth-card .woocommerce-message,
.mls-auth-card .woocommerce-error,
.mls-auth-card .woocommerce-info {
	margin: 0 0 18px !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: 14px;
}
.mls-auth-foot { margin-top: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.mls-auth-foot a { color: var(--orange); font-weight: 500; }
.mls-form-error { background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.2); color: #b91c1c; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.mls-form-error ul { margin: 0; padding-left: 18px; list-style: disc; }

/* ============ ACCOUNT / DASHBOARD ============ */
.mls-account-page { background: var(--paper); padding: 0; min-height: 70vh; }
.mls-account-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; flex-wrap: wrap; gap: 18px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.mls-account-header h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); }
.mls-account-header p { color: var(--muted); margin-top: 6px; }
.mls-account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.mls-account-side { position: sticky; top: 20px; }
.mls-account-nav { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; }
.mls-account-nav a { padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 400; font-size: 15px; }
.mls-account-nav a:hover { background: var(--paper); color: var(--orange); }
.mls-account-nav a.is-active { background: var(--ink); color: #fff; }

.mls-account-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 36px; margin-bottom: 32px; }
.mls-account-section h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; }

.mls-account-class-list { display: grid; gap: 20px; }
.mls-account-class { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 18px; background: var(--paper); border-radius: var(--radius-md); border: 1px solid var(--line); }
.mls-account-class-thumb { aspect-ratio: 4/3; border-radius: var(--radius-sm); background-color: var(--paper-warm); background-size: cover; background-position: center; }
.mls-account-class-body h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }
.mls-account-class-body h3 a { color: var(--ink); }
.mls-account-class-body h3 a:hover { color: var(--orange); }
.mls-account-class-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mls-account-class-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mls-profile-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.mls-profile-form .form-group { margin-bottom: 14px; }

/* Instructor CTA banner on the My Account overview — points instructors to
 * the front-end instructor dashboard. */
.mls-account-instructor-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
	color: #fff;
	border: none;
	padding: 22px 28px;
}
.mls-account-instructor-cta__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}
.mls-account-instructor-cta__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.mls-account-instructor-cta__body strong {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: #fff;
}
.mls-account-instructor-cta__body span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.82);
}
.mls-account-instructor-cta__btn { flex-shrink: 0; }
@media (max-width: 640px) {
	.mls-account-instructor-cta { flex-direction: column; text-align: center; }
	.mls-account-instructor-cta__btn { width: 100%; justify-content: center; }
}

/* Form helpers — required-field asterisk + hint text below an input. */
.mls-required { color: var(--orange); font-weight: 700; margin-left: 2px; }
.mls-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

/* ============================================================
 * ORDER RECEIVED (thank-you) page
 * ============================================================ */
.mls-order-success { padding: 8px 0 24px; }

/* Hero — success check + headline + lede */
.mls-order-success__hero {
	text-align: center;
	margin: 8px auto 40px;
	max-width: 720px;
}
.mls-order-success__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.12);
	color: #16a34a;
	margin-bottom: 22px;
}
.mls-order-success__title {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.5vw, 52px);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 14px;
	color: var(--ink);
}
.mls-order-success__lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0;
}
.mls-order-success__lede strong { color: var(--ink); font-weight: 600; }

/* Summary — Order#, Date, Total, Payment as 4 card tiles */
.mls-order-success__summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}
.mls-order-success__stat {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mls-order-success__stat-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.mls-order-success__stat-value {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--ink);
	line-height: 1.1;
}
.mls-order-success__stat-value--total { color: var(--orange); }

/* Optional customer note */
.mls-order-success__note {
	background: var(--paper);
	border-left: 3px solid var(--orange);
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	margin: 0 0 32px;
	font-size: 14px;
	color: var(--ink);
}
.mls-order-success__note strong { display: block; margin-bottom: 4px; color: var(--orange); }

/* Section titles */
.mls-order-success__section-title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	color: var(--ink);
}

/* Items list — one per line item */
.mls-order-success__items { margin: 0 0 36px; }
.mls-order-success__item-list { display: flex; flex-direction: column; gap: 14px; }
.mls-order-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mls-order-item__thumb {
	width: 96px;
	height: 72px;
	border-radius: var(--radius-sm);
	background-color: var(--paper);
	background-size: cover;
	background-position: center;
}
.mls-order-item__body { min-width: 0; }
.mls-order-item__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 4px;
}
.mls-order-item__title a { color: var(--ink); transition: color 0.15s; }
.mls-order-item__title a:hover { color: var(--orange); }
.mls-order-item__meta {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}
.mls-order-item__meta .woocommerce-Price-amount { color: var(--ink); font-weight: 600; }

/* Next steps cards */
.mls-order-success__nextsteps { margin: 0 0 36px; }
.mls-order-success__nextsteps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.mls-next-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--ink);
	text-decoration: none;
	transition: var(--transition);
}
.mls-next-card svg { color: var(--orange); flex-shrink: 0; }
.mls-next-card strong {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	margin-bottom: 2px;
}
.mls-next-card span {
	display: block;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.45;
}
.mls-next-card:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(15, 26, 33, 0.18);
}

/* Address card */
.mls-order-success__addr-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 22px 24px;
}
.mls-order-success__addr address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
}
.mls-order-success__addr-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 16px 0 0;
	font-size: 13px;
	color: var(--muted);
}
.mls-order-success__addr-line svg { color: var(--orange); }

/* Failed-order state */
.mls-order-success__failed {
	background: rgba(220, 38, 38, 0.05);
	border: 1px solid rgba(220, 38, 38, 0.18);
	border-radius: var(--radius-lg);
	padding: 28px 30px;
}
.mls-order-success__failed h2 {
	font-family: var(--font-display);
	font-size: 26px;
	color: #b91c1c;
	margin: 0 0 10px;
}

@media (max-width: 900px) {
	.mls-order-success__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mls-order-success__check { width: 70px; height: 70px; margin-bottom: 18px; }
	.mls-order-success__check svg { width: 44px; height: 44px; }
	.mls-order-item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
	}
	.mls-order-item__thumb { width: 72px; height: 56px; }
	.mls-order-item__action { grid-column: 1 / -1; }
	.mls-order-item__action .btn { width: 100%; justify-content: center; }
	.mls-order-success__addr-card { padding: 18px 20px; }
}

/* Profile → Address fieldset (merged into the edit-account form). */
.mls-edit-account-address {
	margin-top: 28px;
	padding: 24px 26px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: #fff;
	/* Two-column grid so City/State and ZIP/Country pair up cleanly. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}
.mls-edit-account-address legend {
	grid-column: 1 / -1;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	padding: 0;
	margin-bottom: 6px;
	color: var(--ink);
}
/* Street + Apt span the full row width, the others sit side-by-side. */
.mls-edit-account-address .form-row {
	margin: 0;
	padding: 0;
}
.mls-edit-account-address .form-row:nth-of-type(1),
.mls-edit-account-address .form-row:nth-of-type(2) {
	grid-column: 1 / -1;
}
.mls-edit-account-address label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.mls-edit-account-address input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mls-edit-account-address input[type="text"]:focus {
	outline: none;
	border-color: var(--orange);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(242, 103, 37, 0.12);
}
@media (max-width: 640px) {
	.mls-edit-account-address {
		grid-template-columns: 1fr;
		padding: 20px 18px 14px;
	}
	.mls-edit-account-address .form-row:nth-of-type(1),
	.mls-edit-account-address .form-row:nth-of-type(2) {
		grid-column: auto;
	}
}

/* My Reviews list. */
.mls-account-review-list { display: flex; flex-direction: column; gap: 14px; }
.mls-account-review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 18px 22px;
}
.mls-account-review__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.mls-account-review__instructor {
	font-family: var(--font-display);
	font-size: 18px;
	margin-bottom: 4px;
}
.mls-account-review__instructor a { color: var(--ink); }
.mls-account-review__instructor a:hover { color: var(--orange); }
.mls-account-review__meta {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: var(--muted);
}
.mls-account-review__status {
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 10px;
}
.mls-account-review__status--live    { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.mls-account-review__status--pending { background: rgba(15, 26, 33, 0.08); color: var(--muted); }
.mls-account-review__body p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
}
.mls-account-review__body p:last-child { margin-bottom: 0; }

/* Notifications block (separate section on the Overview dashboard). */
.mls-account-notifications h2::before {
	content: '🔔 ';
	margin-right: 4px;
	font-size: 0.85em;
}
.mls-account-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mls-account-notif {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--orange);
	background: var(--paper);
	font-size: 14px;
}
.mls-account-notif strong { color: var(--ink); font-weight: 600; }
.mls-account-notif span { color: var(--muted); line-height: 1.5; }
.mls-account-notif--warning { border-left-color: #d97706; background: rgba(217, 119, 6, 0.06); }
.mls-account-notif--success { border-left-color: #16a34a; background: rgba(22, 163, 74, 0.06); }
.mls-account-notif--info    { border-left-color: var(--teal); background: rgba(0, 92, 127, 0.05); }

/* Softer empty state (used inside cards where the outer card already has a border). */
.mls-empty-state--soft {
	background: transparent;
	border: none;
	padding: 6px 0;
	color: var(--muted);
}

/* Instructor dashboard */
.mls-instructor-classes { display: grid; gap: 24px; }
.mls-instructor-class { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; }
.mls-instructor-class-head { display: flex; justify-content: space-between; align-items: start; gap: 24px; flex-wrap: wrap; }
.mls-instructor-class-head h3 { margin-top: 6px; margin-bottom: 12px; }
.mls-instructor-class-stats { text-align: center; padding: 12px 18px; border-left: 2px solid var(--orange); }
.mls-instructor-class-stats .ws-num { color: var(--orange); }
.mls-instructor-class-stats .ws-label { color: var(--muted); }
.mls-instructor-attendees { margin-top: 20px; }
.mls-instructor-attendees summary { cursor: pointer; padding: 10px 0; font-weight: 500; color: var(--orange); }
.mls-attendees-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.mls-attendees-table th, .mls-attendees-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.mls-attendees-table th { background: var(--paper); font-weight: 500; }

/* ============ LMS ============ */
.mls-lms-library { padding: 0; }
.mls-lms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mls-lms-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
.mls-lms-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mls-lms-card-thumb { aspect-ratio: 16/9; background-color: var(--paper-warm); background-size: cover; background-position: center; }
.mls-lms-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.mls-lms-card-body h3 { font-family: var(--font-display); font-size: 20px; }

.mls-progress-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mls-progress-bar span { display: block; height: 100%; background: var(--orange); transition: width 0.3s; }
.mls-progress-label { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.05em; }

.mls-lms-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding: 0; }
.mls-lms-player { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.mls-lms-header { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.mls-lms-back { font-size: 14px; color: var(--muted); }
.mls-lms-back:hover { color: var(--orange); }
.mls-lms-header h1 { font-family: var(--font-display); font-size: 28px; margin: 8px 0 12px; }
.mls-lms-progress { display: flex; align-items: center; gap: 16px; }
.mls-lms-progress .mls-progress-bar { flex: 1; }

.mls-video-frame { aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; margin-bottom: 24px; }
.mls-video-frame iframe, .mls-video-frame video { width: 100%; height: 100%; border: 0; display: block; }

.mls-lms-lesson-meta h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.mls-lesson-duration { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 12px; padding: 3px 8px; background: var(--paper); border-radius: var(--radius-full); }
.mls-lesson-notes { font-size: 16px; color: var(--muted); margin: 16px 0 24px; line-height: 1.65; font-weight: 300; }
.mls-video-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 500; padding: 4px 10px;
	background: var(--paper); color: var(--muted); border-radius: var(--radius-full);
}
.mls-video-status.is-done { background: rgba(34,197,94,0.12); color: var(--green); }

.mls-lms-locked { padding: 60px 30px; text-align: center; background: var(--paper); border-radius: var(--radius-md); margin-bottom: 24px; }
.mls-lock-icon { font-size: 48px; margin-bottom: 12px; }

.mls-lms-sidebar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 20px; }
.mls-lms-sidebar h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 16px; }

.mls-lesson-list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; }

/* Lesson group (heading + nested video list) */
.mls-lesson-group { padding: 0; }
.mls-lesson-group-head {
	display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
	padding: 8px 10px; border-radius: var(--radius-sm);
	background: var(--paper);
	margin-bottom: 6px;
}
.mls-lesson-group.is-current-lesson .mls-lesson-group-head { background: var(--orange-light); }
.mls-lesson-group.is-done .mls-lesson-group-head .mls-lesson-group-num { background: var(--green); color: #fff; }

.mls-lesson-group-num {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--ink); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 12px; font-weight: 500;
}
.mls-lesson-group-title {
	font-family: var(--font-display);
	font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3;
}
.mls-lesson-group-count {
	font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--muted);
}

/* Nested video list */
.mls-video-sublist {
	list-style: none; padding: 0 0 0 20px; margin: 0;
	display: flex; flex-direction: column; gap: 2px;
	border-left: 2px solid var(--line); margin-left: 14px;
}
.mls-video-sublist li a {
	display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
	padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink);
	transition: background 0.15s;
	font-size: 14px;
}
.mls-video-sublist li a:hover { background: var(--paper); color: var(--orange); }
.mls-video-sublist li.is-active a { background: var(--orange); color: #fff !important; }
.mls-video-sublist li.is-active .mls-video-bullet,
.mls-video-sublist li.is-active .mls-lesson-dur { color: #fff !important; }
.mls-video-sublist li.is-done .mls-video-bullet { color: var(--green); }
.mls-video-sublist li.is-done.is-active .mls-video-bullet { color: #fff; }
.mls-video-sublist li.is-locked a { opacity: 0.55; cursor: not-allowed; }

.mls-video-bullet { font-size: 13px; line-height: 1; color: var(--muted); text-align: center; }
.mls-video-sub-title { font-weight: 400; line-height: 1.3; }
.mls-lesson-dur { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mls-lesson-lock { font-size: 12px; }

.mls-lms-lesson-title {
	font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--orange); margin-bottom: 6px;
}
.mls-lms-video-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.mls-lms-video-meta .mls-lesson-duration {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--muted);
	padding: 4px 10px; background: var(--paper); border-radius: var(--radius-full);
}
.mls-lms-video-meta .mls-lesson-size {
	font-size: 12px; color: var(--muted);
	padding: 4px 10px; background: var(--paper); border-radius: var(--radius-full);
}

/* ============ SHORTCODE / FORM HELPERS ============ */
.mls-form .form-group { margin-bottom: 14px; }
.mls-form button { font-family: inherit; }
.mls-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }

/* ============ INSTRUCTORS ============ */
.mls-instructors-section {
	padding: 100px 0;
	background: var(--paper);
}
.mls-instructors-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
}
.mls-instructors-head .kicker { justify-content: center; }
.mls-instructors-head .section-title { text-align: center; margin: 0 auto 16px; }
.mls-instructors-head .section-sub { margin: 0 auto; }

.mls-instructors-grid {
	display: grid;
	grid-template-columns: repeat(var(--mls-cols, 4), 1fr);
	gap: 28px;
}

.mls-instructor-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}
.mls-instructor-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

/* Photo */
.mls-instructor-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
	background: var(--paper);
}
.mls-instructor-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	/* Crop from the top so the subject's head/face stays in frame even
	 * when the source photo's aspect ratio doesn't match the 4:5 box. */
	object-position: center top;
	display: block;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mls-instructor-card:hover .mls-instructor-card__media img { transform: scale(1.05); }

/* Photo fallback (no thumbnail) — gradient tile + initials */
.mls-instructor-card__media-fallback {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Photo overlay gradient + count chip + CTA */
.mls-instructor-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(15, 26, 33, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.mls-instructor-card:hover .mls-instructor-card__media::after { opacity: 1; }

.mls-instructor-card__count {
	position: absolute;
	top: 14px; left: 14px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	color: var(--ink);
	padding: 5px 10px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	z-index: 2;
	box-shadow: 0 2px 8px -2px rgba(15, 26, 33, 0.18);
}

.mls-instructor-card__cta {
	position: absolute;
	bottom: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	background: var(--orange);
	color: #fff;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px -4px rgba(242, 103, 37, 0.55);
	z-index: 2;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mls-instructor-card:hover .mls-instructor-card__cta {
	opacity: 1;
	transform: translateY(0);
}

/* Body */
.mls-instructor-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.mls-instructor-card__role {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
}
.mls-instructor-card__name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
}
.mls-instructor-card__name a { color: var(--ink); transition: color 0.15s; }
.mls-instructor-card__name a:hover { color: var(--orange); }

.mls-instructor-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}
.mls-instructor-card__location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.mls-instructor-card__location svg { color: var(--orange); flex-shrink: 0; }
.mls-instructor-card__socials {
	display: inline-flex;
	gap: 6px;
	margin-left: auto;
}
.mls-instructor-card__socials a {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--paper);
	color: var(--muted);
	transition: all 0.2s;
}
.mls-instructor-card__socials a:hover {
	background: var(--orange);
	color: #fff;
	transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
	.mls-instructors-section { padding: 70px 0; }
	.mls-instructors-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
	.mls-instructors-section { padding: 56px 0; }
	.mls-instructors-grid { grid-template-columns: 1fr; }
	.mls-instructor-card__name { font-size: 20px; }
}

/* ============ INSTRUCTOR — SINGLE / DETAIL PAGE ============ */
.mls-instructor-hero {
	position: relative;
	padding: 56px 0 80px;
	background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
	overflow: hidden;
}
.mls-instructor-hero::before {
	content: '';
	position: absolute;
	top: -180px; right: -160px;
	width: 520px; height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 103, 37, 0.08), transparent 65%);
	pointer-events: none;
}
.mls-instructor-hero::after {
	content: '';
	position: absolute;
	bottom: -220px; left: -120px;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 92, 127, 0.06), transparent 65%);
	pointer-events: none;
}
.mls-instructor-hero__inner { position: relative; z-index: 2; }

.mls-instructor-hero__breadcrumb {
	margin-bottom: 36px;
	color: var(--muted);
	font-size: 13px;
}
.mls-instructor-hero__breadcrumb a { color: var(--muted); }
.mls-instructor-hero__breadcrumb a:hover { color: var(--orange); }
.mls-instructor-hero__breadcrumb span { color: var(--line); margin: 0 8px; }

.mls-instructor-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: stretch;
}

/* Media — large portrait, sticky-feeling */
.mls-instructor-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper);
	box-shadow: 0 30px 60px -30px rgba(15, 26, 33, 0.25), 0 8px 20px -8px rgba(15, 26, 33, 0.08);
}
.mls-instructor-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.mls-instructor-hero__media .mls-instructor-card__media-fallback {
	font-size: 88px;
}
.mls-instructor-hero__photo-chip {
	position: absolute;
	top: 18px; left: 18px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	color: var(--ink);
	padding: 6px 12px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px -2px rgba(15, 26, 33, 0.18);
}

/* Panel — identity content next to photo */
.mls-instructor-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 0;
}
.mls-instructor-hero__role {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 6px 14px;
	background: rgba(242, 103, 37, 0.12);
	color: var(--orange);
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.mls-instructor-hero__name {
	font-family: var(--font-display);
	font-size: clamp(40px, 5.6vw, 76px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0 0 18px;
}
.mls-instructor-hero__location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 16px;
	margin-bottom: 28px;
}
.mls-instructor-hero__location svg { color: var(--orange); flex-shrink: 0; }

/* Stats row */
.mls-instructor-hero__stats {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

/* Contact / social cards — always their own row, below the numeric stats. */
.mls-instructor-hero__links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 32px;
}
.mls-instructor-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	min-width: 140px;
	flex: 0 1 auto;
}
.mls-instructor-hero__stat-num {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
}
.mls-instructor-hero__stat-num svg { color: var(--orange); }
.mls-instructor-hero__stat-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Stat card variant — clickable link (Website / Instagram). Same shape and
 * size as a numeric stat card so the row reads as one unified strip. */
.mls-instructor-hero__stat--link {
	color: var(--ink);
	text-decoration: none;
	transition: var(--transition);
}
.mls-instructor-hero__stat--link:hover {
	border-color: var(--ink);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -10px rgba(15, 26, 33, 0.2);
}
.mls-instructor-hero__stat--link .mls-instructor-hero__stat-label {
	color: var(--ink);
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* Action row */
.mls-instructor-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}
.mls-instructor-hero__actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Bio section */
.mls-instructor-bio-section {
	padding: 96px 0 60px;
	background: #fff;
}
.mls-instructor-bio-section__inner {
	max-width: 880px;
}
.mls-instructor-bio-section__head { margin-bottom: 28px; }
.mls-instructor-bio-section__head .kicker { margin-bottom: 10px; }
.mls-instructor-bio-section__head .section-title {
	margin: 0;
	max-width: none;
	font-size: clamp(32px, 4vw, 48px);
}
.mls-instructor-bio {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
}
.mls-instructor-bio p { margin: 0 0 18px; }
.mls-instructor-bio p:last-child { margin-bottom: 0; }
.mls-instructor-bio h2,
.mls-instructor-bio h3 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 32px 0 14px;
}
.mls-instructor-bio h2 { font-size: 28px; }
.mls-instructor-bio h3 { font-size: 22px; }
.mls-instructor-bio a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mls-instructor-bio a:hover { color: var(--teal); }
.mls-instructor-bio blockquote {
	border-left: 3px solid var(--orange);
	padding: 8px 0 8px 22px;
	margin: 24px 0;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.4;
	color: var(--ink);
	font-style: italic;
}

/* ========== HIGHLIGHTS — three big stat tiles ========== */
.mls-instructor-highlights {
	padding: 56px 0;
	background: var(--paper);
	border-top: 1px solid rgba(15, 26, 33, 0.06);
}
.mls-instructor-highlights__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}
.mls-instructor-highlights__grid[data-stats="1"] { --cols: 1; max-width: 440px; margin: 0 auto; }
.mls-instructor-highlights__grid[data-stats="2"] { --cols: 2; max-width: 720px; margin: 0 auto; }
.mls-instructor-highlights__grid[data-stats="3"] { --cols: 3; }

.mls-instructor-highlights__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px 16px;
	position: relative;
}
/* Vertical hairline separators between stat tiles */
.mls-instructor-highlights__stat + .mls-instructor-highlights__stat::before {
	content: '';
	position: absolute;
	left: 0; top: 16%; bottom: 16%;
	width: 1px;
	background: rgba(15, 26, 33, 0.10);
}
.mls-instructor-highlights__num {
	font-family: var(--font-display);
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--orange);
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.mls-instructor-highlights__num-suffix {
	font-size: 0.55em;
	letter-spacing: -0.01em;
}
.mls-instructor-highlights__num-star {
	font-size: 0.7em;
	line-height: 1;
	color: var(--orange);
}
.mls-instructor-highlights__label {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

/* ========== "Classes with X" archive grid (full list) ========== */
.mls-instructor-classes {
	padding: 60px 0 100px;
	background: var(--paper);
	scroll-margin-top: 100px;
}
.mls-instructor-classes__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
}
.mls-instructor-classes__head .kicker { justify-content: center; }
.mls-instructor-classes__head .section-title {
	text-align: center;
	margin: 0 auto 16px;
}
.mls-instructor-classes__head .section-sub {
	margin: 0 auto;
	color: var(--muted);
}

/* ========== ENGAGEMENT — two-column classes + reviews ========== */
.mls-instructor-engagement {
	padding: 60px 0 80px;
	background: var(--paper);
	scroll-margin-top: 100px;
}
.mls-instructor-engagement__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.mls-instructor-engagement__grid[data-cols="1"] {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin: 0 auto;
}
.mls-instructor-engagement__heading {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--orange);
	display: inline-block;
}

/* ----- Compact class row ----- */
.mls-instructor-class-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mls-instructor-class-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 18px 22px;
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid transparent;
	transition: var(--transition);
}
.mls-instructor-class-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(15, 26, 33, 0.18);
	border-color: rgba(15, 26, 33, 0.04);
}
.mls-instructor-class-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	background: var(--orange);
	color: #fff;
	border-radius: var(--radius-md);
	gap: 2px;
	flex-shrink: 0;
}
.mls-instructor-class-row[data-event-type="online"] .mls-instructor-class-row__date {
	background: var(--type-online-strong);
}
.mls-instructor-class-row[data-event-type="recorded"] .mls-instructor-class-row__date {
	background: var(--type-recorded-strong);
}
.mls-instructor-class-row__mo {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.92;
}
.mls-instructor-class-row__day {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
}
.mls-instructor-class-row__body {
	min-width: 0;
}
.mls-instructor-class-row__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 4px;
}
.mls-instructor-class-row__title a { color: var(--ink); transition: color 0.15s; }
.mls-instructor-class-row__title a:hover { color: var(--orange); }
.mls-instructor-class-row__past-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: rgba(15, 26, 33, 0.08);
	color: var(--muted);
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: middle;
}
.mls-instructor-class-row__meta {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

/* Past classes — subtly de-emphasized so upcoming ones still pop. The date
 * pill desaturates and the row's overall opacity dips slightly. */
.mls-instructor-class-row.is-past .mls-instructor-class-row__date {
	background: rgba(15, 26, 33, 0.55);
}
.mls-instructor-class-row.is-past .mls-instructor-class-row__cta {
	background: #fff;
	color: var(--ink);
	border: 1.5px solid var(--line);
}
.mls-instructor-class-row.is-past .mls-instructor-class-row__cta:hover {
	background: var(--paper);
	border-color: var(--ink);
	color: var(--ink);
	box-shadow: none;
}
.mls-instructor-class-row__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	background: var(--orange);
	color: #fff;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 600;
	transition: var(--transition);
	white-space: nowrap;
}
.mls-instructor-class-row__cta:hover {
	background: var(--orange-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -6px rgba(242, 103, 37, 0.5);
}

/* ----- Review list ----- */
.mls-review-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}
.mls-review-item {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	border: 1px solid transparent;
	transition: var(--transition);
}
.mls-review-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.mls-review-item__author {
	font-weight: 600;
	color: var(--ink);
	font-size: 15px;
}
.mls-review-item__body p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
}
.mls-review-item__body p:last-child { margin-bottom: 0; }

/* Stars */
.mls-review-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--orange);
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 1;
}
.mls-review-star { color: rgba(242, 103, 37, 0.25); }
.mls-review-star.is-filled { color: var(--orange); }

/* Empty state */
.mls-review-empty {
	background: #fff;
	border: 1px dashed rgba(15, 26, 33, 0.12);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	text-align: center;
	color: var(--muted);
	margin-bottom: 24px;
}
.mls-review-empty p { margin: 0; }

/* ----- Submit-a-review form card ----- */
.mls-review-form-card {
	background: #fff;
	border-radius: var(--radius-lg);
	border-top: 4px solid var(--orange);
	padding: 28px 28px 26px;
	box-shadow: 0 8px 24px -16px rgba(15, 26, 33, 0.12);
}
.mls-review-form-card__head { margin-bottom: 18px; }
.mls-review-form-card__head h3 {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	color: var(--ink);
}
.mls-review-form-card__head p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}
.mls-review-form-card__notice {
	background: rgba(34, 197, 94, 0.10);
	color: #15803d;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 18px;
}

.mls-review-form__row { margin-bottom: 18px; }
.mls-review-form__row label,
.mls-review-form__label-static {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 8px;
}
.mls-review-form__row input[type="text"],
.mls-review-form__row input[type="email"],
.mls-review-form__row textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.mls-review-form__row input[type="text"]:focus,
.mls-review-form__row input[type="email"]:focus,
.mls-review-form__row textarea:focus {
	outline: none;
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(242, 103, 37, 0.12);
}
.mls-review-form__row textarea { resize: vertical; min-height: 110px; }

/* Rating circles */
.mls-review-rating-selector {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
}
.mls-rating-circle {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--line);
	color: var(--muted);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: var(--transition);
	font-family: inherit;
}
.mls-rating-circle:hover {
	border-color: var(--orange);
	color: var(--orange);
}
.mls-rating-circle.is-selected {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	transform: scale(1.05);
}

.mls-review-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}

/* Responsive */
@media (max-width: 1024px) {
	.mls-instructor-hero { padding: 40px 0 60px; }
	.mls-instructor-hero__grid {
		grid-template-columns: 1fr;
		gap: 36px;
		max-width: 640px;
		margin: 0 auto;
	}
	.mls-instructor-hero__media { aspect-ratio: 4 / 5; }
	.mls-instructor-bio-section { padding: 64px 0 40px; }
	.mls-instructor-highlights { padding: 44px 0; }
	.mls-instructor-engagement { padding: 48px 0 60px; }
	.mls-instructor-engagement__grid { grid-template-columns: 1fr; gap: 48px; }
	.mls-instructor-classes { padding: 48px 0 80px; }
}
@media (max-width: 640px) {
	.mls-instructor-hero { padding: 32px 0 48px; }
	.mls-instructor-hero__breadcrumb { margin-bottom: 24px; }
	.mls-instructor-hero__name { font-size: clamp(36px, 9vw, 56px); margin-bottom: 14px; }
	.mls-instructor-hero__stats { gap: 10px; margin-bottom: 10px; }
	.mls-instructor-hero__links { gap: 10px; margin-bottom: 24px; }
	.mls-instructor-hero__stat { padding: 14px 18px; min-width: 0; flex: 1 1 calc(50% - 5px); }
	.mls-instructor-hero__stat-num { font-size: 26px; }
	.mls-instructor-hero__actions { width: 100%; }
	.mls-instructor-hero__actions .btn,
	.mls-instructor-hero__social-link { flex: 1 1 auto; justify-content: center; }
	.mls-instructor-bio-section { padding: 48px 0 24px; }
	.mls-instructor-bio { font-size: 16px; }

	/* Stats stack on mobile and shed the vertical separators. */
	.mls-instructor-highlights { padding: 36px 0; }
	.mls-instructor-highlights__grid,
	.mls-instructor-highlights__grid[data-stats="2"],
	.mls-instructor-highlights__grid[data-stats="3"] {
		grid-template-columns: 1fr;
		gap: 24px;
		max-width: none;
	}
	.mls-instructor-highlights__stat + .mls-instructor-highlights__stat::before { display: none; }

	.mls-instructor-engagement { padding: 36px 0 48px; }
	.mls-instructor-engagement__grid { gap: 36px; }
	.mls-instructor-classes { padding: 36px 0 64px; }
	.mls-instructor-class-row {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 14px;
		padding: 14px 16px;
	}
	.mls-instructor-class-row__date { width: 56px; height: 56px; }
	.mls-instructor-class-row__day { font-size: 22px; }
	.mls-instructor-class-row__cta {
		grid-column: 1 / -1;
		justify-content: center;
	}
	.mls-review-form-card { padding: 24px 20px 22px; }
	.mls-rating-circle { width: 38px; height: 38px; font-size: 13px; }
}

/* Stars */
.mls-stars { color: var(--orange); letter-spacing: 2px; font-size: 16px; }

/* Map */
.mls-event-map { aspect-ratio: 16/8; border-radius: var(--radius-md); overflow: hidden; margin-top: 20px; border: 1px solid var(--line); }
.mls-event-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Reviews list (single event pages) ----
 * Single-column list rows, deliberately different from the home-page
 * testimonials, which stay as cards (.reviews-grid) or a carousel
 * (.mls-rv-slider). Nothing here touches those. */
.mls-reviews-list {
	list-style: none;
	padding: 0;
	margin: 28px 0 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--line);
}
.mls-review-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 18px;
	padding: 26px 4px;
	border-bottom: 1px solid var(--line);
	list-style: none;
}
.mls-review-row__avatar { width: 56px; }
.mls-review-row__img,
.mls-review-row__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--paper);
}

/* Initials fallback — used when avatars are disabled or the commenter has
 * no Gravatar. Colour is picked deterministically from the comment ID so a
 * given person always gets the same disc. */
.mls-initials-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	user-select: none;
	flex-shrink: 0;
}
.mls-initials-avatar--1 { background: linear-gradient(135deg, #F26725, #FF9A63); }
.mls-initials-avatar--2 { background: linear-gradient(135deg, #005C7F, #0A87B5); }
.mls-initials-avatar--3 { background: linear-gradient(135deg, #C95F2C, #E8894F); }
.mls-initials-avatar--4 { background: linear-gradient(135deg, #466A8E, #6D93B8); }
.mls-initials-avatar--5 { background: linear-gradient(135deg, #8A5C73, #B0839A); }
.mls-initials-avatar--6 { background: linear-gradient(135deg, #0F1A21, #33454F); }
.mls-review-row__body { min-width: 0; }
.mls-review-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.mls-review-row__who {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}
.mls-review-row__name {
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
}
.mls-review-row__date { font-size: 13px; color: var(--muted); }
.mls-review-row__stars {
	color: var(--orange);
	font-size: 15px;
	letter-spacing: 2px;
	white-space: nowrap;
	flex-shrink: 0;
}
.mls-review-row__text { font-size: 16px; line-height: 1.65; color: var(--ink); }
.mls-review-row__text p { margin: 0 0 10px; }
.mls-review-row__text p:last-child { margin-bottom: 0; }
.mls-review-row__pending {
	margin: 10px 0 0;
	font-size: 13px;
	font-style: italic;
	color: var(--muted);
}

/* Comment/review pagination */
.mls-comments .comments-pagination,
.mls-comments .comment-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 8px 0 36px;
}
.mls-comments .comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: var(--transition);
}
.mls-comments .comments-pagination .page-numbers:hover {
	border-color: var(--orange);
	color: var(--orange);
}
.mls-comments .comments-pagination .page-numbers.current {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}
.mls-comments .comments-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media (max-width: 640px) {
	.mls-review-row {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 14px;
		padding: 22px 2px;
	}
	.mls-review-row__avatar { width: 44px; }
	.mls-review-row__img,
	.mls-review-row__avatar img,
	.mls-review-row .mls-initials-avatar { width: 44px; height: 44px; font-size: 14px; }
	.mls-review-row__head { margin-bottom: 6px; }
	.mls-review-row__text { font-size: 15px; }
}

/* Comments form */
.comment-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.comment-form .comment-form-rating { margin-bottom: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form select, .comment-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; }

/* ============ ELEMENTOR EDIT-MODE TWEAKS ============ */
.elementor-editor-active .mls-header { position: sticky !important; }

/* ============ WOOCOMMERCE ============ */
.mls-cart-link {
	display: inline-flex; align-items: center; gap: 6px;
	width: 44px; height: 44px; border-radius: var(--radius-sm);
	border: 1.5px solid var(--line); background: #fff;
	justify-content: center; color: var(--ink);
	position: relative; transition: var(--transition);
}
.mls-cart-link:hover { border-color: var(--orange); color: var(--orange); }
.mls-cart-count {
	position: absolute; top: -6px; right: -6px;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: var(--radius-full); background: var(--orange); color: #fff;
	font-size: 11px; font-weight: 600; display: flex;
	align-items: center; justify-content: center; line-height: 1;
}
.mls-cart-count:not(.has-items) { display: none; }

/* WC wrapper */
.mls-wc-section { padding: 60px 0 100px; background: var(--paper); }

.mls-already-registered {
	background: rgba(34,197,94,0.1); color: var(--green); border-radius: var(--radius-sm);
	padding: 14px; text-align: center; font-weight: 500; font-size: 15px;
	margin: 0;
}
.mls-already-registered span { margin-right: 6px; }
.mls-event-cart-registered { display: flex; flex-direction: column; gap: 0; }
.mls-another-seat { margin-top: 12px; text-align: center; font-size: 14px; color: var(--orange); text-decoration: underline; }

/* Registration closed — the class has already run. Deliberately neutral
 * rather than red: nothing has gone wrong, the class is simply over. */
.mls-event-cart--closed { display: flex; flex-direction: column; gap: 0; }
.mls-event-closed {
	background: rgba(15, 26, 33, 0.06); color: var(--muted); border-radius: var(--radius-sm);
	padding: 14px; text-align: center; font-weight: 500; font-size: 15px;
	margin: 0;
}
.mls-event-closed span { margin-right: 6px; font-size: 10px; vertical-align: middle; }

/* =============================================================================
 * EVENT STATUS BADGE — cancelled / postponed, sourced from The Events Calendar.
 * One component, three size contexts (card / hero / inline).
 * ========================================================================== */
.mls-event-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.mls-event-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* Cancelled reads as a stop; postponed as a caution — never the same colour,
 * so the two are distinguishable at a glance in a dense listing. */
.mls-event-status--canceled  { background: rgba(214, 45, 32, 0.10); color: #b3261e; }
.mls-event-status--postponed { background: rgba(242, 103, 37, 0.12); color: #c25010; }

.mls-event-status--card   { padding: 4px 10px; font-size: 11px; }
.mls-event-status--inline { padding: 5px 12px; font-size: 12px; }
.mls-event-status--hero   { padding: 8px 16px; font-size: 13px; }

.event-hero-status { margin: 0 0 14px; }

/* Grid card — sits under the type tag, top-right of the media. */
.class-status-tag { position: absolute; top: 50px; right: 16px; z-index: 2; }

.mls-account-class-status { margin: 0 0 10px; }
/* Event Tickets — form rendered into the single-event content. */
.mls-tickets-form-wrap {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	margin: 32px 0;
	scroll-margin-top: 40px;
}
.mls-tickets-form-heading {
	font-family: var(--font-display);
	font-size: 24px;
	margin: 0 0 18px;
	color: var(--ink);
}
.mls-tickets-form-wrap .tribe-tickets__tickets-form,
.mls-tickets-form-wrap .tribe-tickets,
.mls-tickets-form-wrap form { margin: 0 !important; }

form#tribe-tickets__tickets-form {
	max-width: unset;
	border: 2px solid #F26725;
	border-radius: 10px;
	background: #fff0eaa3;
}
.mls-tickets-fallback ul { margin: 0 0 18px; padding: 0; list-style: none; }
.mls-tickets-fallback li {
	padding: 12px 14px; background: var(--paper);
	border-radius: var(--radius-sm); margin-bottom: 8px;
	display: flex; justify-content: space-between; align-items: center;
}

.mls-event-cart { display: grid; gap: 12px; }
.mls-event-cart-price { font-family: var(--font-display); font-size: 28px; color: var(--orange); text-align: center; }
.mls-event-cart-price del { color: var(--muted); margin-right: 8px; font-size: 18px; }
.mls-event-cart-price ins { background: none; }

/* Seat quantity picker (in-person classes) */
.mls-event-qty-form { display: grid; gap: 12px; margin: 0; }
.mls-event-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.mls-event-qty > label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.mls-event-qty-control {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-full);
	overflow: hidden;
	background: #fff;
}
.mls-qty-btn {
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, color 0.15s;
}
.mls-qty-btn:hover:not(:disabled) { background: var(--paper); color: var(--orange); }
.mls-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.mls-event-qty-control input[type="number"] {
	width: 46px;
	height: 38px;
	border: 0;
	border-left: 1.5px solid var(--line);
	border-right: 1.5px solid var(--line);
	text-align: center;
	font: inherit;
	font-weight: 600;
	color: var(--ink);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mls-event-qty-control input[type="number"]::-webkit-outer-spin-button,
.mls-event-qty-control input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mls-event-qty-control input[type="number"]:focus { outline: none; background: var(--paper); }
.mls-event-cart-stock { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }

/* WooCommerce shop archive */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px;
	margin: 0 0 40px; padding: 0; list-style: none;
}
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; text-align: left !important; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.woocommerce ul.products li.product a { padding: 0 !important; }
.woocommerce ul.products li.product img { margin: 0 !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 20px !important; font-weight: 400 !important; padding: 18px 22px 6px !important; color: var(--ink) !important; }
.woocommerce ul.products li.product .price { padding: 0 22px 16px; font-family: var(--font-display); font-size: 18px; color: var(--orange); }
.woocommerce ul.products li.product .button { margin: 0 22px 22px !important; }

/* Single product page */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); font-weight: 400; color: var(--ink); margin: 0 0 12px; }
.woocommerce div.product .price { font-family: var(--font-display); font-size: 28px; color: var(--orange); margin-bottom: 18px; }
.woocommerce div.product form.cart .button { padding: 14px 24px !important; font-size: 16px !important; background: var(--orange) !important; color: #fff !important; border-radius: var(--radius-sm) !important; border: none !important; font-weight: 500 !important; }
.woocommerce div.product form.cart .button:hover { background: var(--orange-dark) !important; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 32px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; border-bottom: 1px solid var(--line) !important; margin: 0 0 24px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 16px 0 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 0 !important; font-weight: 500 !important; color: var(--muted) !important; border-bottom: 2px solid transparent !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--orange) !important; border-color: var(--orange) !important; }

/* Cart */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.woocommerce table.shop_table { background: #fff; border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; border-collapse: separate !important; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--paper); padding: 14px 18px !important; font-family: var(--font-body); font-weight: 600; }
.woocommerce table.shop_table td { padding: 16px 18px !important; vertical-align: middle; border-top: 1px solid var(--line) !important; }
.woocommerce-cart .cart_totals { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.woocommerce-cart .cart_totals h2 { font-family: var(--font-display); font-size: 24px; margin-bottom: 18px; }
.woocommerce-cart .actions .coupon { display: flex; gap: 8px; align-items: center; }
.woocommerce .button, .woocommerce a.button, .woocommerce input.button { background: var(--orange) !important; color: #fff !important; border-radius: var(--radius-sm) !important; padding: 12px 22px !important; font-weight: 500 !important; border: none !important; font-family: inherit !important; transition: var(--transition); }
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--orange-dark) !important; transform: translateY(-1px); }
.woocommerce .button.alt, .woocommerce input.button.alt { background: var(--orange) !important; }
.woocommerce .button.alt:hover, .woocommerce input.button.alt:hover { background: var(--orange-dark) !important; }

/* Checkout */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.woocommerce-checkout #customer_details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.woocommerce-checkout #order_review_heading { padding-bottom: 0; margin-bottom: 0; border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.woocommerce-checkout #order_review { border-radius: 0 0 var(--radius-md) var(--radius-md); border-top: none; }
.woocommerce-checkout h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 16px; }
.woocommerce form .form-row { padding: 0 0 14px; }
.woocommerce form .form-row label { font-weight: 500; font-size: 14px; margin-bottom: 6px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { padding: 12px 14px !important; border: 1.5px solid var(--line) !important; border-radius: var(--radius-sm) !important; font: inherit !important; background: var(--paper) !important; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--orange) !important; background: #fff !important; outline: none; }

/* ============================================================
 * BLOCK-BASED WOOCOMMERCE CHECKOUT + CART
 * ============================================================
 * The Checkout/Cart blocks (`wp-block-woocommerce-checkout`,
 * `wp-block-woocommerce-cart`) wrap their main + sidebar columns
 * in `.wc-block-components-sidebar-layout` (a flex container).
 * That's the element we have to override for layout — not the
 * outer block. Then we paint ONLY the real content blocks as
 * white cards (skipping the empty notices wrappers WC injects,
 * which would otherwise show as ghost cards at the top of the
 * sidebar).
 */

/* ----- Layout: 2-column grid (form left, summary right) ----- */
.wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout.wc-block-cart {
	display: grid !important;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-main,
.wc-block-components-sidebar-layout.wc-block-cart > .wc-block-components-main {
	width: auto !important; padding: 0 !important; min-width: 0;
}
.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-sidebar,
.wc-block-components-sidebar-layout.wc-block-cart > .wc-block-components-sidebar {
	width: auto !important; padding: 0 !important; min-width: 0;
	position: sticky; top: 24px;
}

/* Hide WC's empty notices wrappers + empty checkout step blocks (shipping
 * method, pickup options) so they don't render a phantom card / shadow
 * strip below the previous section. WC outputs these always, even when
 * irrelevant for the cart. */
.wc-block-checkout .wc-block-components-notices:empty,
.wc-block-checkout .wc-block-components-notices__snackbar,
.wc-block-checkout .wc-block-components-notice-snackbar-list,
.wc-block-cart .wc-block-components-notices:empty,
.wc-block-cart .wc-block-components-notices__snackbar,
.wc-block-cart .wc-block-components-notice-snackbar-list,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-method-block:empty,
.wc-block-checkout .wp-block-woocommerce-checkout-pickup-options-block:empty,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-address-block:empty,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-methods-block:empty {
	display: none !important;
}

/* Defensive: any otherwise-empty checkout step from WC shouldn't render. */
.wc-block-checkout .wc-block-components-checkout-step:empty,
.wc-block-checkout .wc-block-components-checkout-step:not(:has(.wc-block-components-checkout-step__content)) {
	display: none !important;
}

/* ============================================================
 * CHECKOUT BLOCK
 * ============================================================
 * WooCommerce's block stylesheets have no fixed place in the cascade. On
 * the live and staging sites they print in the page body, after this file;
 * on a plain WordPress install they print in the head, before it. Their
 * selectors also run up to five classes long. A theme rule that merely ties
 * with one of theirs wins on one site and loses on another, which is how the
 * cards once lost their padding and background but kept their shadow.
 *
 * So every checkout rule starts with #site-content, the theme's <main>. An
 * ID outranks any class selector whatever the load order, with no need for
 * !important. Keep to that here.
 *
 * Two things this section deliberately leaves alone:
 *  - `display` on the Place Order button. Additional CSS on the live site
 *    hides the button while it's disabled, and an ID here would override that.
 *  - the look of the Modern style, which only resets the --co-* tokens below
 *    (see modern.css).
 */
#site-content .wp-block-woocommerce-checkout {
	--co-card-border: var(--line);
	--co-card-radius: var(--radius-md);
	--co-card-shadow: var(--shadow-sm);
	--co-card-pad: 28px 30px;
	--co-summary-pad: 26px 28px;
	--co-heading-size: 22px;
	--co-field-bg: var(--paper);
	--co-field-border: #D9D3C7;
	--co-field-radius: var(--radius-sm);
	--co-control-border: #AFA89A;      /* checkbox and radio outlines, and hovered fields */
	--co-option-radius: 12px;
	--co-ring: 0 0 0 4px rgba(242, 103, 37, 0.14);
	--co-error: #b91c1c;
	--co-error-ring: 0 0 0 4px rgba(185, 28, 28, 0.12);
	--co-button-bg: var(--orange);
	--co-button-bg-hover: var(--orange-dark);
	--co-button-radius: var(--radius-sm);
	--co-button-shadow: 0 4px 14px -4px rgba(242, 103, 37, 0.4);
	--co-button-shadow-hover: 0 8px 22px -6px rgba(242, 103, 37, 0.55);

	/* WooCommerce sizes its text from these presets, and WordPress's defaults
	 * (13px and 20px) read too small here. The last one colours its dividers. */
	--wp--preset--font-size--x-small: 12px;
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--medium: 22px;
	--wc-separator-color: var(--line);

	color: var(--ink);
}

/* ----- Section cards (Contact, Billing, Payment, Additional information, Note) ----- */
#site-content .wc-block-checkout .wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid var(--co-card-border);
	border-radius: var(--co-card-radius);
	box-shadow: var(--co-card-shadow);
	margin: 0 0 20px;
	min-width: 0;
	padding: var(--co-card-pad);
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__content > * { margin-bottom: 14px; }
#site-content .wc-block-checkout .wc-block-components-checkout-step__content > :last-child { margin-bottom: 0; }

/* Section heading */
#site-content .wc-block-checkout .wc-block-components-checkout-step__heading-container {
	gap: 6px;
	margin: 0 0 18px;
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__heading {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	justify-content: space-between;
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--co-heading-size);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__description {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__heading-content {
	color: var(--muted);
	font-size: 14px;
}
#site-content .wc-block-checkout .wc-block-checkout__login-prompt {
	float: none;
	font-size: 14px;
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-checkout-step__heading-content a,
#site-content .wc-block-checkout .wc-block-checkout__login-prompt {
	color: var(--orange);
	font-weight: 500;
}

/* "You are currently checking out as a guest." */
#site-content .wc-block-checkout .wc-block-checkout__guest-checkout-notice {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
	margin: -4px 0 0;
}

/* ----- Field rows: two columns, wide fields span both ----- */
#site-content .wc-block-checkout .wc-block-components-address-form {
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
#site-content .wc-block-checkout .wc-block-components-address-form > * {
	flex: none;
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}
#site-content .wc-block-checkout .wc-block-components-address-form__first_name,
#site-content .wc-block-checkout .wc-block-components-address-form__last_name,
#site-content .wc-block-checkout .wc-block-components-address-form__city,
#site-content .wc-block-checkout .wc-block-components-address-form__state,
#site-content .wc-block-checkout .wc-block-components-address-form__postcode,
#site-content .wc-block-checkout .wc-block-components-address-form__phone,
#site-content .wc-block-checkout .wc-block-components-address-form__mls-attendee-first-name,
#site-content .wc-block-checkout .wc-block-components-address-form__mls-attendee-last-name {
	grid-column: span 1;
}
#site-content .wc-block-checkout .wc-block-components-address-form__address_2-toggle {
	background: none;
	border: 0;
	color: var(--orange);
	font-size: 14px;
	font-weight: 500;
	justify-self: start;
	padding: 0;
	width: auto;
}

/* ----- Text inputs, with WooCommerce's floating label ----- */
#site-content .wc-block-checkout .wc-block-components-text-input { margin: 0; }
#site-content .wc-block-checkout .wc-block-components-text-input input {
	background: var(--co-field-bg);
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	height: 52px;
	line-height: 20px;
	min-height: 0;
	outline: 0;
	padding: 14px;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
	width: 100%;
}
#site-content .wc-block-checkout .wc-block-components-text-input.is-active input,
#site-content .wc-block-checkout .wc-block-components-text-input input:-webkit-autofill {
	padding: 22px 14px 6px;
}
#site-content .wc-block-checkout .wc-block-components-text-input input:hover {
	border-color: var(--co-control-border);
}
#site-content .wc-block-checkout .wc-block-components-text-input input:focus {
	background: #fff;
	border-color: var(--orange);
	box-shadow: var(--co-ring);
}
#site-content .wc-block-checkout .wc-block-components-text-input label {
	color: var(--muted);
	font-size: 15px;
	font-weight: 400;
	left: 15.5px;
	line-height: 20px;
	max-width: calc(100% - 31px);
	top: 26px;
}
#site-content .wc-block-checkout .wc-block-components-text-input.is-active label,
#site-content .wc-block-checkout .wc-block-components-text-input input:-webkit-autofill + label {
	top: 7px;
	transform: scale(0.8);
}
#site-content .wc-block-checkout .wc-block-components-text-input:focus-within label { color: var(--orange); }

/* ----- Selects (Country, State), matching the text inputs ----- */
#site-content .wc-block-checkout .wc-blocks-components-select { margin: 0; }
#site-content .wc-block-checkout .wc-blocks-components-select__container {
	background: transparent;
	border-radius: var(--co-field-radius);
}
#site-content .wc-block-checkout .wc-blocks-components-select__select {
	background: var(--co-field-bg);
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	height: 52px;
	line-height: 20px;
	outline: 0;
	padding: 21px 38px 5px 14px;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
	width: 100%;
}
#site-content .wc-block-checkout .wc-blocks-components-select__select:hover {
	border-color: var(--co-control-border);
}
#site-content .wc-block-checkout .wc-blocks-components-select__select:focus {
	background: #fff;
	border-color: var(--orange);
	border-width: 1.5px;
	box-shadow: var(--co-ring);
	padding: 21px 38px 5px 14px;
}
#site-content .wc-block-checkout .wc-blocks-components-select__label {
	color: var(--muted);
	font-size: 12px;
	left: 15.5px;
	line-height: 16px;
	top: 7px;
}
#site-content .wc-block-checkout .wc-blocks-components-select:focus-within .wc-blocks-components-select__label { color: var(--orange); }
#site-content .wc-block-checkout .wc-blocks-components-select__expand { fill: var(--muted); }

/* ----- Order note ----- */
#site-content .wc-block-checkout .wc-block-checkout__order-notes { padding-block: 20px; }
#site-content .wc-block-checkout .wc-block-checkout__add-note { gap: 12px; }
#site-content .wc-block-checkout .wc-block-components-textarea {
	background: var(--co-field-bg);
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	margin: 0;
	min-height: 104px;
	outline: 0;
	padding: 12px 14px;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
	width: 100%;
}
#site-content .wc-block-checkout .wc-block-components-textarea::placeholder { color: var(--muted); }
#site-content .wc-block-checkout .wc-block-components-textarea:focus {
	background: #fff;
	border: 1.5px solid var(--orange);
	box-shadow: var(--co-ring);
}

/* ----- Errors ----- */
#site-content .wc-block-checkout .wc-block-components-text-input.has-error input,
#site-content .wc-block-checkout .has-error .wc-blocks-components-select__select {
	border-color: var(--co-error);
}
#site-content .wc-block-checkout .wc-block-components-text-input.has-error input:focus,
#site-content .wc-block-checkout .has-error .wc-blocks-components-select__select:focus {
	box-shadow: var(--co-error-ring);
}
#site-content .wc-block-checkout .wc-block-components-text-input.has-error label,
#site-content .wc-block-checkout .has-error .wc-blocks-components-select__label {
	color: var(--co-error);
}
#site-content .wc-block-checkout .has-error .wc-blocks-components-select__select { color: var(--ink); }
#site-content .wc-block-checkout .has-error .wc-blocks-components-select__expand { fill: var(--co-error); }
#site-content .wc-block-checkout .wc-block-components-validation-error {
	color: var(--co-error);
	font-size: 13px;
	padding-top: 6px;
}
#site-content .wc-block-checkout .wc-block-components-notice-banner {
	border-left-width: 4px;
	border-radius: var(--co-field-radius);
	margin: 0 0 16px;
}

/* ----- Saved billing address ----- */
#site-content .wc-block-checkout .wc-block-components-address-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--co-field-radius);
	font-size: 14px;
	gap: 16px;
	line-height: 1.45;
	margin: 0;
	padding: 16px 18px;
}
#site-content .wc-block-checkout .wc-block-components-address-card address {
	color: var(--muted);
	min-width: 0;
}
#site-content .wc-block-checkout .wc-block-components-address-card__address-section--primary {
	color: var(--ink);
	font-size: 15px;
}
#site-content .wc-block-checkout .wc-block-components-address-card__edit {
	color: var(--orange);
	flex: none;
	font-size: 14px;
	font-weight: 500;
	padding: 0;
}

/* ----- Checkboxes -----
 * WooCommerce stacks a resettable input and an SVG tick in the same spot.
 * Only their colour, size and position change here. */
#site-content .wc-block-checkout .wc-block-components-checkbox { color: var(--ink); margin: 0; }
#site-content .wc-block-checkout .wc-block-components-checkbox label {
	font-size: 15px;
	gap: 10px;
	line-height: 22px;
}
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
	background: #fff;
	border: 1.5px solid var(--co-control-border);
	border-radius: 5px;
	height: 20px;
	margin: 1px 0 0;
	min-width: 20px;
	transition: background-color 0.15s, border-color 0.15s;
	width: 20px;
}
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:hover { border-color: var(--orange); }
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
	background: var(--orange);
	border-color: var(--orange);
}
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus { outline: 0; }
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
#site-content .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #fff;
	height: 16px;
	margin: 3px 0 0 2px;
	width: 16px;
}
#site-content .wc-block-checkout .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type=checkbox] { border-color: var(--co-error); }
#site-content .wc-block-checkout .wc-block-components-checkbox.has-error { color: var(--co-error); }

/* ----- Payment options: one bordered card per method -----
 * WooCommerce draws one outline round the whole list plus divider lines, and
 * marks the selected method with an inset dark shadow. All of that goes. */
#site-content .wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
#site-content .wc-block-checkout .wc-block-components-radio-control__option::after {
	content: none;
}
#site-content .wc-block-checkout .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option {
	background: #fff;
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-option-radius);
	box-shadow: none;
	transition: background-color 0.15s, border-color 0.15s;
}
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--co-control-border);
}
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted:hover {
	background: rgba(242, 103, 37, 0.05);
	border-color: var(--orange);
}
#site-content .wc-block-checkout .wc-block-components-radio-control__option {
	align-items: center;
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-option-radius);
	box-shadow: none;
	cursor: pointer;
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 16px 18px;
}
/* A method's row sits inside its bordered card; only saved cards stand alone. */
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border: 0; }
#site-content .wc-block-checkout label.wc-block-components-radio-control__option--checked-option-highlighted {
	background: rgba(242, 103, 37, 0.05);
	border-color: var(--orange);
}
#site-content .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	background: #fff;
	border: 1.5px solid var(--co-control-border);
	flex: none;
	left: auto;
	position: relative;
	top: auto;
	transform: none;
	transition: border-color 0.15s;
}
#site-content .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border: 1.5px solid var(--orange);
}
#site-content .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--orange);
}
#site-content .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus { outline: 0; }
#site-content .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
#site-content .wc-block-checkout .wc-block-components-radio-control__option-layout {
	flex: 1;
	min-width: 0;
}
#site-content .wc-block-checkout .wc-block-components-radio-control__label {
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}

/* Express Checkout box (Apple Pay, PayPal), when a device offers one */
#site-content .wc-block-checkout .wc-block-components-express-payment__title {
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
}
#site-content .wc-block-checkout .wc-block-components-express-payment-continue-rule {
	color: var(--muted);
	font-size: 14px;
	margin: 16px 0 20px;
}

/* What opens under the selected method. Indented to the label on wider
 * screens, and a query container so the card row can respond to its own width. */
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-content {
	color: var(--muted);
	container: mls-payment / inline-size;
	font-size: 14px;
	line-height: 1.45;
	padding: 0 18px 18px 52px;
}
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-content p { margin: 0 0 14px; }
#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-content p:last-child { margin-bottom: 0; }
#site-content .wc-block-checkout .wc-block-components-payment-method-icons {
	justify-content: flex-start;
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
	height: 24px;
	margin: 0 8px 4px 0;
}

/* Braintree's card fields. Their contents are iframes the theme can't reach,
 * but the boxes and floating labels around them are ordinary markup. */
#site-content .wc-block-checkout .wc-block-card-elements {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	margin: 0 0 14px;
}
#site-content .wc-block-checkout .wc-block-gateway-container,
#site-content .wc-block-checkout .wc-block-gateway-container.wc-card-expiry-element,
#site-content .wc-block-checkout .wc-block-gateway-container.wc-card-cvc-element {
	margin: 0;
	min-width: 0;
}
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input {
	background: #fff;
	border: 1.5px solid var(--co-field-border);
	border-radius: var(--co-field-radius);
	height: 52px;
	padding: 13px 0 13px 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input:hover { border-color: var(--co-control-border); }
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.focused.empty,
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input:not(.empty) {
	padding: 22px 0 4px 14px;
}
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.focused {
	border-color: var(--orange);
	box-shadow: var(--co-ring);
}
#site-content .wc-block-checkout .wc-block-gateway-container label {
	color: var(--muted);
	font-size: 15px;
	line-height: 20px;
	margin: 0 0 0 15.5px;
	max-width: calc(100% - 31px);
	transform: translateY(16px);
}
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.focused.empty + label,
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input:not(.empty) + label {
	transform: translateY(7px) scale(0.8);
}
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.focused + label { color: var(--orange); }
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.has-error { border-color: var(--co-error); }
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.has-error.focused { box-shadow: var(--co-error-ring); }
#site-content .wc-block-checkout .wc-block-gateway-container .wc-block-gateway-input.has-error + label { color: var(--co-error); }
@container mls-payment (max-width: 600px) {
	#site-content .wc-block-checkout .wc-block-card-elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#site-content .wc-block-checkout .wc-block-gateway-container.wc-card-number-element { grid-column: 1 / -1; }
}

/* ----- Terms and Place Order ----- */
#site-content .wc-block-checkout .wc-block-checkout__terms {
	border: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 4px 2px 0;
}
#site-content .wc-block-checkout .wc-block-checkout__terms a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#site-content .wc-block-checkout .wc-block-checkout__actions { margin: 0 0 8px; }
#site-content .wc-block-checkout .wc-block-checkout__actions_row { gap: 16px; }
#site-content .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
	align-items: center;
	color: var(--muted);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 6px;
	text-decoration: none;
	transition: color 0.2s;
}
#site-content .wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover { color: var(--orange); }
#site-content .wc-block-checkout .wc-block-components-checkout-return-to-cart-button svg { height: 18px; width: 18px; }
#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button {
	background: var(--co-button-bg);
	border: 0;
	border-radius: var(--co-button-radius);
	box-shadow: var(--co-button-shadow);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	min-height: 56px;
	min-width: 200px;
	padding: 0 32px;
	transition: background 0.2s, box-shadow 0.2s, filter 0.2s, transform 0.2s;
}
#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--co-button-bg-hover);
	box-shadow: var(--co-button-shadow-hover);
	transform: translateY(-1px);
}
#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button:focus {
	box-shadow: var(--co-button-shadow);
	outline: 0;
}
#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: #fff; }

/* ----- Order summary card ----- */
#site-content .wc-block-checkout .wp-block-woocommerce-checkout-totals-block {
	background: transparent;
	padding: 0;
}
#site-content .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: #fff;
	border: 1px solid var(--co-card-border);
	border-radius: var(--co-card-radius);
	box-shadow: var(--co-card-shadow);
	font-size: 15px;
	margin: 0;
	padding: var(--co-summary-pad);
}
#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title {
	align-items: center;
	border: 0;
	border-bottom: 1px solid var(--line);
	cursor: default;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0;
	padding: 0 0 16px;
}
#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--ink);
	flex-grow: 1;
	font-family: var(--font-display);
	font-size: var(--co-heading-size);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}
/* Only shown on the collapsed row below WooCommerce's 920px breakpoint. */
#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title-price {
	color: var(--orange);
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.25;
}
#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title-icon { fill: var(--muted); }
#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__content { border: 0; }

/* Every row below shares the card's padding, so the prices line up on the right. */
#site-content .wc-block-checkout .wc-block-components-order-summary,
#site-content .wc-block-checkout .wc-block-components-totals-coupon,
#site-content .wc-block-checkout .wc-block-components-totals-item {
	margin: 0;
	padding: 0;
}
#site-content .wc-block-checkout .wc-block-components-totals-wrapper {
	border: 0;
	padding: 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary__content { display: block; }

/* Line item: photo | name and details | price */
#site-content .wc-block-checkout .wc-block-components-order-summary-item {
	align-items: start;
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 16px;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	margin: 0;
	padding: 18px 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item:last-child { border-bottom: 0; }
#site-content .wc-block-checkout .wc-block-components-order-summary-item > div { padding-bottom: 0; }
#site-content .wc-block-checkout .wc-block-components-order-summary-item__image {
	background: var(--paper);
	border-radius: var(--co-field-radius);
	display: block;
	height: 64px;
	margin: 0;
	padding: 0;
	position: relative;
	width: 64px;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__image > img {
	border-radius: inherit;
	display: block;
	height: 64px;
	max-width: none;
	object-fit: cover;
	width: 64px;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__quantity {
	background: var(--ink);
	border: 2px solid #fff;
	border-radius: 999px;
	box-sizing: border-box;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	height: 22px;
	left: auto;
	line-height: 1;
	min-height: 0;
	min-width: 22px;
	padding: 0 4px;
	right: -8px;
	top: -8px;
	transform: none;
	width: auto;
	z-index: 2;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__quantity span {
	color: #fff;
	padding: 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__description {
	gap: 3px;
	min-width: 0;
	padding: 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.35;
	margin: 0;
	max-width: none;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__individual-prices {
	color: var(--muted);
	font-size: 14px;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
	margin: 3px 0 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata p {
	margin: 0;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
#site-content .wc-block-checkout .wc-block-components-order-summary-item__total-price {
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	padding: 0;
	text-align: right;
	white-space: nowrap;
}

/* Coupon row */
#site-content .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	border-top: 1px solid var(--line);
	padding: 14px 0;
}
#site-content .wc-block-checkout .wc-block-components-panel__button {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	min-height: 0;
	padding-block: 2px;
}
#site-content .wc-block-checkout .wc-block-components-panel__button[aria-expanded=true] { margin-bottom: 12px; }
#site-content .wc-block-checkout .wc-block-components-panel__button-icon { fill: var(--muted); }
#site-content .wc-block-checkout .wc-block-components-totals-coupon__button {
	background: var(--ink);
	border: 0;
	border-radius: var(--co-field-radius);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	height: 52px;
	min-height: 0;
	transition: background 0.2s;
}
#site-content .wc-block-checkout .wc-block-components-totals-coupon__button:hover:not(:disabled) { background: var(--orange-dark); }

/* Subtotal and Total */
#site-content .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	border-top: 1px solid var(--line);
	padding: 12px 0;
}
#site-content .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-item {
	color: var(--ink);
	font-size: 15px;
	padding-block: 4px;
}
#site-content .wc-block-checkout .wc-block-components-totals-item__value { font-weight: 500; }
#site-content .wc-block-checkout .wc-block-components-totals-footer-item {
	align-items: baseline;
	border-top: 1px solid var(--line);
	color: var(--ink);
	padding-top: 16px;
}
#site-content .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-size: var(--co-heading-size);
	font-weight: 400;
	line-height: 1.25;
}
#site-content .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--orange);
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
}

/* ----- One column, at the same width WooCommerce changes its own layout -----
 * WooCommerce measures the checkout block, not the window, and below 920px it
 * splits the summary in two: a collapsed row at the top of the page and the
 * full summary just above Place Order. Using its breakpoint here means the
 * two layouts can't disagree. */
@container (max-width: 919px) {
	.wc-block-components-sidebar-layout.wc-block-checkout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
	.wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-sidebar { position: static; }
	#site-content .wc-block-checkout .wc-block-checkout__sidebar { margin: 0; }

	/* Top row: closed it's one line; open it matches the desktop card. */
	#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title {
		border-bottom: 0;
		padding: 0;
	}
	#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__title.is-open {
		border-bottom: 1px solid var(--line);
		padding-bottom: 16px;
	}
	#site-content .wc-block-checkout .wc-block-components-checkout-order-summary__content.is-open { border: 0; }
	#site-content .wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text { margin: 0; }
}

/* The full summary above Place Order, styled like the desktop card. */
#site-content .wc-block-checkout .checkout-order-summary-block-fill-wrapper { margin: 0 0 20px; }
#site-content .wc-block-checkout .checkout-order-summary-block-fill {
	border: 0;
	border-radius: 0;
}
#site-content .wc-block-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading {
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
}

/* ============================================================
 * BLOCK CART: COUPON AND TOTALS
 * ============================================================
 * :where() keeps these at their old specificity, so the cart page is
 * unchanged, while their !important flags stay out of the checkout above. */
:where(.wc-block-cart) .wc-block-components-totals-coupon {
	padding: 14px 0 !important;
	border: none !important;
	margin: 8px 0 !important;
}
:where(.wc-block-cart) .wc-block-components-totals-coupon .wc-block-components-panel__button {
	background: transparent !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
	padding: 4px 0 !important;
	font-size: 14px;
	display: flex; align-items: center; gap: 6px;
}
:where(.wc-block-cart) .wc-block-components-totals-coupon .wc-block-components-panel__button-icon { color: var(--muted); }
:where(.wc-block-cart) .wc-block-components-totals-wrapper {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
:where(.wc-block-cart) .wc-block-components-totals-item {
	padding: 8px 0 !important;
	border: none !important;
	font-size: 15px;
	color: var(--ink);
	display: flex; justify-content: space-between; align-items: center;
}
:where(.wc-block-cart) .wc-block-components-totals-item__label { color: var(--ink); }
:where(.wc-block-cart) .wc-block-components-totals-item__value { color: var(--ink); font-weight: 500; }
:where(.wc-block-cart) .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--line) !important;
	padding-top: 18px !important;
	margin-top: 14px !important;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
}
:where(.wc-block-cart) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
}
:where(.wc-block-cart) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display);
	color: var(--orange);
	font-size: 26px;
	font-weight: 500;
}

/* ============================================================
 * BLOCK CART (cart page)
 * ============================================================ */
.wc-block-cart .wc-block-cart__main {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 24px 28px;
	box-shadow: var(--shadow-sm);
}
.wc-block-cart .wc-block-cart-items__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.wc-block-cart .wc-block-cart-items__row:last-child { border-bottom: none; }

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
	.wc-block-components-sidebar-layout.wc-block-cart {
		grid-template-columns: 1fr;
	}
	.wc-block-components-sidebar-layout.wc-block-cart > .wc-block-components-sidebar {
		position: static;
	}
}
@media (max-width: 640px) {
	#site-content .wp-block-woocommerce-checkout {
		--co-card-pad: 22px 18px;
		--co-summary-pad: 22px 18px;
	}
	.wc-block-cart .wc-block-cart__main { padding: 22px 18px; }

	#site-content .wc-block-checkout .wc-block-components-address-form { grid-template-columns: minmax(0, 1fr); }
	#site-content .wc-block-checkout .wc-block-components-address-form > * { grid-column: 1 / -1; }

	/* Give the card fields the card's full width on a phone. */
	#site-content .wc-block-checkout .wc-block-components-radio-control__option { padding: 14px 16px; }
	#site-content .wc-block-checkout .wc-block-components-radio-control-accordion-content { padding: 0 16px 16px; }

	#site-content .wc-block-checkout .wc-block-checkout__actions_row {
		align-items: stretch;
		flex-direction: column-reverse;
	}
	#site-content .wc-block-checkout .wc-block-components-checkout-place-order-button { width: 100%; }
}

/* My Account */
.mls-account-page-wc .mls-account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; }
.mls-account-page-wc .mls-account-nav { padding: 14px; }
.mls-account-page-wc .mls-account-nav li { list-style: none; }
.mls-account-page-wc .mls-account-nav li a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 400; font-size: 15px; }
.mls-account-page-wc .mls-account-nav li a:hover { background: var(--paper); color: var(--orange); }
.mls-account-page-wc .mls-account-nav li.is-active a,
.mls-account-page-wc .mls-account-nav li a.is-active { background: var(--ink); color: #fff; }
.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px 36px; }
.woocommerce-MyAccount-content h2 { font-family: var(--font-display); font-size: 24px; margin-bottom: 16px; }

.mls-auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}
.mls-auth-grid .mls-auth-card { max-width: none; margin: 0; }
@media (max-width: 900px) {
	.mls-auth-grid { grid-template-columns: 1fr; gap: 24px; max-width: 540px; }
}

/* Notices */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info { background: #fff !important; border-left: 4px solid var(--orange) !important; padding: 16px 20px !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-sm); margin-bottom: 24px !important; }
.woocommerce-notices-wrapper .woocommerce-message { border-color: var(--green) !important; }
.woocommerce-notices-wrapper .woocommerce-error { border-color: #b91c1c !important; }
.woocommerce-notices-wrapper .button { float: right; }

/* Quantity */
.mls-qty input.qty,
.woocommerce .quantity .qty { width: 70px; padding: 10px 12px !important; border: 1.5px solid var(--line) !important; border-radius: var(--radius-sm) !important; text-align: center; font: inherit !important; }

/* Place order button + payment */
#payment .place-order .button { width: 100%; padding: 18px !important; font-size: 17px !important; }
#payment ul.payment_methods { background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); padding: 18px !important; margin-bottom: 20px !important; }
#payment ul.payment_methods li { padding: 8px 0 !important; }

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.mls-account-page-wc .mls-account-grid { grid-template-columns: 1fr; }
	.mls-account-page-wc .mls-account-nav { display: flex; flex-wrap: wrap; }
	.mls-auth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.container { padding: 0 24px; }
	.nav-inner { padding: 12px 24px; }
	.mls-nav { display: none; }
	.nav-cta .btn-ghost { display: none; }
	.menu-toggle { display: flex; }
	/* Mobile menu — slide-in panel from the right.
	 *
	 * `translate3d` (instead of `translateX`) + `visibility: hidden` while
	 * closed keeps the drawer fully off-screen and out of the
	 * accessibility tree even on browsers that cache the closed transform
	 * weirdly. `will-change: transform` promotes it to its own GPU layer.
	 */
	.mls-nav {
		display: flex !important; flex-direction: column;
		position: fixed; top: 0; right: 0; bottom: 0; left: auto;
		width: min(360px, 88vw); max-width: 100vw;
		background: #fff; box-shadow: -20px 0 60px -20px rgba(15,26,33,0.25);
		transform: translate3d(100%, 0, 0);
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
		z-index: 110; overflow-y: auto;
		visibility: hidden;
		will-change: transform;
	}
	.mls-nav.is-open {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
	}

	.mls-nav .mls-nav-close { display: inline-flex; }
	.mls-nav-inner { display: flex; flex-direction: column; padding: 64px 20px 32px; gap: 4px; }

	.mls-nav .nav-links, .mls-nav .menu {
		flex-direction: column; gap: 2px; padding: 0; margin: 0;
	}
	.mls-nav .menu li, .mls-nav .nav-links li { width: 100%; }

	.mls-nav .menu li > a, .mls-nav .nav-links li > a {
		padding: 14px 14px; font-size: 16px; border-radius: var(--radius-sm);
		display: flex; align-items: center; justify-content: space-between;
		gap: 8px; width: 100%;
	}
	.mls-nav a:hover { background: var(--paper); }
	.mls-nav a::after { display: none; } /* kill the underline indicator on mobile */

	/* The PHP-side caret uses ::before — hide on mobile and replace with the
	 * JS-injected button so taps don't navigate. */
	.mls-nav .menu-item-has-children > a::before,
	.mls-nav .nav-links .has-children > a::before { display: none; }

	/* Parent <li> becomes a flex row so the link sits next to the toggle
	 * button (chevron). The sub-menu wraps to its own row below them.
	 *
	 * Selectors are deliberately deep (.nav-links .menu-item-has-children > a)
	 * so they outrank the earlier `.mls-nav .menu li > a { width: 100% }` rule
	 * — without that, the link kept stretching to 100% and pushed the toggle
	 * button onto a new line.
	 */
	.mls-nav .nav-links .menu-item-has-children,
	.mls-nav .menu .menu-item-has-children,
	.mls-nav .nav-links .has-children {
		display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	}
	.mls-nav .nav-links .menu-item-has-children > a,
	.mls-nav .menu .menu-item-has-children > a,
	.mls-nav .nav-links .has-children > a {
		flex: 1 1 0; width: auto; min-width: 0; padding-right: 14px;
	}
	.mls-nav .nav-links .menu-item-has-children > .sub-menu,
	.mls-nav .menu .menu-item-has-children > .sub-menu,
	.mls-nav .nav-links .has-children > .sub-menu {
		flex-basis: 100%; width: 100%;
	}

	.mls-nav .mls-submenu-toggle { display: inline-flex; flex-shrink: 0; }

	/* Sub-menus collapsed by default on mobile, expanded when the parent <li>
	 * gets .is-open via JS. */
	.mls-nav .sub-menu {
		position: static; box-shadow: none; border: none;
		background: transparent; padding: 0 0 0 12px;
		opacity: 1; visibility: visible; transform: none;
		display: none; transition: none;
		margin: 4px 0 8px; min-width: 0;
		border-left: 2px solid var(--line); border-radius: 0;
	}
	.mls-nav .menu-item-has-children.is-open > .sub-menu,
	.mls-nav .nav-links .has-children.is-open > .sub-menu {
		display: flex; flex-direction: column; gap: 0;
	}
	.mls-nav .sub-menu a { padding: 10px 14px; font-size: 14px; color: var(--muted); }
	.mls-nav .sub-menu a:hover { color: var(--orange); background: var(--paper); }

	/* Mobile CTA section at the bottom of the slide-out. */
	.mls-nav-cta-mobile {
		display: flex; flex-direction: column; gap: 10px;
		margin-top: 20px; padding-top: 20px;
		border-top: 1px solid var(--line);
	}
	.mls-nav-cta-mobile .btn { width: 100%; justify-content: center; padding: 14px 20px; }

	.editorial-intro { padding: 80px 0 60px; }
	.hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.hero-meta { padding-bottom: 0; }
	.hero-image-row { margin-top: 56px; grid-template-columns: 1fr 1fr; gap: 16px; }
	.hero-img-1 { display: none; }
	.welcome-grid { grid-template-columns: 1fr; gap: 40px; }
	.welcome-stats { grid-template-columns: repeat(2, 1fr); }
	.classes-head-bottom { flex-direction: column; align-items: stretch; }
	.classes-head-bottom .filters { justify-content: center; }
	.classes-head-bottom .view-all { align-self: center; }
	.class-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: 1fr; gap: 20px; }
	.reviews-grid { grid-template-columns: 1fr; }
	.newsletter-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
	section { padding: 70px 0; }
	.event-card { grid-template-columns: 80px 1fr; }
	.event-media { grid-column: 1 / -1; aspect-ratio: 16/8; }
	.toolbar-right { width: auto; justify-content: flex-end; }
	.toolbar-inner { gap: 12px; }
	.search-box { flex: 1 1 240px; max-width: none; }
	.mls-toolbar-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
	.mls-toolbar-bottom .filters { justify-content: flex-start; }
	.mls-toolbar-bottom .mls-date-bar { justify-content: flex-start; }
	.event-layout { grid-template-columns: 1fr; }
	.event-sidebar { position: static; }
	.event-hero { min-height: 420px; }
	.mls-account-grid { grid-template-columns: 1fr; }
	.mls-account-side { position: static; }
	.mls-account-nav { flex-direction: row; flex-wrap: wrap; }
	.mls-lms-wrap { grid-template-columns: 1fr; }
	.mls-lms-sidebar { position: static; }
	.event-instructor { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.container { padding: 0 20px; }
	.nav-logo img, .nav-logo .custom-logo, .custom-logo-link img { height: 44px; }

	/* The header row is logo + Classes + menu button, and only the logo can give
	 * way. Modern's 60px logo outranks the 44px above, so its row needs about
	 * 380px. On narrower screens the logo now scales down instead of pushing the
	 * menu button off the screen. `gap` is only a minimum: when there's room,
	 * space-between spreads the row out exactly as before. */
	.nav-inner { gap: 12px; }
	.custom-logo-link, .nav-logo { min-width: 0; }
	.nav-logo img, .nav-logo .custom-logo, .custom-logo-link img { max-width: 100%; }

	.mls-hero { height: 70vh; min-height: 500px; }
	.mls-hero .slide-content { padding: 0 20px; }
	.mls-view-switcher a span { display: none; }
	.mls-view-switcher a { padding: 8px 10px; }
	.search-box { padding: 4px 4px 4px 14px; }
	.search-box .mls-find-events { padding: 7px 14px; font-size: 13px; }
	.toolbar-right { width: 100%; justify-content: flex-end; }
	.mls-date-bar { gap: 8px; }
	.filters { gap: 5px; }
	.filter-chip { font-size: 12px; }
	.date-nav a, .date-nav button { width: 34px; height: 34px; }
	.mls-date-picker-toggle { font-size: 18px; }
	.slider-arrows { bottom: 30px; right: 20px; }
	.slider-arrow { width: 44px; height: 44px; }
	.mls-hero .slide-actions { flex-direction: column; align-items: flex-start; }
	.editorial-intro { padding: 60px 0 50px; }
	.hero-image-row { grid-template-columns: 1fr; margin-top: 40px; }
	.hero-img-1 { display: block; aspect-ratio: 16/10; }
	.hero-img-3 { aspect-ratio: 16/10; }
	.welcome-banner { padding: 50px 0; }
	.welcome-stats { grid-template-columns: 1fr 1fr; gap: 20px; }
	.ws-num { font-size: 22px; }
	.class-grid { grid-template-columns: 1fr; }
	.newsletter-form { padding: 28px 22px; }
	.footer-top { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.step { padding: 36px 28px 90px; }
	.reviews { padding: 80px 0; }
	.page-hero { padding: 60px 0 40px; }
	.event-card { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
	.event-date { display: flex; align-items: center; gap: 14px; padding: 10px 16px; justify-content: flex-start; }
	.event-date .day { font-size: 26px; margin: 0; }
	.pagination { flex-direction: column; gap: 14px; }
	.event-hero-title { font-size: 32px; }
	.event-hero-details { flex-direction: column; gap: 16px; }
	.event-hero-actions { flex-direction: column; }
	.event-hero-actions .btn { width: fit-content; }
	.mls-auth-card { padding: 32px 24px; }
	.mls-account-class { grid-template-columns: 1fr; }
}

/* The smallest phones: tighten the header's spacing so the logo stays readable.
 * The buttons keep their height, so they're just as easy to tap. */
@media (max-width: 359px) {
	.nav-inner { padding-left: 20px; padding-right: 20px; }
	.mls-header .nav-cta { gap: 8px; }
	.mls-header .nav-cta .btn-primary { padding-left: 18px; padding-right: 18px; }
}

/* =============================================================================
 * WAITLIST
 * ========================================================================== */

/* Result of an action (joined, left, expired…) — sits above the panel. */
.mls-waitlist-notice {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	line-height: 1.5;
	background: rgba(15, 26, 33, 0.05);
	color: var(--ink);
}
.mls-waitlist-notice--success { background: rgba(34, 197, 94, 0.10); color: var(--green); }
.mls-waitlist-notice--error   { background: rgba(214, 45, 32, 0.08); color: #b3261e; }
.mls-waitlist-notice--info    { background: rgba(0, 92, 127, 0.08); color: var(--teal); }
.mls-waitlist-notice--confirm { background: #fff8f5; border: 1.5px solid #fbd4bc; }
.mls-waitlist-notice--confirm p { margin: 0 0 10px; }
.mls-waitlist-notice--confirm .btn { width: 100%; justify-content: center; }

.mls-waitlist-panel { display: flex; flex-direction: column; gap: 10px; }
.mls-waitlist-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
}
.mls-waitlist-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mls-waitlist-text--status { color: var(--ink); font-weight: 500; }
.mls-waitlist-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* A seat being held is time-sensitive — make it stand out from a plain "full". */
.mls-waitlist-panel--offer {
	padding: 18px;
	border-radius: var(--radius-sm);
	background: #fff8f5;
	border: 1.5px solid #fbd4bc;
}

.mls-waitlist-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.mls-waitlist-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.mls-waitlist-field em { color: var(--orange); font-style: normal; }
.mls-waitlist-field input,
.mls-waitlist-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	font: inherit;
	font-weight: 400;
}
.mls-waitlist-field input:focus,
.mls-waitlist-field select:focus { outline: none; border-color: var(--orange); }

.mls-waitlist-cta { width: 100%; justify-content: center; }
.mls-waitlist-cta[disabled] { opacity: 0.6; cursor: wait; }

.mls-waitlist-leave {
	align-self: center;
	font-size: 13px;
	color: var(--muted);
	text-decoration: underline;
}
.mls-waitlist-leave:hover { color: var(--orange); }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.mls-waitlist-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Listing card — "Class full" pill beside a waitlist link. */
.event-card-cta--waitlist {
	background: transparent;
	color: var(--orange);
	border: 1.5px solid var(--orange);
	box-shadow: none;
}
.event-card-cta--waitlist:hover { background: var(--orange); color: #fff; }

/* My Account — a held seat is the most urgent thing on the page. */
.mls-account-class--held { border-color: #fbd4bc; background: #fff8f5; }
.mls-waitlist-leave-form { display: inline; margin: 0; }

/* =============================================================================
 * ACCOUNT — one name, not two.
 *
 * Display name is derived from first + last name (inc/customer-names.php), so
 * it isn't something a customer should be asked to set. WordPress requires the
 * value to exist, so the field stays in the form and submits as normal — it is
 * simply never shown, and is overwritten on save.
 * ========================================================================== */
.woocommerce-EditAccountForm p:has(> #account_display_name),
.woocommerce-EditAccountForm p:has(> label[for="account_display_name"]) {
	display: none;
}