/* ============================================================
   ДИЗАЙН-СЛОЙ поверх style.css макета «Доктор Эля»
   Не меняет архитектуру и разметку: только переопределяет
   существующие классы + стили для js/design-layer.js.
   Принципы: брендбук (Arsenal Regular, воздух, органика,
   меньше карточек-панелей), темизация --accent сохраняется.
   ============================================================ */

/* токены --dl-* живут в style.css :root (единый источник токенов) */

/* ---------- типографика: Arsenal Regular, мягко и крупно ---------- */
/* Вес заголовка задаётся ролью, а не слоем: глобальный 400 отсюда делал
   его случайным — он решался тем, дописал ли кто-то локальное правило,
   и по сайту набралось 14 разных сигнатур заголовка. Тонкое начертание
   осталось там, где оно роль: витрина товара ниже и «тихий серифный»
   (цитата на тёмном, баланс корзины) в refine.css. */
h1,h2,h3,h4{letter-spacing:0;line-height:1.1}
.block h2{font-size:clamp(30px,4vw,48px);margin-bottom:36px}
.pbar h1{font-weight:400;font-size:clamp(40px,5.6vw,72px);margin-bottom:18px}
.pbar .lede{font-size:var(--fs-lg);max-width:50ch}

/* ---------- воздух ---------- */
.pbar{padding:64px 0 46px}
.block{padding:76px 0}
.reviews{padding:76px 0}

/* ---------- баннер продукта: обложка-арка ---------- */
.pbar__media{aspect-ratio:4/4.4;min-height:340px;border-radius:230px 230px 26px 26px}
.pbar__grid{gap:56px}
.smart-note{background:var(--lavender-soft);color:var(--violet)}

/* ---------- «Для кого»: лавандовая панель + мягкие пункты ---------- */
.forwhom{background:linear-gradient(165deg,var(--lav-card),var(--lav-card-2));border-radius:40px;
  padding:40px;gap:16px}
.forwhom div{background:var(--glass-soft);border:0;border-radius:22px;box-shadow:none;
  padding:24px 26px;font-family:'Arsenal';font-size:20px;line-height:1.38;color:var(--ink);
  gap:18px;align-items:center;transition:transform .45s var(--dl-ease),background .3s}
.forwhom div:hover{transform:translateY(-4px);background:#fff}
.forwhom div b{flex:0 0 auto;width:44px;height:44px;border-radius:999px;
  background:var(--terra-soft);color:var(--terra-ink);font-size:19px;
  display:grid;place-items:center}
@media(max-width:760px){.forwhom{padding:22px}}

/* ---------- лекторы: без панелей, фото-арки ---------- */
.lectors{gap:0 64px}
.lector{background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:30px 2px;border-top:1px solid var(--dl-hairline)}
.lector .ph{flex:0 0 112px;height:136px;border-radius:64px 64px 16px 16px}
.lector b{font-weight:400;font-size:var(--fs-h3)}
.lector p{font-size:var(--fs-note)}

/* ---------- аккордеоны: мягкие крем-плашки, открытая — лавандовая ---------- */
.accordion{gap:14px}
.acc{background:var(--dl-cream-deep);border:0;border-radius:var(--radius);box-shadow:none;
  transition:background .4s,box-shadow .4s}
.acc:hover{box-shadow:var(--lift)}
.acc.open{background:linear-gradient(155deg,var(--lav-card),var(--lav-card-2))}
.acc__head{padding:26px 30px;font-family:'Arsenal';font-weight:400;font-size:var(--fs-h3);
  transition:color .3s}
.acc__head:hover{color:var(--violet)}
.acc__head .pm{width:40px;height:40px;background:rgba(255,255,255,.85);
  transition:transform .5s var(--dl-ease),background .4s}
.acc.open .acc__head .pm{background:var(--lavender);color:#fff}
.acc__body{transition:max-height .5s var(--dl-ease)}
.acc__body div{padding:0 30px 30px;max-width:66ch;font-size:var(--fs-sm)}

/* ---------- тарифы: крем-панель + тёмная инверсия у хита ---------- */
.tariffs{gap:24px;max-width:860px}
.tariff{background:var(--dl-cream-deep);border:0;border-radius:32px;padding:40px 38px;
  transition:transform .55s var(--dl-ease),box-shadow .55s var(--dl-ease)}
.tariff:hover{transform:translateY(-7px)}
.tariff h3{font-size:22px}
.tariff .tp{font-weight:400;font-size:42px;margin:10px 0 24px}
.tariff ul li{font-size:15px;padding:3px 0}
.tariff.hit{background:linear-gradient(155deg,var(--dl-night),var(--night-2));border:0}
.tariff.hit h3,.tariff.hit .tp{color:var(--cream)}
.tariff.hit ul li{color:#CBBFE3}
.tariff.hit ul li::before{color:var(--lavender)}
.tariff.hit .btn{background:var(--cream);color:var(--violet);box-shadow:var(--shadow-sm)}
/* кремовая кнопка не вспыхивает на ночной карточке и сохраняет контраст */
.tariff.hit .btn:hover{background:var(--cream);color:var(--ink-deep);transform:translateY(-1px);
  box-shadow:var(--lift)}
.tariff .hit-badge{background:var(--terra)}

/* ---------- отзывы: мягче, цитаты Arsenal ---------- */
.rev-card{border:0;box-shadow:var(--shadow)}
.rev-card p{font-size:var(--fs-note)}
.rev-card .stars,.rev-vmeta .stars{color:var(--terra-ink)}
.rev-vmeta p{font-family:'Arsenal';font-style:normal;font-size:17px;color:var(--ink)}

/* ---------- похожие: фото-арки с подписью, не карточки ---------- */
.related{gap:26px}
.rel{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
  transition:transform .5s var(--dl-ease)}
.rel:hover{transform:translateY(-8px);box-shadow:none}
.rel .img{aspect-ratio:3/3.5;border-radius:150px 150px 18px 18px;overflow:hidden;
  box-shadow:var(--shadow)}
.rel .b{padding:16px 4px 0}
.rel .b b{font-family:'Arsenal';font-weight:400;font-size:var(--fs-lg);margin-bottom:3px}
.rel .b .p{font-weight:600}

/* ---------- лид-захват: тёмная панель с фирменными линиями ---------- */
.pnewsletter{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--dl-night),var(--night-2));
  border-radius:40px;padding:64px 48px}
.pnewsletter::before{content:"";position:absolute;inset:0;
  background:url("../assets/cover-lines.edbb8a824af3.svg") center/cover no-repeat;opacity:.3;mix-blend-mode:soft-light}
.pnewsletter>*{position:relative;z-index:1}
.pnewsletter .field{border-color:rgba(253,247,235,.55);background:rgba(253,247,235,.09);color:var(--cream)}
.pnewsletter .field::placeholder{color:rgba(217,207,235,.65)}
.pnewsletter .field:focus{border-color:var(--violet);box-shadow:var(--field-ring)}
/* .pnewsletter p (style.css) красит абзацы белым и перебивал цвет отказа:
   на розовой плашке выходил белый текст, причину подписки не прочесть */
.pnewsletter .dj-error{color:var(--error);max-width:480px;margin-left:auto;margin-right:auto}

/* ---------- кнопки: заливка при hover + нажатие ---------- */
.btn{position:relative;overflow:hidden;
  transition-property:transform,box-shadow,background-color,border-color,color,letter-spacing;
  transition-duration:.55s;transition-timing-function:cubic-bezier(.4,.05,.2,1)}
.btn>*{position:relative;z-index:1}
/* Ховер меняет глубину, а не цвет плашки. Раньше здесь снизу выезжала
   заливка ::after (градиент, у ghost — сплошной #F0DCFF): приём читается
   дёшево, кнопка превращалась в цветной прямоугольник. Теперь тон уходит
   в фирменные чернила, добавляется растворённая лавандовая тень и подъём
   на пиксель — материал отзывается, а не перекрашивается. */
.btn:hover{transform:translateY(-1px);background:var(--accent-deep)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--ghost:hover{background:transparent;color:var(--ink);
  border-color:var(--violet)}
.btn--terra:hover{background:var(--terra-ink)}

/* ---------- reveal (классы вешает design-layer.js) ---------- */
.dl-rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--dl-ease),transform .85s var(--dl-ease);
  transition-delay:calc(var(--dl-i,0)*.09s)}
.dl-rv.dl-in{opacity:1;transform:none}

/* ---------- sticky buy-bar (создаёт design-layer.js) ---------- */
/* Появляется мягко: короткий подъём с проявлением, а не выезд из-за края.
   Выезд на 130% по --dl-ease (экспонента: почти весь путь за первые ~0.1 с)
   читался прыжком (Даня 07.10: «очень резко появляется при прокруте»).
   Уходит тем же путём. visibility с задержкой на уход: спрятанная, но
   прозрачная панель не перехватывает клики и Tab у низа экрана.
   Нажатия снимает pointer-events — сразу, с первого кадра ухода: visibility
   гаснет только к концу, а у кнопки внутри ещё и свой переход visibility
   (glow.css), и прозрачная панель ловила тап ~0.6 с — «Положить в корзину?»
   вместо страницы (r85) */
.dl-buybar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-buybar);
  transform:translateY(24px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .6s cubic-bezier(.33,1,.68,1),opacity .45s ease,visibility 0s linear .6s}
.dl-buybar.show{transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .6s cubic-bezier(.33,1,.68,1),opacity .45s ease,visibility 0s}
.dl-buybar .in{max-width:720px;margin:14px auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:12px 12px 12px 26px;border-radius:999px;
  background:var(--night-solid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--float)}
.dl-buybar .t{font-family:'Arsenal';font-size:18px;color:var(--cream)}
.dl-buybar .p{font-size:var(--fs-mini);color:#B9ABD6}
.dl-buybar .btn{background:var(--cream);color:var(--violet)}
@media(max-width:640px){.dl-buybar .in{margin:10px 14px}.dl-buybar .txt{display:none}}
/* не конфликтуем с плавающей кнопкой пояснений макета */
body:has(.dl-buybar.show) .notes-fab{bottom:96px}
/* Панель накрывала нижнюю строку подвала. Запаса под ней в подвале больше
   нет — на последнем экране она уезжает сама (body.at-foot, foot-end.js). */

/* ============================================================
   V2 — премиум-заход (шаги 2-5 согласованного плана):
   живые изображения, типографический ритм, единая иконография,
   motion по скроллу, хедер.
   ============================================================ */

/* ---------- 1. живые изображения (assets/img/) ---------- */
.pbar__media{background:url("../assets/img/hero-cover.7d633ead7838.webp") center/cover no-repeat;
  box-shadow:var(--float)}
.pbar__media::before,.pbar__media::after{content:none}   /* глушим градиент-заглушку макета */
.lector .ph{background:url("../assets/img/lector.42a24936407a.jpg") center top/cover no-repeat}
.rel:nth-child(1) .img{background:url("../assets/img/rel-lavender.1a00ddd44b60.webp") center/cover no-repeat}
.rel:nth-child(2) .img{background:url("../assets/img/rel-terra.da43b64df7e6.webp") center/cover no-repeat}
.rel:nth-child(3) .img{background:url("../assets/img/rel-sage.e5767840ae57.webp") center/cover no-repeat}
.rel:nth-child(4) .img{background:url("../assets/img/rel-blue.d4f717351597.webp") center/cover no-repeat}
.rel .img::before{content:none}
.pnewsletter{background:linear-gradient(150deg,var(--night-solid),rgba(65,49,106,.86)),
  url("../assets/img/newsletter-bg.99c195b9d3d7.jpg") center/cover no-repeat}
/* главная: живое фото в hero-приветствии и «Об эксперте», слайды — стилы веток */
.hero__media{background:url("../assets/img/lector.42a24936407a.jpg") center 22%/cover no-repeat}
.hero__media .ph{display:none}
.expert__photo{background:url("../assets/img/lector.42a24936407a.jpg") center top/cover no-repeat;
  color:transparent;border-radius:170px 170px 22px 22px;
  box-shadow:var(--shadow)}
.slide:nth-child(1) .slide__media{background:url("../assets/img/rel-lavender.1a00ddd44b60.webp") center/cover}
.slide:nth-child(2) .slide__media{background:url("../assets/img/rel-terra.da43b64df7e6.webp") center/cover}
.slide:nth-child(3) .slide__media{background:url("../assets/img/rel-sage.e5767840ae57.webp") center/cover}
.slide__media .ph{display:none}

/* ---------- 2. типографический ритм (модульная шкала 1.25) ---------- */
.pbar h1{font-size:var(--fs-display);line-height:1.04;margin-bottom:20px}
.pbar .lede{font-size:19px;line-height:1.62;color:var(--muted)}
.block h2,.reviews h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.01em}
.price-row{margin:26px 0 14px;align-items:baseline}
.pbuy{margin-top:30px}
.rel .b .p{font-size:var(--fs-sm)}
.rev-card p{line-height:1.65}

/* ---------- 3. единая иконография (никаких текстовых глифов) ---------- */
/* галочки списков тарифов и smart-note — SVG-маской, один стиль штриха 1.8 */
.tariff ul li::before,.smart-note::before{
  content:"";display:inline-block;width:17px;height:17px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/contain no-repeat}
.smart-note{display:inline-flex;align-items:center;gap:10px}
.tariff ul li{display:flex;align-items:baseline;gap:11px}
.tariff ul li::before{transform:translateY(2px);color:var(--lavender)}
.tariff.hit ul li::before{color:var(--lavender)}
/* плюс/минус аккордеона — рисуем сами, глиф из макета прячем */
.acc__head .pm{position:relative;color:transparent!important}
.acc__head .pm::before,.acc__head .pm::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.8px;border-radius:2px;background:var(--violet);
  transform:translate(-50%,-50%);transition:transform .45s var(--dl-ease)}
.acc__head .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc.open .acc__head .pm::before{background:#fff}
.acc.open .acc__head .pm::after{background:#fff;transform:translate(-50%,-50%) rotate(0deg)}

/* ---------- 4. motion: параллакс арок по скроллу (CSS scroll-driven) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pbar__media{animation:dl-drift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    .rel .img img,.rel .img{will-change:transform}
    .rel .img{animation:dl-drift-sm linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
  }
}
@keyframes dl-drift{from{transform:translateY(26px)}to{transform:translateY(-26px)}}
@keyframes dl-drift-sm{from{transform:translateY(14px)}to{transform:translateY(-14px)}}

/* ---------- 5. хедер: премиальная линия ---------- */
.topbar{background:var(--dl-night);font-size:var(--fs-mini);letter-spacing:.05em}
.header{transition:box-shadow .4s,background .4s}
.header.dl-scrolled{background:var(--cream-glass);
  box-shadow:var(--shadow-sm)}
.header__in{padding:15px 0}
.header__nav{gap:30px}
.header__nav a{font-size:var(--fs-note);letter-spacing:.015em;opacity:.85;padding:6px 0}
.header__nav a::after{content:"";position:absolute;left:0;right:auto;bottom:0;height:2px;width:0;
  border-radius:2px;background:var(--lavender);transition:width .4s var(--dl-ease)}
.header__nav a:hover::after{width:100%}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .dl-rv,.btn,.tariff,.rel,.dl-buybar,.acc__head .pm,.acc__body{
    transition:none!important}
  .dl-rv{opacity:1;transform:none}
  .pbar__media,.rel .img{animation:none!important}
}

/* ============================================================
   DJANGO-АДАПТЕР: классы боевых шаблонов (dj-*), которых нет
   в макете. Стиль — те же плашки/радиусы/тени бренда.
   ============================================================ */
main{min-height:58vh}

/* реальные обложки в карточках и баннере продукта */
.pcard__img,.pbar__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit}
.pcard__cover{position:relative}
.pcard__cover .pcard__title{position:relative;z-index:2}
.pcard__cover:has(.pcard__img)::before,.pcard__cover:has(.pcard__img)::after{content:none}
.pcard__cover:has(.pcard__img) .pcard__title{color:#fff;
  text-shadow:var(--text-shade)}
.pbar__media{position:relative;overflow:hidden}

/* панель */
.container--narrow2{max-width:760px}
.dj-panel{background:#fff;border-radius:32px;padding:38px 40px;
  box-shadow:var(--shadow)}
@media(max-width:640px){.dj-panel{padding:24px 20px}}

/* строки заказа/корзины */
.dj-lines{list-style:none;margin:0;padding:0}
.dj-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 2px;border-bottom:1px solid var(--dl-hairline)}
.dj-lines li:last-child{border-bottom:0}
.dj-lines small{display:block;margin-top:3px}
.dj-lines b{font-family:'Arsenal';font-weight:400;font-size:20px;white-space:nowrap}
.dj-total{border-top:1.6px solid var(--violet);margin-top:6px}
.dj-total span{font-family:'Arsenal';font-size:21px}
.cart-remove{flex:0 0 auto;align-self:center}
.cart-remove__btn{background:none;border:0;cursor:pointer;font-size:22px;line-height:1;
  color:var(--dl-hairline,#c9bede);padding:4px 6px;transition:color .15s}
.cart-remove__btn:hover{color:var(--violet)}
.cart-continue{margin-top:14px;text-align:center}

/* формы */
.dj-error{background:var(--error-soft);color:var(--error);border-radius:var(--r-small);
  padding:12px 16px;font-size:14px;margin-bottom:14px}
.field{border:1.4px solid var(--field-line);border-radius:14px;padding:13px 16px;font:inherit;background:#fff}
.field:focus{outline:none;border-color:var(--violet);box-shadow:var(--field-ring)}

.dj-progress{height:6px;border-radius:var(--r-pill);background:var(--lavender-soft);overflow:hidden;margin:6px 0}
.dj-progress i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--lavender),var(--violet))}
.dj-chip{font-size:var(--fs-mini);font-weight:600;border-radius:var(--r-pill);padding:6px 14px;white-space:nowrap}
.dj-chip--active,.dj-chip--lifetime{background:var(--sage);color:var(--green)}
.dj-chip--expired{background:var(--error-soft);color:var(--error)}
.dj-chip--archived{background:var(--line);color:var(--muted)}

.lesson-file{color:var(--violet);text-decoration:underline;text-underline-offset:3px}

/* контент уроков и описаний (richtext/streamfield) */
/* ССЫЛКА В ТЕКСТЕ — роль: акцент с подчёркиванием. В потоке чтения
   ссылка обязана отличаться не только цветом: правовые страницы и статьи
   читают люди, которым важно видеть, куда можно нажать. */
.prose{max-width:66ch;line-height:1.65;font-size:var(--fs-md)}
.prose a,.art__prose a{color:var(--violet);
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(86,61,135,.45);
  transition:color var(--dur-quick) var(--ease-ui),
             text-decoration-color var(--dur-quick) var(--ease-ui)}
.prose a:hover,.art__prose a:hover{
  color:var(--accent-deep);text-decoration-color:currentColor}
.prose p{margin:0 0 14px}
.prose img{border-radius:18px;margin:14px 0;height:auto}
.prose iframe,.prose video{max-width:100%;border-radius:18px}
.prose h2,.prose h3{margin:22px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}

/* хвосты */
.dj-panel a{color:var(--violet)}
.footer .logo img{height:40px}

/* Узкие экраны: min-height обложки-арки (340px при aspect-ratio 4/4.4) задавал
   ширину 309px там, где контейнер даёт всего 284px — правый край картинки
   срезался экраном. Высоту на телефоне считаем от ширины. */
@media(max-width:560px){
  .pbar__media{min-height:0;width:100%}
}