/* ══════════════════════════════════════════════════════════════════════
   EduGrowth — фирменный стиль страницы товара /shop/{slug}
   Бренд-бук: navy #211D62 · градиент #7C4CE1→#9463F4 · акцент #6d28d9 · #ed538a
   Префикс .egp- (EduGrowth Product). База общая, вариации — .egp--course / .egp--good.
   Держит один язык с eg-nav / eg-footer (header-edugrowth.php).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --egp-navy:    #211D62;
  --egp-accent:  #6d28d9;
  --egp-accent2: #ed538a;
  --egp-g1:      #7C4CE1;
  --egp-g2:      #9463F4;
  --egp-ink:     #2b2540;
  --egp-mut:     #6f6790;
  --egp-mut2:    #9089a6;
  --egp-line:    #ece9f5;
  --egp-soft:    #f8f6fd;
  --egp-soft2:   #faf9fd;
}

.egp { color: var(--egp-ink); }
.egp .container { max-width: 1080px; }

/* ── Хлебные крошки ─────────────────────────────────────────────────── */
.egp-crumbs { padding: 5.6rem 0 0; font-size: .86rem; color: var(--egp-mut2); }
.egp-crumbs a { color: var(--egp-mut); text-decoration: none; }
.egp-crumbs a:hover { color: var(--egp-accent); }
.egp-crumbs span { margin: 0 .4rem; opacity: .5; }

/* ── Макет: слева контент, справа sticky-карточка ───────────────────── */
/* Одна сетка на всю страницу — правый столбец липнет по всей высоте левого. */
.egp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem;
  align-items: start; padding: 1.6rem 0 3.5rem; }
.egp-main { min-width: 0; }

/* ── Hero (внутри левой колонки) ────────────────────────────────────── */
.egp-hero__main { min-width: 0; margin-bottom: 2.4rem; }
.egp-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .02em; color: var(--egp-accent); background: #f1ecfb; padding: .28rem .7rem;
  border-radius: 20px; margin-bottom: .9rem; }
.egp-eyebrow--live { color: #1b6b3a; background: #e7f7ec; }
.egp-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 .7rem; }
.egp-sub { font-size: 1.12rem; color: var(--egp-mut); line-height: 1.5; margin: 0 0 1.3rem; }
.egp-intro { font-size: 1.02rem; line-height: 1.65; color: #423b5c; margin: 0 0 1.4rem; }
.egp-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .9rem; color: var(--egp-mut);
  padding-top: 1.1rem; border-top: 1px solid var(--egp-line); }
.egp-meta__item { display: inline-flex; align-items: center; gap: .4rem; }
.egp-meta__item i { width: 15px; height: 15px; color: var(--egp-accent); }

/* ── Карточка покупки (sticky) ──────────────────────────────────────── */
.egp-buy { position: sticky; top: 84px; background: #fff; border: 1px solid var(--egp-line);
  border-radius: 18px; padding: 1.5rem; box-shadow: 0 18px 44px rgba(33,29,98,.08); }
.egp-buy__price { font-size: 2rem; font-weight: 800; color: var(--egp-navy); line-height: 1; }
.egp-buy__price small { font-size: .8rem; font-weight: 500; color: var(--egp-mut2); }
.egp-buy__early { margin: .55rem 0 0; font-size: .82rem; font-weight: 700; color: #1b6b3a;
  background: #e7f7ec; padding: .35rem .6rem; border-radius: 9px; display: inline-block; }
.egp-buy__full { color: var(--egp-mut2); text-decoration: line-through; font-size: 1rem;
  font-weight: 600; margin-left: .5rem; }
.egp-buy__cta { display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: 100%; margin-top: 1.2rem; padding: .85rem 1rem; border-radius: 11px; border: none;
  background: linear-gradient(135deg, var(--egp-g1), var(--egp-g2)); color: #fff; font-weight: 700;
  font-size: 1rem; text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s; }
.egp-buy__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.egp-buy__cta--soft { background: #fff; color: var(--egp-accent); border: 1.5px solid #e2d8fa; }
.egp-buy__owned { margin-top: 1.2rem; padding: .8rem; border-radius: 11px; background: #e7f7ec;
  color: #1b6b3a; font-weight: 700; font-size: .92rem; text-align: center; }
.egp-buy__soon { margin-top: 1.2rem; padding: .8rem; border-radius: 11px; background: var(--egp-soft);
  color: var(--egp-mut); font-size: .88rem; text-align: center; line-height: 1.5; }
.egp-buy__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.egp-buy__list li { display: flex; gap: .5rem; font-size: .88rem; color: #423b5c; line-height: 1.4; }
.egp-buy__list i { width: 15px; height: 15px; color: var(--egp-accent); flex: none; margin-top: .15rem; }
.egp-buy__note { margin: 1rem 0 0; font-size: .78rem; color: var(--egp-mut2); line-height: 1.5; text-align: center; }

/* ── Секции контента (в левой колонке) ──────────────────────────────── */
/* main.css вешает clamp(4rem,7vw,8rem) padding на голый тег <section> — гасим,
   ритм секций держим на margin. Класс (0,1,0) бьёт тег (0,0,1).
   Ширину задаёт колонка макета — свой max-width секциям не нужен. */
.egp-sec { max-width: none; margin: 0 0 2.6rem; padding: 0; }
.egp-sec > h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 1.1rem; }
.egp-sec > h2 .egp-sec__hint { font-weight: 500; font-size: .9rem; color: var(--egp-mut2); margin-left: .5rem; }

/* Боль / для кого — карточки-строки */
.egp-pain { display: grid; gap: .6rem; }
.egp-pain li { list-style: none; display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem;
  background: var(--egp-soft2); border: 1px solid var(--egp-line); border-radius: 11px;
  font-size: .96rem; color: #423b5c; line-height: 1.45; }
.egp-pain li i { width: 17px; height: 17px; color: var(--egp-accent2); flex: none; margin-top: .12rem; }
.egp-pain { padding: 0; margin: 0; }

/* Уроки — нумерованный список */
.egp-lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.egp-lesson { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--egp-line); }
.egp-lesson:last-child { border-bottom: none; }
.egp-lesson__n { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: var(--egp-accent); background: #f1ecfb; font-size: 1.05rem; }
.egp-lesson__t { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .3rem; }
.egp-lesson__e { font-size: .93rem; color: var(--egp-mut); line-height: 1.5; margin: 0; }

/* Что получите / что внутри — галочки */
.egp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.egp-checks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem;
  color: #3c3552; line-height: 1.5; }
.egp-checks li i { width: 18px; height: 18px; color: #1b6b3a; flex: none; margin-top: .16rem; }

/* Комплект материалов курса — якорная карточка (§5.1, ступень 2 лестницы) */
.egp-bundle { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; padding: 1rem 1.2rem;
  border: 1.5px solid #e2d8fa; border-radius: 14px; background: linear-gradient(135deg, #f6f1fe, #faf8ff);
  text-decoration: none; color: var(--egp-ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.egp-bundle:hover { border-color: var(--egp-accent); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(109,40,217,.12); }
.egp-bundle__ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--egp-accent); box-shadow: 0 4px 12px rgba(109,40,217,.14); }
.egp-bundle__ico i { width: 20px; height: 20px; }
.egp-bundle__txt { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.egp-bundle__title { font-weight: 700; font-size: 1rem; }
.egp-bundle__sub { font-size: .88rem; color: var(--egp-mut); }
.egp-bundle__save { color: #1b6b3a; font-weight: 700; }
.egp-bundle__arr { width: 18px; height: 18px; flex: none; color: var(--egp-accent); }
.egp-bundle__note { margin: 1rem 0 0; font-size: .92rem; color: #3c3552; background: #e7f7ec;
  border-radius: 11px; padding: .75rem 1rem; line-height: 1.5; }

/* Формат — простой список */
.egp-format { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.egp-format li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem;
  color: var(--egp-mut); line-height: 1.5; }
.egp-format li i { width: 16px; height: 16px; color: var(--egp-accent); flex: none; margin-top: .15rem; }

/* FAQ */
.egp-faq { display: grid; gap: .7rem; }
.egp-faq details { border: 1px solid var(--egp-line); border-radius: 12px; background: #fff;
  overflow: hidden; }
.egp-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; font-size: .98rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.egp-faq summary::-webkit-details-marker { display: none; }
.egp-faq summary::after { content: '+'; color: var(--egp-accent); font-size: 1.3rem; font-weight: 400;
  transition: transform .2s; }
.egp-faq details[open] summary::after { transform: rotate(45deg); }
.egp-faq p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--egp-mut); line-height: 1.6; font-size: .94rem; }

/* Апселл: связанный курс (на странице товара) */
.egp-related { background: linear-gradient(135deg, var(--egp-navy), #362d7a); border-radius: 18px;
  padding: 1.8rem 2rem; color: #fff; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.egp-related__txt { flex: 1; min-width: 240px; }
.egp-related__label { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #b9a8f0; margin: 0 0 .3rem; }
.egp-related__title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .4rem; }
.egp-related__sub { font-size: .95rem; color: #cfc7e6; line-height: 1.5; margin: 0; }
.egp-related__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.3rem;
  border-radius: 10px; background: #fff; color: var(--egp-navy); font-weight: 700; text-decoration: none;
  white-space: nowrap; }
.egp-related__btn:hover { background: #f1ecfb; }

/* Финальный CTA */
.egp-final { text-align: center; background: var(--egp-soft); border: 1px solid var(--egp-line);
  border-radius: 18px; padding: 2.2rem; margin-top: 1rem; }
.egp-final h2 { font-size: 1.4rem; margin: 0 0 .6rem; }
.egp-final p { color: var(--egp-mut); margin: 0 0 1.3rem; line-height: 1.55; }

/* ── Адаптив ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .egp-layout { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 1rem; }
  .egp-hero__main { margin-bottom: 1.6rem; }
  .egp-buy { position: static; }
  .egp-buy__mobile-first { order: -1; }
}
@media (max-width: 560px) {
  .egp-crumbs { padding-top: 5rem; }
  .egp-related { padding: 1.4rem; }
}