/*
 * Frencheezy skin for Tutor LMS and the Sora LMS Pro Pack.
 * Maps the active look's tokens (theme.json presets) onto Tutor's CSS variables,
 * then refines the screens Tutor renders: catalog cards, course page, learning
 * area, dashboard, cart, checkout, login, certificates and the Pro Pack (sora-*).
 * Loaded after Tutor's own sheets and inline palette, so equal-specificity :root wins.
 */

/* ------------------------------------------------------------ tokens */

:root,
body,
[data-tutor-ui="kids"] {
	--tutor-font-family-body: var(--wp--preset--font-family--body);
	--tutor-font-family-heading: var(--wp--preset--font-family--heading);

	/* Majorelle brand scale */
	--tutor-brand-50: #F5F5FD;
	--tutor-brand-100: #EEEEFC;
	--tutor-brand-200: #E3E3FA;
	--tutor-brand-300: #D3D3F6;
	--tutor-brand-400: #A9A8EC;
	--tutor-brand-450: #9796F0;
	--tutor-brand-500: #6E6DDB;
	--tutor-brand-600: #4B4ACF;
	--tutor-brand-700: #3634A8;
	--tutor-brand-800: #2C2A8A;
	--tutor-brand-900: #24236E;
	--tutor-brand-950: #17164A;

	--tutor-color-primary: #4B4ACF;
	--tutor-color-primary-rgb: 75, 74, 207;
	--tutor-color-primary-hover: #3634A8;
	--tutor-color-primary-hover-rgb: 54, 52, 168;
	--tutor-body-color: var(--wp--preset--color--ink);
	--tutor-border-color: var(--wp--preset--color--line);
	--tutor-color-success: #178357;
	--tutor-color-success-rgb: 23, 131, 87;
	--tutor-color-warning: #B97F00;
	--tutor-color-danger: #C8372A;

	--tutor-surface-base: var(--wp--preset--color--base);
	--tutor-surface-l1: var(--wp--preset--color--surface);
	--tutor-surface-l1-hover: var(--wp--preset--color--soft);
	--tutor-surface-l2: var(--wp--preset--color--soft);
	--tutor-surface-brand-tertiary: #EEEEFC;
	--tutor-text-primary: var(--wp--preset--color--ink);
	--tutor-text-secondary: color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--muted));
	--tutor-text-subdued: var(--wp--preset--color--muted);
	--tutor-text-brand: #4B4ACF;
	--tutor-border-idle: var(--wp--preset--color--line);
	--tutor-border-idle2: var(--wp--preset--color--line);
	--tutor-icon-brand: #4B4ACF;
	--tutor-actions-brand-primary: #4B4ACF;
	--tutor-actions-success-primary: #178357;
	--tutor-icon-success-primary: #178357;
	--tutor-text-success: #178357;

	--tutor-button-radius: var(--wp--custom--radius--pill, 999px);
	--tutor-input-radius: var(--wp--custom--radius--sm, 10px);
	--tutor-tab-radius: var(--wp--custom--radius--sm, 10px);
	--tutor-modal-radius: var(--wp--custom--radius--lg, 28px);
	--tutor-popover-radius: var(--wp--custom--radius--md, 18px);
	--fzt-card-radius: var(--wp--custom--radius--lg, 28px);
}

/* Exams: crisp corners, navy ink, tabular numbers */
body.fz-look-exams {
	--tutor-button-radius: 10px;
	--tutor-input-radius: 8px;
	--fzt-card-radius: 14px;
	--tutor-color-warning: #9A6A00;
	font-variant-numeric: tabular-nums;
}

/* Kids: softer, rounder, friendlier (harmonises with Tutor's Kids mode) */
body.fz-look-kids,
body.fz-look-kids[data-tutor-ui="kids"] {
	--tutor-font-family-body: var(--wp--preset--font-family--body);
	--tutor-font-family-heading: var(--wp--preset--font-family--heading);
	--tutor-button-radius: 999px;
	--tutor-input-radius: 16px;
	--tutor-tab-radius: 16px;
	--fzt-card-radius: 26px;
}

/* ---------------------------------------------------- shared basics */

.tutor-lms :where(.tutor-btn) { font-family: var(--wp--preset--font-family--body); font-weight: 600; }
.fz-look-kids :where(.tutor-btn) { font-family: var(--wp--preset--font-family--heading); }
.tutor-lms :where(.tutor-btn-primary) { background-color: #4B4ACF; border-color: #4B4ACF; color: #fff; }
.tutor-lms :where(.tutor-btn-primary):hover { background-color: #3634A8; border-color: #3634A8; color: #fff; }
.tutor-lms :where(.tutor-btn, a, button, input, select, textarea, [role="tab"]):focus-visible { outline: 3px solid #4B4ACF; outline-offset: 2px; }
.tutor-lms :where(h1, h2, h3, h4, .tutor-fs-4, .tutor-fs-5, .tutor-h4, .tutor-h5) { font-family: var(--wp--preset--font-family--heading); }
.tutor-lms :where(.tutor-card) { border-radius: var(--fzt-card-radius); border-color: var(--wp--preset--color--line); }
.tutor-lms :where(.tutor-form-control, .tutor-form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea) {
	border-radius: var(--tutor-input-radius);
	border-color: var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--body);
}
.tutor-lms :where(.tutor-progress-bar) { border-radius: 999px; background: var(--wp--preset--color--soft); }
.tutor-lms :where(.tutor-progress-value) { border-radius: 999px; background: linear-gradient(90deg, #3CCB9C, #1F9D6B); }

/* Theme link styles must not leak into Tutor UI chrome */
.tutor-lms :where(.tutor-wrap, .tutor-dashboard-layout, .tutor-learning-page) a:where(:not(.tutor-btn)) { text-decoration: none; }

/* ------------------------------------------------- single course page */

.fz-tutor-course .tutor-wrap { padding-top: 0; }
.tutor-course-details-page { position: relative; padding-bottom: clamp(3rem, calc(6vw / var(--fz-z, 1)), 5rem); }
.tutor-course-details-header {
	position: relative;
	isolation: isolate;
	padding: clamp(2.5rem, calc(6vw / var(--fz-z, 1)), 4.5rem) 0 clamp(2rem, calc(4vw / var(--fz-z, 1)), 3rem);
	margin-bottom: clamp(2rem, calc(4vw / var(--fz-z, 1)), 3rem) !important;
}
.tutor-course-details-header::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: calc(100vw / var(--fz-z, 1)); transform: translateX(-50%);
	background: var(--wp--preset--color--soft);
}
.fz-look-exams .tutor-course-details-header::before { background: #14213D; }
.fz-look-exams .tutor-course-details-header :where(.tutor-course-details-title, .tutor-course-details-info, .tutor-course-details-info a, .tutor-course-details-actions a, .tutor-course-details-actions button, .tutor-ratings) { color: #fff !important; }
.tutor-course-details-header::after {
	content: ""; position: absolute; z-index: -1; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
	background: var(--wp--preset--color--accent); opacity: .5;
}
.fz-look-exams .tutor-course-details-header::after { border-radius: 30px; transform: rotate(18deg); background: #4B4ACF; opacity: .45; }
.fz-look-main .tutor-course-details-header::after { border-radius: 40px; transform: rotate(14deg); background: var(--wp--preset--color--primary); opacity: .07; }
.tutor-course-details-title.tutor-fs-4 {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--huge) !important;
	line-height: 1.05 !important;
	letter-spacing: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--ink) !important;
	margin-top: .5rem !important;
}
.tutor-course-details-info, .tutor-course-details-info a { color: var(--wp--preset--color--muted); }
.tutor-course-details-info a { font-weight: 700; color: var(--wp--preset--color--ink); }
.tutor-course-details-actions a, .tutor-course-details-actions button { color: var(--wp--preset--color--ink); font-weight: 600; }
.tutor-course-thumbnail img, .tutor-course-thumbnail .tutor-ratio, .tutor-course-thumbnail iframe { border-radius: var(--fzt-card-radius); }
.tutor-course-thumbnail { border-radius: var(--fzt-card-radius); overflow: hidden; box-shadow: var(--wp--preset--shadow--lift); }
.fz-look-kids .tutor-course-thumbnail { border: 4px solid #23214A; box-shadow: 0 8px 0 #23214A; }

.tutor-course-details-tab .tutor-is-sticky { background: var(--wp--preset--color--base); }
.tutor-course-details-tab .tutor-nav { border-bottom: 1px solid var(--wp--preset--color--line); gap: .25rem; }
.tutor-course-details-tab .tutor-nav-link { font-weight: 700; color: var(--wp--preset--color--muted); border-radius: 10px 10px 0 0; }
.tutor-course-details-tab .tutor-nav-link.is-active { color: var(--wp--preset--color--ink); border-bottom-color: #4B4ACF; border-bottom-width: 3px; }
.tutor-course-details-tab :where(h2, h3, .tutor-fs-5) { font-family: var(--wp--preset--font-family--heading) !important; font-size: var(--wp--preset--font-size--x-large) !important; color: var(--wp--preset--color--ink) !important; }
.tutor-course-details-content, .tutor-course-details-content p { font-size: 1.0625rem; line-height: 1.7; color: var(--wp--preset--color--ink); }
.tutor-course-details-tab ul li::marker { color: #1F9D6B; }

/* Curriculum accordion */
.tutor-course-details-tab .tutor-accordion-item { border-radius: var(--wp--custom--radius--md, 18px); border: 1px solid var(--wp--preset--color--line); overflow: hidden; background: var(--wp--preset--color--surface); margin-bottom: .75rem; }
.tutor-course-details-tab .tutor-accordion-item-header { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.15rem; color: var(--wp--preset--color--ink); padding: 1.1rem 1.25rem; background: var(--wp--preset--color--surface); }
.tutor-course-details-tab .tutor-accordion-item-header.is-active { background: #EEEEFC; color: var(--wp--preset--color--ink); }
.tutor-course-details-tab .tutor-accordion-item-body :where(.tutor-course-content-list-item-title, .tutor-course-content-list-item-title a) { font-family: var(--wp--preset--font-family--body) !important; font-size: .95rem !important; text-decoration: none !important; color: var(--wp--preset--color--ink) !important; }
.tutor-course-details-tab .tutor-accordion-item-body .tutor-course-content-list-item-title a:hover { color: #4B4ACF !important; text-decoration: underline !important; }

/* Sidebar enroll card */
.tutor-single-course-sidebar .tutor-sidebar-card { border-radius: var(--fzt-card-radius); border: 1px solid var(--wp--preset--color--line); box-shadow: var(--wp--preset--shadow--lift); overflow: hidden; background: var(--wp--preset--color--surface); }
.fz-look-kids .tutor-single-course-sidebar .tutor-sidebar-card { border: 3px solid #23214A; box-shadow: 0 8px 0 #23214A; }
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body { padding: 1.75rem; }
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-footer { background: var(--wp--preset--color--base); border-top: 1px solid var(--wp--preset--color--line); padding: 1.25rem 1.75rem; }
.tutor-single-course-sidebar :where(.tutor-course-sidebar-card-pricing, .tutor-course-price, .tutor-fs-4) { font-family: var(--wp--preset--font-family--heading); }
.tutor-single-course-sidebar .tutor-btn { min-height: 48px; font-size: 1rem; }
.tutor-single-course-sidebar .tutor-btn-primary { box-shadow: 0 10px 24px -12px rgba(75, 74, 207, .7); }
.fz-look-kids .tutor-single-course-sidebar .tutor-btn-primary { box-shadow: 0 5px 0 #3634A8; }
.tutor-single-course-sidebar .tutor-btn-outline-primary { border-width: 2px; color: #4B4ACF; border-color: #4B4ACF; }
.tutor-single-course-sidebar-more > * { border-radius: var(--fzt-card-radius); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); padding: 1.5rem !important; margin-bottom: 1rem; }
.tutor-single-course-sidebar-more :where(h3, .tutor-course-details-widget-title) { font-family: var(--wp--preset--font-family--heading) !important; font-size: 1.1rem !important; color: var(--wp--preset--color--ink) !important; }
.tutor-course-details-widget-tags .tutor-tag-list li a { border-radius: 999px; background: var(--wp--preset--color--soft); border: 0; font-weight: 600; }
.tutor-ratings-stars [class*="star"] { color: #E0A526; }

/* ------------------------------------------------------ learning area */

.tutor-learning-page { background: var(--wp--preset--color--base); }
.tutor-learning-header { background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--line); }
.fz-look-exams .tutor-learning-header { background: #14213D; border-bottom-color: #14213D; }
/* Assignments render the learning area inside the site shell, where Tutor gives the inner bar a white card: keep it navy so the white title and icons stay visible. */
.fz-look-exams .tutor-learning-header .tutor-learning-header-inner { background: transparent; }
.fz-look-exams .tutor-learning-header :where(.tutor-learning-header-title, .tutor-learning-header-back a, .sora-bell__btn) { color: #fff; }
.fz-look-exams .tutor-learning-header .tutor-btn-secondary { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.tutor-learning-header-title { font-family: var(--wp--preset--font-family--heading) !important; font-size: 1.15rem !important; letter-spacing: 0; }
/* The Sora bell sits in the header row too; let the title block shrink so the mobile curriculum toggle stays on screen. */
.tutor-learning-header-inner > .tutor-learning-header-content { flex: 1 1 auto; min-width: 0; }
.tutor-learning-header-content > .tutor-learning-header-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutor-learning-header-inner > :is(.sora-bell, .tutor-learning-header-toggle-mobile) { flex: none; }
.tutor-learning-sidebar-curriculum { border: 1px solid var(--wp--preset--color--line); border-radius: var(--fzt-card-radius) !important; }
.tutor-learning-progress-text { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.tutor-learning-nav-header { font-weight: 700; }
.tutor-learning-area-container .tutor-lesson-content { border-radius: var(--fzt-card-radius); }
.tutor-learning-area-content :where(.tutor-tabs-content) { font-size: 1.0625rem; line-height: 1.75; }
.tutor-learning-area-content :where(.tutor-tabs-content) :where(h2, h3) { font-family: var(--wp--preset--font-family--heading); letter-spacing: 0; }
.tutor-learning-area-content :where(.tutor-tabs-content) table { border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wp--preset--color--line); }
.tutor-learning-area-content :where(.tutor-tabs-content) :where(th, td) { padding: .6rem .9rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.tutor-learning-area-content :where(.tutor-tabs-content) th { background: var(--wp--preset--color--soft); text-align: left; }
.tutor-learning-area-footer .tutor-btn-ghost { font-weight: 700; }

/* Kids mode learning area: Fredoka headings, chunky outlines */
.fz-look-kids .tutor-learning-header-title { font-size: 1.3rem !important; }
.fz-look-kids .tutor-learning-sidebar-curriculum { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; }
.fz-look-kids .tutor-learning-area-container .tutor-lesson-content { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; background: #fff; }

/* ---------------------------------------------------------- dashboard */

.tutor-dashboard-layout { background: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--body); }
.tutor-dashboard-sidebar { background: var(--wp--preset--color--surface); border-right: 1px solid var(--wp--preset--color--line); }
.fz-look-exams .tutor-dashboard-sidebar { box-shadow: inset 4px 0 0 #14213D; }
.tutor-dashboard-sidebar-logo .tutor-brand-logo {
	display: block; width: 160px; height: 38px; font-size: 0 !important; color: transparent !important;
	background: url(../logo/frencheezy-light.svg) left center / contain no-repeat;
}
.fz-look-kids .tutor-dashboard-sidebar-logo .tutor-brand-logo { width: 182px; background-image: url(../logo/frencheezy-kids-light-header.svg); }
.fz-look-exams .tutor-dashboard-sidebar-logo .tutor-brand-logo { width: 196px; background-image: url(../logo/frencheezy-exams-light-header.svg); }
.tutor-dashboard-sidebar-nav li a { border-radius: 12px; font-weight: 600; }
.tutor-dashboard-sidebar-nav li:is(.active, .is-active) > a, .tutor-dashboard-sidebar-nav li a[aria-current="page"] { background: #EEEEFC; color: #3634A8; }
.fz-look-exams .tutor-dashboard-sidebar-nav li:is(.active, .is-active) > a, .fz-look-exams .tutor-dashboard-sidebar-nav li a[aria-current="page"] { background: #E0A526; color: #14213D; }
.fz-look-exams .tutor-dashboard-sidebar-nav li:is(.active, .is-active) > a *, .fz-look-exams .tutor-dashboard-sidebar-nav li a[aria-current="page"] * { color: #14213D; }
.fz-look-kids .tutor-dashboard-sidebar-nav li:is(.active, .is-active) > a, .fz-look-kids .tutor-dashboard-sidebar-nav li a[aria-current="page"] { background: #FFC93C; color: #23214A; }
.tutor-dashboard-header-left .tutor-h5 { font-family: var(--wp--preset--font-family--heading); font-size: 1.6rem; letter-spacing: 0; }
.tutor-stat-card { border-radius: var(--fzt-card-radius) !important; border: 1px solid var(--wp--preset--color--line) !important; background: var(--wp--preset--color--surface) !important; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
a.tutor-stat-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); }
.tutor-stat-card-content { font-family: var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; }
.tutor-stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #4B4ACF; }
.tutor-stat-card-active::after { background: #6FB7FF; }
.tutor-stat-card-completed::after { background: #3CCB9C; }
.tutor-stat-card-time-spent::after { background: #FFC93C; }
/* Readable numbers: Tutor's amber (1.8:1) and cyan (2.6:1) on white are below even the large-text minimum. Icons keep the bright hue. */
:is(.tutor-stat-card-time-spent, .tutor-stat-card-exception4) .tutor-stat-card-value { color: #A85A00; }
.tutor-stat-card-active .tutor-stat-card-value { color: #00788A; }
.fz-look-kids .tutor-stat-card { border: 3px solid #23214A !important; box-shadow: 0 5px 0 #23214A; }
/* Topic info tooltips: on phones they opened 208px to the right of the icon and ran off screen.
   Anchor them to the whole topic header instead, full width under it. */
@media (max-width: 782px) {
	.tutor-accordion-item-header .tooltip-wrap.tooltip-icon { position: static; }
	.tutor-accordion-item-header .tooltip-wrap .tooltip-txt { left: 12px; right: 12px; top: calc(100% - 6px); width: auto; max-width: none; transform: none; z-index: 5; }
	.tutor-accordion-item-header .tooltip-wrap .tooltip-txt::after { display: none; }
	.tutor-accordion-item:has(.tooltip-wrap:hover), .tutor-accordion:has(.tooltip-wrap:hover) { overflow: visible !important; }
}
/* Dashboard grid: the main column must be allowed to shrink, or wide content (charts, the class scores table)
   pushes it past the viewport. Wide tables scroll inside their own wrappers. */
.tutor-dashboard-layout > .tutor-dashboard-main { min-width: 0; }
/* Tutor sizes the completion chart canvas from its parent's on-screen width; under the large-screen zoom that
   reads double and the chart grew in a loop (4798px). Hold the canvas to its container. */
.tutor-dashboard-home-chart { min-width: 0; overflow: hidden; }
.tutor-dashboard-home-chart-canvas { width: 100% !important; max-width: 100%; }
/* Wide screens: Tutor caps the dashboard at 944px, a strip in the middle of a big monitor. Use the site's wide measure. */
@media (min-width: 1600px) { .tutor-dashboard-main :is(.tutor-dashboard-header-inner, .tutor-dashboard-page) { max-width: var(--fz-wide, 1240px); } }
/* Instructor home, top performing courses: on phones the stats move under the course title instead of squeezing it. */
@media (max-width: 600px) {
	.tutor-dashboard-home-course { flex-wrap: wrap; row-gap: .5rem; }
	.tutor-dashboard-home-course > :first-child { flex: 1 1 100%; min-width: 0; }
	.tutor-dashboard-home-course > :last-child { margin-left: 0 !important; }
}
/* Tutor wraps each stat card in a flex-1 box inside a wrapping row, so on phones the last card stretched alone across a full row. */
@media (max-width: 600px) {
	.tutor-flex-wrap:has(> .tutor-flex-1 > .tutor-stat-card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tutor-flex-wrap:has(> .tutor-flex-1 > .tutor-stat-card) > .tutor-flex-1 { min-width: 0; }
	/* Tutor fixes the cards at 146px; on phones that left half of each card empty (learner and instructor homes). */
	.tutor-stat-card { height: auto !important; gap: 1.25rem; padding-bottom: 1.1rem; }
}
.tutor-progress-card { border-radius: var(--fzt-card-radius) !important; border: 1px solid var(--wp--preset--color--line) !important; background: var(--wp--preset--color--surface) !important; }
.tutor-progress-card img { border-radius: calc(var(--fzt-card-radius) - 8px); }
.fz-look-kids .tutor-progress-card { border: 3px solid #23214A !important; box-shadow: 0 5px 0 #23214A; }

/* ------------------------------------------------ cart and checkout */

.tutor-cart-page :where(h3, h4, .tutor-fs-4, .tutor-fs-5), .tutor-checkout-page :where(h3, h4, h5, .tutor-fs-4, .tutor-fs-5) { font-family: var(--wp--preset--font-family--heading) !important; }
.tutor-checkout-page .tutor-btn-primary, .tutor-cart-page .tutor-btn-primary { min-height: 50px; font-size: 1.05rem; }

/* ----------------------------------------------- empty states (Zazou) */

.fz-look-kids :is(.tutor-empty-state > img, .tutor-px-9.tutor-py-10.tutor-flex-center-col > svg:first-child, .tutor-cart-empty-state > svg:first-child, .tutor-cart-empty-state > img:first-child) { display: none; }
.fz-look-kids :is(.tutor-empty-state, .tutor-px-9.tutor-py-10.tutor-flex-center-col, .tutor-cart-empty-state)::before {
	content: ""; display: block; width: 150px; height: 150px; margin: 0 auto 1rem;
	background: url(../img/zazou-read-cut-640.webp) center / contain no-repeat;
}

/* --------------------------------------------- certificates (Pro Pack) */

.sora-cert-cta, .sora-cert-actions { border-radius: var(--fzt-card-radius); }
.sora-cert-cta { background: linear-gradient(135deg, #4B4ACF, #3634A8); color: #fff; border: 0; padding: 1.75rem; }
.sora-cert-cta :where(h2, h3, p, strong) { color: #fff; }
.sora-cert-cta .tutor-btn { background: #FFC93C; color: #1E1B3A; border-color: #FFC93C; }

/* -------------------------------------------------------- Pro Pack */

:where(.sora-lock, .sora-prereq, .sora-note, .sora-files) { border-radius: var(--fzt-card-radius); }
.sora-lock__title, :where([class^="sora-"]) :where(h2, h3) { font-family: var(--wp--preset--font-family--heading); }
.sora-lock__icon { background: #EEEEFC; color: #4B4ACF; }
.fz-look-kids .sora-lock { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; }
.fz-look-kids .sora-lock__icon { width: 120px; height: 120px; background: url(../img/zazou-cheer-cut-640.webp) center / contain no-repeat; color: transparent; }
.fz-look-kids .sora-lock__icon > * { display: none; }
.sora-bell__btn { border-radius: 999px; }

/* ------------------------------------------- course cards in Tutor loops */

.tutor-course-card { border-radius: var(--fzt-card-radius); overflow: hidden; border: 1px solid var(--wp--preset--color--line); transition: transform .3s, box-shadow .3s; }
.tutor-course-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); }
.tutor-course-card :where(.tutor-course-name, .tutor-course-name a) { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }

/* ---------------------------------------------------- Tutor login form */

.tutor-login-wrap :where(h2, h3, .tutor-fs-5) { font-family: var(--wp--preset--font-family--heading) !important; }
/* Phones: the login card ran edge to edge. */
@media (max-width: 600px) { .tutor-page-wrap > .tutor-login-wrap { box-sizing: border-box; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; margin-left: auto !important; margin-right: auto !important; } }

@media (max-width: 781px) {
	.tutor-course-details-title.tutor-fs-4 { font-size: 2.1rem !important; }
	.tutor-course-details-header::after { width: 140px; height: 140px; right: -50px; top: -40px; }
}

/* Clip the course header decoration vertically so it never shows through the sticky header. */
.tutor-course-details-header { clip-path: inset(0 calc(-100vw / var(--fz-z, 1))); }
.tutor-stat-card-header, .tutor-stat-card-header * { font-family: var(--wp--preset--font-family--body) !important; }
/* Tutor pages that live inside a regular page (cart, checkout, registration, login) use the wide measure. */
.fz-single .wp-block-post-content > :is([class*="tutor-"], .tutor-wrap, .tutor-container) { max-width: var(--fz-wide, 1240px) !important; }
/* ...and the post content around them has to widen too, or the reading measure (720px) still caps them: the cart summary was 219px wide. */
.wp-block-post-content:has(> :is(.tutor-cart-page, .tutor-checkout-page, [class*="tutor-"], .tutor-wrap, .tutor-container)) { max-width: var(--fz-wide, 1240px) !important; }
.wp-block-post-content .tutor-container { width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: 0; }
/* "Show more" fade: mask the text itself so it fades into whatever is behind it (page colour plus grain)
   instead of painting a flat white or cream box over it. */
.tutor-toggle-more-collapsed:before { display: none !important; }
.tutor-toggle-more-collapsed {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}
.fz-look-exams .tutor-course-details-header .tutor-course-details-title.tutor-fs-4 { color: #fff !important; }
.fz-look-exams .tutor-dashboard-sidebar-nav li a.active { background: #E0A526; color: #14213D; }
.fz-look-exams .tutor-dashboard-sidebar-nav li a.active * { color: #14213D; }
.tutor-dashboard-sidebar-nav li a.active { background: #EEEEFC; color: #3634A8; }
.fz-look-kids .tutor-dashboard-sidebar-nav li a.active { background: #FFC93C; color: #23214A; }
.fz-look-exams .tutor-dashboard-sidebar-nav li a.active { background: #E0A526; color: #14213D; }
.tutor-dashboard-sidebar-logo { display: inline-block; }
.tutor-dashboard-sidebar-logo .tutor-brand-logo { min-width: 160px; }
.fz-look-kids .tutor-dashboard-sidebar-logo .tutor-brand-logo { min-width: 182px; }
.fz-look-exams .tutor-dashboard-sidebar-logo .tutor-brand-logo { min-width: 196px; }

/* Completion card (course page) */
.fz-done { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; border-radius: var(--fzt-card-radius); background: #EAF8F2; border: 1px solid #A8E3CC; }
.fz-done p { margin: 0; }
.fz-done__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.2rem; }
.fz-done__text { font-size: .9rem; color: var(--wp--preset--color--muted); margin-top: .2rem !important; }
.fz-done__link { display: inline-block; margin-top: .5rem; font-weight: 700; color: #3634A8; }
.fz-done__badge { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #1F9D6B; color: #fff; font-size: 1.5rem; font-weight: 800; }
.fz-done--kids { background: #FFF0C2; border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; }
.fz-done__art { width: 96px; height: auto; flex: none; }
@media (prefers-reduced-motion: no-preference) { .fz-done__art { animation: fz-bob 3s ease-in-out infinite; } }
@keyframes fz-bob { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* Quiz result: Zazou celebrates on the kids site */
.fz-look-kids .tutor-quiz-result-modal-icon > * { display: none; }
.fz-look-kids .tutor-quiz-result-modal-icon::before { content: ""; display: block; width: 140px; height: 140px; margin: 0 auto; background: url(../img/zazou-star-cut-640.webp) center / contain no-repeat; }
.fz-look-kids .tutor-quiz-summary-overview::before { content: ""; display: block; width: 120px; height: 120px; margin: 0 auto .75rem; background: url(../img/zazou-cheer-cut-640.webp) center / contain no-repeat; }
.tutor-quiz-result-modal .tutor-h5, .tutor-quiz-summary-overview h2 { font-family: var(--wp--preset--font-family--heading); }

.tutor-dashboard-sidebar-nav li a.active { background: #EEEEFC !important; color: #3634A8 !important; }
.fz-look-kids .tutor-dashboard-sidebar-nav li a.active { background: #FFC93C !important; color: #23214A !important; }
.fz-look-exams .tutor-dashboard-sidebar-nav li a.active { background: #E0A526 !important; color: #14213D !important; }

/* ------------------------------------------------ lesson content components
   Markup comes from the course builders: table.fz-vocab, div.fz-video-placeholder (with inline styles that
   these rules replace), figure.fz-lesson-image. Tokens keep them on-brand for each look. */

.tutor-learning-area-content :where(.tutor-tabs-content) table.fz-vocab,
table.fz-vocab {
	width: 100%; margin: 1rem 0 2rem; border-collapse: separate; border-spacing: 0; table-layout: fixed;
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--fzt-card-radius); overflow: hidden;
	background: var(--wp--preset--color--surface); font-size: 1rem; line-height: 1.45;
}
table.fz-vocab :where(th, td) { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--line); overflow-wrap: anywhere; }
table.fz-vocab th {
	background: #EEEEFC; color: #3634A8; font-family: var(--wp--preset--font-family--body); font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
}
table.fz-vocab tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--wp--preset--color--soft) 45%, transparent); }
table.fz-vocab tbody tr:last-child td { border-bottom: 0; }
table.fz-vocab td:first-child { color: var(--wp--preset--color--ink); }
table.fz-vocab td:first-child strong { font-weight: 700; color: #3634A8; }
table.fz-vocab td:nth-child(3) { color: var(--wp--preset--color--muted); font-size: .9rem; }
table.fz-vocab td:empty::after { content: ""; display: inline-block; width: 1rem; height: 2px; border-radius: 2px; background: var(--wp--preset--color--line); vertical-align: middle; }
table.fz-vocab :where(th, td):first-child { width: 38%; }
.fz-look-kids table.fz-vocab { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; font-size: 1.05rem; }
.fz-look-kids table.fz-vocab th { background: #FFC93C; color: #23214A; font-family: var(--wp--preset--font-family--heading); font-size: .95rem; letter-spacing: .04em; }
.fz-look-kids table.fz-vocab td:first-child strong { color: #4B4ACF; }
.fz-look-exams table.fz-vocab th { background: #14213D; color: #fff; }
.fz-look-exams table.fz-vocab td:first-child strong { color: #14213D; }
/* Hide the pronunciation column when no row fills it (kids tables). */
table.fz-vocab:not(:has(td:nth-child(3):not(:empty))) :is(th, td):nth-child(3) { display: none; }
@media (max-width: 600px) {
	table.fz-vocab { font-size: .95rem; }
	table.fz-vocab :where(th, td) { padding: .6rem .65rem; }
	table.fz-vocab th { font-size: .7rem; letter-spacing: .04em; }
	/* Phones: two columns, pronunciation on its own line under each row. */
	.tutor-learning-area-content :where(.tutor-tabs-content) table.fz-vocab,
	table.fz-vocab { display: block; }
	table.fz-vocab :is(thead, tbody) { display: block; }
	table.fz-vocab tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-bottom: 1px solid var(--wp--preset--color--line); }
	table.fz-vocab tbody tr:last-child { border-bottom: 0; }
	table.fz-vocab :where(th, td) { width: auto !important; border-bottom: 0; }
	table.fz-vocab th:nth-child(3) { display: none; }
	table.fz-vocab td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
	table.fz-vocab td:nth-child(3):empty { display: none; }
	table.fz-vocab tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wp--preset--color--soft) 45%, transparent); }
	table.fz-vocab tbody tr:nth-child(even) td { background: transparent; }
	.fz-look-kids table.fz-vocab thead tr { background: #FFC93C; }
	.fz-look-exams table.fz-vocab thead tr { background: #14213D; }
	table.fz-vocab thead tr { background: #EEEEFC; }
}

.fz-video-placeholder {
	position: relative; display: block;
	margin: 0 0 1.75rem !important; padding: 1.1rem 1.25rem 1.1rem 4.75rem !important; min-height: 4.5rem;
	border-radius: var(--fzt-card-radius) !important; border: 2px dashed #A9A8EC;
	background: linear-gradient(135deg, #F5F5FD, #EEEEFC) !important; color: var(--wp--preset--color--ink) !important;
	font-size: .98rem; line-height: 1.5;
}
.fz-video-placeholder::before {
	content: ""; position: absolute; left: 1.15rem; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; border-radius: 50%;
	background: #4B4ACF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5.5v9l7-4.5z' fill='white'/%3E%3C/svg%3E") 55% 50% / 60% no-repeat;
	box-shadow: 0 0 0 6px rgba(75, 74, 207, .14);
}
.fz-video-placeholder strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; color: #3634A8; margin-bottom: .1rem; }
.fz-look-kids .fz-video-placeholder { border: 3px dashed #23214A; background: #FFF0C2 !important; }
.fz-look-kids .fz-video-placeholder::before { background-color: #FF6B5B; box-shadow: 0 0 0 6px rgba(255, 107, 91, .18); }
.fz-look-kids .fz-video-placeholder strong { color: #23214A; }
.fz-look-exams .fz-video-placeholder { border: 1px dashed #9AA3BD; background: #F5F6FA !important; }
.fz-look-exams .fz-video-placeholder::before { background-color: #14213D; box-shadow: 0 0 0 6px rgba(20, 33, 61, .1); }
.fz-look-exams .fz-video-placeholder strong { color: #14213D; }
@media (max-width: 600px) {
	.fz-video-placeholder { padding: 1rem 1rem 1rem 3.9rem !important; }
	.fz-video-placeholder::before { left: .85rem; width: 2.2rem; height: 2.2rem; margin-top: -1.1rem; }
}

.fz-lesson-image { margin: 0 0 1.75rem !important; }
.fz-lesson-image img { display: block; border-radius: var(--fzt-card-radius) !important; }
.fz-look-kids .fz-lesson-image img { border: 3px solid #23214A; }

/* ------------------------------------------------ already signed in (registration page, tutor/dashboard/logged-in.php) */
.fz-signed-in {
	max-width: 560px; margin: clamp(.5rem, calc(3vw / var(--fz-z, 1)), 2rem) auto; box-sizing: border-box;
	padding: clamp(1.5rem, calc(4vw / var(--fz-z, 1)), 2.5rem); background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--fzt-card-radius, 18px); box-shadow: var(--wp--preset--shadow--soft);
}
.fz-signed-in > * { margin: 0; }
.fz-signed-in > * + * { margin-top: 1.1rem; }
.fz-signed-in__who { display: flex; align-items: center; gap: 1rem; }
.fz-signed-in__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.fz-signed-in__who > div > * { margin-block: 0 !important; }
.fz-signed-in__eyebrow { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.fz-signed-in__name { margin: .2rem 0 0 !important; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; }
.fz-signed-in__text { color: var(--wp--preset--color--muted); }
.fz-signed-in__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.fz-signed-in__actions .wp-element-button { text-decoration: none; }
.fz-signed-in__actions .is-ghost { background: transparent; color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 2px var(--wp--preset--color--ink); }
.fz-signed-in__switch { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.fz-look-kids .fz-signed-in { border: 3px solid #23214A; box-shadow: 0 6px 0 #23214A; }
@media (max-width: 480px) { .fz-signed-in__actions .wp-element-button { flex: 1 1 100%; text-align: center; } }

/* Learning area: the lesson card keeps its inner panels inside its rounded corners (they showed past the ink border) */
.tutor-learning-area-container .tutor-lesson-content { overflow: clip; }
/* Learning area sidebar: the lesson being viewed is highlighted in the site colours (Tutor's default is a near-black box,
   which put the theme's dark text on dark) */
.tutor-learning-nav-item.active, .tutor-learning-nav-item.active:hover, .tutor-learning-nav-item.active:focus { background: var(--fz-soft) !important; color: var(--fz-ink) !important; box-shadow: inset 4px 0 0 var(--fz-primary); }
.tutor-learning-nav-item.active .tutor-text-subdued { color: var(--fz-muted, #5A5775) !important; }
.fz-look-kids .tutor-learning-nav-item.active, .fz-look-kids .tutor-learning-nav-item.active:hover { background: #FFF4D1 !important; box-shadow: inset 0 0 0 2px #23214A, 0 3px 0 #23214A; border-radius: 14px; }

/* ------------------------------------------------ kids course page: hero banner (inc/tutor.php) and sticker sections */
.fz-chero { --ink: #23214A; position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, calc(4.5vw / var(--fz-z, 1)), 72px) var(--wp--style--root--padding-right, 16px) clamp(56px, calc(6vw / var(--fz-z, 1)), 96px); background: linear-gradient(180deg, #BFE6FF 0, #DDF1FF 46%, #FFF4D1 100%); }
.fz-chero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; height: 34px; background: radial-gradient(circle at 50% 100%, var(--wp--preset--color--base, #FEF8E9) 22px, transparent 23px) 0 100% / 56px 34px repeat-x; }
.fz-chero__sky { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.fz-chero__cloud { position: absolute; display: block; width: 150px; height: 46px; border-radius: 99px; background: #fff; opacity: .9; animation: fzCloud 46s linear infinite; }
.fz-chero__cloud::before, .fz-chero__cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.fz-chero__cloud::before { width: 64px; height: 64px; left: 24px; top: -30px; }
.fz-chero__cloud::after { width: 46px; height: 46px; left: 74px; top: -20px; }
.fz-chero__cloud:nth-child(1) { top: 14%; animation-delay: -8s; }
.fz-chero__cloud:nth-child(2) { top: 40%; scale: .7; animation-duration: 62s; animation-delay: -30s; opacity: .75; }
.fz-chero__cloud:nth-child(3) { top: 8%; scale: .55; animation-duration: 74s; animation-delay: -52s; opacity: .7; }
@keyframes fzCloud { from { left: -180px; } to { left: 100%; } }
.fz-chero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, calc(4vw / var(--fz-z, 1)), 72px); align-items: center; max-width: var(--wp--style--global--wide-size, 1240px); margin: 0 auto; }
.fz-chero__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px 6px 8px; border: 3px solid var(--ink); border-radius: 99px; background: #FFC93C; box-shadow: 0 3px 0 var(--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 15px; color: var(--ink); }
.fz-chero__kicker::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.5 5.2 5.7.8-4.1 4 1 5.6-5.1-2.7-5.1 2.7 1-5.6-4.1-4 5.7-.8z' fill='%23E2405E'/%3E%3C/svg%3E") center / 15px no-repeat; border: 2px solid var(--ink); }
.fz-chero__title { margin: 16px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(2.3rem, calc(4.3vw / var(--fz-z, 1)), 4.1rem); line-height: 1.02; color: var(--ink); text-wrap: balance; }
.fz-chero__lead { margin: 16px 0 0; max-width: 54ch; font-size: clamp(1rem, calc(1.15vw / var(--fz-z, 1)), 1.15rem); line-height: 1.6; color: #4A476B; }
.fz-chero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.fz-chero__fact { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; font-size: 15px; color: var(--ink); box-shadow: 0 3px 0 rgba(35, 33, 74, .9); }
.fz-chero__fact b { font-family: var(--wp--preset--font-family--heading); }
.fz-chero__fact::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c) var(--i) center / 16px no-repeat; }
.fz-chero__fact--lessons { --c: #FFE1E8; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323214A' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M3 5.5c3-1.5 6-1.5 9 .5 3-2 6-2 9-.5v13c-3-1.5-6-1.5-9 .5-3-2-6-2-9-.5z'/%3E%3Cpath d='M12 6v13'/%3E%3C/svg%3E"); }
.fz-chero__fact--level { --c: #DDF6EC; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323214A' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3'/%3E%3C/svg%3E"); }
.fz-chero__fact--time { --c: #FFF1C2; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323214A' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.fz-chero__fact--voice { --c: #E6E6FF; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323214A' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }
.fz-chero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.fz-chero__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 26px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; color: var(--ink) !important; box-shadow: 0 5px 0 var(--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 18px; text-decoration: none !important; transition: transform .18s, box-shadow .18s; }
.fz-chero__btn--main { background: #FFC93C; }
.fz-chero__btn:hover, .fz-chero__btn:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.fz-chero__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.fz-chero__art { position: relative; margin: 0; padding: 18px 18px 26px; }
.fz-chero__frame { display: block; overflow: hidden; border: 4px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 0 10px 0 var(--ink); transform: rotate(1.6deg); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.fz-chero__art:hover .fz-chero__frame { transform: rotate(0deg) scale(1.01); }
.fz-chero__frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fz-chero__bubble { position: absolute; z-index: 2; padding: 8px 16px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(15px, calc(1.25vw / var(--fz-z, 1)), 20px); color: var(--ink); white-space: nowrap; animation: fzFloat 4.2s ease-in-out infinite; }
.fz-chero__bubble::after { content: ""; position: absolute; bottom: -10px; width: 14px; height: 14px; background: inherit; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.fz-chero__bubble--1 { left: -6px; top: 2%; background: #FFE1E8; animation-delay: -1s; }
.fz-chero__bubble--1::after { left: 22px; }
.fz-chero__bubble--2 { right: -4px; top: 20%; background: #DDF6EC; animation-delay: -2.4s; }
.fz-chero__bubble--2::after { right: 24px; }
.fz-chero__bubble--3 { right: 14%; bottom: 0; background: #E6E6FF; animation-delay: -.3s; }
.fz-chero__bubble--3::after { top: -10px; bottom: auto; left: 24px; transform: rotate(225deg); }
.fz-chero__star { position: absolute; z-index: 2; width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z' fill='%23FFC93C' stroke='%2323214A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: fzTwinkle 2.8s ease-in-out infinite; }
.fz-chero__star--1 { left: 40%; top: -2px; }
.fz-chero__star--2 { right: 0; bottom: 34%; width: 24px; height: 24px; animation-delay: -1.3s; }
.fz-chero__zazou { position: absolute; z-index: 3; left: -26px; bottom: -14px; width: clamp(92px, calc(10vw / var(--fz-z, 1)), 150px); height: auto; filter: drop-shadow(0 6px 0 rgba(35, 33, 74, .2)); animation: fzBob 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes fzFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes fzTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(18deg); } }
@keyframes fzBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
/* Tutor's own title and picture: the hero has them. The header keeps only wishlist and share, as a slim row. */
.fz-chero-on .tutor-course-details-header { padding: 0 !important; margin-bottom: 18px !important; }
.fz-chero-on .tutor-course-details-header::before, .fz-chero-on .tutor-course-details-header::after,
.fz-chero-on .tutor-course-details-title, .fz-chero-on .tutor-course-details-ratings, .fz-chero-on .tutor-course-thumbnail:has(> img) { display: none !important; }
.fz-chero-on .tutor-course-details-top { margin-top: 14px !important; }
.fz-chero-on .tutor-course-details-actions a { padding: 6px 14px !important; border: 2px solid #23214A; border-radius: 99px; background: #fff; }
/* Sections below: sticker cards */
.fz-chero-on .tutor-course-details-tab .tutor-nav { gap: 8px; border: 0 !important; }
.fz-chero-on .tutor-course-details-tab .tutor-nav-link { padding: 10px 20px !important; border: 3px solid #23214A !important; border-radius: 99px !important; background: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: #23214A !important; box-shadow: 0 3px 0 #23214A; }
.fz-chero-on .tutor-course-details-tab .tutor-nav-link.is-active { background: #FFC93C; }
.fz-chero-on .tutor-course-details-tab .tutor-nav-link::before, .fz-chero-on .tutor-course-details-tab .tutor-nav-link::after { display: none !important; }
.fz-chero-on .tutor-course-details-content h2, .fz-chero-on main .tutor-course-details-widget-title, .fz-chero-on .tutor-mt-40 > h3 { font-family: var(--wp--preset--font-family--heading) !important; font-size: clamp(1.5rem, calc(2.2vw / var(--fz-z, 1)), 2rem) !important; color: #23214A !important; }
.fz-chero-on main .tutor-course-details-widget-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fz-chero-on main .tutor-course-details-widget-list li { width: auto !important; margin: 0 !important; padding: 14px 16px; border: 3px solid #23214A; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #23214A; font-weight: 600; line-height: 1.45; align-items: flex-start; }
.fz-chero-on main .tutor-course-details-widget-list li:nth-child(4n+1) { background: #E6F2FF; }
.fz-chero-on main .tutor-course-details-widget-list li:nth-child(4n+2) { background: #DDF6EC; }
.fz-chero-on main .tutor-course-details-widget-list li:nth-child(4n+3) { background: #FFF4D1; }
.fz-chero-on main .tutor-course-details-widget-list li:nth-child(4n) { background: #FDE6EE; }
.fz-chero-on main .tutor-course-details-widget-list .tutor-icon-bullet-point { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0 10px 0 0 !important; border-radius: 50%; background: #3CCB9C; color: #fff !important; font-size: 0; }
.fz-chero-on main .tutor-course-details-widget-list .tutor-icon-bullet-point::before { content: "\2713"; font-family: inherit; font-size: 14px; font-weight: 700; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion { counter-reset: fzunit; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion-item { counter-increment: fzunit; border: 3px solid #23214A; border-radius: 22px; box-shadow: 0 5px 0 #23214A; margin-bottom: 16px; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion-item-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion-item-header::before { content: counter(fzunit); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid #23214A; border-radius: 12px; background: var(--u, #FFC93C); font-family: var(--wp--preset--font-family--heading); font-size: 18px; color: #23214A; }
.fz-chero-on .tutor-accordion-item:nth-child(5n+2) { --u: #7FD3FF; }
.fz-chero-on .tutor-accordion-item:nth-child(5n+3) { --u: #8FE3BE; }
.fz-chero-on .tutor-accordion-item:nth-child(5n+4) { --u: #FF9DB5; }
.fz-chero-on .tutor-accordion-item:nth-child(5n) { --u: #B9B6FF; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion-item-header.is-active { background: #FFF4D1; border-bottom: 3px solid #23214A; }
.fz-chero-on .tutor-course-details-tab .tutor-accordion-item-header::after { margin-left: auto; }
.fz-chero-on .tutor-single-course-sidebar-more > div { border: 3px solid #23214A !important; border-radius: 24px !important; box-shadow: 0 5px 0 #23214A !important; background: #fff; }
.fz-chero-on .tutor-single-course-sidebar-more > div + div { margin-top: 16px; }
@media (max-width: 960px) {
	.fz-chero__in { grid-template-columns: 1fr; }
	.fz-chero__art { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
	.fz-chero__title { font-size: 2.2rem; }
	.fz-chero__fact { font-size: 14px; }
	.fz-chero__btn { flex: 1 1 auto; justify-content: center; min-height: 50px; font-size: 17px; }
	.fz-chero__art { padding: 14px 6px 22px; }
	.fz-chero__bubble { font-size: 14px; padding: 6px 12px; }
	.fz-chero__zazou { left: -6px; bottom: -18px; width: 84px; }
	.fz-chero-on main .tutor-course-details-widget-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.fz-chero__cloud, .fz-chero__bubble, .fz-chero__star, .fz-chero__zazou { animation: none; }
	.fz-chero__frame, .fz-chero__btn { transition: none; }
}

/* ------------------------------------------------ kids lessons (French Adventure player): the top bar is an animated banner
   (sky, drifting clouds, the painted village and a floating balloon, Zazou flying in the corner); one card instead of three */
.fz-look-kids .tutor-learning-area-container .tutor-lesson-content:has(.fzl) { border: 0; box-shadow: none; background: transparent; }
.fz-look-kids .tutor-lesson-content:has(.fzl) .tutor-tab-panel { padding: 0 !important; }
.fz-look-kids .tutor-lesson-content:has(.fzl) .tutor-lesson-content-tab { box-shadow: none !important; background: transparent !important; border: 0 !important; }
.fz-look-kids .tutor-lesson-wrapper:has(.fzl) { position: relative; padding: 0 !important; background: transparent !important; border: 0 !important; }
.fz-look-kids .fzl { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.fz-look-kids .fzl > div { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.fz-look-kids .fzl .fzl-top {
	position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	min-height: 268px; margin: 0 0 18px; padding: 22px 26px 26px; padding-right: 44%;
	border: 3px solid #23214A; border-radius: 28px; box-shadow: 0 7px 0 #23214A;
	background:
		url(../img/kids/kp-balloon.webp) right 34% top 96px / 58px auto no-repeat,
		url(../img/kids/kp-village-strip.webp) right -10px bottom 14px / auto 128px no-repeat,
		linear-gradient(0deg, #7CC65A 0 22px, #23214A 22px 25px, transparent 25px),
		linear-gradient(180deg, #A9DCFF 0, #D7F0FF 62%, #FFF6D8 100%);
	animation: fzlBalloon 7s ease-in-out infinite;
}
@keyframes fzlBalloon {
	0%, 100% { background-position: right 34% top 96px, right -10px bottom 14px, 0 0, 0 0; }
	50% { background-position: right 37% top 80px, right -10px bottom 14px, 0 0, 0 0; }
}
.fz-look-kids .fzl .fzl-top::before, .fz-look-kids .fzl .fzl-top::after {
	content: ""; position: absolute; z-index: -1; top: 22px; left: -160px; width: 110px; height: 34px; border-radius: 99px; background: #fff;
	box-shadow: 26px -16px 0 4px #fff, 58px -8px 0 0 #fff; opacity: .95; animation: fzlCloud 38s linear infinite;
}
.fz-look-kids .fzl .fzl-top::after { top: 92px; scale: .7; opacity: .8; animation-duration: 54s; animation-delay: -27s; }
@keyframes fzlCloud { from { left: -160px; } to { left: calc(100% + 40px); } }
.fz-look-kids .fzl .fzl-title { position: relative; z-index: 1; flex: none; width: 100%; }
.fz-look-kids .fzl .fza-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 4px 14px; border: 2px solid #23214A; border-radius: 99px; background: #fff; color: #23214A; font-size: 14px; box-shadow: 0 2px 0 #23214A; text-decoration: none; }
.fz-look-kids .fzl .fza-back:hover { background: #FFC93C; text-decoration: none; }
.fz-look-kids .fzl .fzl-title small { display: inline-block; padding: 3px 12px; border-radius: 99px; background: #4B4ACF; color: #fff; font-size: 12px; letter-spacing: .04em; }
.fz-look-kids .fzl .fzl-title h2 { margin-top: 10px; font-size: clamp(26px, calc(1.6vw / var(--fz-z, 1) + 14px), 40px); line-height: 1.06; color: #23214A; text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff; text-wrap: balance; }
.fz-look-kids .fzl .fzl-steps { position: relative; z-index: 1; justify-content: flex-start; gap: 8px; padding: 6px 8px; border: 2px solid #23214A; border-radius: 99px; background: rgba(255, 255, 255, .92); }
.fz-look-kids .fzl .fzl-step { width: 38px; height: 38px; }
/* Zazou's hello sits in the banner's top right corner, flying */
.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top { position: absolute; z-index: 3; top: 16px; right: 18px; width: 40%; margin: 0; flex-direction: row-reverse; align-items: flex-start; gap: 6px; pointer-events: none; }
.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top img { width: 74px; pointer-events: auto; animation: fzlFly 3.2s ease-in-out infinite; }
.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top .b { margin: 8px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.35; border-width: 2px; box-shadow: 0 3px 0 #23214A; pointer-events: auto; }
.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top .b::before { left: auto; right: -12px; bottom: auto; top: 14px; border-right-color: transparent; border-left-color: #23214A; }
@keyframes fzlFly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-6px, -8px) rotate(5deg); } }
/* the welcome card: one frame, the scene a little bigger */
.fz-look-kids .fzl .fzl-intro { padding: 18px 18px 22px; }
.fz-look-kids .fzl .fzl-intro .fzl-stage { max-height: 62vh; }
.fz-look-kids .fzl .fzl-intro > p:not(.en) { margin-top: 16px; font-family: var(--wp--preset--font-family--heading); font-size: 21px; }
.fz-look-kids .fzl .fzl-intro .fzl-btn--sun { min-height: 56px; padding: 0 30px; font-size: 20px; animation: fzlPulse 2.4s ease-in-out infinite; }
@keyframes fzlPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.fz-look-kids .tutor-lesson-content:has(.fzl) ~ .fza-zz.end, .fz-look-kids .tutor-lesson-content:has(.fzl) .fza-zz.end { margin-top: 22px; }
@media (min-width: 1500px) { .fz-look-kids .fzl .fzl-top { background-size: 64px auto, auto 140px, auto, auto; } }
@media (max-width: 760px) {
	.fz-look-kids .fzl .fzl-top { min-height: 0; padding: 92px 14px 150px; gap: 12px; background-size: 40px auto, auto 104px, auto, auto; border-radius: 22px; }
	@keyframes fzlBalloon {
		0%, 100% { background-position: left 7% bottom 92px, center bottom 14px, 0 0, 0 0; }
		50% { background-position: left 9% bottom 102px, center bottom 14px, 0 0, 0 0; }
	}
	.fz-look-kids .fzl .fzl-top::after { top: 140px; }
	.fz-look-kids .fzl .fzl-title h2 { font-size: 26px; }
	.fz-look-kids .fzl .fzl-steps { width: 100%; justify-content: space-between; gap: 2px; padding: 5px 6px; }
	.fz-look-kids .fzl .fzl-step { width: 34px; height: 34px; }
	.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top { top: 12px; left: 12px; right: 12px; width: auto; }
	.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top img { width: 58px; }
	.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top .b { flex: 1; margin-top: 2px; padding: 6px 10px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.fz-look-kids .fzl .fzl-intro { padding: 12px 12px 16px; }
	.fz-look-kids .fzl .fzl-intro > p:not(.en) { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.fz-look-kids .fzl .fzl-top, .fz-look-kids .fzl .fzl-top::before, .fz-look-kids .fzl .fzl-top::after,
	.fz-look-kids .tutor-lesson-wrapper:has(.fzl) > .fza-zz.top img, .fz-look-kids .fzl .fzl-intro .fzl-btn--sun { animation: none; }
}

/* ------------------------------------------------ French Adventure lessons: the painted cast and scenes (assets/img/cast,
   FLUX.2 klein, same style as the course cover). Each character is one strip of 9 gestures, in this order:
   idle, blink, talk, wave A, wave B, cheer, walk A, walk B, hold. The player's own classes drive the gestures
   (talk, wave, cheer, hold, jump, walk, face-l); the flat drawing stays underneath, hidden, for its click area. */
.fz-look-kids .fzl-actor[aria-label] { --cast: none; }
.fz-look-kids .fzl-actor[aria-label="Mia"] { --cast: url(../img/cast/cast-mia.webp); }
.fz-look-kids .fzl-actor[aria-label="Teo"] { --cast: url(../img/cast/cast-teo.webp); }
.fz-look-kids .fzl-actor[aria-label="Rafaella"] { --cast: url(../img/cast/cast-rafa.webp); }
.fz-look-kids .fzl-actor[aria-label="Maman"] { --cast: url(../img/cast/cast-maman.webp); }
.fz-look-kids .fzl-actor[aria-label="Papa"] { --cast: url(../img/cast/cast-papa.webp); }
.fz-look-kids .fzl-actor[aria-label="Madame Lune"] { --cast: url(../img/cast/cast-lune.webp); }
.fz-look-kids .fzl-actor[aria-label="Monsieur Paul"] { --cast: url(../img/cast/cast-paul.webp); }
.fz-look-kids .fzl-actor[aria-label] > svg { opacity: 0; }
.fz-look-kids .fzl-actor[aria-label]::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--cast) 0 0 / 1100% 100% no-repeat; transform-origin: 50% 100%;
	filter: drop-shadow(0 6px 4px rgba(35, 33, 74, .18));
	animation: fzcIdle 4.6s steps(1, end) infinite, fzcBreathe 3.2s ease-in-out infinite;
}
.fz-look-kids .fzl-actor[aria-label]::after { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: -1.5%; height: 5%; border-radius: 50%; background: rgba(35, 33, 74, .2); filter: blur(2px); }
.fz-look-kids .fzl-actor.face-l[aria-label]::before { scale: -1 1; }
.fz-look-kids .fzl-actor.talk[aria-label]::before { animation: fzcTalk .34s steps(1, end) infinite, fzcNod .9s ease-in-out infinite alternate; }
.fz-look-kids .fzl-actor.hold[aria-label]::before { animation: none; background-position-x: 100%; }
.fz-look-kids .fzl-actor.wave[aria-label]::before { animation: fzcWave .72s steps(1, end) infinite, fzcBreathe 3.2s ease-in-out infinite; }
.fz-look-kids .fzl-actor:is(.cheer, .jump)[aria-label]::before { animation: fzcHop .7s ease-in-out infinite; background-position-x: 50%; }
.fz-look-kids .fzl-actor.walk[aria-label]::before { animation: fzcWalk .6s steps(1, end) infinite, fzcStep .6s steps(1, end) infinite; }
@keyframes fzcIdle { 0%, 92% { background-position-x: 0%; } 93%, 96% { background-position-x: 10%; } 97%, 100% { background-position-x: 0%; } }
@keyframes fzcTalk { 0% { background-position-x: 0%; } 50% { background-position-x: 20%; } }
@keyframes fzcWave { 0% { background-position-x: 30%; } 50% { background-position-x: 40%; } }
@keyframes fzcWalk { 0% { background-position-x: 60%; } 25% { background-position-x: 70%; } 50% { background-position-x: 80%; } 75% { background-position-x: 90%; } }
@keyframes fzcBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@keyframes fzcNod { from { transform: rotate(-1deg); } to { transform: rotate(1deg) translateY(-1%); } }
@keyframes fzcHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7%); } }
@keyframes fzcStep { 0%, 50% { transform: translateY(0); } 25%, 75% { transform: translateY(-2.2%); } }
/* "Qui parle ?" buttons and the chat avatars: the painted faces */
.fz-look-kids .fzl-who button[aria-label] > span:first-child { background: center / contain no-repeat; }
.fz-look-kids .fzl-who button[aria-label] > span:first-child > svg { opacity: 0; }
.fz-look-kids .fzl-who button[aria-label="Mia"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="mia"] { background-image: url(../img/cast/cast-mia-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Teo"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="teo"] { background-image: url(../img/cast/cast-teo-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Rafaella"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="rafa"] { background-image: url(../img/cast/cast-rafa-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Maman"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="maman"] { background-image: url(../img/cast/cast-maman-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Papa"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="papa"] { background-image: url(../img/cast/cast-papa-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Madame Lune"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="lune"] { background-image: url(../img/cast/cast-lune-head.webp); }
.fz-look-kids .fzl-who button[aria-label="Monsieur Paul"] > span:first-child, .fz-look-kids .fzl-msg .av[data-cast="paul"] { background-image: url(../img/cast/cast-paul-head.webp); }
.fz-look-kids .fzl-msg .av[data-cast]:not([data-cast=""]) { background-color: #FFF4D1; background-position: center; background-size: cover; background-repeat: no-repeat; }
.fz-look-kids .fzl-msg .av[data-cast]:not([data-cast=""]) > svg { opacity: 0; }
/* painted scenes: a scene's painting is set once the player has shown it (theme.js adds fz-seen) */
.fz-look-kids .fzl-bg.fz-seen[data-scene] { background: #BFE6FF center bottom / cover no-repeat; }
.fz-look-kids .fzl-bg.fz-seen[data-scene] > svg { opacity: 0; }
.fz-look-kids .fzl-bg.fz-seen[data-scene="park"] { background-image: url(../img/cast/scene-park.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="evening"] { background-image: url(../img/cast/scene-evening.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="home"] { background-image: url(../img/cast/scene-home.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="classroom"] { background-image: url(../img/cast/scene-classroom.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="cafe"] { background-image: url(../img/cast/scene-cafe.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="street"] { background-image: url(../img/cast/scene-street.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="market"] { background-image: url(../img/cast/scene-market.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="bedroom"] { background-image: url(../img/cast/scene-bedroom.webp); }
.fz-look-kids .fzl-bg.fz-seen[data-scene="beach"] { background-image: url(../img/cast/scene-beach.webp); }
@media (prefers-reduced-motion: reduce) {
	.fz-look-kids .fzl-actor[aria-label]::before { animation: none !important; }
	.fz-look-kids .fzl-actor.wave[aria-label]::before { background-position-x: 30%; }
}