.js-course-showcase--v16,.js-course-showcase--v16 *{box-sizing:border-box}
.js-course-showcase--v16{width:100%;clear:both}
.js-cs16-shell{width:100%;max-width:1440px;margin:0 auto}
.js-cs16-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:0 0 24px}
.js-cs16-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-bottom:7px}
.js-cs16-head h2{margin:0;font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.025em}
.js-cs16-head p{margin:9px 0 0;max-width:720px;font-size:14px;line-height:1.55;opacity:.68}
.js-cs16-all{text-decoration:none!important;font-size:13px;font-weight:700;white-space:nowrap}
.js-cs16-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;margin:0!important;padding:0!important}
.js-cs16-card{min-width:0!important;width:100%!important;display:flex!important;flex-direction:column!important;background:#fff;border:1.5px solid rgba(20,55,43,.20);border-radius:14px!important;overflow:hidden!important;box-shadow:0 5px 20px rgba(20,35,30,.065);transition:.22s ease}
.js-cs16-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.10)}
.js-cs16-media{display:block!important;position:relative!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;background:#eef2ef!important;text-decoration:none!important}
.js-cs16-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;margin:0!important;transition:transform .35s ease}
.js-cs16-card:hover .js-cs16-media img{transform:scale(1.03)}
.js-cs16-badge{position:absolute;left:10px;top:10px;max-width:72%;padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.95);font-size:9px;line-height:1.1;font-weight:800;text-transform:uppercase;color:#176b49;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.js-cs16-heart{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0!important;border-radius:50%;background:rgba(255,255,255,.95)!important;box-shadow:0 2px 8px rgba(0,0,0,.10);font-size:20px;line-height:34px;padding:0!important;cursor:pointer;z-index:3}
.js-cs16-heart.is-active{color:#176b49}
.js-cs16-body{display:flex!important;flex:1 1 auto;flex-direction:column!important;padding:15px 15px 14px!important}
.js-cs16-body h3{margin:0 0 9px!important;font-size:16px!important;line-height:1.34!important;font-weight:750!important;min-height:43px!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important}
.js-cs16-body h3 a{text-decoration:none!important;color:inherit!important}
.js-cs16-teacher{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:11px;opacity:.72}
.js-cs16-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#edf4ef;font-size:10px;font-weight:800}
.js-cs16-excerpt{margin:0 0 9px!important;font-size:11px;line-height:1.48;opacity:.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.js-cs16-meta{display:flex;flex-wrap:wrap;gap:6px 11px;align-items:center;min-height:20px;margin-bottom:12px;font-size:10px;opacity:.68}
.js-cs16-meta .rating{font-weight:800;opacity:1}
.js-cs16-footer{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px;margin-top:auto!important;padding-top:13px!important;border-top:1.5px solid rgba(20,55,43,.14)!important}
.js-cs16-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:0 20px;border-radius:8px;box-shadow:0 2px 5px rgba(20,70,50,.12);text-decoration:none!important;font-size:11px;font-weight:800;background:#176b49;color:#fff!important}
.js-cs16-cta:hover{color:#fff!important;opacity:.9}
.js-cs16-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#eaf3ec,#d9e9df);color:#176b49}
.js-cs16-placeholder strong{font-size:20px}.js-cs16-placeholder small{font-size:10px;margin-top:3px}
.js-cs16-empty{padding:35px;text-align:center;border:1px dashed rgba(20,35,30,.18);border-radius:12px}
@media(max-width:1100px){.js-cs16-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:820px){.js-cs16-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.js-cs16-head h2{font-size:28px}}
@media(max-width:560px){
  .js-cs16-head{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:18px}
  .js-cs16-head h2{font-size:25px}
  .js-cs16-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:16px!important;
    overflow:visible!important;
    flex-wrap:initial!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .js-cs16-card{
    display:flex!important;
    flex:initial!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    scroll-snap-align:none!important;
  }
  .js-cs16-media{aspect-ratio:16/9!important}
  .js-cs16-body{padding:16px 16px 15px!important}
  .js-cs16-body h3{font-size:17px!important}
  .js-cs17-plan-name strong{font-size:11px}
  .js-cs17-plan>span{font-size:13px}
  .js-cs16-cta{min-height:40px;padding:0 20px;font-size:11px}
}

.js-cs17-fee{margin:2px 0 10px;padding:9px 10px;border:1px solid rgba(23,107,73,.18);background:#f7faf8;border-radius:9px}
.js-cs17-fee-title{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#176b49;margin-bottom:6px}
.js-cs17-plan-list{display:grid;gap:5px}
.js-cs17-plan{display:flex;align-items:center;justify-content:space-between;gap:8px}
.js-cs17-plan-name{min-width:0;display:flex;flex-direction:column}
.js-cs17-plan-name strong{font-size:10px;line-height:1.25;font-weight:750;color:#24352e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.js-cs17-plan-name small{font-size:8px;line-height:1.25;color:#7a857f}
.js-cs17-plan>span{font-size:12px;font-weight:850;color:#176b49;white-space:nowrap}

@media(max-width:380px){
  .js-cs16-grid{grid-template-columns:1fr!important}
  .js-cs16-card{width:100%!important}
  .js-cs16-media{aspect-ratio:16/9!important}
}