:root {
    --nav-offset: 72px;
  } /* adjust to your header height */

  body {
    background: var(--blue-background-light, #eaecf0);
  }

  /* Card shells */
  .card-soft {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  }

  /* =========== LEFT: Title card =========== */
  .title-card {
    padding: 28px;
  }
  .course-title {
    color: var(--gray-darkest, #111);
  }
  .enrolled-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-yellow-light, #fff8db);
    color: var(--gray-darkest, #111);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
  }
  .enrolled-pill .star {
    color: var(--yellow-dark, #edbe01);
  }
  .enrolled-count {
    color: var(--text-secondary, #3d3d3d);
    margin-left: 10px;
  }

  .creator-strip {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 20px -28px -28px;
    padding: 14px 28px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #fff;
  }
  .creator-img {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .meta-muted {
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.9rem;
  }
  .last-updated {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.55);
  }

  /* =========== Tabs bar =========== */
  .tabbar {
    background: #f4f9ff;
    border-radius: 14px;
    padding: 6px;
  }
  .tab-pill {
    background: transparent;
    border: none;
    font-weight: 600;
    color: #6b7280;
    padding: 8px 18px;
    border-radius: 12px;
    transition: all 0.3s ease;
  }
  .tab-pill.active {
    background: #fff;
    color: #111;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .tab-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
  }

  /* Tab Panels */
  .tab-panel {
    display: none;
  }
  .tab-panel.active {
    display: block;
  }

  /* =========== Overview panel =========== */
  /* Learn list wrapper */
  .learn-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  /* Collapsed state */
  .learn-wrapper.collapsed {
    max-height: 180px; /* Set preview height */
  }

  /* Fade effect */
  .learn-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      #fff 90%
    );
  }

  /* Learn items */
  .learn-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    color: #3d3d3d;
  }

  .check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f4ff;
    color: #0070d3;
  }

  /*========Review Tab===========*/

  /* Hide reviews after the first 6 by default */
  .review-item {
    display: none;
  }
  .review-item.visible {
    display: block;
  }
  /* =========== RIGHT: Sticky pricing card =========== */
  .sticky-wrap {
    position: sticky;
    top: var(--nav-offset);
  }
  .media-thumb {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
  .preview-tag {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 600;
    backdrop-filter: blur(2px);
  }
  .price-line {
    padding: 16px 0 8px;
  }
  .price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-darkest, #111);
  }
  .strike {
    color: rgba(0, 0, 0, 0.45);
    text-decoration: line-through;
    margin-left: 10px;
  }
  .disc {
    color: #1a7f37;
    font-weight: 700;
    margin-left: auto;
  }
  .ring {
    border: 1px solid rgba(0, 0, 0, 0.12);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .scarcity {
    color: #b54708;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  .includes li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
    color: var(--text-secondary, #3d3d3d);
  }

  /* small helpers */
  .muted {
    color: rgba(0, 0, 0, 0.55);
  }
  .iconify {
    vertical-align: -0.125em;
  }

  .wishlist-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: #333;
transition: color 0.3s;
}

.wishlist-btn.active .heart-icon {
color: red; /* filled color */
}