/* Smile Lab USA — статья блога в дизайне hellopepti (/learn/<slug>).
   Обёртка поверх экспорта темы: слова, картинки и порядок DOM не меняются,
   меняются контейнеры, сетка, типографика и анимации (tools/pepti-wrap-blog.py).

   Механики — их точным кодом из docs/pepti-design/mechanics/article-body.css
   и product-faq.css (Tailwind-правила, резолвнутые по классам фрагмента).
   Все rem переведены в px по их базе 16px, потому что на этой странице
   html{font-size:62.5%}:
     --spacing 4px · text-xs 12/16 · sm 14/20 · base 16/24 · 3xl 30/36 ·
     4xl 36/40 · 5xl 48/1 · radius-xl 12 · 2xl 16 · 3xl 24 · [2rem] 32 ·
     leading-relaxed 1.625 · transition 150ms cubic-bezier(.4,0,.2,1).
   Цвета их → наши токены (sl-pepti.css): #0c2f25→--ink, #1f5145→--ink-2,
   gray-900→--dark, #e8ff70→--accent, #d8e9e0→--ribbon-mist,
   #f3f8f4/#e9f2ec/#dcebe3→--mist-grad.

   Раскладка их Learn-статьи → наша:
     hero (eyebrow · h1 · описание · «Medically reviewed»)  → картинка · дата · h1 · share
     intro-карточка (стекло bg-white/60)                     → абзацы до первого h2
     секция по h2: eyebrow «—» · h2 display · белая карточка
       с рядами (eyebrow-подзаголовок + prose)               → каждая h2-секция
     «Common questions» аккордеон                            → .slqa (data-q/data-a)
     «Next step» CTA                                         → aside.slbcta
   Подключается после sl-pepti.css только на blogs/<blog>/<article>.html. */

:root {
  --pp-gray-200: #e5e7eb;
  --pp-gray-300: #d1d5dc;
  --pp-gray-400: #99a1af;
  --pp-gray-500: #6a7282;
  --pp-gray-600: #4a5565;
  --pp-gray-700: #364153;
  --pp-ease: cubic-bezier(.4, 0, .2, 1);
  --pp-card-shadow: 0 24px 55px -40px rgba(12, 47, 37, .55);
  --pp-glass-shadow: 0 18px 40px -28px rgba(12, 47, 37, .4);
}

/* ------------------------------------------------ страница и шапка темы ---- */
/* Шапка темы скрыта: верх вставляет sl-pepti-chrome.js (их плашка + пилюля). */
.section-header { display: none !important; }
.has-pp-chrome body { padding-top: 0; }
/* «Get a Free Quote» (инлайн-плашка темы вне main): на главной её нет */
button.sl-fab { display: none !important; }
main.pp-art {
  /* их <section class="px-3 pt-6"> под фикс-верхом: 80px сверху, 12px по бокам */
  padding: 80px 12px 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  counter-reset: ppsec;
}
main.pp-art .page-width, main.pp-art .page-width--narrow { max-width: none !important; margin: 0 !important; padding: 0 !important; }
main.pp-art .shopify-section { padding: 0; }
main.pp-art a { text-decoration: none; }
/* анимации темы (Dawn scroll-trigger / eComposer) выключены — появление делает sl-pepti.js */
main.pp-art .scroll-trigger, main.pp-art .ecom-animation { animation: none !important; opacity: 1 !important; transform: none !important; }
main.pp-art .article-template > *:first-child { margin-top: 0 !important; }

/* ---------------------------------------------------------- панели ---- */
/* их: relative isolate overflow-hidden rounded-[2rem] border border-black/5 p-6 sm:p-10 lg:p-14
   + лента svg absolute left-1/2 -z-10 h-full w-[560px] opacity-70 lg:left-[76%] · секции через pt-6 */
main.pp-art .pp-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 32px; border: 1px solid rgba(0, 0, 0, .05);
  padding: 24px; margin: 0 0 24px;
  background: var(--mist-grad);
}
main.pp-art .pp-panel > .pp-ribbon { opacity: .7; }
main.pp-art .pp-panel__in { position: relative; z-index: 10; }
main.pp-art .pp-panel--accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, #fff) 0%, var(--accent-soft-2) 100%); }
main.pp-art .pp-panel--accent > .pp-ribbon { opacity: .9; }
/* дети панели: их mt-7 после заголовка, 16px между карточками */
main.pp-art .pp-panel__in > * { margin-top: 0; margin-bottom: 16px; }
main.pp-art .pp-panel__in > :last-child { margin-bottom: 0; }
main.pp-art .pp-panel.fade-in { transform: translateY(24px); }
main.pp-art .pp-panel.fade-in.visible { transform: none; }
main.pp-art .pp-panel--hero.fade-load { animation-delay: .1s; }

/* ----------------------------------------------------- типографика ---- */
/* eyebrow: mb-3 inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.25em] text-black */
main.pp-art .pp-eyebrow,
main.pp-art .pp-panel--sec > .pp-panel__in::before,
main.pp-art .article-template header .circle-divider,
main.pp-art .slb-crumb,
main.pp-art .ecom-base__breadcrumbs {
  display: block; margin: 0 0 12px;
  font-family: var(--font-body); font-size: 11px; line-height: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .25em; color: #000;
}
/* номер секции вместо их повторённого названия статьи: слова не добавляем */
main.pp-art .pp-panel--sec { counter-increment: ppsec; }
main.pp-art .pp-panel--sec > .pp-panel__in::before { content: '— ' counter(ppsec, decimal-leading-zero); }
/* h2 секции: display mb-7 max-w-[24ch] text-3xl leading-[1.05] text-ink sm:text-4xl */
main.pp-art .pp-panel--sec > .pp-panel__in > h2,
main.pp-art .pp-panel--sec > .pp-panel__in > .ecom-block:first-child :is(h2, h3, h4),
main.pp-art .pp-panel--intro > .pp-panel__in > h2 {
  display: block; max-width: 24ch; margin: 0 0 28px !important; padding: 0 !important;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -.02em !important;
  color: var(--ink) !important; text-transform: none !important; text-align: left !important;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; border: 0 !important;
}
/* :not(.pp-shine) — блик рисует градиент фоном через background-clip:text, его трогать нельзя */
main.pp-art .pp-panel__in :is(h2, h3, h4):not(.pp-shine) { background: none !important; }

/* ===================================================== 1. hero-панель */
/* фото статьи → их плашка-фигура: rounded-[1.75rem] border-white/60 shadow (product-hero) */
main.pp-art .article-template__hero-container {
  max-width: none !important; margin: 0 0 20px !important; overflow: hidden; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 24px 55px -30px rgba(20, 50, 38, .45);
}
main.pp-art .article-template__hero-adapt img { object-fit: cover; }
/* header: дата над заголовком (визуально, через order; DOM не трогаем), всё по центру */
main.pp-art .article-template header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 0 !important; padding: 0 !important;
}
main.pp-art .article-template header .circle-divider { order: -1; margin: 0 0 12px; }
main.pp-art .article-template header .circle-divider::before { content: '— '; }
main.pp-art .article-template header .circle-divider::after { display: none !important; content: none !important; }
main.pp-art .article-template header time { font: inherit; color: inherit; letter-spacing: inherit; }
/* h1: display text-4xl leading-[1.02] tracking-tight text-ink (sm: 5xl) */
main.pp-art h1.article-template__title,
main.pp-art .pp-panel--hero h1,
main.pp-art .pp-panel--hero h1.ecom__heading,
main.pp-art .pp-panel--hero h1.ecom-shopify__article--title-text {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 36px !important; line-height: 1.02 !important; letter-spacing: -.025em !important;
  color: var(--ink) !important; text-align: center !important; text-wrap: balance; text-transform: none !important;
}
/* share → их контурная пилюля: rounded-full border-gray-300 px-4 py-2 text-[12px] font-bold */
main.pp-art .article-template__social-sharing { display: flex; justify-content: center; margin: 20px 0 0 !important; padding: 0 !important; }
main.pp-art .share-button { display: block; }
main.pp-art .share-button summary.share-button__button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--pp-gray-300); background: rgba(255, 255, 255, .6);
  font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--dark);
  cursor: pointer; transition: background-color .15s var(--pp-ease), color .15s var(--pp-ease);
}
main.pp-art .share-button summary.share-button__button:hover { background: var(--dark); color: #fff; text-decoration: none; }
main.pp-art .share-button .icon-share { height: 12px; min-width: 13px; margin: 0; }
main.pp-art .share-button__fallback { position: static; margin-top: 12px; }
main.pp-art .share-button__fallback .field__input {
  font-family: var(--font-body); font-size: 13px; border-radius: 999px; padding: 12px 16px; background: #fff;
}
/* slb-шаблон: крошка, h1, подпись, фото, лид */
main.pp-art .slb-wrap { max-width: none !important; margin: 0 !important; padding: 0 !important; }
main.pp-art .slb-crumb { margin: 0 0 12px !important; padding: 0 !important; text-align: center; }
main.pp-art .slb-crumb::before { content: '— '; }
main.pp-art .slb-crumb a { color: inherit; text-decoration: none !important; border: 0; }
main.pp-art .slb-meta { margin: 12px 0 0 !important; font-size: 12px; line-height: 16px; font-weight: 500; text-align: center; color: color-mix(in srgb, var(--ink) 55%, transparent); }
main.pp-art img.slb-hero { width: 100%; height: auto !important; margin: 20px 0 0 !important; border-radius: 28px !important; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 24px 55px -30px rgba(20, 50, 38, .45); object-fit: cover; }
main.pp-art .slb-lead { max-width: 36rem; margin: 20px auto 0 !important; font-family: var(--font-body); font-size: 16px !important; line-height: 1.625; font-weight: 500 !important; text-align: center; color: color-mix(in srgb, var(--ink) 80%, transparent) !important; }
/* eComposer-шаблон: хлебные крошки (с полным названием статьи — в капителе слишком тяжело) →
   тихая строка 12px как их «Medically reviewed by …»; подзаголовок h2 → описание */
main.pp-art .ecom-base__breadcrumbs {
  justify-content: center; flex-wrap: wrap; text-align: center; max-width: 36rem; margin-left: auto; margin-right: auto;
  font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--ink) 55%, transparent);
}
main.pp-art .ecom-base__breadcrumbs__list { display: inline; }
main.pp-art .ecom-base__breadcrumbs a, main.pp-art .ecom-base__breadcrumbs span { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; text-decoration: none !important; }
main.pp-art .ecom-base__breadcrumbs a:last-child { color: var(--ink) !important; font-weight: 600; }
main.pp-art .ecom-base__breadcrumbs--icon { display: inline-flex; vertical-align: middle; margin: 0 4px; }
main.pp-art .ecom-base__breadcrumbs--icon svg { width: 10px; height: 10px; }
main.pp-art .pp-panel--hero .ecom-block .ecom__heading:is(h2, h3) {
  max-width: 36rem; margin: 16px auto 0 !important; padding: 0 !important;
  font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.625 !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-align: center; color: color-mix(in srgb, var(--ink) 80%, transparent) !important;
}
main.pp-art .ecom-shopify__article--tags-items:empty, main.pp-art .ecom-shopify__article--tags { margin: 0 !important; padding: 0 !important; }

/* ===================================================== 2. карточки prose */
/* intro — их стеклянная карточка: rounded-3xl border-white/70 bg-white/60 p-6 shadow backdrop-blur sm:p-7 */
main.pp-art .pp-panel--intro .pp-prose {
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .6);
  padding: 24px; box-shadow: var(--pp-card-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
main.pp-art .pp-panel--intro .pp-prose > p:first-child b,
main.pp-art .pp-panel--intro .pp-prose .text-content > p:first-child b { font-size: 16px; line-height: 1.5; }
/* тело секции — их белая карточка: overflow-hidden rounded-3xl border-gray-200 bg-white shadow; ряды px-6 py-5 sm:px-7 */
main.pp-art .pp-panel--sec .pp-prose, main.pp-art .pp-panel--faq .pp-prose {
  overflow: hidden; border-radius: 24px; border: 1px solid var(--pp-gray-200); background: #fff;
  padding: 20px 24px; box-shadow: var(--pp-card-shadow);
}
/* learn-prose: 14px / 1.7, gray-700; жирное — ink; ссылки — ink-2 с подчёркиванием */
main.pp-art .pp-prose, main.pp-art .pp-prose p, main.pp-art .pp-prose li, main.pp-art .pp-prose .text-content,
main.pp-art .pp-prose .text-content p, main.pp-art .pp-prose .text-content div, main.pp-art .pp-prose .text-content li {
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.7 !important;
  font-weight: 400 !important; letter-spacing: 0 !important; color: var(--pp-gray-700) !important; text-align: left !important;
}
main.pp-art .pp-prose p { margin: 0 0 14px !important; padding: 0 !important; }
main.pp-art .pp-prose > :last-child, main.pp-art .pp-prose .text-content > :last-child { margin-bottom: 0 !important; }
main.pp-art .pp-prose :is(b, strong) { color: var(--ink) !important; font-weight: 700 !important; }
main.pp-art .pp-prose a {
  color: var(--ink-2) !important; font: inherit !important; font-weight: 600 !important; text-decoration: underline !important;
  text-underline-offset: 2px; transition: color .15s var(--pp-ease);
}
main.pp-art .pp-prose a:hover { color: var(--ink) !important; }
/* h3/h4 внутри секции → их eyebrow ряда: text-[11px] font-bold uppercase tracking-[0.25em] text-ink-2, ряды через border */
main.pp-art .pp-prose :is(h3, h4, h5) {
  display: block; margin: 0 0 8px !important; padding: 0 !important;
  font-family: var(--font-body) !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .25em !important; color: var(--ink-2) !important; background: none !important;
}
main.pp-art .pp-prose :is(h3, h4, h5)::before { content: '— '; }
main.pp-art .pp-prose :is(h3, h4, h5):not(:first-child) { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid var(--pp-gray-200); }
/* списки: ul — их буллеты «Key takeaways» (точка sage), ol — номера 01/02 display */
main.pp-art .pp-prose ul, main.pp-art .pp-prose ol { margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; }
main.pp-art .pp-prose li { position: relative; margin: 0 0 10px !important; padding: 0 0 0 20px !important; }
main.pp-art .pp-prose li:last-child { margin-bottom: 0 !important; }
main.pp-art .pp-prose ul > li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 999px; background: var(--sage); }
main.pp-art .pp-prose ol { counter-reset: ppol; }
main.pp-art .pp-prose ol > li { padding-left: 36px !important; counter-increment: ppol; }
main.pp-art .pp-prose ol > li::before {
  content: counter(ppol, decimal-leading-zero); position: absolute; left: 0; top: .15em;
  font-family: var(--font-display); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--ink-2);
}
main.pp-art .pp-prose li::marker { content: none; }
main.pp-art .pp-prose img { width: 100%; height: auto; margin: 4px 0 14px; border-radius: 16px; }
main.pp-art .pp-prose blockquote { margin: 0 0 14px; padding: 0 0 0 16px; border-left: 2px solid var(--sage); }

/* ---------------------------------------------- картинки между карточками ---- */
/* их фигура: rounded-3xl overflow-hidden shadow-[0_24px_55px_-30px_rgba(20,50,38,0.3)] */
main.pp-art .pp-panel__in > img, main.pp-art .pp-panel__in > div > img,
main.pp-art .pp-panel__in > .ecom-block .ecom-base-image img {
  display: block; width: 100% !important; height: auto !important; border-radius: 24px; box-shadow: 0 24px 55px -30px rgba(20, 50, 38, .3);
}
main.pp-art .ecom-base-image figure { margin: 0 !important; }
main.pp-art .ecom-base-image .ecom-image-content-position, main.pp-art .ecom-base-image .slov { overflow: hidden; border-radius: 24px; }
main.pp-art .ecom-base-image .ecom-image-content-position img { box-shadow: none; border-radius: 0; }
main.pp-art .ecom-base-image .ecom-image-content-position { box-shadow: 0 24px 55px -30px rgba(20, 50, 38, .3); }

/* ------------------------------------------------- таблицы и шаги (.slsteps) ---- */
/* секция → та же белая карточка; её заголовок → eyebrow ряда */
main.pp-art section.slsteps {
  margin: 0 0 16px !important; padding: 20px 24px !important; border: 1px solid var(--pp-gray-200) !important; border-radius: 24px !important;
  background: #fff !important; box-shadow: var(--pp-card-shadow); overflow: hidden; width: auto !important;
}
main.pp-art .pp-panel__in > section.slsteps:last-child, main.pp-art .pp-prose section.slsteps:last-child { margin-bottom: 0 !important; }
main.pp-art .slsteps .slsteps__title {
  display: block; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important;
  font-family: var(--font-body) !important; font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .25em !important; color: var(--ink-2) !important; background: none !important;
}
main.pp-art .slsteps .slsteps__title::before { content: '— '; }
main.pp-art .slsteps__scroll { overflow-x: auto; margin: 0; padding: 0; -webkit-overflow-scrolling: touch; }
/* таблица → их «Formulation»: строки через border-black/5, ключ font-bold text-ink, значение gray-600 */
main.pp-art section.slsteps.slsteps--table table {
  width: 100% !important; min-width: 0 !important; max-width: none; table-layout: auto; border-collapse: collapse; margin: 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.4; background: none; box-shadow: none;
}
main.pp-art section.slsteps.slsteps--table :is(th, td) { min-width: 0 !important; max-width: none !important; white-space: normal !important; box-shadow: none !important; }
main.pp-art section.slsteps.slsteps--table caption { display: none; }
main.pp-art section.slsteps.slsteps--table thead th {
  padding: 0 10px 10px 0; border: 0; border-bottom: 1px solid var(--pp-gray-200); background: none; text-align: left; vertical-align: bottom;
  font-size: 10px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--pp-gray-500);
}
main.pp-art section.slsteps.slsteps--table tbody th, main.pp-art section.slsteps.slsteps--table td {
  padding: 11px 10px 11px 0; border: 0; border-top: 1px solid var(--pp-gray-200); background: none; text-align: left; vertical-align: top;
  font-size: 13px; line-height: 1.4; color: var(--pp-gray-700); font-weight: 400;
}
main.pp-art section.slsteps.slsteps--table tbody tr:first-child > * { border-top: 0; }
main.pp-art section.slsteps.slsteps--table tr > *:last-child { padding-right: 0; }
main.pp-art section.slsteps.slsteps--table tbody th { font-weight: 700; color: var(--ink); }
main.pp-art section.slsteps.slsteps--table td.i1-n { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
main.pp-art .slsteps .slsteps__note { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 12px !important; line-height: 1.5; color: var(--pp-gray-500) !important; }
/* шаги с иконками → ряды их карточки: бокс иконки rounded-xl bg-sage-soft, b 15px, span 13px */
main.pp-art .slsteps .slsteps__list { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: none !important; box-shadow: none !important; }
main.pp-art .slsteps .slsteps__list > li {
  display: grid !important; grid-template-columns: 56px 1fr !important; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  margin: 0 !important; padding: 14px 0 !important; border: 0 !important; border-top: 1px solid var(--pp-gray-200) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; outline: 0 !important;
}
main.pp-art .slsteps .slsteps__list > li:first-child { border-top: 0 !important; padding-top: 0 !important; }
main.pp-art .slsteps .slsteps__list > li:last-child { padding-bottom: 0 !important; }
/* у иконок белый фон в самом png — плашка без внутреннего отступа, с тонкой рамкой */
main.pp-art .slsteps .slsteps__ico { grid-row: 1 / 3; width: 56px !important; height: 56px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--pp-gray-200); padding: 0 !important; object-fit: cover; box-shadow: none; }
main.pp-art .slsteps .slsteps__list > li b { margin: 0; font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.375 !important; font-weight: 700 !important; color: var(--ink) !important; }
main.pp-art .slsteps .slsteps__list > li span { margin: 2px 0 0; font-family: var(--font-body) !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--pp-gray-700) !important; }

/* ------------------------------------------------------ FAQ-аккордеон ---- */
/* их product-faq: карточка rounded-3xl border-white/70 bg-white/60 p-5 backdrop-blur-sm shadow-[0_18px_40px_-28px_rgba(12,47,37,0.4)]
   вопрос text-[15px] font-bold leading-snug text-ink · плюс h-6 w-6 rounded-full bg-ink text-accent, открыт rotate-45
   ответ mt-3 text-[13px] leading-relaxed text-ink/65 */
main.pp-art .slqa, main.pp-art .slb-faq {
  display: grid; gap: 12px; width: auto; max-width: none; margin: 0 0 16px !important; padding: 0 !important;
  border: 0 !important; border-radius: 0; background: none !important; box-shadow: none;
}
main.pp-art .pp-panel__in > :is(.slqa, .slb-faq):last-child { margin-bottom: 0 !important; }
main.pp-art :is(.slqa, .slb-faq) details {
  margin: 0 !important; padding: 20px !important; border: 1px solid rgba(255, 255, 255, .7) !important; border-radius: 24px !important;
  background: rgba(255, 255, 255, .6) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--pp-glass-shadow);
}
main.pp-art :is(.slqa, .slb-faq) summary {
  position: static; display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 !important; padding: 0 !important; list-style: none; cursor: pointer;
  font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.375 !important; font-weight: 700 !important; color: var(--ink) !important;
}
main.pp-art :is(.slqa, .slb-faq) summary::-webkit-details-marker { display: none; }
main.pp-art :is(.slqa, .slb-faq) summary > h3 { display: inline; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
main.pp-art :is(.slqa, .slb-faq) summary > h3::before { content: none; }
main.pp-art :is(.slqa, .slb-faq) summary::after {
  content: '+'; position: static; top: auto; right: auto; display: flex; flex-shrink: 0; width: 24px; height: 24px;
  align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--ink); color: var(--accent);
  font-size: 14px; line-height: 1; font-weight: 500; transform: rotate(0deg); transition: transform .15s var(--pp-ease);
}
main.pp-art :is(.slqa, .slb-faq) details[open] summary::after { top: auto; transform: rotate(45deg); }
main.pp-art :is(.slqa, .slb-faq) details p {
  margin: 12px 0 0 !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 13px !important; line-height: 1.625 !important;
  color: color-mix(in srgb, var(--ink) 65%, transparent) !important;
}
/* eComposer-аккордеон (одна статья) — та же карточка */
main.pp-art .ecom-accordion__wrapper, main.pp-art .core__group--items { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; width: 100%; }
main.pp-art .ecom-group, main.pp-art .core__group--wrapper, main.pp-art .core__group--items { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; left: 0 !important; }
main.pp-art .ecom-accordion__item {
  width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important;
  margin: 0 !important; padding: 20px !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .7) !important;
  background: rgba(255, 255, 255, .6) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--pp-glass-shadow); text-align: left;
}
main.pp-art .ecom-accordion__title {
  display: flex !important; width: 100%; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  flex-direction: row !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; cursor: pointer; text-align: left;
}
/* всё с !important: у eComposer свои правила на блок с большей специфичностью и !important */
main.pp-art .ecom-accordion_wrapper-info { order: 1 !important; flex: 1 1 auto !important; min-width: 0; padding: 0 !important; margin: 0 !important; gap: 0 !important; }
main.pp-art .ecom-accordion_icon-title { display: none !important; }
main.pp-art .ecom-accordion__title-text, main.pp-art .ecom-accordion__title-text :is(h2, h3, h4) {
  margin: 0 !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.375 !important;
  font-weight: 700 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important;
}
main.pp-art .ecom-accordion_nav--icon,
main.pp-art .ecom-accordion__title .ecom-accordion_nav--icon.ecom-items--icon {
  display: flex !important; order: 2 !important; width: 24px !important; height: 24px !important; min-width: 0 !important; flex: 0 0 24px !important;
  align-items: center !important; justify-content: center !important;
  margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: var(--ink) !important; background-color: var(--ink) !important; color: var(--accent) !important; opacity: 1 !important;
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1 !important; transform: rotate(0deg); transition: transform .15s var(--pp-ease) !important;
}
main.pp-art .ecom-accordion_nav--icon svg { display: none !important; }
main.pp-art .ecom-accordion_nav--icon::before { content: '+'; color: var(--accent); }
main.pp-art .ecom-accordion_nav--icon.ecom-items-icon-active,
main.pp-art .ecom-accordion__title .ecom-accordion_nav--icon.ecom-items--icon.ecom-items-icon-active { display: none !important; }
main.pp-art .ecom-item-active > .ecom-accordion__title .ecom-accordion_nav--icon { transform: rotate(45deg); }
main.pp-art .ecom-accordion__body { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
main.pp-art .ecom-accordion__body .ec-flex-wp, main.pp-art .ecom-accordion__body .core__blocks, main.pp-art .ecom-accordion__body .core__blocks--body { padding: 0 !important; margin: 0 !important; }
main.pp-art .ecom-accordion__body .ecom-block { margin: 12px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
main.pp-art .ecom-accordion__body .text-content, main.pp-art .ecom-accordion__body .text-content p, main.pp-art .ecom-accordion__body .text-content div {
  font-family: var(--font-body) !important; font-size: 13px !important; line-height: 1.625 !important;
  color: color-mix(in srgb, var(--ink) 65%, transparent) !important; text-align: left; margin: 0;
}
main.pp-art .ecom-accordion__body .text-content p { margin: 0 0 10px !important; }
/* подзаголовки и таблицы внутри ответа — как ряды карточки */
main.pp-art .ecom-accordion__body .text-content :is(h2, h3, h4) {
  margin: 14px 0 8px !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 11px !important; line-height: 16px !important;
  font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .25em !important; color: var(--ink-2) !important; background: none !important;
}
main.pp-art .ecom-accordion__body .text-content :is(h2, h3, h4)::before { content: '— '; }
main.pp-art .ecom-accordion__body section.slsteps { margin: 8px 0 0 !important; padding: 16px !important; box-shadow: none; }

/* ----------------------------------------- slb: цитата, кнопка, подпись ---- */
main.pp-art .slb-pull { margin: 0 0 16px !important; padding: 24px !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .1); background: var(--night) !important; color: #fff !important; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); }
main.pp-art .slb-pull p { margin: 0 0 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
main.pp-art .slb-pull p:last-child { margin: 0; }
main.pp-art .slb-pull a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
main.pp-art a.slb-cta {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px !important; padding: 16px 32px !important;
  border-radius: 999px !important; border: 0 !important; background: var(--dark) !important; color: #fff !important;
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; text-decoration: none !important;
  box-shadow: 0 10px 15px -3px rgba(16, 24, 40, .15); transition: background-color .15s var(--pp-ease);
}
main.pp-art a.slb-cta:hover { background: #000 !important; }
main.pp-art .slb-legal { margin: 0 !important; font-size: 12px !important; line-height: 1.6; color: var(--pp-gray-500) !important; }

/* ======================================================= 3. CTA «Next step» */
/* aside.slbcta → их CTA-карточка: строка display, вейтлист в белой карточке (как на товаре), звонок — подпись */
main.pp-art aside.slbcta { max-width: 36rem !important; margin: 0 auto !important; padding: 0 !important; background: none !important; border: 0 !important; font-family: var(--font-body) !important; text-align: center; }
main.pp-art .slbcta__pad { padding: 0 !important; margin: 0 !important; }
main.pp-art .slbcta__line {
  margin: 0 0 20px !important; font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 24px !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ink) !important; text-wrap: balance;
}
main.pp-art .slbcta__line a { color: var(--ink-2) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
main.pp-art .slbcta__line a:hover { color: var(--ink) !important; }
main.pp-art .slbcta__call { margin: 16px 0 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: color-mix(in srgb, var(--ink) 65%, transparent) !important; }
main.pp-art .slbcta__call a { color: var(--ink) !important; font-weight: 700; }
/* вейтлист «Opening soon» → их белая карточка: rounded-3xl bg-white p-6 shadow, поле — пилюля, кнопка — тёмная пилюля */
main.pp-art .sl-oos {
  margin: 0 !important; padding: 24px !important; border-radius: 24px !important; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  background: #fff !important; box-shadow: 0 18px 40px -28px rgba(12, 47, 37, .4); text-align: left; font-family: var(--font-body) !important;
}
main.pp-art .sl-oos__head {
  display: block; margin: 0 0 6px !important; padding: 0 !important; font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 18px !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ink) !important; white-space: normal !important;
}
main.pp-art .sl-oos__head::before { display: none !important; }
main.pp-art .sl-oos__note { margin: 0 0 14px !important; font-size: 12px !important; line-height: 1.625 !important; color: color-mix(in srgb, var(--ink) 60%, transparent) !important; }
main.pp-art .slw { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
main.pp-art .slw__line { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
main.pp-art .slw__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
main.pp-art .slw__input, main.pp-art .slw__btn { flex: none !important; height: auto !important; min-height: 0 !important; }
main.pp-art .slw__input, main.pp-art .sl-oos input[type="email"] {
  width: 100%; padding: 14px 20px !important; border: 1px solid var(--pp-gray-200) !important; border-radius: 999px !important;
  background: #fff !important; font: 400 14px/1.4 var(--font-body) !important; color: var(--dark) !important; box-shadow: none !important; margin: 0 !important;
}
main.pp-art .slw__input::placeholder { color: var(--pp-gray-400); }
main.pp-art .slw__input:focus { outline: none; border-color: var(--ink) !important; }
main.pp-art .slw__btn, main.pp-art .sl-oos button[type="submit"] {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--dark) !important; color: #fff !important; font: 700 14px/20px var(--font-body) !important;
  box-shadow: none !important; cursor: pointer; transition: background-color .15s var(--pp-ease);
}
main.pp-art .slw__btn:hover { background: #000 !important; }
main.pp-art .slw__msg { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--pp-gray-500); }
main.pp-art .slw__msg--done { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ---------------------------------------------- «Back to blog» → контурная пилюля ---- */
main.pp-art .article-template__back { margin: 8px 0 40px !important; padding: 0 !important; text-align: center; }
main.pp-art .article-template__link {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--pp-gray-300); background: transparent; font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 700;
  color: var(--dark); text-decoration: none !important; transition: background-color .15s var(--pp-ease), color .15s var(--pp-ease);
}
main.pp-art .article-template__link:hover { background: var(--dark); color: #fff; text-decoration: none !important; }
/* стрелку влево уже разворачивает тема (.icon-wrap{transform:rotate(180deg)}) */
main.pp-art .article-template__link .icon-wrap { margin: 0; display: flex; }
main.pp-art .article-template__link .icon-wrap svg { width: 14px; height: 10px; }
main.pp-art .article-template__link .svg-wrapper { display: flex; }

/* ======================================= 4. eComposer-обёртки нейтрализованы */
main.pp-art .ecom-builder, main.pp-art .ecom-sections { width: 100%; max-width: none; }
main.pp-art .ecom-section, main.pp-art .ecom-row { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
main.pp-art .ecom-section > .core__row--columns, main.pp-art .ecom-row > .core__row--columns { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }
main.pp-art .ecom-column { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
main.pp-art .core__column--wrapper { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
main.pp-art .ecom-column__overlay, main.pp-art .ecom-overlay, main.pp-art .ecom-section__overlay { display: none !important; }
main.pp-art .core__blocks, main.pp-art .core__blocks--body { display: block !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
/* их .core__blocks--body — flex-колонка с детьми 90%: наши панели во всю ширину */
main.pp-art .core__blocks--body > .pp-panel { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
main.pp-art .ecom-block { padding: 0 !important; margin-top: 0 !important; width: 100% !important; max-width: none !important; background: none !important; border: 0 !important; box-shadow: none !important; }
main.pp-art .ecom__element, main.pp-art .ecom-element { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
main.pp-art .pp-prose .ecom-block { margin-bottom: 0 !important; }
main.pp-art .text-content { max-width: none !important; }
main.pp-art .text-content::first-letter { all: unset; }
/* пустые блоки (разделители, распорки, пустая боковая колонка) не занимают места */
main.pp-art .element__divi, main.pp-art .element__spacer, main.pp-art .ecom__element-spacer { display: none !important; }
main.pp-art .pp-panel__in > .ecom-block:not(:has(h1, h2, h3, h4, p, img, li, table, details, nav, figure, a, button, .ecom__element--button, .ecom-accordion__item)) { display: none !important; }
main.pp-art .ecom-section > .core__row--columns > .ecom-column:not(:has(h1, h2, p, img, table, details)) { display: none !important; }
main.pp-art .ecom-row > .core__row--columns > .ecom-column:not(:has(h1, h2, p, img, table, details)) { display: none !important; }

/* ------------------------------------------------------------- футер ---- */
/* Текст футера не трогаем: только скругление и шрифт, как у их тёмных панелей */
.shopify-section-group-ecom-69a1e4e7e72b74009f0a5cc2_footer { margin: 0 12px 12px; border-radius: 32px; overflow: hidden; }
.shopify-section-group-ecom-69a1e4e7e72b74009f0a5cc2_footer .text-content,
.shopify-section-group-ecom-69a1e4e7e72b74009f0a5cc2_footer .ecom-menu_title,
.shopify-section-group-ecom-69a1e4e7e72b74009f0a5cc2_footer .ecom-shopify__menu-list { font-family: var(--font-body) !important; }

/* ------------------------------------------------------------ desktop ---- */
@media (min-width: 640px) {
  main.pp-art { padding: 96px 20px 0; }
  main.pp-art .pp-panel { padding: 40px; }
  main.pp-art h1.article-template__title, main.pp-art .pp-panel--hero h1, main.pp-art .pp-panel--hero h1.ecom__heading,
  main.pp-art .pp-panel--hero h1.ecom-shopify__article--title-text { font-size: 48px !important; }
  main.pp-art .pp-panel--sec > .pp-panel__in > h2,
  main.pp-art .pp-panel--sec > .pp-panel__in > .ecom-block:first-child :is(h2, h3, h4),
  main.pp-art .pp-panel--intro > .pp-panel__in > h2 { font-size: 36px !important; }
  main.pp-art .pp-panel--intro .pp-prose { padding: 28px; }
  main.pp-art .pp-panel--sec .pp-prose, main.pp-art .pp-panel--faq .pp-prose, main.pp-art section.slsteps { padding: 20px 28px !important; }
  main.pp-art .slbcta__line { font-size: 30px !important; }
  main.pp-art .pp-panel--faq :is(.slqa, .slb-faq) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1024px) {
  main.pp-art { max-width: 1140px; margin: 0 auto; }
  main.pp-art .pp-panel { padding: 56px; }
  main.pp-art .pp-panel > .pp-ribbon { left: 76%; }
  main.pp-art .pp-panel--hero .pp-panel__in { max-width: 880px; margin: 0 auto; }
  main.pp-art .pp-prose, main.pp-art section.slsteps, main.pp-art :is(.slqa, .slb-faq), main.pp-art .pp-panel__in > img, main.pp-art .pp-panel__in > div > img,
  main.pp-art .pp-panel__in > .ecom-block { max-width: 880px; }
}

@media (prefers-reduced-motion: reduce) {
  main.pp-art :is(.slqa, .slb-faq) summary::after, main.pp-art .ecom-accordion_nav--icon, main.pp-art .pp-panel.fade-in { transition: none; }
}