.courses-hero {
    max-width: 960px;
    margin: 12px auto 22px;
    padding: 28px 24px;
    border-radius: 18px;
    text-align: center;
}
.courses-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.25rem; }
.courses-grid {
    max-width: 1100px;
    margin: 0 auto calc(var(--bottom-nav-offset, 64px) + 24px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    padding: 0 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.course-card { overflow: hidden; border-radius: 18px; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.course-card-cover { aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, 0.08); }
.course-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.course-card-body h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.course-card-body h2 a { color: inherit; text-decoration: none; }
.course-card-body p { margin: 0; opacity: .8; font-size: .92rem; flex: 1; }
.course-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.course-badge {
    font-size: .75rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(218,178,93,.18);
    color: var(--primary-color, #dab25d);
}
.courses-empty {
    max-width: 860px;
    margin: 0 auto calc(var(--bottom-nav-offset, 64px) + 24px);
    padding: 24px;
    border-radius: 18px;
}

/* ── Course Landing Page ────────────────────────────────────────────── */
.course-landing {
    max-width: 1080px;
    margin: 0 auto calc(var(--bottom-nav-offset, 64px) + 24px);
    padding: 0 clamp(10px, 3vw, 14px);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

/* Hero */
.course-landing__hero {
    position: relative;
    border-radius: clamp(14px, 4vw, 22px);
    overflow: hidden;
    margin-bottom: clamp(14px, 3vw, 24px);
    min-height: clamp(160px, 42vw, 280px);
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, rgba(218,178,93,.18), rgba(0,0,0,.45));
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.course-landing__cover {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.course-landing__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-landing__cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,8,4,.94) 22%, rgba(10,8,4,.55) 58%, rgba(10,8,4,.2));
}
.course-landing__hero-content {
    position: relative;
    z-index: 1;
    padding: clamp(18px, 5vw, 32px) clamp(12px, 4vw, 28px) clamp(14px, 4vw, 28px);
    width: 100%;
    max-width: 720px;
    min-width: 0;
}
.course-landing__kicker {
    font-size: clamp(.68rem, 2.6vw, .8rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary-color, #dab25d);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.course-landing__title {
    margin: 0 0 clamp(8px, 2.5vw, 14px);
    font-size: clamp(1.05rem, 4.8vw, 2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.course-landing__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: clamp(10px, 3vw, 18px);
}
.course-landing__price,
.course-landing__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(218,178,93,.22);
    background: rgba(0,0,0,.28);
    font-size: clamp(.78rem, 3.2vw, .92rem);
    line-height: 1.3;
    max-width: 100%;
    min-width: 0;
}
.course-landing__price {
    font-weight: 800;
    color: var(--primary-color, #dab25d);
    font-size: clamp(.85rem, 3.4vw, 1.05rem);
}
.course-landing__price small { font-size: .72em; font-weight: 600; }
.course-landing__price.is-free { color: #6dd890; border-color: rgba(109,216,144,.35); }
.course-landing__stat {
    font-weight: 600;
    opacity: .92;
    color: #fff;
}
.course-landing__hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.course-landing__hero-cta .btn-gold,
.course-landing__hero-cta .btn-ghost {
    min-height: 44px;
    padding: 10px 16px;
    font-size: .9rem;
    border-radius: 12px;
}

/* Body layout */
.course-landing__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(12px, 3vw, 20px);
    align-items: start;
}
.course-landing__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 16px);
}
.course-landing__section {
    padding: clamp(12px, 3.5vw, 22px) clamp(12px, 3.5vw, 24px);
    border-radius: clamp(12px, 3vw, 18px);
    min-width: 0;
}
.course-landing__section-title {
    font-size: clamp(.92rem, 3.4vw, 1.05rem);
    margin: 0 0 clamp(10px, 2.5vw, 14px);
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color, #dab25d);
}
.course-landing__desc {
    line-height: 1.85;
    opacity: .9;
    font-size: clamp(.84rem, 3.2vw, .95rem);
    overflow-wrap: anywhere;
}
.course-landing__back {
    margin: 0;
    font-size: clamp(.82rem, 3vw, .9rem);
}
.course-landing__back a {
    color: inherit;
    opacity: .85;
    text-decoration: none;
}
.course-landing__back a:hover { opacity: 1; color: var(--primary-color, #dab25d); }

/* Sidebar */
.course-landing__sidebar { min-width: 0; }
.course-landing__buy-card {
    padding: clamp(12px, 3.5vw, 22px);
    border-radius: clamp(14px, 3vw, 20px);
    border: 1px solid rgba(218,178,93,.38);
    background:
        linear-gradient(160deg, rgba(218,178,93,.14), rgba(255,255,255,.03) 55%),
        var(--glass-bg, rgba(218,178,93,.06));
    box-shadow: 0 4px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    position: sticky;
    top: calc(var(--site-header-offset, 72px) + 12px);
    min-width: 0;
}
.course-landing__buy-card::before {
    content: '';
    display: block;
    height: 3px;
    margin: calc(-1 * clamp(12px, 3.5vw, 22px)) calc(-1 * clamp(12px, 3.5vw, 22px)) clamp(10px, 2.5vw, 14px);
    border-radius: clamp(14px, 3vw, 20px) clamp(14px, 3vw, 20px) 0 0;
    background: linear-gradient(90deg, transparent, var(--primary-color, #dab25d), transparent);
    opacity: .75;
}
.course-landing__price-big {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    font-weight: 800;
    color: var(--primary-color, #dab25d);
    margin-bottom: clamp(10px, 2.5vw, 14px);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 5px;
    line-height: 1.2;
}
.course-landing__price-big small { font-size: .55em; font-weight: 600; }
.course-landing__price-big .is-free { color: #6dd890; font-size: clamp(1.1rem, 4.2vw, 1.4rem); }
.course-landing__enrolled-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6dd890;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: clamp(.84rem, 3vw, .95rem);
}
.course-landing__cta-full {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
    min-height: 44px;
    font-size: 0.875rem;
    line-height: 1.25;
    border-radius: 12px;
    box-sizing: border-box;
}
.course-landing__wallet-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: clamp(.78rem, 3vw, .88rem);
    margin-bottom: 10px;
    opacity: .9;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.course-landing__wallet-row strong { color: var(--primary-color, #dab25d); }
.course-landing__fav {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    min-height: 44px;
    font-size: clamp(.82rem, 3vw, .92rem);
}
.course-landing__features {
    list-style: none;
    margin: clamp(10px, 2.5vw, 16px) 0 0;
    padding: clamp(10px, 2.5vw, 12px) 0 0;
    border-top: 1px solid rgba(218,178,93,.16);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: clamp(.74rem, 2.8vw, .83rem);
    opacity: .85;
}
.course-landing__features li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
}
.course-landing__features i {
    color: var(--primary-color, #dab25d);
    width: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Curriculum list (landing — scoped to avoid player.css bleed) */
.course-landing .course-curriculum {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.course-landing .course-curriculum__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "num icon info action";
    align-items: center;
    gap: 6px 10px;
    padding: clamp(8px, 2.5vw, 12px) clamp(8px, 2.5vw, 10px);
    border-radius: 12px;
    border: 1px solid rgba(218, 178, 93, 0.12);
    background: rgba(0,0,0,.12);
    min-width: 0;
    transition: background .15s, border-color .15s;
}
.course-landing .course-curriculum__item.is-open:hover {
    background: rgba(218,178,93,.08);
    border-color: rgba(218,178,93,.24);
}
.course-landing .course-curriculum__item.is-locked {
    opacity: .92;
}
.course-landing .course-curriculum__num {
    grid-area: num;
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-size: clamp(.68rem, 2.6vw, .78rem);
    opacity: .55;
    font-variant-numeric: tabular-nums;
}
.course-landing .course-curriculum__icon {
    grid-area: icon;
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: clamp(.82rem, 3vw, .95rem);
}
.course-landing .course-curriculum__item.is-open .course-curriculum__icon { color: var(--primary-color, #dab25d); }
.course-landing .course-curriculum__item.is-locked .course-curriculum__icon { color: rgba(218,178,93,.45); }
.course-landing .course-curriculum__info {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.course-landing .course-curriculum__name {
    font-size: clamp(.82rem, 3.2vw, .92rem);
    overflow-wrap: anywhere;
    line-height: 1.4;
    font-weight: 700;
}
.course-landing .course-curriculum__item.is-locked .course-curriculum__name { opacity: .78; }
.course-landing .course-curriculum__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.course-landing .course-curriculum__badges .course-badge {
    font-size: clamp(.64rem, 2.4vw, .72rem);
    padding: 2px 7px;
}
.course-landing .course-curriculum__action {
    grid-area: action;
    flex: 0 1 auto;
    min-width: 0;
    justify-self: end;
}
.course-landing .course-curriculum__lock-badge {
    font-size: clamp(.64rem, 2.4vw, .72rem);
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(218,178,93,.1);
    border: 1px solid rgba(218,178,93,.2);
    color: rgba(218,178,93,.7);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    line-height: 1.35;
    text-align: center;
}
.course-landing .course-curriculum__lock-badge i { flex-shrink: 0; font-size: .85em; }
.course-landing .course-curriculum__play {
    min-height: 44px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.82rem, 3vw, .9rem);
    border-radius: 10px;
    white-space: nowrap;
}

.course-buy-box {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(218,178,93,.42);
    background:
        linear-gradient(165deg, rgba(218,178,93,.16), rgba(255,255,255,.03) 58%),
        var(--glass-bg, rgba(218,178,93,.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
    min-width: 0;
}
.course-buy-box p { margin: 0 0 8px; }
.course-buy-box strong { color: var(--primary-color, #dab25d); }
.course-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    min-width: 0;
}
.course-buy-actions__form {
    flex: 1 1 140px;
    min-width: 0;
    display: flex;
}
.course-buy-actions__form button { width: 100%; }
.course-buy-actions .btn-gold,
.course-buy-actions .btn-ghost { min-height: 44px; }
.course-enrolled-note { color: var(--primary-color, #dab25d); font-weight: 600; }
.course-curriculum-wrap { margin: 1.5rem 0 0; min-width: 0; }
.course-curriculum-wrap h2 { font-size: 1.15rem; margin: 0 0 8px; }
.spot-license {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(218, 178, 93, 0.28);
    background: rgba(218, 178, 93, 0.08);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.spot-license__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}
.spot-license__label { font-size: .82rem; opacity: .8; }
.spot-license__code {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    overflow-wrap: anywhere;
    color: var(--primary-color, #dab25d);
}
.spot-license__copy { flex-shrink: 0; }
.spot-license__help,
.spot-license__missing {
    margin: 8px 0 0;
    font-size: .86rem;
    line-height: 1.6;
}
.spot-license__missing { color: #e8a0a0; font-weight: 600; }
.spot-license__link { display: inline-block; margin-top: 8px; font-size: .86rem; }
.fav-toggle.is-favorited { border-color: rgba(218,178,93,.8); }

[data-theme="light"] .course-card-cover {
    background: #e8dfcf;
}

[data-theme="light"] .course-buy-box {
    background:
        linear-gradient(165deg, rgba(201, 162, 55, 0.16), rgba(250, 244, 232, 0.78)),
        var(--glass-bg, rgba(250, 244, 232, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.85);
}

[data-theme="light"] .spot-license__missing {
    color: #b45353;
}

[data-theme="light"] .course-landing__buy-card {
    box-shadow: 0 4px 24px rgba(55, 38, 12, 0.10), inset 0 1px 0 rgba(255, 250, 240, 0.85);
}
[data-theme="light"] .course-landing .course-curriculum__item {
    background: rgba(250, 244, 232, 0.62);
    border-color: rgba(201, 162, 55, 0.28);
}
[data-theme="light"] .course-landing__price,
[data-theme="light"] .course-landing__stat {
    background: rgba(250, 244, 232, 0.82);
}

@media (max-width: 900px) {
    .course-landing__body {
        grid-template-columns: 1fr;
    }
    .course-landing__buy-card {
        position: static;
    }
    /* Purchase card first on mobile/tablet — hero CTAs hidden to avoid duplicate actions */
    .course-landing__sidebar { order: -1; }
    .course-landing__hero-cta { display: none; }
}

@media (min-width: 768px) and (max-width: 900px) {
    .course-landing__body {
        grid-template-columns: minmax(0, 1.1fr) minmax(240px, 320px);
    }
    .course-landing__sidebar { order: 0; }
    .course-landing__hero-cta { display: flex; }
    .course-landing__buy-card { position: sticky; }
}

@media (max-width: 767px) {
    /* Checkout: lock coupon + wallet CTA to one professional height (~44px) */
    .coupon-apply__row,
    .course-buy-actions {
        flex-direction: column;
        align-items: stretch;
    }

    input.coupon-apply__input,
    .coupon-apply__btn {
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        box-sizing: border-box;
        padding: 0 12px;
        line-height: 1.25;
        font-size: 0.875rem;
    }

    /* 16px avoids iOS zoom; vertical padding 0 keeps box at 44px */
    input.coupon-apply__input {
        font-size: 16px;
        line-height: 42px;
    }

    .course-landing__cta-full,
    .course-buy-actions .btn-gold,
    .course-buy-actions .btn-ghost {
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 14px;
        font-size: 0.875rem;
        line-height: 1.25;
        box-sizing: border-box;
        justify-content: center;
    }

    .course-buy-actions__form {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .courses-hero { padding: 16px 12px; }
    .courses-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0;
        margin-bottom: calc(var(--bottom-nav-offset, 64px) + 16px);
    }
    .course-card-body { padding: 12px 12px 14px; }
    .courses-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .courses-hero-cta .btn-gold,
    .courses-hero-cta .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .courses-empty {
        padding: 14px 12px;
        margin-bottom: calc(var(--bottom-nav-offset, 64px) + 16px);
    }
    .course-landing .course-curriculum__item {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "num icon info"
            "action action action";
        gap: 6px 8px;
        align-items: start;
    }
    .course-landing .course-curriculum__action {
        justify-self: stretch;
        width: 100%;
        margin-top: 2px;
    }
    .course-landing .course-curriculum__play,
    .course-landing .course-curriculum__lock-badge {
        width: 100%;
        justify-content: center;
    }
    .course-landing .course-curriculum__lock-badge {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .course-landing { padding: 0 10px; }
    .course-landing__hero { min-height: 150px; }
    .course-landing__hero-content { padding: 14px 12px 12px; }
    .course-landing__section,
    .course-landing__buy-card { padding: 12px; }
    .course-landing__buy-card::before {
        margin-left: -12px;
        margin-right: -12px;
        margin-top: -12px;
    }
    .coupon-apply { margin: 8px 0 2px; }
    .coupon-apply__label { font-size: .8rem; margin-bottom: 4px; }
}

.coupon-apply {
    margin: 10px 0 4px;
    min-width: 0;
}
.coupon-apply__label {
    display: block;
    font-size: .86rem;
    margin-bottom: 6px;
    opacity: .9;
}
.coupon-apply__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.coupon-apply__input {
    flex: 1 1 140px;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(218,178,93,.42);
    background: rgba(0,0,0,.12);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    box-sizing: border-box;
}
.coupon-apply__btn {
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    line-height: 1.25;
    box-sizing: border-box;
}
.coupon-apply__clear {
    opacity: .88;
}
.coupon-apply__msg,
.coupon-apply__price {
    margin: 8px 0 0;
    font-size: .88rem;
}
.coupon-apply__msg.is-error { color: #e07070; }
.coupon-apply__price { color: var(--primary-color, #dab25d); font-weight: 700; }
.course-buy-actions .btn-gold:disabled,
.course-landing__cta-full:disabled {
    opacity: .55;
    cursor: not-allowed;
}