/**
 * Salafi de Montréal — Modern Course UX Layer
 * Scoped styles for Course Archive (/tous-les-cours/) and Single Course (/Cours/*)
 */

/* ==========================================================================
   1. Course Archive Page & Editorial Header
   ========================================================================== */

.sdm-courses-page {
    background-color: var(--sm-background, #fcfcfc);
    padding: var(--sm-space-8, 32px) 0;
}

.sdm-courses-header {
    background: transparent;
    padding: var(--sm-space-8, 32px) 0 var(--sm-space-6, 24px) 0;
    text-align: left;
    border-bottom: 1px solid var(--sm-border, #e5e5e5);
    margin-bottom: var(--sm-space-8, 32px);
}

.sdm-courses-header__title {
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sm-foreground, #111111);
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.sdm-courses-header__desc {
    font-size: 1.0625rem;
    color: var(--sm-muted, #737373);
    margin: 0;
    max-width: 680px;
    line-height: 1.5;
}

/* ==========================================================================
   2. Course Archive Filter Tabs & Chips
   ========================================================================== */

.sdm-courses-filters-wrap {
    margin-bottom: var(--sm-space-8, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-4, 16px);
}

/* Override Meloo's default dark filter bar to clean editorial chips */
.ajax-grid-block .filters-wrap,
.ajax-filters .filters-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: var(--sm-space-6, 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.ajax-grid-block .filters-wrap ul,
.ajax-filters ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ajax-grid-block .filters-wrap ul li,
.ajax-filters ul li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
}

.ajax-grid-block .filters-wrap ul li a,
.ajax-filters li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 16px !important;
    font-family: var(--sm-font) !important;
    font-size: var(--text-xs, 0.8125rem) !important;
    font-weight: 500 !important;
    border-radius: var(--sm-radius-pill, 9999px) !important;
    background: var(--sm-surface, #ffffff) !important;
    background-color: var(--sm-surface, #ffffff) !important;
    color: var(--sm-foreground, #171717) !important;
    border: 1px solid var(--sm-border, #e5e5e5) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
    cursor: pointer !important;
    line-height: var(--leading-none, 1.2) !important;
    opacity: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ajax-grid-block .filters-wrap ul li a span,
.ajax-filters li a span {
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ajax-grid-block .filters-wrap ul li a:hover,
.ajax-filters li a:hover {
    opacity: 1 !important;
    background: var(--sm-surface-alt, #f5f5f5) !important;
    background-color: var(--sm-surface-alt, #f5f5f5) !important;
    border-color: var(--sm-border-dark, #d4d4d4) !important;
    color: var(--sm-foreground, #171717) !important;
    transform: translateY(-1px) !important;
}

.ajax-grid-block .filters-wrap ul li a.is-active,
.ajax-filters li a.is-active {
    opacity: 1 !important;
    background: var(--sm-accent, #d32424) !important;
    background-color: var(--sm-accent, #d32424) !important;
    border-color: var(--sm-accent, #d32424) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(211, 36, 36, 0.25) !important;
}

.ajax-grid-block .filters-wrap ul li a.is-active:hover,
.ajax-filters li a.is-active:hover {
    background: var(--sm-accent-hover, #b91c1c) !important;
    background-color: var(--sm-accent-hover, #b91c1c) !important;
    border-color: var(--sm-accent-hover, #b91c1c) !important;
    color: #ffffff !important;
}

/* Remove Meloo's default line/dash on filter reset button */
.ajax-grid-block .filters-wrap ul li a.filter-reset:after,
.ajax-filters li a.filter-reset:after {
    display: none !important;
    content: none !important;
}

.ajax-grid-block .filters-wrap ul li a:before,
.ajax-filters li a:before {
    display: none !important;
    content: none !important;
}

/* Filter Chip Count Badge matching site-wide .sdm-chip__count */
.ajax-grid-block .filters-wrap ul li a .sdm-chip__count,
.ajax-filters li a .sdm-chip__count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--sm-surface-alt, #f5f5f5) !important;
    color: var(--sm-muted, #737373) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: var(--sm-radius-pill, 9999px) !important;
    margin-left: 6px !important;
    line-height: 1 !important;
}

.ajax-grid-block .filters-wrap ul li a.is-active .sdm-chip__count,
.ajax-filters li a.is-active .sdm-chip__count {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Hide legacy Meloo filter icons/headings that disrupt editorial flow */
.ajax-grid-block .filter-icon,
.ajax-grid-block .filter-btn-wrap,
.ajax-filters .filter-header {
    display: none !important;
}

/* ==========================================================================
   3. Course Cards (Archive Grid & Fallback System)
   ========================================================================== */

/* Modern Course Grid Wrapper */
.posts-container.ajax-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--sm-space-6, 24px) !important;
    margin-bottom: var(--sm-space-12, 48px) !important;
}

.posts-container .flex-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
}

/* Modern Course Card */
.sdm-course-card {
    display: flex;
    flex-direction: column;
    background: var(--sm-surface, #ffffff) !important;
    border: 1px solid var(--sm-border, #e5e5e5) !important;
    border-radius: var(--sm-radius, 8px);
    overflow: hidden;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;
}

.sdm-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    border-color: #d4d4d4;
}

.sdm-course-card__inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    background: var(--sm-surface, #ffffff) !important;
    background-color: var(--sm-surface, #ffffff) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
}

/* Card Cover (Square 1:1 Aspect Ratio Matching Authentic Course Artwork) */
.sdm-course-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--sm-surface-alt, #f5f5f5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--sm-border, #e5e5e5);
}

.sdm-course-card__cover a {
    display: block;
    width: 100%;
    height: 100%;
}

.sdm-course-card__cover img,
.sdm-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--sm-transition-fast, 200ms ease);
}

.sdm-course-card:hover .sdm-course-card__cover img,
.sdm-course-card:hover .sdm-course-card__img {
    transform: scale(1.025);
}

/* Editorial Fallback Pattern when featured image is absent */
.sdm-course-card__cover--fallback {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    text-align: center;
    padding: 24px;
}

.sdm-course-card__cover--fallback a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.sdm-course-card__cover-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    opacity: 0.9;
    color: var(--sm-accent, #c92a2a);
}

.sdm-course-card__cover-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

/* Card Body */
.sdm-course-card__body {
    padding: var(--sm-space-5, 20px);
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--sm-surface, #ffffff) !important;
    background-color: var(--sm-surface, #ffffff) !important;
    box-sizing: border-box;
}

/* Badges Row */
.sdm-course-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sdm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--sm-radius-full, 9999px);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none !important;
    transition: all 150ms ease;
}

.sdm-badge:focus-visible {
    outline: 2px solid var(--sm-accent, #c92a2a);
    outline-offset: 2px;
}

.sdm-badge--category {
    background: var(--sm-surface-alt, #f5f5f5);
    color: var(--sm-foreground, #171717);
    border: 1px solid var(--sm-border, #e5e5e5);
}

.sdm-badge--category:hover,
a.sdm-badge--category:hover {
    background: var(--sm-accent-light, #fef2f2);
    color: var(--sm-accent, #c92c2c) !important;
    border-color: var(--sm-accent, #c92c2c);
    text-decoration: none !important;
}

.sdm-badge--category:focus-visible,
a.sdm-badge--category:focus-visible {
    outline: 2px solid var(--sm-accent, #c92a2a);
    outline-offset: 2px;
}

.sdm-badge--level {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fee2e2;
}

.sdm-badge--level:hover,
a.sdm-badge--level:hover {
    background: #991b1b;
    color: #ffffff !important;
    border-color: #991b1b;
    text-decoration: none !important;
}

.sdm-badge--level:focus-visible,
a.sdm-badge--level:focus-visible {
    outline: 2px solid #991b1b;
    outline-offset: 2px;
}

/* Card Title */
.sdm-course-card__title {
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.sdm-course-card__title a {
    color: var(--sm-foreground, #111111) !important;
    text-decoration: none;
    transition: color 150ms ease;
}

.sdm-course-card__title a:hover {
    color: var(--sm-accent, #c92a2a) !important;
}

/* Card Meta (Lessons, Date) */
.sdm-course-card__meta {
    font-size: 0.8125rem;
    color: var(--sm-muted, #737373) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sm-border, #f0f0f0);
}

.sdm-course-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sdm-course-card__meta-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* ==========================================================================
   4. Single Course Page Shell & Header
   ========================================================================== */

.sdm-single-course {
    background-color: var(--sm-background, #fcfcfc);
    color: var(--sm-foreground, #171717);
    padding: var(--sm-space-6, 24px) 0 var(--sm-space-12, 48px) 0;
}

/* Breadcrumbs */
.sdm-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--sm-muted, #737373);
    margin-bottom: var(--sm-space-6, 24px);
}

.sdm-breadcrumbs a {
    color: var(--sm-muted, #737373);
    text-decoration: none;
    transition: color 150ms ease;
}

.sdm-breadcrumbs a:hover {
    color: var(--sm-foreground, #171717);
}

.sdm-breadcrumbs__sep {
    color: #a3a3a3;
    font-size: 0.75rem;
}

/* Course Header (Modern Editorial Hero) */
.sdm-course-header {
    background: var(--sm-surface, #ffffff);
    border: 1px solid var(--sm-border, #e5e5e5);
    border-radius: var(--sm-radius-md, 8px);
    padding: var(--sp-6, 24px) var(--sp-8, 32px);
    margin-bottom: var(--sp-5, 24px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.sdm-course-header--with-cover {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-6, 24px);
}

.sdm-course-header__cover {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: var(--sm-radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--sm-border, #e5e5e5);
    background-color: var(--sm-surface-alt, #f5f5f5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.sdm-course-header__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sdm-course-header__main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sdm-course-header__title {
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 8px 0 16px 0;
    color: var(--sm-foreground, #171717);
    letter-spacing: -0.015em;
}

.sdm-course-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--sm-muted, #737373);
    padding-top: 14px;
    border-top: 1px solid var(--sm-border, #f0f0f0);
    margin-top: auto;
}

.sdm-course-header__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   5. Course Content & WonderPlugin Audio Modern Re-skin
   ========================================================================== */

/* Hide empty broken images from KingComposer */
.kc_image_empty,
img[src*="get_start.jpg"] {
    display: none !important;
}

/* Course Content Prose & Typography */
.sdm-course-content {
    margin-bottom: var(--sm-space-8, 32px);
    color: var(--sm-foreground, #171717);
    font-family: var(--sm-font, sans-serif);
    line-height: 1.7;
}

/* Zero out KingComposer container/column padding and wrap margins/width so content aligns with .sdm-course-header */
.sdm-course-content .kc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sdm-course-content .kc-wrap-columns {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sdm-course-content .kc-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.sdm-course-content .kc_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sdm-course-content p {
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
}

.sdm-course-content h1,
.sdm-course-content h2,
.sdm-course-content h3 {
    color: var(--sm-foreground, #171717);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Suppress only the duplicate top cover image inside course content when hero has cover */
.sdm-single-course--has-cover .sdm-course-content section.kc_row:first-of-type .kc_single_image {
    display: none !important;
}
.sdm-single-course--has-cover .sdm-course-content > section.kc_row:first-of-type:has(.kc_single_image):not(:has(.kc_text_block)):not(:has(.wonderpluginaudio)):not(:has(.mp3-listing-container)):not(:has(.kc-raw-code)) {
    display: none !important;
}

/* Suppress KingComposer empty spacers / clear rows that create massive gaps */
.sdm-course-content div[style*="clear: both"][style*="height"],
.sdm-course-content .kc_spacing {
    display: none !important;
}

/* Compact top margin for TRDS mp3 listing container inside course */
.sdm-course-content .mp3-listing-container {
    margin-top: var(--sp-4, 16px) !important;
}

/* Audio Player Card & Lessons Heading (Courses, Static Pages, and Single Posts) */
.sdm-course-content .wonderpluginaudio,
.sdm-page-content .wonderpluginaudio,
.sdm-article-content .wonderpluginaudio,
.sdm-prose .wonderpluginaudio,
.sdm-course-content div[id^="wonderpluginaudio-"],
.sdm-page-content div[id^="wonderpluginaudio-"],
.sdm-article-content div[id^="wonderpluginaudio-"],
.sdm-prose div[id^="wonderpluginaudio-"],
.sdm-course-player-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: var(--sm-surface, #ffffff) !important;
    background-color: var(--sm-surface, #ffffff) !important;
    background-image: none !important;
    border: 1px solid var(--sm-border, #e5e7eb) !important;
    border-radius: var(--sm-radius-lg, 16px) !important;
    padding: 24px 28px !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Prevent double nesting card if wonderpluginaudio is ever wrapped in sdm-course-player-container */
.sdm-course-player-container .wonderpluginaudio,
.sdm-course-player-container div[id^="wonderpluginaudio-"] {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sdm-course-content .wonderpluginaudio::before,
.sdm-page-content .wonderpluginaudio::before,
.sdm-article-content .wonderpluginaudio::before,
.sdm-prose .wonderpluginaudio::before,
.sdm-course-content div[id^="wonderpluginaudio-"]::before,
.sdm-page-content div[id^="wonderpluginaudio-"]::before,
.sdm-article-content div[id^="wonderpluginaudio-"]::before,
.sdm-prose div[id^="wonderpluginaudio-"]::before,
.sdm-course-player-title {
    content: "Enregistrements & Leçons audio";
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--sm-foreground, #0f172a);
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sm-border, #f1f5f9);
}

.sdm-course-player-container .wonderpluginaudio::before,
.sdm-course-player-container div[id^="wonderpluginaudio-"]::before {
    display: none !important;
}

/* Eliminate empty 100x100 artwork placeholder and generic WP audio icon while preserving legitimate artwork */
.wonderpluginaudio .amazingaudioplayer-image:empty,
.wonderpluginaudio .amazingaudioplayer-image:not(:has(img)),
.wonderpluginaudio .amazingaudioplayer-image:has(img[src=""]),
.wonderpluginaudio .amazingaudioplayer-image:has(img[src*="wp-includes/images/media/audio.png"]),
.wonderpluginaudio .amazingaudioplayer-image:has(img[src*="default.png"]),
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image:empty,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image:not(:has(img)),
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image:has(img[src=""]),
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image:has(img[src*="wp-includes/images/media/audio.png"]),
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image:has(img[src*="default.png"]) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Legitimate artwork formatting if present */
.wonderpluginaudio .amazingaudioplayer-image img,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-image img {
    border-radius: 8px;
    margin-right: 16px;
    margin-bottom: 12px;
}

.wonderpluginaudio .amazingaudioplayer-text,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-text,
.amazingaudioplayer-text {
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.wonderpluginaudio .amazingaudioplayer-title,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-title,
.amazingaudioplayer-title {
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--sm-foreground, #0f172a) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.wonderpluginaudio .amazingaudioplayer-info,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-info,
.amazingaudioplayer-info {
    display: block !important;
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 0.875rem !important;
    font-style: normal !important;
    color: var(--sm-muted, #64748b) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Hide duplicate repeated title in subtitle row and redundant auto-generated ID3 description on Player 1 */
.amazingaudioplayer-info-title,
.amazingaudioplayer-info-description:empty,
#wonderpluginaudio-1 .amazingaudioplayer-info-description {
    display: none !important;
}

.wonderpluginaudio .amazingaudioplayer-info-description,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-info-description {
    color: var(--sm-muted, #64748b) !important;
    font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 0.875rem !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

.amazingaudioplayer-info-share {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.amazingaudioplayer-info:empty {
    display: none !important;
}

/* Modern sleek horizontal flexbar for audio controls */
.wonderpluginaudio .amazingaudioplayer-bar,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-bar,
.amazingaudioplayer-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    gap: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
}

/* Modern Circular Play / Pause Button with Brand Red */
.wonderpluginaudio .amazingaudioplayer-playpause,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-playpause,
.amazingaudioplayer-playpause {
    order: 1 !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.wonderpluginaudio .amazingaudioplayer-play,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-play,
.amazingaudioplayer-play {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #d32424 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='7 4 19 12 7 20 7 4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    box-shadow: 0 4px 12px rgba(211, 36, 36, 0.35) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.wonderpluginaudio .amazingaudioplayer-play:hover,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-play:hover,
.amazingaudioplayer-play:hover {
    background-color: #b91c1c !important;
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 6px 16px rgba(211, 36, 36, 0.45) !important;
}

.wonderpluginaudio .amazingaudioplayer-pause,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-pause,
.amazingaudioplayer-pause {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #d32424 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    box-shadow: 0 4px 12px rgba(211, 36, 36, 0.35) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.wonderpluginaudio .amazingaudioplayer-pause:hover,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-pause:hover,
.amazingaudioplayer-pause:hover {
    background-color: #b91c1c !important;
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 6px 16px rgba(211, 36, 36, 0.45) !important;
}

/* Modern Previous / Next Buttons */
.wonderpluginaudio .amazingaudioplayer-prev,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-prev,
.amazingaudioplayer-prev {
    order: 2 !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20' fill='%23475569'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.wonderpluginaudio .amazingaudioplayer-prev:hover,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-prev:hover,
.amazingaudioplayer-prev:hover {
    border-color: #d32424 !important;
    background-color: #fff5f5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d32424' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='19 20 9 12 19 4 19 20' fill='%23d32424'/%3E%3Cline x1='5' y1='19' x2='5' y2='5'/%3E%3C/svg%3E") !important;
    transform: scale(1.04) !important;
}

.wonderpluginaudio .amazingaudioplayer-next,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-next,
.amazingaudioplayer-next {
    order: 3 !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4' fill='%23475569'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.wonderpluginaudio .amazingaudioplayer-next:hover,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-next:hover,
.amazingaudioplayer-next:hover {
    border-color: #d32424 !important;
    background-color: #fff5f5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d32424' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 4 15 12 5 20 5 4' fill='%23d32424'/%3E%3Cline x1='19' y1='5' x2='19' y2='19'/%3E%3C/svg%3E") !important;
    transform: scale(1.04) !important;
}

/* Modern Progress Bar */
.wonderpluginaudio .amazingaudioplayer-progress,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-progress,
.amazingaudioplayer-progress {
    order: 4 !important;
    flex: 1 1 200px !important;
    height: 6px !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    margin: 0 8px !important;
    box-shadow: none !important;
}

.amazingaudioplayer-progress-loaded {
    background: #cbd5e1 !important;
    height: 100% !important;
    border-radius: 999px !important;
}

.amazingaudioplayer-progress-played {
    background: #d32424 !important;
    height: 100% !important;
    border-radius: 999px !important;
}

/* Modern Time Display */
.wonderpluginaudio .amazingaudioplayer-time,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-time,
.amazingaudioplayer-time {
    order: 5 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    font-size: 0.8125rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
    color: #64748b !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: none !important;
    line-height: normal !important;
}

/* Modern Volume Control */
.wonderpluginaudio .amazingaudioplayer-volume,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-volume,
.amazingaudioplayer-volume {
    order: 6 !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
}

.amazingaudioplayer-volume-button {
    width: 28px !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'%3E%3C/polygon%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.15s ease !important;
}

.amazingaudioplayer-volume-button:hover {
    opacity: 1 !important;
}

.amazingaudioplayer-volume-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 6px !important;
}

.amazingaudioplayer-volume-bar-adjust {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
}

.amazingaudioplayer-volume-bar-adjust-active {
    background: #d32424 !important;
    border-radius: 4px !important;
}

/* Loop button */
.wonderpluginaudio .amazingaudioplayer-loop,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-loop,
.amazingaudioplayer-loop {
    order: 7 !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'%3E%3C/polyline%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'%3E%3C/path%3E%3Cpolyline points='7 23 3 19 7 15'%3E%3C/polyline%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease !important;
}

.amazingaudioplayer-loop:hover {
    opacity: 1 !important;
}

.wonderpluginaudio .amazingaudioplayer-bar-buttons-clear,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-bar-buttons-clear,
.amazingaudioplayer-bar-buttons-clear {
    display: none !important;
}

/* Modern Tracklist Container */
.wonderpluginaudio .amazingaudioplayer-tracklist-container,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-tracklist-container,
.amazingaudioplayer-tracklist-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* All WonderPlugin playlists: cross-browser native wheel/touch scrolling.
   Do not switch overflow off when WonderPlugin injects a custom scrollbar. */
.wonderpluginaudio .amazingaudioplayer-tracks-wrapper,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-tracks-wrapper {
    height: auto !important;
    max-height: 340px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
}
.wonderpluginaudio .amascrollbar,
div[id^="wonderpluginaudio-"] .amascrollbar {
    display: none !important;
}
@media (max-width: 700px) {
    .wonderpluginaudio .amazingaudioplayer-tracks-wrapper,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-tracks-wrapper {
        max-height: 420px !important;
    }
}

.amazingaudioplayer-tracks {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Modern Tracklist Items */
.amazingaudioplayer-track-item {
    display: flex !important;
    align-items: center !important;
    padding: 13px 18px !important;
    gap: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 0.9375rem !important;
    text-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.amazingaudioplayer-track-item:last-child {
    border-bottom: none !important;
}

.amazingaudioplayer-track-item:hover {
    background: #f8fafc !important;
}

/* Active Track Styling */
.amazingaudioplayer-track-item-active {
    background: rgba(211, 36, 36, 0.05) !important;
    border-left: 3px solid #d32424 !important;
}

.amazingaudioplayer-track-item-active .amazingaudioplayer-item-id {
    background: #d32424 !important;
    color: #ffffff !important;
}

.amazingaudioplayer-track-item-active .amazingaudioplayer-item-title {
    color: #d32424 !important;
    font-weight: 600 !important;
}

/* Track Number Pill */
.amazingaudioplayer-item-id {
    order: 1 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    font-family: ui-monospace, SFMono-Regular, monospace !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
}

/* Track Title */
.amazingaudioplayer-item-title {
    order: 2 !important;
    flex: 1 1 auto !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.45 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Track Info & Action Buttons (Download & Share) */
.amazingaudioplayer-item-info {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
}

.wonderaudio-button-link,
.wonderaudio-download-link,
.amazingaudioplayer-info-share a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
}

/* Unified High-Specificity WonderPlugin Action Buttons (Download & Share) */
.wonderpluginaudio .wonderaudio-button,
div[id^="wonderpluginaudio-"] .wonderaudio-button,
div[id^="wonderpluginaudio-"] .wonderaudio-download,
div[id^="wonderpluginaudio-"] .wonderaudio-share,
.amazingaudioplayer-track-item .wonderaudio-button,
.amazingaudioplayer-player-wrapper .wonderaudio-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border: 1px solid var(--sm-border, #e2e8f0) !important;
    border-radius: var(--sm-radius-md, 8px) !important;
    background-color: var(--sm-surface, #ffffff) !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sm-text-muted, #64748b) !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.wonderpluginaudio .wonderaudio-button:hover,
div[id^="wonderpluginaudio-"] .wonderaudio-button:hover,
div[id^="wonderpluginaudio-"] .wonderaudio-download:hover,
div[id^="wonderpluginaudio-"] .wonderaudio-share:hover,
.amazingaudioplayer-track-item .wonderaudio-button:hover,
.amazingaudioplayer-player-wrapper .wonderaudio-button:hover {
    background-color: var(--sm-surface-alt, #f8fafc) !important;
    border-color: var(--sm-border-dark, #cbd5e1) !important;
    color: var(--sm-accent, #d32424) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.wonderpluginaudio .wonderaudio-button:focus-visible,
div[id^="wonderpluginaudio-"] .wonderaudio-button:focus-visible,
div[id^="wonderpluginaudio-"] .wonderaudio-download:focus-visible,
div[id^="wonderpluginaudio-"] .wonderaudio-share:focus-visible {
    outline: 2px solid var(--sm-accent, #d32424) !important;
    outline-offset: 1px !important;
}

/* Tracklist Scrollbar */
.amascrollbar {
    background-color: #f1f5f9 !important;
    border-radius: 4px !important;
}

.amascrollthumb {
    background-color: #cbd5e1 !important;
    border-radius: 4px !important;
    transition: background-color 0.15s ease !important;
}

.amascrollthumb:hover {
    background-color: #94a3b8 !important;
}

/* Mobile Responsiveness for Audio Player */
@media (max-width: 768px) {
    .sdm-course-content .wonderpluginaudio,
    .sdm-page-content .wonderpluginaudio,
    .sdm-article-content .wonderpluginaudio,
    .sdm-prose .wonderpluginaudio,
    .sdm-course-content div[id^="wonderpluginaudio-"],
    .sdm-page-content div[id^="wonderpluginaudio-"],
    .sdm-article-content div[id^="wonderpluginaudio-"],
    .sdm-prose div[id^="wonderpluginaudio-"],
    .sdm-course-player-container {
        padding: 16px !important;
        margin-top: 16px !important;
        margin-bottom: 24px !important;
        border-radius: 12px !important;
    }

    .sdm-course-content .wonderpluginaudio::before,
    .sdm-page-content .wonderpluginaudio::before,
    .sdm-article-content .wonderpluginaudio::before,
    .sdm-prose .wonderpluginaudio::before,
    .sdm-course-content div[id^="wonderpluginaudio-"]::before,
    .sdm-page-content div[id^="wonderpluginaudio-"]::before,
    .sdm-article-content div[id^="wonderpluginaudio-"]::before,
    .sdm-prose div[id^="wonderpluginaudio-"]::before,
    .sdm-course-player-title {
        font-size: 1.0625rem !important;
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
        word-break: normal !important;
    }

    .wonderpluginaudio .amazingaudioplayer-bar,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-bar,
    .amazingaudioplayer-bar {
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    .wonderpluginaudio .amazingaudioplayer-playpause,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-playpause,
    .amazingaudioplayer-playpause,
    .wonderpluginaudio .amazingaudioplayer-play,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-play,
    .amazingaudioplayer-play,
    .wonderpluginaudio .amazingaudioplayer-pause,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-pause,
    .amazingaudioplayer-pause {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .wonderpluginaudio .amazingaudioplayer-prev,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-prev,
    .amazingaudioplayer-prev,
    .wonderpluginaudio .amazingaudioplayer-next,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-next,
    .amazingaudioplayer-next {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .wonderpluginaudio .amazingaudioplayer-progress,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-progress,
    .amazingaudioplayer-progress {
        order: 5 !important;
        flex: 1 1 100% !important;
        margin: 6px 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .wonderpluginaudio .amazingaudioplayer-time,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-time,
    .amazingaudioplayer-time {
        order: 4 !important;
        font-size: 0.75rem !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        float: none !important;
        margin: 0 !important;
    }

    .amazingaudioplayer-track-item {
        padding: 12px 12px !important;
        gap: 10px !important;
    }

    .amazingaudioplayer-item-title {
        font-size: 0.875rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
    }
}

/* ==========================================================================
   6. Related Courses Section
   ========================================================================== */

.sdm-related-courses {
    margin-top: var(--sm-space-10, 40px);
    padding-top: var(--sm-space-8, 32px);
    border-top: 1px solid var(--sm-border, #e5e5e5);
}

.sdm-related-courses__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--sm-foreground, #171717);
}

.sdm-related-courses .sdm-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sm-space-6, 24px);
}

/* Hide legacy nightclub navigation */
.post-navigation,
.post-navigation .nav-direction {
    display: none !important;
}

/* ==========================================================================
   7. Responsive Adaptations
   ========================================================================== */

@media (max-width: 768px) {
    .sdm-courses-header__title {
        font-size: 1.75rem;
    }
    
    .sdm-course-header {
        padding: var(--sm-space-5, 20px);
    }

    .sdm-course-header--with-cover {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .sdm-course-header__cover {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .sdm-course-header__badges,
    .sdm-course-card__badges {
        justify-content: center;
    }
    
    .sdm-course-header__title {
        font-size: 1.375rem;
    }

    .sdm-course-header__meta {
        justify-content: center;
    }
    
    .posts-container.ajax-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Native HTML5 Audio Controls inside Editorial Content (Variant 5 Blog Posts & Pages) */
.sdm-prose .wp-block-audio,
.sdm-article-content .wp-block-audio,
.sdm-page-content .wp-block-audio,
.sdm-course-content .wp-block-audio {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
}

.sdm-prose .wp-block-audio audio,
.sdm-article-content .wp-block-audio audio,
.sdm-page-content .wp-block-audio audio,
.sdm-course-content .wp-block-audio audio,
.sdm-prose audio:not([id^="amazingaudioobject-"]):not(.mp3-audio),
.sdm-article-content audio:not([id^="amazingaudioobject-"]):not(.mp3-audio),
.sdm-page-content audio:not([id^="amazingaudioobject-"]):not(.mp3-audio),
.sdm-course-content audio:not([id^="amazingaudioobject-"]):not(.mp3-audio) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0;
    box-sizing: border-box;
}

/* ==========================================================================
   8. Course Taxonomy Archive & Sticky Player Docking
   ========================================================================== */

body.tax-meloo_music_cats,
body.tax-meloo_music_cats2 {
    background-color: var(--sm-background, #fcfcfc) !important;
}

body.tax-meloo_music_cats .page-header,
body.tax-meloo_music_cats2 .page-header {
    display: none !important;
}

/* Scamp Player Safe Docking (z-index 9999) */
#scamp_player {
    z-index: 9999 !important;
}

/* All WonderPlugin playlists: readable titles rather than narrow truncation. */
.wonderpluginaudio .amazingaudioplayer-track-item,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-track-item {
    min-width: 0 !important;
}
.wonderpluginaudio .amazingaudioplayer-item-title,
div[id^="wonderpluginaudio-"] .amazingaudioplayer-item-title {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
}
/* Very small screens: place download/share beneath the full-width lesson title. */
@media (max-width: 420px) {
    .wonderpluginaudio .amazingaudioplayer-track-item,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-track-item {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
        align-items: start !important;
        padding: 12px 10px !important;
    }
    .wonderpluginaudio .amazingaudioplayer-item-id,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-item-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .wonderpluginaudio .amazingaudioplayer-item-title,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-item-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
    }
    .wonderpluginaudio .amazingaudioplayer-item-info,
    div[id^="wonderpluginaudio-"] .amazingaudioplayer-item-info {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin-left: 0 !important;
        gap: 6px !important;
    }
}