/*** ===================================
     MiMi — Course sales sections
     (timeline, cards, split, outcomes, bonuses, benefits, fit)

     Lives next to course-sections.php in
     mifam-dashboard/includes/tutor/course-sections/ and is enqueued
     by it — do NOT paste this into Additional CSS. The version
     string is this file's mtime, so saving it here is enough to
     bust WP Rocket and the browser cache.
     =================================== ***/

.mimi-section {
	--mimi-pink: #ff91a4;
	--mimi-pink-ring: #ffe6ec;
	--mimi-rail: #f2dfe4;
	--mimi-heading: #4b4342;
	--mimi-text: #6f6462;
	--mimi-border: #efe7ea;
	--mimi-card-bg: #ffffff;
	--mimi-radius: 18px;

	/* Two layers: a wide soft ambient shadow plus a tight contact
	   shadow, which reads as a lifted card rather than a smudge.
	   Tinted with the warm text colour instead of pure black —
	   #000 goes muddy and grey against the cream page background. */
	--mimi-shadow:
		0 6px 18px rgba(75, 67, 66, 0.13),
		0 2px 5px rgba(75, 67, 66, 0.07);

	/* A much lighter shadow than --mimi-shadow, for surfaces rather
	   than images. Used on both the split band and the white card
	   nested inside it: the images want to look like photos lying on
	   the page, these want to look like panels barely lifted off it. */
	--mimi-shadow-soft:
		0 3px 12px rgba(75, 67, 66, 0.08),
		0 1px 3px rgba(75, 67, 66, 0.05);

	/* Tinted band behind [mimi_split]. Kept very pale on purpose —
	   it sits directly above the white About Course area, so anything
	   stronger reads as a separate page rather than a section of it. */
	--mimi-band: linear-gradient(135deg, #fff4f7 0%, #fffaf4 55%, #fdf5f8 100%);

	/* Bonus rows cycle through four tints. All four are matched for
	   lightness on purpose — vary the hue, not the strength, or one
	   row shouts louder than its neighbours and reads as an error
	   rather than a pattern. Mint picks up the teal already used on
	   the cart buttons; peach keeps the set from going cold. */
	--mimi-band-alt:   linear-gradient(135deg, #f6f7fd 0%, #fbf8fc 55%, #f7f9fd 100%);
	--mimi-band-mint:  linear-gradient(135deg, #f1faf7 0%, #f9fdfb 55%, #f2faf6 100%);
	--mimi-band-peach: linear-gradient(135deg, #fdf6ef 0%, #fffbf6 55%, #fdf4ec 100%);

	margin: 0 0 44px;
}

.mimi-section-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 35px !important;
	line-height: 1.25 !important;
	color: var(--mimi-heading) !important;
	text-align: center;
	margin: 0 0 10px !important;
}

.mimi-section-intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mimi-text);
	text-align: center;
	max-width: 520px;
	margin: 0 auto 30px;
}


/* --- Timeline ---------------------------------------------- */
/* Zigzag: odd items put the image above the rail and the text
   below, even items flip. Handled here so the author just lists
   the stops in order. Five stops is the comfortable maximum in
   the ~740px course column; past that it scrolls sideways. */

.mimi-timeline {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(136px, 1fr);
	align-items: stretch;
	overflow: auto hidden;
	/* overflow-y is hidden (it cannot be visible while overflow-x is
	   auto — the spec promotes visible to auto and we would get a
	   stray vertical scrollbar). That means it clips, so the top and
	   bottom padding is what stops it shearing the image shadows off
	   whichever item happens to sit flush against the edge.
	   Budget: --mimi-shadow's widest layer is 0 6px 18px, so it
	   reaches 18-6=12px above an image and 6+18=24px below it. The
	   padding below has to beat 24px. Re-check both numbers if the
	   shadow ever changes. */
	padding: 14px 0 26px;
	scrollbar-width: thin;
}

.mimi-tl-item {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	/* No column-gap: the rail is drawn per item and has to meet its
	   neighbours edge to edge. Breathing room comes from the padding
	   on the media and body cells instead. */
}

.mimi-tl-media {
	grid-row: 1;
	align-self: end;
	padding: 0 10px 18px;
}

.mimi-tl-body {
	grid-row: 3;
	align-self: start;
	padding: 18px 10px 0;
}

.mimi-tl-item:nth-child(even) .mimi-tl-media {
	grid-row: 3;
	align-self: start;
	padding: 18px 10px 0;
}

.mimi-tl-item:nth-child(even) .mimi-tl-body {
	grid-row: 1;
	align-self: end;
	padding: 0 10px 18px;
}

.mimi-tl-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mimi-radius);
	box-shadow: var(--mimi-shadow);
}

/* The rail + dot row */
.mimi-tl-dot {
	grid-row: 2;
	position: relative;
	height: 18px;
}

.mimi-tl-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--mimi-rail);
	transform: translateY(-50%);
}

/* The rail starts and stops at the outer dots, not at the edges. */
.mimi-tl-item:first-child .mimi-tl-dot::before { left: 50%; }
.mimi-tl-item:last-child  .mimi-tl-dot::before { right: 50%; }

.mimi-tl-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--mimi-pink);
	box-shadow: 0 0 0 4px var(--mimi-pink-ring);
	transform: translate(-50%, -50%);
}

.mimi-tl-label {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 6px !important;
}

.mimi-tl-text {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mimi-text);
	margin: 0;
}


/* --- Timeline: stacked on narrow screens ------------------- */
/* The zigzag needs real width. Below the course column's comfortable
   size it becomes a plain vertical rail down the left. */

@media only screen and (max-width: 767px) {
	.mimi-timeline {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
	}

	.mimi-tl-item,
	.mimi-tl-item:nth-child(even) {
		grid-template-rows: auto auto auto;
		grid-template-columns: 26px 1fr;
		column-gap: 14px;
	}

	/* Stacking order on mobile is label → image → text, but the label
	   and the text are both wrapped in .mimi-tl-body while the image
	   is its sibling — so CSS alone cannot interleave them. display:
	   contents dissolves that wrapper and promotes the label and the
	   text into the item's own grid, where all three can be placed
	   independently. No markup change, and the desktop zigzag (which
	   DOES want label and text kept together below the rail) is
	   untouched. */
	.mimi-tl-item .mimi-tl-body,
	.mimi-tl-item:nth-child(even) .mimi-tl-body {
		display: contents;
	}

	.mimi-tl-item .mimi-tl-label,
	.mimi-tl-item:nth-child(even) .mimi-tl-label {
		grid-row: 1;
		grid-column: 2;
		margin: 0 0 10px !important;
	}

	.mimi-tl-item .mimi-tl-media,
	.mimi-tl-item:nth-child(even) .mimi-tl-media {
		grid-row: 2;
		grid-column: 2;
		align-self: auto;
		padding: 0;
	}

	.mimi-tl-item .mimi-tl-text,
	.mimi-tl-item:nth-child(even) .mimi-tl-text {
		grid-row: 3;
		grid-column: 2;
		padding: 12px 0 30px;
	}

	.mimi-tl-media img {
		aspect-ratio: 1 / 1;
	}

	.mimi-tl-dot {
		grid-row: 1 / span 3;
		grid-column: 1;
		height: auto;
	}

	/* Rail turns vertical. */
	.mimi-tl-dot::before,
	.mimi-tl-item:first-child .mimi-tl-dot::before,
	.mimi-tl-item:last-child .mimi-tl-dot::before {
		top: 0;
		bottom: 0;
		left: 50%;
		right: auto;
		width: 2px;
		height: auto;
		transform: translateX(-50%);
	}

	/* 11px lines the dot up with the middle of the label's first
	   line (17px text at 1.3 line-height), not the top of the cell.
	   Only the FIRST item's rail is trimmed. The last item's rail
	   deliberately runs the full height of the item: unlike the
	   horizontal desktop rail — which has nothing past the final dot
	   and so stops there — the last stop on mobile still has its
	   image and text hanging below the dot, and a rail ending at the
	   dot leaves them stranded beside blank space. */
	.mimi-tl-item:first-child .mimi-tl-dot::before { top: 11px; }

	/* Drop the inter-item gap on the last stop so the rail ends level
	   with the bottom of its text instead of dangling past it. */
	.mimi-tl-item:last-child .mimi-tl-text {
		padding-bottom: 0;
	}

	.mimi-tl-dot::after {
		top: 11px;
		left: 50%;
	}
}


/* --- Feature cards ----------------------------------------- */

.mimi-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.mimi-card {
	display: flex;
	flex-direction: column;
	background: var(--mimi-card-bg);
	border: 1px solid var(--mimi-border);
	border-radius: var(--mimi-radius);
	overflow: hidden;
}

.mimi-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.mimi-card-body {
	padding: 18px 22px 22px;
}

.mimi-card-num {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mimi-pink);
	margin-bottom: 6px;
}

.mimi-card-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 8px !important;
}

.mimi-card-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mimi-text);
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.mimi-cards {
		grid-template-columns: 1fr;
	}
}
.tutor-course-details-content h2 {
	color: #4d4544;
    font-size: 26px;
}

/* --- Split: image beside a text card ----------------------- */
/* A tinted band with the image on one side and a white card on the
   other. In the ~740px course column each side only gets ~350px, so
   the text card is given the larger share — prose needs the width
   more than a cropped image does. */

.mimi-split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 20px;
	align-items: center;
	padding: 26px;
	border-radius: 24px;
	background: var(--mimi-band);
	box-shadow: var(--mimi-shadow-soft);
}

.mimi-split--flip .mimi-split-media { order: 2; }
.mimi-split--flip .mimi-split-body  { order: 1; }

.mimi-split-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: var(--mimi-shadow);
}

.mimi-split-body {
	background: var(--mimi-card-bg);
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: var(--mimi-shadow-soft);
}

/* With no image= the card is the only child, so let it span. */
.mimi-split-body:only-child {
	grid-column: 1 / -1;
}

.mimi-split-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 22px !important;
	line-height: 1.25 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 12px !important;
}

.mimi-split-body p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--mimi-text);
	margin: 0 0 12px;
}

.mimi-split-body p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.mimi-split {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px;
		border-radius: 20px;
	}

	/* Stacked, the image always leads regardless of flip — the
	   alternating sides only mean anything side by side. */
	.mimi-split--flip .mimi-split-media,
	.mimi-split--flip .mimi-split-body {
		order: 0;
	}

	.mimi-split-media img {
		aspect-ratio: 16 / 10;
	}

	.mimi-split-body {
		padding: 18px 18px 20px;
	}
}


/* --- Outcomes: ticked "what you'll be able to do" list ----- */
/* White card on a white page, so unlike the reference (which floats
   on a tint) this one needs a border as well as the soft shadow —
   shadow alone leaves the edges invisible. */

.mimi-outcomes {
	background: var(--mimi-card-bg);
	border: 1px solid var(--mimi-border);
	border-radius: 24px;
	box-shadow: var(--mimi-shadow-soft);
	padding: 30px 32px 34px;
}

.mimi-outcomes-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 8px !important;
}

.mimi-outcomes-intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mimi-text);
	margin: 0 0 24px;
}

/* Reset hard: the theme styles bare <ul>/<li> elsewhere on this page
   (the Audience widget in the sidebar is a bulleted list), and a
   stray disc marker next to our own tick would look like a bug. */
.mimi-outcomes-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px;
}

.mimi-outcomes-list > li.mimi-outcome {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 22px 1fr;
	column-gap: 12px;
	align-items: start;
}

.mimi-outcomes-list > li.mimi-outcome::before,
.mimi-outcomes-list > li.mimi-outcome::marker {
	content: none;
}

/* The tick is drawn, not typed: a rotated box with two borders. No
   icon font to load and no ✓ glyph that could be missing from
   whichever font the theme happens to serve. */
.mimi-outcome-check {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mimi-pink);
	/* Nudge down so the circle centres on the first line of text
	   rather than sitting on its cap height. */
	margin-top: 2px;
}

.mimi-outcome-check::after {
	content: '';
	position: absolute;
	top: 45%;
	left: 50%;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

.mimi-outcome-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mimi-text);
}

.mimi-outcome-label {
	color: var(--mimi-heading);
	font-weight: 700;
}

@media only screen and (max-width: 767px) {
	.mimi-outcomes {
		padding: 22px 20px 24px;
		border-radius: 20px;
	}

	.mimi-outcomes-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/* --- Bonuses: alternating numbered rows -------------------- */
/* Tightened against the reference this copies, which leaves a lot of
   dead vertical space. Three things do the compacting: the band
   padding is ~20px instead of ~60px, the rows sit 14px apart instead
   of a full section gap, and the text column is centred against the
   image so the band is only ever as tall as its taller side. */

.mimi-bonuses-list {
	display: grid;
	gap: 14px;
}

.mimi-bonus {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: 20px;
	align-items: center;
	padding: 20px 24px;
	border-radius: 20px;
}

/* Tint cycles every FOUR rows while the side flips every TWO. The
   two rhythms deliberately run at different lengths: if they matched,
   every left-image row would be the same colour and the list would
   look like two repeating blocks instead of a varied run. */
.mimi-bonus:nth-child(4n + 1) { background: var(--mimi-band); }
.mimi-bonus:nth-child(4n + 2) { background: var(--mimi-band-alt); }
.mimi-bonus:nth-child(4n + 3) { background: var(--mimi-band-mint); }
.mimi-bonus:nth-child(4n + 4) { background: var(--mimi-band-peach); }

/* tint="mint" etc. overrides the cycle. Same specificity as the
   nth-child rules above (0,2,0), so these only win by coming later —
   keep them below. */
.mimi-bonus.mimi-bonus--pink  { background: var(--mimi-band); }
.mimi-bonus.mimi-bonus--blue  { background: var(--mimi-band-alt); }
.mimi-bonus.mimi-bonus--mint  { background: var(--mimi-band-mint); }
.mimi-bonus.mimi-bonus--peach { background: var(--mimi-band-peach); }

/* order: swaps which TRACK each element lands in, not just where it
   is painted — so on flipped rows the image was dropping into the
   wide 1fr track and the text into the narrow 0.8fr one. That made
   even rows' images render 332px against 279px on odd rows. Mirror
   the track sizes here so the text always gets 1fr and the image
   always 0.8fr, whichever side each ends up on. */
.mimi-bonus:nth-child(even) {
	grid-template-columns: 0.8fr 1fr;
}

.mimi-bonus:nth-child(even) .mimi-bonus-body  { order: 2; }
.mimi-bonus:nth-child(even) .mimi-bonus-media { order: 1; }

.mimi-bonus-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mimi-pink);
	margin-bottom: 5px;
}

.mimi-bonus-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 6px !important;
}

.mimi-bonus-text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mimi-text);
	margin: 0;
}

/* Uncropped by default: these are product shots — brush sheets,
   device mockups, course banners — and slicing their edges off looks
   broken.

   ⚠ The element is sized by max-width/max-height with width and
   height left auto, so the box IS the picture. This is what makes
   border-radius work. The previous version forced width:100% with a
   16/10 aspect-ratio and used object-fit:contain — but the images
   are 1920x1097 (1.75), the box came out 1.83, and contain then
   letterboxed the picture to 332px inside a 347px box. The radius
   rounded the 7px transparent gutter and the artwork kept square
   corners. Any rule that pins this box to a ratio the image does not
   share brings the square corners straight back. */
.mimi-bonus-media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mimi-bonus-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* The image, not the text, is what sets each row's height — the
	   copy only runs ~90px. 190px holds rows to ~230px instead of the
	   300px they reached when the images ran at full height. */
	max-height: 190px;
	/* Same token as the timeline images and the feature cards, so
	   every rounded thing on the page agrees. */
	border-radius: var(--mimi-radius);
}

/* cover fills its box completely, so here a forced ratio is safe —
   the radius lands on artwork rather than on empty space. */
.mimi-bonus-media--cover img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	box-shadow: var(--mimi-shadow);
}

@media only screen and (max-width: 767px) {
	/* The :nth-child(even) selector has to be repeated here. The
	   desktop rule that mirrors the track sizes is (0,2,0) and this
	   one would be (0,1,0) — and a media query adds no specificity of
	   its own, so a bare .mimi-bonus loses to it and the even rows
	   stay two-up at every width while the odd rows stack. Same trap
	   as the timeline's mobile block. */
	.mimi-bonus,
	.mimi-bonus:nth-child(even) {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 18px 18px 20px;
	}

	/* Text leads on mobile — the eyebrow and title are the hook here,
	   unlike [mimi_split] where the image is the whole point. Both
	   orders are reset so the alternating rows agree once stacked. */
	.mimi-bonus .mimi-bonus-body,
	.mimi-bonus:nth-child(even) .mimi-bonus-body {
		order: 1;
	}

	.mimi-bonus .mimi-bonus-media,
	.mimi-bonus:nth-child(even) .mimi-bonus-media {
		order: 2;
	}
}


/* --- Benefits: icon grid ----------------------------------- */
/* Plain on the page rather than boxed like [mimi_outcomes]. Both are
   two column lists of short items; giving them the same white panel
   would make a page that uses both look like it stuttered. */

.mimi-benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 30px;
}

/* The badge holds either an emoji or a small icon file, so it is a
   fixed box with its content centred rather than something sized by
   what is inside it — a mixed list still lines up. */
.mimi-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--mimi-pink-ring);
	font-size: 22px;
	/* Emoji carry their own generous leading; without this the glyph
	   sits low in the badge instead of centred. */
	line-height: 1;
	margin-bottom: 11px;
}

.mimi-benefit-icon img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Font Awesome glyph. The badge sets font-size for emoji, which would
   otherwise leak onto the icon font too, so size it explicitly here. */
.mimi-benefit-icon i {
	font-size: 20px;
	line-height: 1;
	color: var(--mimi-pink);
}

.mimi-benefit-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	color: var(--mimi-heading) !important;
	margin: 0 0 6px !important;
}

.mimi-benefit-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mimi-text);
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.mimi-benefits {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}


/**
 * ============================================================
 * Sticky course sidebar (single course page only)
 * ============================================================
 * 1. Bellaria wraps every page in <div id="document"> with
 *    overflow:hidden on both axes, which makes it a scroll
 *    container — and a scroll container silently kills
 *    position:sticky for everything inside it. overflow-x:clip
 *    still blocks horizontal scroll but does NOT create a scroll
 *    container. Scoped to the course page so the rest of the site
 *    keeps Bellaria's original behaviour.
 *
 *    NOTE: this also revives Tutor's OWN sticky tab bar
 *    (.tutor-is-sticky in single-course.php), which was dead for
 *    the same reason. That is why the Course Info / Reviews / Q&A
 *    nav now pins itself. sticky-sidebar.js scrolls the section
 *    back into view on tab clicks so it behaves.
 *
 * 2. The sidebar is taller than the viewport, so a plain top pin
 *    would put its bottom permanently out of reach. Instead
 *    sticky-sidebar.js measures it and writes --lm-sticky-top:
 *      - fits on screen  -> a positive offset, pins under the header
 *      - taller than the screen -> a NEGATIVE offset, so the sidebar
 *        rides up with the page until its bottom edge is in view,
 *        then pins there. Everything readable, no inner scrollbar.
 *
 * There is deliberately NO max-height and NO overflow here. If you
 * see a scrollbar inside the sidebar, an older version of this block
 * is still live somewhere and is winning — find and delete it.
 *
 * The .lm-sticky-sidebar gate is added by that script, so if the JS
 * fails to load the sidebar stays plain and nothing is ever clipped.
 */
body.single-courses #document {
	overflow-x: clip;
	overflow-y: visible;
}

@media only screen and (min-width: 1200px) {

	body.single-courses.lm-sticky-sidebar .tutor-course-details-page .tutor-row > aside.tutor-col-xl-4 {
		/* Tutor's row is flex, so the aside stretches to full row
		   height by default. A sticky box cannot travel inside a
		   parent it exactly fills — this is what frees it. */
		align-self: flex-start;
		position: sticky;
		top: var(--lm-sticky-top, 110px);
	}
}
/**
 * ============================================================
 * Sticky course sidebar (single course page only)
 * ============================================================
 * 1. Bellaria wraps every page in <div id="document"> with
 *    overflow:hidden on both axes, which makes it a scroll
 *    container — and a scroll container silently kills
 *    position:sticky for everything inside it. overflow-x:clip
 *    still blocks horizontal scroll but does NOT create a scroll
 *    container. Scoped to the course page so the rest of the site
 *    keeps Bellaria's original behaviour.
 *
 *    NOTE: this also revives Tutor's OWN sticky tab bar
 *    (.tutor-is-sticky in single-course.php), which was dead for
 *    the same reason. That is why the Course Info / Reviews / Q&A
 *    nav now pins itself. sticky-sidebar.js scrolls the section
 *    back into view on tab clicks so it behaves.
 *
 * 2. The sidebar is taller than the viewport, so a plain top pin
 *    would put its bottom permanently out of reach. Instead
 *    sticky-sidebar.js measures it and writes --lm-sticky-top:
 *      - fits on screen  -> a positive offset, pins under the header
 *      - taller than the screen -> a NEGATIVE offset, so the sidebar
 *        rides up with the page until its bottom edge is in view,
 *        then pins there. Everything readable, no inner scrollbar.
 *
 * There is deliberately NO max-height and NO overflow here. If you
 * see a scrollbar inside the sidebar, an older version of this block
 * is still live somewhere and is winning — find and delete it.
 *
 * The .lm-sticky-sidebar gate is added by that script, so if the JS
 * fails to load the sidebar stays plain and nothing is ever clipped.
 */
body.single-courses #document {
	overflow-x: clip;
	overflow-y: visible;
}

@media only screen and (min-width: 1200px) {

	body.single-courses.lm-sticky-sidebar .tutor-course-details-page .tutor-row > aside.tutor-col-xl-4 {
		/* Tutor's row is flex, so the aside stretches to full row
		   height by default. A sticky box cannot travel inside a
		   parent it exactly fills — this is what frees it. */
		align-self: flex-start;
		position: sticky;
		top: var(--lm-sticky-top, 110px);
	}
}


/* --- Fit: "is this course right for you?" ------------------- */
/* Two accent colours, both already yours: the mint from the cart
   buttons for the "for" column, the brand pink for "not for". No new
   red — "not for you" is a mismatch, not an error, and a warning
   colour would read as heavier than it deserves.
   Both are darkened from their button values: #5fcac7 and #ff91a4
   are tuned for large fills, and neither holds up as small text on
   white. */

.mimi-fit-section {
	--mimi-fit-for: #2fa39f;
	--mimi-fit-not: #f2708a;

	/* Same tinted band, radius and soft shadow as [mimi_split], so the
	   two full-width panels on the page read as one family rather than
	   two unrelated treatments.
	   It also earns its keep: the white columns inside carry only a
	   hairline border, which barely registers on a white page. On tint
	   they get their edge for free. */
	background: var(--mimi-band);
	border-radius: var(--mimi-radius);
	box-shadow: var(--mimi-shadow-soft);
	padding: 40px;
}

.mimi-fit-eyebrow {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mimi-pink);
	margin-bottom: 8px;
}

.mimi-fit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.mimi-fit-col {
	position: relative;
	background: var(--mimi-card-bg);
	border: 1px solid var(--mimi-border);
	border-radius: 20px;
	box-shadow: var(--mimi-shadow-soft);
	padding: 22px 24px 6px;
	/* clips the accent bar to the top corners */
	overflow: hidden;
}

/* Accent bar across the top, the one thing that tells the two
   columns apart at a glance before any text is read.

   Painted as the card's own background rather than a positioned
   ::before — see the long note on .mimi-perk in Additional CSS. Short
   version: Tutor switches the course tabs with display:none/block,
   and an absolutely-positioned bar relying on the parent's
   overflow:hidden repaints with square ends over the rounded corners
   when you come back. A background layer is clipped by the element's
   own border-radius and cannot come apart.

   No padding-top needed here: the card already has 22px of it, so the
   stripe sits in space that was empty anyway. */
.mimi-fit-col--for {
	background:
		linear-gradient(var(--mimi-fit-for), var(--mimi-fit-for))
			top left / 100% 3px no-repeat,
		var(--mimi-card-bg);
}

.mimi-fit-col--not {
	background:
		linear-gradient(var(--mimi-fit-not), var(--mimi-fit-not))
			top left / 100% 3px no-repeat,
		var(--mimi-card-bg);
}

.mimi-fit-title {
	font-family: 'Fredoka One', cursive !important;
	font-weight: 100 !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
}

.mimi-fit-col--for .mimi-fit-title { color: var(--mimi-fit-for) !important; }
.mimi-fit-col--not .mimi-fit-title { color: var(--mimi-fit-not) !important; }

/* Reset hard — the theme styles bare <ul>/<li> on this page, and a
   disc marker beside our own tick would look like a bug. */
.mimi-fit-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mimi-fit-list > li.mimi-fit-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 14px 0 !important;
	display: grid;
	grid-template-columns: 18px 1fr;
	column-gap: 11px;
	align-items: start;
}

.mimi-fit-list > li.mimi-fit-item::before,
.mimi-fit-list > li.mimi-fit-item::marker {
	content: none;
}

/* Hairline between rows, matching the reference's divided list. */
.mimi-fit-item + .mimi-fit-item {
	border-top: 1px solid var(--mimi-border);
}

.mimi-fit-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mimi-text);
}

.mimi-fit-text strong {
	color: var(--mimi-heading);
	font-weight: 700;
}

/* Marks are drawn, not typed: no icon font to go missing, and the
   tick and cross stay optically matched because both are built from
   the same 2px stroke. */
.mimi-fit-mark {
	position: relative;
	width: 18px;
	height: 18px;
	/* nudge onto the first line of text rather than its cap height */
	margin-top: 2px;
}

.mimi-fit-col--for .mimi-fit-mark::after {
	content: '';
	position: absolute;
	top: 45%;
	left: 50%;
	width: 5px;
	height: 10px;
	border: solid var(--mimi-fit-for);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

.mimi-fit-col--not .mimi-fit-mark::before,
.mimi-fit-col--not .mimi-fit-mark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: var(--mimi-fit-not);
}

.mimi-fit-col--not .mimi-fit-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.mimi-fit-col--not .mimi-fit-mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media only screen and (max-width: 767px) {
	/* 40px of band padding plus 20px of card padding eats most of a
	   phone's width, so the band gives most of it back here. */
	.mimi-fit-section {
		padding: 24px 16px 26px;
		border-radius: 16px;
	}

	.mimi-fit {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mimi-fit-col {
		padding: 18px 20px 4px;
	}
}


/* --- Card excerpt ------------------------------------------ */
/* Prints into Tutor's own tutor_course/loop/excerpt slot on course
   cards. Clamped to three lines so a long blurb cannot make one card
   taller than its neighbours and break the grid — the clamp is the
   whole reason this needs styling at all. Without the CSS it still
   renders, just unclamped. */

.mimi-card-excerpt {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #6f6462;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* --- Card badge: free preview count ------------------------ */
/* Sits over the top-left of a course card, mirroring Tutor's own
   wishlist bookmark at top:12px right:12px.
   z-index matters: the badge is printed by tutor_course/loop/badge,
   which fires BEFORE the thumbnail markup, so without it the
   thumbnail paints over the badge. The card is already
   position:relative with overflow:hidden, so it clips to the radius
   and needs no extra containing block. */
.mimi-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	/* Its own value, not --mimi-pink: the badge renders on a course
	   card, outside any .mimi-section, so the token is not in scope
	   here and would only ever resolve to its fallback. */
	background: #ff4d6c;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(75, 67, 66, 0.18);
}