/* Smile Lab USA — страницы коллекций в дизайне hellopepti (/category/recovery).
   Обёртка поверх экспорта темы: контент (слова, картинки, порядок в DOM) не
   меняется, меняются контейнеры, сетка, типографика и анимации.

   Механики — их точным кодом из docs/pepti-design/mechanics/category-hero.*
   и category-grid.* (Tailwind-правила, резолвнутые по классам фрагмента),
   остальные блоки их же страницы категории (science / FAQ / «Ready to…»).
   Все rem переведены в px по их базе 16px, потому что у темы html{font-size:62.5%}:
     --spacing 4px · text-xs 12/16 · sm 14/20 · base 16/24 · lg 18/28 · xl 20/28 ·
     3xl 30/36 · 4xl 36/40 · 5xl 48/1 · 6xl 60/1 · radius-2xl 16 · 3xl 24 ·
     [2rem] 32 · [2.5rem] 40 · blur-sm 8px · blur-xl 24px · blur-3xl 64px ·
     tracking-tight -.025em · wide .025em · leading-tight 1.25 · snug 1.375 ·
     relaxed 1.625 · transition 150ms cubic-bezier(.4,0,.2,1).
   Цвета их → наши токены (sl-pepti.css): #0c2f25→--ink, #1f5145→--ink-2,
   gray-900→--dark, #e8ff70→--accent, #97c3b4→--sage, #9ab6ab (карточка)→--sage,
   #d8e9e0→--ribbon-mist, #f3f8f4/#e4efe8/#cfe3d8→--mist-grad, #e9f2ec→--mist-2,
   #dcebe3→--sage-soft, жёлтый герой категории→--accent-soft.
   Подключается после sl-pepti.css только на collections/*.html. */

:root {
  --pp-gray-200: #e5e7eb;
  --pp-gray-400: #99a1af;
  --pp-gray-500: #6a7282;
  --pp-gray-600: #4a5565;
  --pp-gray-800: #1e2939;
  --pp-ease: cubic-bezier(.4, 0, .2, 1);
  /* их hero категории: linear(180deg, #fcfdef, #f6f8d8 48%, #edf0bd) → наш accent-soft */
  --pp-hero-grad: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 30%, #fff) 0%, color-mix(in srgb, var(--accent-soft) 75%, #fff) 48%, var(--accent-soft) 100%);
  /* их панель статистики и FAQ: linear(180deg, #f3f8f4, #e9f2ec 55%, #dcebe3) */
  --pp-stats-grad: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 55%, var(--sage-soft) 100%);
  /* их CTA «Ready to…»: radial(120% 100% at 50% 0%, #e9f2ec, #cfe3d8) */
  --pp-cta-grad: radial-gradient(120% 100% at 50% 0%, var(--mist-2) 0%, var(--sage-soft) 100%);
  /* их карточка товара: #9ab6ab + card-swiggle-slate.png (та же лента, белая, прозрачная) */
  --pp-card-swiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 720' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.22' d='M125 -20 C125 200 75 300 75 360 C75 420 125 520 125 740 L215 740 C215 520 165 420 165 360 C165 300 215 200 215 -20 Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ страница и шапка темы ---- */
/* Шапка темы скрыта: верх вставляет sl-pepti-chrome.js (их плашка + пилюля). */
.section-header { display: none !important; }
.has-pp-chrome body { padding-top: 0; }
/* кнопка «Get a Free Quote» (инлайн-плашка темы, вне main): её прятал sl-motion.js, который здесь отключён */
button.sl-fab { display: none !important; }
main.pp-col {
  /* их <div class="px-3 pt-20"> — 80px под фикс-верх, 12px по бокам */
  padding: 80px 12px 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
}
main.pp-col .page-width { max-width: none; margin: 0; padding: 0; }
main.pp-col .ecom-builder, main.pp-col .ecom-sections { width: 100%; max-width: none; }
main.pp-col .shopify-section { padding: 0; }
main.pp-col a { text-decoration: none; }
.pp-col .ecom-section__overlay, .pp-col .ecom-column__overlay { display: none !important; }
.pp-col section.ecom-section { padding: 0 !important; margin: 0 !important; background: none !important; }
.pp-col .pp-orphan { display: none !important; }
/* классы конструктора hide-on-* нигде не определены в подключённых стилях — задаём по его брейкпоинтам */
@media (max-width: 767px) { .pp-col .hide-on-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .pp-col .hide-on-tablet { display: none !important; } }
@media (min-width: 1024px) { .pp-col .hide-on-desktop { display: none !important; } }

/* ---------------------------------------------------------- панели ---- */
/* их: relative isolate overflow-hidden rounded-[2rem] border border-black/5 p-6
   + лента svg absolute left-1/2 -z-10 h-full w-[560px]; между панелями их pt-6 */
.pp-col .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);
}
.pp-col .pp-panel > .pp-ribbon { opacity: .6; }
.pp-col .pp-panel--first { margin-top: 0; }
/* герой категории: светлая категорийная панель, белая лента 22 %, блик справа сверху
   (-right-24 top-0 h-96 w-96 rounded-full opacity-50 blur-3xl) */
.pp-col .pp-panel--hero { background: var(--pp-hero-grad); }
.pp-col .pp-panel--hero > .pp-ribbon { opacity: 1; }
.pp-col .pp-panel--hero > .pp-ribbon path { fill: #fff; fill-opacity: .22; }
.pp-col .pp-panel--hero::after {
  content: ''; position: absolute; top: 0; right: -96px; width: 384px; height: 384px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, transparent 70%); opacity: .5; filter: blur(64px); pointer-events: none; z-index: -1;
}
/* панель статистики (их второй блок героя) и FAQ: мягкий градиент, лента 70 % */
.pp-col .pp-panel--stats, .pp-col .pp-panel--faq { background: var(--pp-stats-grad); }
.pp-col .pp-panel--stats > .pp-ribbon, .pp-col .pp-panel--faq > .pp-ribbon { opacity: .7; }
/* сетка товаров: их <section id="products" class="mx-3 rounded-[2.5rem] py-20">, без рамки, лента 70 % */
.pp-col .pp-panel--grid { border: 0; border-radius: 40px; padding: 80px 24px; }
.pp-col .pp-panel--grid > .pp-ribbon { opacity: .7; }
/* CTA «Ready to…»: радиальный градиент, p-3, внутри стеклянная карточка */
.pp-col .pp-panel--cta { border: 0; padding: 12px; background: var(--pp-cta-grad); }
/* «Popular searches»: их белая карточка (rounded-3xl border-gray-200 bg-white shadow) */
.pp-col .pp-panel--pop { border-radius: 24px; border: 1px solid var(--pp-gray-200); background: #fff; box-shadow: 0 24px 55px -40px rgba(12, 47, 37, .55); }

/* ------------------------------------------- сброс конструктора в панелях ---- */
.pp-col .pp-panel .core__row--columns { display: block; margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100%; }
.pp-col .pp-panel .ecom-column { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; }
.pp-col .pp-panel .core__column--wrapper { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.pp-col .pp-panel .core__blocks { --ecom-global-elements-space: 0px; }
/* display без !important: у конструктора .hide-on-mobile/.hide-on-desktop — display:none !important */
.pp-col .pp-panel .ecom-block { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block; height: auto !important; }
.pp-col .pp-fix { display: contents; }
.pp-col .pp-panel .ecom-text--more-actions, .pp-col .pp-panel .ecom-text--less-actions { margin-top: 6px; }
.pp-col .pp-panel .ecom-text_view-more-btn, .pp-col .pp-panel .ecom-text_view-less-btn {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  font: 600 12px/16px var(--font-body) !important; color: var(--ink-2) !important; text-decoration: underline; text-underline-offset: 3px;
}

/* ----------------------------------------------------- 1. герой категории ---- */
/* h1: display text-3xl leading-[1.05] tracking-tight text-gray-900 (sm:4xl md:5xl lg:6xl), центр / lg слева */
.pp-col .pp-panel--hero .core__row--columns { position: relative; z-index: 10; }
.pp-col .pp-panel--hero .core__blocks--body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp-col .pp-panel--hero h1.ecom__heading,
.pp-col .ecom-builder h1.ecom__heading.sl-h1-fit {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -.025em !important;
  color: var(--ink) !important; text-align: center !important; margin: 0 !important; padding: 0 !important;
  text-wrap: balance; white-space: normal !important;
}
/* лид → их строка чеклиста: flex min-h-[3.25rem] items-center gap-3 rounded-full border-white/70
   bg-white/55 px-4 py-2.5 backdrop-blur-sm · галочка h-4 w-4 stroke-3 text-ink-2 · text-sm font-medium text-gray-800
   (абзац длиннее одной строки, поэтому радиус 28px и выравнивание по верху) */
.pp-col .pp-panel--hero .sl-lead { margin-top: 28px !important; width: fit-content !important; max-width: 100% !important; }
.pp-col .pp-panel--hero .sl-lead .text-content {
  display: flex; align-items: flex-start; gap: 12px; min-height: 52px; text-align: left;
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px 18px 12px 16px;
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 500 !important;
  color: var(--pp-gray-800) !important; max-width: 36rem; text-wrap: pretty;
}
.pp-col .pp-panel--hero .sl-lead .text-content::before {
  content: '✓'; flex: 0 0 16px; width: 16px; margin-top: 2px; font-size: 14px; line-height: 16px; font-weight: 900; color: var(--ink-2); text-align: center;
}

/* ---------------------------------------- 2. статистика и статья (.slbody) ---- */
.pp-col .pp-panel .slbody { position: relative; z-index: 10; display: block; width: 100%; max-width: none; margin: 0; padding: 0; font-family: var(--font-body); color: var(--text); }
.pp-col .pp-panel .slbody > .pp-art + .pp-art { margin-top: 16px; }
/* заголовок группы: display text-3xl leading-[1.05] text-ink mb-7, центр / lg слева */
.pp-col .pp-panel .slbody .pp-art > h2,
.pp-col .pp-panel .pp-grid-head h2.ecom__heading,
.pp-col .pp-panel--faq .sl-colfaq__h,
.pp-col .pp-panel--cta h2.ecom__heading {
  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-align: center !important; margin: 0 0 28px !important; padding: 0 !important;
  text-transform: none !important; white-space: normal !important; text-wrap: balance;
}
/* их 4 цифры статистики: grid grid-cols-2 gap-x-8 gap-y-7 border-t border-ink/12 pt-7 (lg:grid-cols-4)
   строка таблицы → ячейка: подпись text-[10px] font-bold uppercase tracking-[0.18em] text-ink-2,
   цена display mt-1.5 leading-tight text-3xl tabular-nums text-ink, остальное text-[11px] leading-relaxed ink/55 */
.pp-col .pp-art--stats > h2 { margin-bottom: 24px !important; }
.pp-col .pp-art--stats .slsteps { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.pp-col .pp-art--stats .slsteps__scroll { overflow: visible !important; }
.pp-col .pp-art--stats section.slsteps.slsteps--table table { display: block; width: 100%; font-family: var(--font-body); font-size: 11px; line-height: 1.625; }
.pp-col .pp-art--stats section.slsteps.slsteps--table thead {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pp-col .pp-art--stats section.slsteps.slsteps--table tbody {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px;
  padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.pp-col .pp-art--stats section.slsteps.slsteps--table tr { display: block; text-align: center; }
.pp-col .pp-art--stats section.slsteps.slsteps--table th,
.pp-col .pp-art--stats section.slsteps.slsteps--table td { display: block; padding: 0; border: 0; background: none; text-align: inherit; white-space: normal; }
.pp-col .pp-art--stats section.slsteps.slsteps--table tbody th {
  font-size: 10px; line-height: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-2);
}
.pp-col .pp-art--stats section.slsteps.slsteps--table tbody th a { color: inherit; text-decoration: none; }
.pp-col .pp-art--stats section.slsteps.slsteps--table tbody th a:hover { color: var(--ink); }
.pp-col .pp-art--stats section.slsteps.slsteps--table td.i1-n {
  margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: normal; text-wrap: balance;
}
.pp-col .pp-art--stats section.slsteps.slsteps--table td:not(.i1-n) { margin-top: 4px; font-size: 11px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.pp-col .pp-art--stats section.slsteps.slsteps--table td:not(.i1-n)::before { content: attr(data-l) ' · '; font-weight: 700; color: var(--ink); }
/* подпись под таблицей и строка про оплату → их «Safety info»: mt-7 border-t border-ink/12 pt-5 text-[11px] leading-relaxed ink/55 */
.pp-col .pp-art--stats .slsteps__note, .pp-col .pp-art--stats .slbody__pay {
  margin: 28px 0 0 !important; padding: 20px 0 0 !important; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 0; background: none; font-size: 11px !important; line-height: 1.625 !important; color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
  text-align: center; text-wrap: pretty;
}
.pp-col .pp-art--stats .slbody__pay { margin-top: 20px !important; }
.pp-col .pp-art--stats .slbody__pay b { color: var(--ink); font-weight: 700; }
.pp-col .pp-art--stats .slbody__pay a, .pp-col .pp-art--stats .slsteps__note a { font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* остальные группы по h2 → их карточка «The science»: rounded-3xl border-white/70 bg-white/60 p-6
   shadow-[0_24px_55px_-40px_rgba(12,47,37,0.55)] backdrop-blur · заголовок display text-xl ·
   текст text-[15px] leading-[1.7] ink/80 · ссылка text-sm font-bold ink-2 underline underline-offset-4 */
.pp-col .pp-art:not(.pp-art--stats) {
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .6); padding: 24px;
  box-shadow: 0 24px 55px -40px rgba(12, 47, 37, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pp-col .pp-panel .slbody .pp-art:not(.pp-art--stats) > h2 { font-size: 20px !important; line-height: 1.15 !important; text-align: left !important; margin: 0 0 12px !important; }
.pp-col .pp-panel .slbody p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--ink) 80%, transparent); text-wrap: pretty; }
.pp-col .pp-panel .slbody p:last-child { margin-bottom: 0; }
.pp-col .pp-panel .slbody a { font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.pp-col .pp-panel .slbody a:hover { color: var(--ink); }
.pp-col .pp-panel .slbody b { color: var(--ink); }
/* списки → их чеклист: space-y-2 text-sm ink/80, галочка mt-0.5 h-4 w-4 text-ink-2 */
.pp-col .pp-panel .slbody ul, .pp-col .pp-panel .slbody ol { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: pparts; }
.pp-col .pp-panel .slbody li { position: relative; margin: 0; padding: 0 0 0 24px; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 80%, transparent); text-wrap: pretty; }
.pp-col .pp-panel .slbody ul li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 16px; font-size: 13px; line-height: 16px; font-weight: 900; color: var(--ink-2); text-align: center; }
.pp-col .pp-panel .slbody ol li { counter-increment: pparts; }
.pp-col .pp-panel .slbody ol li::before { content: '0' counter(pparts); position: absolute; left: 0; top: 2px; font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pp-col .pp-panel .slbody .slquote { margin: 12px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); font-size: 15px; line-height: 1.6; font-style: italic; color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ------------------------------------------------- 3. сетка карточек ---- */
/* заголовок сетки: их «— Treatments / A full suite of … / ✓ пилюли», центр, mb-8 и mb-12 */
.pp-col .pp-grid-head { position: relative; z-index: 10; }
.pp-col .pp-grid-head .core__blocks--body { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.pp-col .pp-grid-head h2.ecom__heading { margin-bottom: 12px !important; }
.pp-col .pp-grid-head .ecom-block:has(h2) { order: 0; }
.pp-col .pp-grid-head .ecom-block:has(.text-content) { order: 1; }
.pp-col .pp-grid-head .ecom-block[class*="-pricenote"] { order: 2; width: fit-content !important; max-width: 100% !important; margin-top: 20px !important; }
.pp-col .pp-grid-head .text-content {
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.625 !important; font-weight: 400 !important;
  color: color-mix(in srgb, var(--ink) 65%, transparent) !important; text-align: center !important; max-width: 42rem; margin: 0 auto;
  max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important;
}
/* мобильная копия описания у конструктора обрезана на 250px с градиентом и кнопкой «view more» — текст короткий, показываем целиком */
.pp-col .pp-grid-head .ecom-text--is-mark::before, .pp-col .pp-grid-head .ecom-text--is-mark::after { display: none !important; }
.pp-col .pp-grid-head .ecom-text--more-actions, .pp-col .pp-grid-head .ecom-text--less-actions { display: none !important; }
/* «From $124…» → их ✓ пилюля: inline-flex gap-2 rounded-full border-black/10 bg-white/70 px-4 py-2 text-xs font-semibold text-gray-900 backdrop-blur-sm */
.pp-col .pp-grid-head .ecom-block[class*="-pricenote"] .text-content {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 16px;
  font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; color: var(--dark) !important; text-align: left !important; max-width: none;
}
.pp-col .pp-grid-head .ecom-block[class*="-pricenote"] .text-content::before { content: '✓'; font-weight: 900; color: var(--ink-2); }
/* их grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 */
.pp-col .pp-grid { position: relative; z-index: 10; }
.pp-col .pp-grid + .pp-grid { margin-top: 16px !important; }
.pp-col .pp-grid > .core__row--columns { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; justify-content: stretch; }
.pp-col .pp-grid .ecom-column { display: flex; }
.pp-col .pp-grid .ecom-column:not(:has(h4)), .pp-col .pp-grid .ecom-column[hidden] { display: none !important; }
/* карточка: group relative flex flex-col overflow-hidden rounded-2xl p-6 shadow-[0_22px_50px_-26px_rgba(20,40,30,0.5)]
   transition-all duration-300 hover:-translate-y-1.5 hover:shadow-[0_34px_64px_-26px_rgba(20,40,30,0.6)];
   фон #9ab6ab + swiggle → наш --sage + белая лента; текст на нашем светлом sage — ink, а не белый */
.pp-col .pp-grid .ecom-column > .core__column--wrapper {
  position: relative; display: flex !important; flex-direction: column; width: 100%; overflow: hidden;
  border-radius: 16px !important; padding: 24px !important; color: var(--ink);
  background: var(--sage) var(--pp-card-swiggle) center / cover no-repeat !important;
  box-shadow: 0 22px 50px -26px rgba(20, 40, 30, .5) !important;
  transition: transform .3s var(--pp-ease), box-shadow .3s var(--pp-ease);
}
.pp-col .pp-grid .ecom-column > .core__column--wrapper:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -26px rgba(20, 40, 30, .6) !important; }
.pp-col .pp-grid .core__blocks, .pp-col .pp-grid .core__blocks--body { display: contents; }
/* ряд бейджа: relative flex min-h-[22px] — есть у каждой карточки, даже без метки */
.pp-col .pp-grid .ecom-column > .core__column--wrapper::before { content: ''; display: block; order: -3; min-height: 22px; }
/* порядок их карточки: бейдж → фото → название → подпись → пилюля → цена → кнопки (в DOM порядок темы) */
/* sl-design.css даёт .sl-oos-note flex:0 0 100% — в колонке это 100 % высоты карточки, поэтому flex:none */
.pp-col .pp-grid .sl-oos-note { order: -3; display: flex; flex: none !important; align-items: flex-start; justify-content: flex-start; width: 100%; min-height: 22px; margin: -22px 0 0 !important; }
.pp-col .pp-grid .ecom-block:has(.ecom-base-image) { order: -1; }
.pp-col .pp-grid .ecom-block:has(h4) { order: 1; }
.pp-col .pp-grid .ecom-block:has(.sl-card-caption) { order: 2; }
.pp-col .pp-grid .sl-hsa { order: 3; }
.pp-col .pp-grid .ecom-block:has(.text-content:not(.sl-card-caption)) { order: 4; }
.pp-col .pp-grid .ecom-block:has(.ecom-element-button) { order: 5; margin-top: auto !important; }
/* бейдж POPULAR: rounded-full bg-black/25 px-2.5 py-1 text-[9px] font-bold uppercase tracking-wide */
.pp-col .pp-grid .sl-oos-tag {
  display: inline-flex; align-items: center; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .14); box-shadow: none; font-family: var(--font-body); font-size: 9px; line-height: 14px; font-weight: 700;
  letter-spacing: .025em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.pp-col .pp-grid .sl-oos-tag::before { display: none; }
/* фото: relative my-4 flex h-[250px] items-center justify-center · img h-[245px] w-auto object-contain
   drop-shadow-[0_24px_36px_rgba(0,0,0,0.42)] transition-transform duration-500 group-hover:scale-105 */
.pp-col .pp-grid .ecom-base-image, .pp-col .pp-grid .ecom-base-image figure { margin: 0 !important; padding: 0 !important; }
.pp-col .pp-grid .ecom-container-image, .pp-col .pp-grid .ecom-image-content-position {
  display: flex !important; align-items: center !important; justify-content: center !important; height: 250px; margin: 16px 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important;
}
.pp-col .pp-grid .ecom-image-content-position { margin: 0 !important; }
.pp-col .pp-grid .ecom-image-picture, .pp-col .pp-grid .ecom-image-picture-link, .pp-col .pp-grid .ecom-image-default {
  position: relative; display: inline-flex !important; width: auto !important; max-width: 100% !important; height: 245px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; opacity: 1 !important; background: none !important;
}
/* конструктор рисует на picture/img рамку 3px #000 и радиус 20 — у их карточки рамки нет */
.pp-col .pp-grid picture, .pp-col .pp-grid .ecom-image-picture > picture, .pp-col .pp-grid .ecom-image-picture > img { display: block; height: 100%; border: 0 !important; border-radius: 16px !important; overflow: hidden; }
.pp-col .pp-grid .ecom-image-picture img {
  display: block; height: 245px !important; width: auto !important; max-width: 100%; object-fit: contain !important;
  /* их drop-shadow под прозрачный флакон; наши фото — на белом, поэтому тень их фигуры товара: shadow-[0_24px_55px_-30px_rgba(20,50,38,0.3)] */
  border-radius: 16px; box-shadow: 0 24px 55px -30px rgba(20, 50, 38, .45); transition: transform .5s var(--pp-ease);
}
.pp-col .pp-grid .ecom-column > .core__column--wrapper:hover .ecom-image-picture img { transform: scale(1.05); }
/* подписи на фото флиппера (slov-c) живут внутри ссылки-картинки: ей нужна ширина картинки — выше она inline-flex */
.pp-col .pp-grid .slov-c { border-radius: 16px; }
/* название: text-lg font-bold leading-tight */
.pp-col .pp-grid h4.ecom__heading {
  font-family: var(--font-body) !important; font-size: 18px !important; line-height: 1.25 !important; font-weight: 700 !important;
  color: var(--ink) !important; text-align: left !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
}
/* подпись: mt-1 text-xs leading-snug text-white/60 → ink/65 */
.pp-col .pp-grid .sl-card-caption {
  font-family: var(--font-body) !important; font-size: 12px !important; line-height: 1.375 !important; font-weight: 400 !important;
  color: color-mix(in srgb, var(--ink) 65%, transparent) !important; text-align: left !important; margin: 4px 0 0 !important;
}
/* HSA → их пилюля варианта: inline-flex rounded-full border-white/30 bg-black/20 p-0.5 · внутри rounded-full px-2.5 py-1 text-[10px] font-bold bg-white text-gray-900 */
.pp-col .pp-grid .sl-hsa {
  display: inline-flex !important; width: auto !important; align-self: flex-start; margin: 10px 0 0 !important; padding: 2px !important;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .1); text-align: left; box-shadow: none !important;
}
.pp-col .pp-grid .sl-hsa__badge {
  display: inline-flex !important; align-items: center; margin: 0 !important; padding: 4px 10px !important; border-radius: 999px; background: #fff;
  font-family: var(--font-body) !important; font-size: 10px !important; line-height: 14px !important; font-weight: 700 !important; color: var(--dark) !important; white-space: nowrap;
}
/* цена: mt-2.5 text-[15px] font-extrabold tabular-nums */
.pp-col .pp-grid .text-content:not(.sl-card-caption) {
  font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.375 !important; font-weight: 800 !important;
  color: var(--ink) !important; text-align: left !important; margin: 10px 0 0 !important; font-variant-numeric: tabular-nums; max-width: none;
}
.pp-col .pp-grid .text-content:not(.sl-card-caption) a { color: inherit !important; }
/* кнопка «See the details» → их белая пилюля: rounded-full bg-white px-4 py-2 text-xs font-bold text-gray-900 hover:opacity-90 */
.pp-col .pp-grid .ecom-button-default { display: flex !important; justify-content: flex-start !important; padding-top: 16px; }
.pp-col .pp-grid .ecom__element--button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 0; width: auto !important; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 8px 16px !important; border: 0 !important; border-radius: 999px !important; background: #fff !important;
  font-family: var(--font-body) !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  color: var(--dark) !important; text-decoration: none !important; box-shadow: none !important; transition: opacity .15s var(--pp-ease); animation: none !important;
}
.pp-col .pp-grid .ecom__element--button:hover { opacity: .9; background: #fff !important; color: var(--dark) !important; }
.pp-col .pp-grid .ecom__element--button span { font: inherit !important; color: inherit !important; }
.pp-col .pp-grid .ecom-button-icon { display: none !important; }

/* ---------------------------------------- 4. закрывающий блок → их CTA-карточка ---- */
/* rounded-[1.5rem] border-white/50 bg-white/20 p-8 text-center backdrop-blur-xl
   shadow-[0_18px_40px_-26px_rgba(20,50,38,0.4),inset_0_1px_0_rgba(255,255,255,0.7)] */
.pp-col .pp-panel--cta .core__row--columns { position: relative; z-index: 10; }
.pp-col .pp-panel--cta .sl-close-col > .core__column--wrapper {
  border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, .5) !important; background: rgba(255, 255, 255, .2) !important;
  padding: 32px !important; text-align: center; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 18px 40px -26px rgba(20, 50, 38, .4), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.pp-col .pp-panel--cta .core__blocks--body { display: flex; flex-direction: column; align-items: center; }
.pp-col .pp-panel--cta h2.ecom__heading { max-width: 42rem; margin: 0 auto 16px !important; }
/* список → их ряд галочек: flex items-center gap-1.5 text-xs text-gray-600, галочка h-3 w-3 sage; пункты длинные — столбиком */
.pp-col .pp-panel--cta .sl-close-list { display: grid; gap: 8px; margin: 0 auto 24px; padding: 0; list-style: none; max-width: 28rem; text-align: left; }
.pp-col .pp-panel--cta .sl-close-list li { position: relative; margin: 0; padding: 0 0 0 20px; font-size: 12px; line-height: 1.5; color: var(--pp-gray-600); text-wrap: pretty; }
.pp-col .pp-panel--cta .sl-close-list li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 12px; font-size: 12px; line-height: 16px; font-weight: 900; color: var(--sage); text-align: center; }
.pp-col .pp-panel--cta .sl-close-h + .sl-close-h, .pp-col .pp-panel--cta .sl-close-s + .sl-close-h { margin-top: 16px !important; }
.pp-col .pp-panel--cta .sl-close-b .text-content, .pp-col .pp-panel--cta .sl-close-s .text-content, .pp-col .pp-panel--cta .sl-close-c .text-content {
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--pp-gray-600) !important;
  text-align: center !important; max-width: 28rem; margin: 0 auto 24px !important; text-wrap: pretty;
}
.pp-col .pp-panel--cta .sl-close-b .text-content { margin-bottom: 0 !important; max-width: none; }
.pp-col .pp-panel--cta .sl-close-s .text-content a { font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* кнопка → их тёмная пилюля: inline-flex items-center gap-2 rounded-full bg-gray-900 px-9 py-4 text-sm font-semibold text-white hover:bg-black */
.pp-col .pp-panel--cta .sl-close-cta { width: auto !important; }
.pp-col .pp-panel--cta .sl-close-cta .ecom__element--button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 16px 36px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--dark) !important; color: #fff !important;
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  white-space: nowrap; text-decoration: none !important; transition: background-color .15s var(--pp-ease); box-shadow: none !important;
}
.pp-col .pp-panel--cta .sl-close-cta .ecom__element--button:hover { background: #000 !important; color: #fff !important; }
.pp-col .pp-panel--cta .sl-close-cta .ecom__element--button span { font: inherit !important; color: inherit !important; }
.pp-col .pp-panel--cta .ecom-button-icon { display: none !important; }

/* ------------------------------------------------------- 5. FAQ ---- */
/* их: grid gap-3 (sm:grid-cols-2) · карточка 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-sm text-accent, открыт rotate-45 · ответ mt-3 text-[13px] leading-relaxed ink/65 */
.pp-col .pp-panel--faq .core__row--columns { position: relative; z-index: 10; }
.pp-col .pp-panel--faq .sl-colfaq { width: 100%; max-width: none; margin: 0; padding: 0; }
.pp-col .pp-panel--faq .slqa { display: grid; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--font-body); }
.pp-col .pp-panel--faq .slqa details {
  margin: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -28px rgba(12, 47, 37, .4);
}
.pp-col .pp-panel--faq .slqa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 0; list-style: none; cursor: pointer;
  font-size: 15px; line-height: 1.375; font-weight: 700; color: var(--ink); text-align: left;
}
.pp-col .pp-panel--faq .slqa summary::-webkit-details-marker { display: none; }
.pp-col .pp-panel--faq .slqa summary::after {
  content: '+'; position: static; display: flex; width: 24px; height: 24px; flex-shrink: 0; 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: none; transition: transform .15s var(--pp-ease);
}
.pp-col .pp-panel--faq .slqa details[open] summary::after { transform: rotate(45deg); }
.pp-col .pp-panel--faq .slqa p { margin: 12px 0 0; padding: 0; font-size: 13px; line-height: 1.625; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.pp-col .pp-panel--faq .slqa p a { font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------- 6. «Popular searches» ---- */
/* белая карточка; заголовок display text-xl; ссылки → их чипы rounded-full border-black/10 bg-white/70 px-4 py-2 text-xs font-semibold */
.pp-col .pp-panel--pop .sl-pop { max-width: none; margin: 0; padding: 0; border: 0; }
.pp-col .pp-panel--pop .sl-pop__h {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
  text-transform: none; color: var(--ink);
}
.pp-col .pp-panel--pop .sl-pop__list { gap: 8px; }
.pp-col .pp-panel--pop .sl-pop__list a {
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .7); box-shadow: none;
  font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dark); transition: background-color .15s var(--pp-ease), color .15s var(--pp-ease);
}
.pp-col .pp-panel--pop .sl-pop__list a:hover, .pp-col .pp-panel--pop .sl-pop__list a:focus-visible { background: var(--dark); color: #fff; box-shadow: none; }

/* ------------------------------------------------------------- футер ---- */
/* «Start with your situation» (.slbento, в секции футера на /collections/all) → их панель
   с карточками: rounded-[2rem] mist · заголовок display text-3xl · плитка rounded-3xl border-white/70 bg-white/60 */
.has-pp-chrome .slbento {
  position: relative; isolation: isolate; overflow: hidden; margin: 0 0 24px; padding: 24px; width: auto; max-width: none;
  border-radius: 32px; border: 1px solid rgba(0, 0, 0, .05); background: var(--pp-stats-grad); font-family: var(--font-body);
}
.has-pp-chrome .slbento__head { margin: 0 0 24px; padding: 0; text-align: center; }
.has-pp-chrome .slbento__title {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.has-pp-chrome .slbento__sub { margin: 0 auto; max-width: 28rem; font-size: 14px; line-height: 1.625; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.has-pp-chrome .slbento__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; }
.has-pp-chrome .slbento__tile {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 16px 16px 20px; min-height: 0;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .6); box-shadow: 0 18px 40px -28px rgba(12, 47, 37, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); text-decoration: none; transition: transform .3s var(--pp-ease), box-shadow .3s var(--pp-ease);
}
.has-pp-chrome .slbento__tile:hover { transform: translateY(-4px); box-shadow: 0 24px 55px -30px rgba(12, 47, 37, .5); }
.has-pp-chrome .slbento__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.has-pp-chrome .slbento__eyebrow { font-size: 10px; line-height: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-2); }
.has-pp-chrome .slbento__name { font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.has-pp-chrome .slbento__from { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.has-pp-chrome .slbento__media { flex: 0 0 96px; width: 96px; height: 96px; overflow: hidden; border-radius: 16px; background: #fff; }
.has-pp-chrome .slbento__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transform: scale(var(--z, 1)); }
.has-pp-chrome .slbento__foot { margin: 20px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.has-pp-chrome .slbento__foot a { color: var(--ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; border: 0; }
/* Текст футера не трогаем: только скругление и шрифт, как у их тёмных панелей */
.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; }

/* ----------------------------------------------- анимации появления ---- */
.pp-col .pp-panel.fade-in { transform: translateY(24px); }
.pp-col .pp-panel.fade-in.visible { transform: none; }
.pp-col .pp-panel--hero.fade-load { animation-delay: .1s; }

/* ------------------------------------------------------------ desktop ---- */
@media (min-width: 640px) {
  main.pp-col { padding: 96px 20px 0; }
  .pp-col .pp-panel { padding: 40px; }
  .pp-col .pp-panel--grid { padding: 80px 24px; }
  .pp-col .pp-panel--cta { padding: 20px; }
  .pp-col .pp-panel--cta .sl-close-col > .core__column--wrapper { padding: 56px !important; }
  .pp-col .pp-panel--hero h1.ecom__heading, .pp-col .ecom-builder h1.ecom__heading.sl-h1-fit { font-size: 36px !important; }
  .pp-col .pp-panel .slbody .pp-art > h2, .pp-col .pp-panel .pp-grid-head h2.ecom__heading, .pp-col .pp-panel--faq .sl-colfaq__h, .pp-col .pp-panel--cta h2.ecom__heading { font-size: 36px !important; }
  .pp-col .pp-panel .slbody .pp-art:not(.pp-art--stats) > h2 { font-size: 20px !important; }
  .pp-col .pp-grid-head h2.ecom__heading { font-size: 48px !important; }
  .pp-col .pp-grid > .core__row--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-col .pp-panel--faq .slqa { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pp-col .pp-art:not(.pp-art--stats) { padding: 28px; }
}
@media (min-width: 768px) {
  .pp-col .pp-panel--hero h1.ecom__heading, .pp-col .ecom-builder h1.ecom__heading.sl-h1-fit { font-size: 48px !important; }
  .pp-col .pp-grid > .core__row--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  main.pp-col { max-width: 1140px; margin: 0 auto; }
  .pp-col .pp-panel { padding: 56px; }
  .pp-col .pp-panel--grid { padding: 80px 24px; }
  .pp-col .pp-panel--cta { padding: 20px; }
  .pp-col .pp-panel > .pp-ribbon { left: 76%; }
  .pp-col .pp-panel--hero > .pp-ribbon { left: 75%; }
  .pp-col .pp-panel--grid > .pp-ribbon { left: 82%; }
  .pp-col .pp-panel--hero h1.ecom__heading, .pp-col .ecom-builder h1.ecom__heading.sl-h1-fit { font-size: 60px !important; text-align: left !important; }
  .pp-col .pp-panel--hero .core__blocks--body { align-items: flex-start; text-align: left; }
  .pp-col .pp-panel--hero .sl-lead { margin-left: 0 !important; }
  .pp-col .pp-panel .slbody .pp-art > h2, .pp-col .pp-panel .pp-grid-head h2.ecom__heading, .pp-col .pp-panel--faq .sl-colfaq__h { text-align: left !important; }
  .pp-col .pp-grid-head .core__blocks--body { align-items: flex-start; text-align: left; }
  .pp-col .pp-grid-head .text-content { text-align: left !important; margin-left: 0; }
  .pp-col .pp-art--stats section.slsteps.slsteps--table tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-col .pp-art--stats section.slsteps.slsteps--table tr { text-align: left; }
  .pp-col .pp-art--stats .slsteps__note, .pp-col .pp-art--stats .slbody__pay { text-align: left; }
  .pp-col .pp-grid > .core__row--columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-col .pp-grid .ecom-column > .core__column--wrapper, .pp-col .pp-grid .ecom-image-picture img, .pp-col .pp-panel--faq .slqa summary::after { transition: none; }
}

/* ===== 17.10 — герой «Все товары» по механике hellopepti (src/02b-hero-v2.html, снято с живой страницы):
   тёмный блок, заголовок + 3 галочки + кнопка, справа/снизу три колонки плиток 4:5, rotate(-8deg),
   колонки плывут translateY(0→-50%) 60s/70s(reverse)/55s. Цвета — наши токены. ===== */
@keyframes heroTilesUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hero-tiles-col { animation: heroTilesUp linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero-tiles-col { animation: none; } }
.pp-col .pp-hero2 { position: relative; z-index: 20; background: var(--accent-soft, #fcebc4); margin: 0 0 16px; }
.pp-col .pp-hero2__in { position: relative; width: 100%; overflow: hidden; background: #0b0b0b; display: flex; flex-direction: column; border-radius: 0 0 20px 20px; }
.pp-col .pp-hero2__octo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 75%); mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 75%); }
.pp-col .pp-hero2__copy { position: relative; z-index: 10; order: 1; padding: 44px 16px 32px; text-align: center; }
.pp-col .pp-hero2__h { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 34px; line-height: 1.02; letter-spacing: -.02em; max-width: 42rem; margin: 0 auto; text-wrap: balance; }
.pp-col .pp-hero2__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-col .pp-hero2__list li { display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.9); font: 500 12.5px/1.3 var(--font-body); white-space: nowrap; }
.pp-col .pp-hero2__list svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-col .pp-hero2__cta { margin: 32px auto 0; display: flex; width: fit-content; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: #fff; color: #111827; font: 600 14px/1 var(--font-body); text-decoration: none; transition: background .15s; }
.pp-col .pp-hero2__cta:hover { background: var(--accent, #eaa830); }
.pp-col .pp-hero2__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-col .pp-hero2__tiles { position: relative; order: 2; height: 340px; overflow: hidden; }
.pp-col .pp-hero2__grid { position: absolute; top: -96px; bottom: -96px; left: -40px; right: -64px; display: flex; gap: 16px; transform: rotate(-8deg); transform-origin: center; }
.pp-col .pp-hero2__col { flex: 1 1 0; overflow: visible; }
.pp-col .pp-hero2__track { display: flex; flex-direction: column; gap: 16px; }
.pp-col .pp-hero2__tile { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.pp-col .pp-hero2__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-col .pp-hero2__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 33.33%; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); }
.pp-col .pp-hero2__label { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; color: #fff; font-size: 20px; line-height: 1; padding: 0 8px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.pp-col .pp-hero2__fade { position: absolute; left: 0; right: 0; height: 64px; pointer-events: none; }
.pp-col .pp-hero2__fade--top { top: 0; background: linear-gradient(to bottom, #0b0b0b, transparent); }
.pp-col .pp-hero2__fade--bottom { bottom: 0; background: linear-gradient(to top, #0b0b0b, transparent); }
@media (min-width: 640px) {
  .pp-col .pp-hero2__in { display: block; height: 88dvh; min-height: 620px; border-radius: 0 0 28px 28px; }
  .pp-col .pp-hero2__copy { position: absolute; top: 0; bottom: 0; left: 0; width: 54%; display: flex; align-items: center; padding: 0 0 0 48px; text-align: left; }
  .pp-col .pp-hero2__h { font-size: 46px; margin: 0; }
  .pp-col .pp-hero2__list { margin-top: 32px; gap: 12px; } .pp-col .pp-hero2__list li { justify-content: flex-start; align-items: flex-start; white-space: normal; font-size: 20px; }
  .pp-col .pp-hero2__cta { margin: 32px 0 0; padding: 16px 36px; font-size: 18px; }
  .pp-col .pp-hero2__tiles { position: absolute; top: 0; bottom: 0; right: 0; height: auto; width: 48%; }
  .pp-col .pp-hero2__grid { top: -128px; bottom: -128px; left: 32px; right: -96px; gap: 20px; }
  .pp-col .pp-hero2__track { gap: 20px; } .pp-col .pp-hero2__tile { border-radius: 24px; } .pp-col .pp-hero2__label { font-size: 44px; }
  .pp-col .pp-hero2__tiles::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; width: 25%; z-index: 2; pointer-events: none; background: linear-gradient(to right, #0b0b0b 0%, #0b0b0b 12%, rgba(11,11,11,.6) 55%, transparent 100%); }
}
@media (min-width: 1024px) { .pp-col .pp-hero2__copy { padding-left: 80px; } .pp-col .pp-hero2__h { font-size: 58px; } }
/* 17.10 v2 (владелец): плитки — золото-оранжевое свечение + снимки аппаратов из каталога; низ чёрного — ровный градиент в крем; блок выше */
.pp-col .pp-hero2__in { border-radius: 0; background: linear-gradient(to bottom, #0b0b0b 0%, #0b0b0b 78%, var(--accent-soft, #fcebc4) 100%); }
.pp-col .pp-hero2__copy { padding: 30px 16px 22px; }
.pp-col .pp-hero2__list { margin-top: 18px; gap: 8px; }
.pp-col .pp-hero2__cta { margin-top: 22px; }
.pp-col .pp-hero2__tiles { height: 330px; }
.pp-col .pp-hero2__tile { background: radial-gradient(62% 62% at 50% 46%, #fefcf6 0%, #fdf6e3 45%, #f8c45a 72%, #f2a21c 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 34px rgba(242,162,28,.55), 0 20px 40px -14px rgba(0,0,0,.6); }
.pp-col .pp-hero2__tile img { object-fit: contain; padding: 8% 8% 22%; mix-blend-mode: multiply; }
.pp-col .pp-hero2__shade { height: 40%; background: linear-gradient(to top, rgba(120,60,0,.55), transparent); }
.pp-col .pp-hero2__label { bottom: 9%; font-size: 19px; color: #fff; text-shadow: 0 2px 8px rgba(90,40,0,.6), 0 0 2px rgba(0,0,0,.4); }
.pp-col .pp-hero2__fade--bottom { display: none; }
.pp-col .pp-hero2__tiles::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; z-index: 2; background: linear-gradient(to bottom, rgba(11,11,11,0) 0%, rgba(11,11,11,.85) 45%, var(--accent-soft, #fcebc4) 100%); }
@media (min-width: 640px) { .pp-col .pp-hero2__in { border-radius: 0; } .pp-col .pp-hero2__tiles::after { height: 30%; } }
/* 17.10 v3: низ плиток уходит в чёрный ровной растяжкой (как у Pepti), без серой каши; герой на всю ширину экрана */
.pp-col .pp-hero2__in { background: #0b0b0b; border-radius: 0 0 20px 20px; }
.pp-col .pp-hero2__tiles::after { height: 42%; background: linear-gradient(to bottom, rgba(11,11,11,0) 0%, rgba(11,11,11,.6) 45%, #0b0b0b 100%); }
.pp-col .pp-hero2 { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: transparent; }
.pp-col .pp-hero2__tiles { height: 300px; }
@media (min-width: 640px) { .pp-col .pp-hero2__in { border-radius: 0 0 28px 28px; } .pp-col .pp-hero2__tiles::after { height: 26%; } }
/* панель-обёртка вокруг нового героя — прозрачная, без рамки и отступов (герой на всю ширину, как у Pepti) */
.pp-col .pp-panel--hero:has(.pp-hero2) { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 8px; overflow: visible; }
.pp-col .pp-panel--hero:has(.pp-hero2)::before, .pp-col .pp-panel--hero:has(.pp-hero2) .pp-ribbon { display: none !important; }
.pp-col .pp-hero2 { margin-left: -12px; margin-right: -12px; width: auto; margin-top: 0; }
@media (min-width: 640px) { .pp-col .pp-hero2 { margin-left: -20px; margin-right: -20px; } }
/* 17.10 v4: четыре колонки, плитки — готовые картинки (hero-cat/*.webp: золото, сквиркл-свечение, нарезка), без пакета;
   растяжка: верх плиток долго уходит в чёрный текстового блока, низ — в чёрный края */
.pp-col .pp-hero2__tiles { height: 320px; }
.pp-col .pp-hero2__grid { gap: 12px; left: -36px; right: -52px; top: -80px; bottom: -80px; }
.pp-col .pp-hero2__track { gap: 12px; }
.pp-col .pp-hero2__tile { background: none; box-shadow: 0 0 28px rgba(242,162,28,.35), 0 18px 34px -12px rgba(0,0,0,.65); border-radius: 14px; }
.pp-col .pp-hero2__tile img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pp-col .pp-hero2__shade { display: none; }
.pp-col .pp-hero2__label { bottom: 8%; font-size: 15px; letter-spacing: -.01em; }
.pp-col .pp-hero2__fade--top { height: 150px; background: linear-gradient(to bottom, #0b0b0b 0%, rgba(11,11,11,.85) 30%, rgba(11,11,11,.35) 70%, transparent 100%); z-index: 2; }
.pp-col .pp-hero2__tiles::after { height: 38%; }
.pp-col .pp-hero2__copy { padding-bottom: 6px; }
@media (min-width: 640px) { .pp-col .pp-hero2__grid { gap: 16px; } .pp-col .pp-hero2__track { gap: 16px; } .pp-col .pp-hero2__label { font-size: 30px; } .pp-col .pp-hero2__fade--top { height: 120px; } }
/* v5: плитки крупнее (3 видимых колонки + четвёртая входит), растяжка из чёрного над плитками длиннее и мягче */
.pp-col .pp-hero2__tiles { height: 360px; }
.pp-col .pp-hero2__grid { left: -30px; right: -150px; top: -70px; bottom: -90px; gap: 14px; }
.pp-col .pp-hero2__track { gap: 14px; }
.pp-col .pp-hero2__label { font-size: 17px; }
.pp-col .pp-hero2__fade--top { height: 190px; background: linear-gradient(to bottom, #0b0b0b 0%, rgba(11,11,11,.92) 22%, rgba(11,11,11,.6) 52%, rgba(11,11,11,.2) 80%, transparent 100%); }
.pp-col .pp-hero2__tiles::after { height: 34%; background: linear-gradient(to bottom, rgba(11,11,11,0) 0%, rgba(11,11,11,.55) 50%, #0b0b0b 100%); }
.pp-col .pp-hero2__copy { padding-bottom: 0; }
.pp-col .pp-hero2__fade--top { display: block !important; }
/* v6: растяжка короче и легче — чёрный тает за ~110px, плитки не глушит */
.pp-col .pp-hero2__fade--top { height: 120px; background: linear-gradient(to bottom, #0b0b0b 0%, rgba(11,11,11,.7) 30%, rgba(11,11,11,.25) 65%, transparent 100%); }
.pp-col .pp-hero2__tiles { height: 380px; }
.pp-col .pp-hero2__tiles::after { height: 26%; }
/* v7: «No dentist visit.» оранжевым жирным; наклон плиток зеркально (влево); скорость +30% (в разметке) */
.pp-col .pp-hero2__hl { color: var(--accent, #eaa830); font-weight: 800; }
.pp-col .pp-hero2__grid { transform: rotate(8deg); left: -150px; right: -30px; }
/* v8: «камера дальше» — четыре колонки целиком в кадре, плитки мельче */
.pp-col .pp-hero2__grid { left: -70px; right: -24px; top: -60px; bottom: -70px; gap: 11px; }
.pp-col .pp-hero2__track { gap: 11px; }
.pp-col .pp-hero2__label { font-size: 14px; }
.pp-col .pp-hero2__tiles { height: 350px; }
/* v9: ещё дальше */
.pp-col .pp-hero2__grid { left: -40px; right: -12px; top: -50px; bottom: -60px; gap: 9px; }
.pp-col .pp-hero2__track { gap: 9px; }
.pp-col .pp-hero2__label { font-size: 12.5px; }
.pp-col .pp-hero2__tile { border-radius: 12px; }
/* v10: ещё дальше, +20% скорости (в разметке) */
.pp-col .pp-hero2__grid { left: -20px; right: -4px; top: -40px; bottom: -50px; gap: 8px; }
.pp-col .pp-hero2__track { gap: 8px; }
.pp-col .pp-hero2__label { font-size: 11.5px; }
.pp-col .pp-hero2__tile { border-radius: 10px; }
/* 17.10: карточка-инфографика (v3) заполняет всё окно картинки, без полей */
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) img { width: 100% !important; height: 100% !important; object-fit: cover !important; padding: 0 !important; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) { padding: 0 !important; background: #fff !important; }
/* окно картинки — на всю ширину карточки, квадрат, со скруглением (инфографика v3) */
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]), .pp-col .pp-grid .ecom-image-picture-link:has(img[src*="acrylic-flipper-card-v10"]), .pp-col .pp-grid .ecom-image-default:has(img[src*="acrylic-flipper-card-v10"]) { display: block !important; width: 100% !important; height: auto !important; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) picture { width: 100%; aspect-ratio: 1 / 1; height: auto !important; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) img { height: auto !important; aspect-ratio: 1 / 1; border-radius: 16px; }
/* инфографика v4: скруглённые углы окна */
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) picture, .pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]) img { border-radius: 22px !important; overflow: hidden; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="acrylic-flipper-card-v10"]), .pp-col .pp-grid .ecom-image-picture-link:has(img[src*="acrylic-flipper-card-v10"]), .pp-col .pp-grid .ecom-image-default:has(img[src*="acrylic-flipper-card-v10"]) { background: transparent !important; border-radius: 22px !important; overflow: hidden !important; }
/* 17.10 — инфографика карточки: фон-картинка (снимок + кружок оттенков), живой текст и SVG-стрелки поверх (.slic) */
.pp-col .pp-grid .ecom-image-picture:has(img[src*="-bg.webp"]) { position: relative; display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; background: transparent !important; border-radius: 22px !important; overflow: hidden !important; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="-bg.webp"]) picture { width: 100%; aspect-ratio: 1 / 1; height: auto !important; border-radius: 22px !important; overflow: hidden; }
.pp-col .pp-grid .ecom-image-picture:has(img[src*="-bg.webp"]) img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover !important; padding: 0 !important; border-radius: 22px; }
.pp-col .pp-grid .ecom-image-picture-link:has(img[src*="-bg.webp"]), .pp-col .pp-grid .ecom-image-default:has(img[src*="-bg.webp"]) { display: block !important; width: 100% !important; height: auto !important; position: relative; }
.pp-col .slic { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-body); color: #181818; container-type: inline-size; }
.pp-col .slic p { margin: 0; position: absolute; line-height: 1.3; }
.pp-col .slic b { color: #d68c14; font-weight: 800; }
.pp-col .slic__h { top: 6.2%; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 4.6cqw; line-height: 1.22; }
.pp-col .slic__t { font-weight: 600; font-size: 2.9cqw; top: 26.2%; }
.pp-col .slic__t--l { left: 4.8%; } .pp-col .slic__t--r { left: 61%; }
.pp-col .slic__a { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-col .slic__a path { fill: none; stroke: #d68c14; stroke-width: 5; stroke-linecap: round; marker-end: url(#slicArrow); vector-effect: non-scaling-stroke; }
.pp-col .slic p { letter-spacing: 0 !important; text-transform: none !important; }
.pp-col .slic__a path { stroke-width: 6; vector-effect: none; }
/* v2 оверлея: заголовок нашим display-шрифтом, подзаголовок и подписи в одну строку */
.pp-col .slic__h { font-family: var(--font-display) !important; font-weight: 800; font-size: 5.4cqw; top: 5.5%; letter-spacing: -.02em !important; color: var(--ink); }
.pp-col .slic__s { top: 14.6%; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 3.6cqw; }
.pp-col .slic__t { font-weight: 600; font-size: 2.85cqw; top: 25.5%; white-space: nowrap; }
.pp-col .slic__t--l { left: 4.5%; } .pp-col .slic__t--r { left: auto; right: 4.5%; }
/* v3 оверлея: одна подпись сверху слева, вторая внизу; обе крупнее */
.pp-col .slic__t { font-size: 3.7cqw; }
.pp-col .slic__t--l { left: 4.5%; top: 25%; }
.pp-col .slic__t--b { left: 0; right: 0; text-align: center; top: auto; bottom: 7.5%; }
.pp-col .slic__h { font-size: 5.8cqw; top: 5%; }
.pp-col .slic__s { font-size: 3.9cqw; top: 14.8%; }
/* оверлей на всех карточках: правая верхняя подпись может быть в 2 строки, подзаголовок — до 3 строк */
.pp-col .slic__t--r { left: auto; right: 4.5%; top: 25%; text-align: right; white-space: normal; max-width: 44%; line-height: 1.25; }
.pp-col .slic__s { padding: 0 6%; line-height: 1.3; text-wrap: balance; }