/* ============================================================
   YourFit — лендинг «Товары для пилатеса оптом» (YOURFIT-635).

   Версия 3, 15 октября 2026. Эталон — макет «Оптовый лендинг | йога»
   (узел 6887:762), тот, что сейчас на проде и на который ссылается ТЗ.
   Геометрия снята из метаданных Figma по узлам секций:

     контейнер 1204 (у нас 1200 — решение проекта, подтверждено замером сайта);
     Offer: сетка 3×3 с пропусками, карточка 388×460, шаг 408×480;
     Для кого: три колонки 388, карточки 448 / 212 / 680 / 280 / 380, зазор 20;
     Оптовые условия: две колонки 388, левая сдвинута вниз на 183, паттерн справа;
     Преимущества: три ряда вразбивку, зазор 32, декоративный ряд 399 через 120;
     FAQ: карточки-пилюли 108, раскрытая — коричневая с белым текстом;
     CTA: половины 592 + 592, поля в одну колонку, кнопка выключена до согласия.

   Палитра эталона: беж, плотный беж, графит, белый. Зелёного на этой
   странице нет — он из другой серии макетов (Opt / Final).

   Версии 1 и 2 лежат в _v1/ для сравнения.
   ============================================================ */

@font-face {
  font-family: "TT Hoves Pro YF";
  src: url("../fonts/TT_Hoves_Pro_Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Hoves Pro YF";
  src: url("../fonts/TT_Hoves_Pro_DemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Hoves Pro YF Exp";
  src: url("../fonts/TT_Hoves_Pro_Expanded_DemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

.yf-pil,
.yf-pil-modal {
  --black: #111111;
  --white: #ffffff;
  --grey: #5e5e5e;
  --grey-placeholder: #8a8a8a;
  --grey-disabled: #c3c3c3;
  --line: #e6e4e1;
  --surface: #f9f9f9;
  --beige: #efded3;          /* светлая поверхность карточек */
  --beige-strong: #dcc1b0;   /* плотная поверхность */
  --clay: #c9a68d;           /* графика и тёмная бежевая карточка */
  --brown: #825e45;          /* графика эталона: цифры, иконки, раскрытый FAQ */
  --brown-hover: #72523c;
  /* Чередование фонов карточек — схема реализованных страниц (карьера, блог, опт):
     нейтральный серый, бежевый, светло-зелёный. Зелёная кнопка — Primary CTA. */
  --surface-neutral: #f9f9f9;
  --green-pale: #edf4e9;
  --green-mid: #92b278;
  --green-btn: #568445;
  --green-btn-hover: #4a7139;
  --green-btn-focus: #3f6131;
  --red: #da3a3c;

  --font-text: "Hoves", "TT Hoves Pro YF", system-ui, sans-serif;
  --font-display: "HovesBold", "TT Hoves Pro YF Exp", "TT Hoves Pro YF", sans-serif;

  --radius-card: 24px;
  --radius-sm: 16px;
  --radius-pill: 100px;
  /* Размеры контролов — из кита проекта (css/tokens.css дизайн-системы),
     а не придуманные: кнопка 60, малая 52, поле 64 с полями 18/20. */
  --control-h: 60px;
  --control-h-sm: 52px;
  --field-h: 64px;
  --field-pad-x: 20px;
  --field-pad-y: 18px;

  --container: 1200px;
  --container-pad: 20px;
  --gap: 20px;
  --section-gap: 122px;   /* замер эталона: между секциями ровно 122 */
  --gap-title: 40px;
  --gap-lead: 42px;
  --card-pad: 24px;

  font: 400 16px/1.45 var(--font-text);
  color: var(--black);
}
/* Белый фон — только у страницы. У слоя поп-апа он закрашивал страницу
   под затемнением, и «прозрачность» фона не читалась. */
.yf-pil { background: var(--white); }

.yf-pil *, .yf-pil *::before, .yf-pil *::after,
.yf-pil-modal *, .yf-pil-modal *::before, .yf-pil-modal *::after { box-sizing: border-box; }
.yf-pil img { max-width: 100%; height: auto; display: block; }
/* Сбросы с нулевой специфичностью: иначе `.yf-pil p` перебивал отбивки,
   заданные классами (0,1,1 против 0,1,0) — так пропал отступ в первом экране. */
.yf-pil :where(ul, ol), .yf-pil-modal :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.yf-pil :where(p), .yf-pil-modal :where(p) { margin: 0; }
/* Сброс цвета только для ссылок без своего класса: «.yf-pil a» специфичнее
   компонентов (.yf-pil__btn, .yf-pil__link-arrow) и перекрывал их цвет —
   текст кнопки-ссылки получался чёрным на чёрном. */
.yf-pil :where(a) { color: inherit; text-underline-offset: 3px; }

.yf-pil__container {
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin: 0 auto; padding: 0 var(--container-pad);
}
.yf-pil__section { padding-top: var(--section-gap); scroll-margin-top: 24px; }
.yf-pil__section:last-of-type { padding-bottom: var(--section-gap); }
.yf-pil__sub { margin-top: var(--section-gap); }

/* ---------- типографика и ритм ---------- */
.yf-pil__h1, .yf-pil__h2 { font: 400 56px/1.2 var(--font-display); margin: 0; }
/* Ширины сняты замером: половина длины строки плюс запас — заголовок ложится ровно в две строки. */
#about .yf-pil__h1 { max-width: 680px; }
#whom .yf-pil__h2 { max-width: 1020px; }
#equipment .yf-pil__h2 { max-width: 880px; }
#advantages .yf-pil__h2 { max-width: 690px; }
#pricing .yf-pil__h2, #cases .yf-pil__h2 { max-width: 660px; }
#faq .yf-pil__h2 { max-width: 950px; }
#contacts .yf-pil__h2 { max-width: 540px; }
.yf-pil__h1 { font-size: 62px; }

.yf-pil__h3 { font: 400 32px/1.25 var(--font-display); margin: 0; }
.yf-pil__h4 { font: 400 24px/1.25 var(--font-display); margin: 0; }
.yf-pil__lead { font-size: 20px; line-height: 1.4; max-width: 900px; margin: 0; }
.yf-pil__note { font-size: 14px; color: var(--grey); }

.yf-pil__container > :is(.yf-pil__h1, .yf-pil__h2, .yf-pil__h3) + * { margin-top: var(--gap-title); }
.yf-pil__container > :is(.yf-pil__h1, .yf-pil__h2) + .yf-pil__lead { margin-top: 20px; }
.yf-pil__container > .yf-pil__lead + * { margin-top: var(--gap-lead); }
.yf-pil__container > * + .yf-pil__h3 { margin-top: var(--section-gap); }

/* ---------- кнопки и ссылки ---------- */
/* Кнопка кита: высота 60, отступы 8/32, типографика text-l 20/1.4. */
.yf-pil__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 8px 32px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--black); color: var(--white);
  font: 400 20px/1.4 var(--font-display);
  text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.yf-pil__btn:hover { background: #2d2d2d; }
.yf-pil__btn:focus-visible { background: #202020; outline: 2px solid var(--green-btn); outline-offset: 2px; }
.yf-pil__btn--green { background: var(--green-btn); }
.yf-pil__btn--green:hover { background: var(--green-btn-hover); }
.yf-pil__btn--green:focus-visible { background: var(--green-btn-focus); }
.yf-pil__btn--white { background: var(--white); color: var(--black); }
.yf-pil__btn--white:hover { background: #ece7e2; }
/* Зелёная кнопка на странице ровно одна — отправка заявки в финальном блоке,
   как на «Карьере». Белый текст на #568445 даёт 4,39:1. Остальные кнопки
   графитовые, белая — поверх фото первого экрана. */
.yf-pil__btn--sm { min-height: var(--control-h-sm); min-width: 0; padding: 8px 20px; font-size: 16px; }
.yf-pil__btn:disabled,
.yf-pil__btn:disabled:hover { background: var(--grey-disabled); color: var(--white); cursor: not-allowed; }
.yf-pil__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

.yf-pil__link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 400 16px/1.4 var(--font-display); color: var(--black); text-decoration: none;
}
.yf-pil__link-arrow::after { content: "»"; }
.yf-pil__link-arrow:hover { color: var(--brown); }
.yf-pil__link-arrow--white { color: var(--white); }
.yf-pil__link-arrow--white:hover { color: #ece7e2; }

/* ---------- 01 Первый экран ----------
   Композиция F: заголовок, под ним лид, под ним действия — всё по левому краю,
   взгляд идёт двумя горизонтальными штрихами и возвращается влево.
   Декоративная полоса с леттерингом убрана: приём брендбука так не работает.
   Подложка нужна — белый текст иначе не читается на светлом кадре. */
.yf-pil__hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--black); }
.yf-pil__hero-media { position: absolute; inset: 0; margin: 0; }
.yf-pil__hero-media picture { display: block; width: 100%; height: 100%; }
.yf-pil__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.yf-pil__hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.78) 0%, rgba(17,17,17,.62) 56%, rgba(17,17,17,.18) 100%);
}
.yf-pil__hero-inner { position: relative; width: 100%; padding-top: 80px; padding-bottom: 80px; color: var(--white); }
.yf-pil__hero-title { font: 400 56px/1.12 var(--font-display); max-width: 760px; margin: 0; }
.yf-pil__hero-lead { font-size: 20px; line-height: 1.45; max-width: 560px; margin: 24px 0 0; }
.yf-pil__hero .yf-pil__cta-row { margin-top: 40px; }

/* ---------- 02 Offer ----------
   Сетка 3×3 с пропусками: карточка 388×460, шаг 408×480. Позиция каждой
   карточки задана переменными --col/--row прямо в разметке, как в макете. */
.yf-pil__offer {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 460px; gap: var(--gap);
}
.yf-pil__offer-card {
  grid-column: var(--col); grid-row: var(--row);
  position: relative; overflow: hidden; padding: var(--card-pad);
  border-radius: var(--radius-card); background: var(--surface-neutral);
  display: flex; flex-direction: column; gap: 12px;
}
.yf-pil__offer-card p { font-size: 16px; line-height: 1.45; }
.yf-pil__offer-num { font: 400 56px/1 var(--font-display); margin-top: auto; }
.yf-pil__offer-card--arcs { background: var(--beige); }
/* Паттерн — слой под содержимым. Раньше он лежал поверх и резал заголовок. */
.yf-pil__offer-card--arcs::before {
  content: ""; position: absolute; left: 50%; top: 104px; width: 243px; height: 243px;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: var(--beige-strong);
  -webkit-mask: url("../img/figma/pattern-arcs.svg") center / contain no-repeat;
  mask: url("../img/figma/pattern-arcs.svg") center / contain no-repeat;
}
.yf-pil__offer-card > *:not(img) { position: relative; z-index: 2; }
.yf-pil__offer-card--arcs .yf-pil__offer-num { margin: 0 0 auto; }
.yf-pil__offer-card--arcs h3 { margin-top: 243px; }
.yf-pil__offer-card--clay { background: var(--clay); color: var(--white); }
.yf-pil__offer-card--clay .yf-pil__offer-num { margin: 0 0 auto; }
.yf-pil__offer-card--photo { padding: 0; }
.yf-pil__offer-card--photo img { width: 100%; height: 100%; object-fit: cover; }
.yf-pil__offer-card--overlay { padding: 0; color: var(--white); }
.yf-pil__offer-card--overlay img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.yf-pil__offer-card--overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.28) 42%, rgba(17,17,17,.76) 100%);
}
.yf-pil__offer-copy { position: relative; z-index: 1; margin-top: auto; padding: var(--card-pad); display: grid; gap: 10px; }
.yf-pil__offer-copy .yf-pil__offer-num { margin: 0; font-size: 48px; }

.yf-pil__logos-block { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.yf-pil__logos-title { font: 400 32px/1.25 var(--font-display); color: var(--black); margin: 0 0 40px; }
/* Ряд логотипов: одинаковые боксы 160×48, логотип вписан внутрь и выровнен
   по центру — иначе разные пропорции исходников дают рваный ряд.
   Монохром: кроме цвета, ничего в ряду не должно спорить с кадром страницы. */
/* Бегущая строка: два одинаковых ряда едут влево, второй подставляется
   встык. Пауза по наведению, при prefers-reduced-motion лента стоит. */
.yf-pil__marquee { display: flex; gap: 56px; overflow: hidden; margin-top: 8px; }
.yf-pil__marquee:hover .yf-pil__logos { animation-play-state: paused; }
.yf-pil__logos {
  display: flex; align-items: center; gap: 56px; flex: 0 0 auto;
  animation: yf-pil-marquee 32s linear infinite;
}
@keyframes yf-pil-marquee { to { transform: translateX(calc(-100% - 56px)); } }
@media (prefers-reduced-motion: reduce) { .yf-pil__logos { animation: none; } }
.yf-pil__logos li { display: grid; place-items: center; height: 56px; flex: 0 0 auto; }
.yf-pil__logos img {
  max-width: 150px; max-height: 40px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: .78;
}
/* Пропорции исходников разные: вытянутому знаку нужна большая ширина. */
.yf-pil__logos [data-slot="logo-theflex"] img { max-width: 150px; }
.yf-pil__logos [data-slot="logo-sberzdorovie"] img { max-width: 175px; }
.yf-pil__logos [data-slot="logo-magnit"] img { max-width: 160px; }
.yf-pil__logos [data-slot="logo-metro-fitness"] img { max-width: 158px; }
/* Два исходника сами по себе светлые — добираем плотность. */
.yf-pil__logos [data-slot="logo-metro-fitness"] img,
.yf-pil__logos [data-slot="logo-gazprom-polyana"] img { filter: grayscale(1) contrast(1.25) brightness(.72); }

/* ---------- 03 Навигация и каталог ---------- */
.yf-pil__nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.yf-pil__nav-card {
  display: grid; gap: 12px; justify-items: start; align-content: start;
  grid-template-rows: auto 1fr auto;
  padding: 32px; border-radius: var(--radius-card); background: var(--beige); text-decoration: none;
  transition: background .15s ease;
}
.yf-pil__nav-note { font-size: 16px; line-height: 1.45; }
.yf-pil__nav-card .yf-pil__link-arrow { margin-top: 8px; }
/* Второй кластер стоит на светло-зелёном: бежевая обводка на нём выцветает,
   поэтому чипсы и кнопки карточек там чёрные, заливка приходит по наведению. */
#pro .yf-pil__chip { box-shadow: inset 0 0 0 1px var(--black); }
#pro .yf-pil__chip:hover { background: var(--black); color: var(--white); }
#pro .yf-pil__chip:hover .yf-pil__chip-count { color: rgba(255,255,255,.7); }
#pro .yf-pil__chip.is-active { background: var(--black); color: var(--white); box-shadow: none; }
#pro .yf-pil__chip.is-active .yf-pil__chip-count { color: rgba(255,255,255,.7); }
.yf-pil__nav-card:hover { background: var(--beige-strong); }
.yf-pil__nav-card--green { background: var(--green-pale); }
.yf-pil__nav-card--green:hover { background: #e2eddb; }
.yf-pil__nav-card p { font-size: 16px; }

.yf-pil__shop { margin-top: var(--gap); padding: 24px; border-radius: var(--radius-card); background: var(--surface); }
.yf-pil__shop-head p { font-size: 16px; color: #3d3d3d; margin-top: 10px; max-width: 760px; }
.yf-pil__shop-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 206px 206px; gap: var(--gap); margin-top: var(--gap); }
.yf-pil__shot { position: relative; margin: 0; border-radius: var(--radius-sm); }
.yf-pil__shot img { border-radius: var(--radius-sm); }
.yf-pil__shot--lead { grid-row: span 2; }
.yf-pil__shot img { width: 100%; height: 100%; object-fit: cover; }
.yf-pil__hotspot {
  position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; cursor: pointer;
  /* Заливка полупрозрачная: кадр под маркером виден. Чтобы белый плюс
     при этом читался на светлой фактуре, под ним лёгкое затемнение
     и размытие — одного слоя 15 % мало. */
  background: rgba(17, 17, 17, .15);
  -webkit-backdrop-filter: blur(3px) brightness(.82);
  backdrop-filter: blur(3px) brightness(.82);
  box-shadow: 0 0 0 2px var(--white), 0 2px 10px rgba(17, 17, 17, .3);
  transition: background .15s ease, box-shadow .15s ease;
}
.yf-pil__hotspot:hover { background: rgba(130, 94, 69, .55); box-shadow: 0 0 0 2px var(--white), 0 4px 14px rgba(17, 17, 17, .4); }
.yf-pil__hotspot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.yf-pil__hotspot::before,
.yf-pil__hotspot::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--white); transform: translate(-50%, -50%); }
.yf-pil__hotspot::before { width: 14px; height: 2px; }
.yf-pil__hotspot::after { width: 2px; height: 14px; }
/* Карточка точки: сбоку от маркера, с отбивкой 28 и собственной тенью,
   чтобы не ложиться на товар и читаться на светлом кадре. */
.yf-pil__hotspot-card {
  position: absolute; z-index: 3; width: 264px; padding: 16px 18px;
  transform: translate(28px, -50%);
  border-radius: var(--radius-sm); background: var(--white);
  box-shadow: 0 10px 30px rgba(17,17,17,.22), 0 0 0 1px rgba(17,17,17,.06);
  display: grid; gap: 4px;
}
.yf-pil__hotspot-card--left { transform: translate(calc(-100% - 28px), -50%); }

.yf-pil__hotspot-photo { display: none; }
.yf-pil__hotspot-name {
  font: 400 16px/1.35 var(--font-display);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yf-pil__hotspot-price { font: 400 20px/1.2 var(--font-display); margin: 6px 0 10px; }
.yf-pil__hotspot-link { color: var(--black); font-family: var(--font-display); font-size: 15px; }
.yf-pil__hotspot[aria-expanded="true"] { background: var(--brown); backdrop-filter: none; -webkit-backdrop-filter: none; }
.yf-pil__hotspot[aria-expanded="true"]::before { background: var(--white); }
.yf-pil__hotspot[aria-expanded="true"]::before,
.yf-pil__hotspot[aria-expanded="true"]::after { background: var(--white); }
.yf-pil__hotspot[aria-expanded="true"]::after { display: none; }
.yf-pil__hotspot-name { font-family: var(--font-display); }
.yf-pil__hotspot-link { color: var(--brown); }

.yf-pil__chips-title { margin-top: 56px; font-size: 16px; color: var(--grey); }
.yf-pil__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.yf-pil__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--clay);
  text-decoration: none; font-size: 15px;
}
.yf-pil__chip:hover { background: var(--beige); }
/* Низ первого кластера: чипсы в 16 от блока «Соберите комплект»,
   кнопка каталога по центру в 24 от чипсов. */
.yf-pil__center { display: flex; justify-content: center; }
.yf-pil__chips + .yf-pil__center { margin-top: 24px; }
#small > .yf-pil__chips { margin-top: 16px; }

/* Чипсы-фильтры витрины: в эталоне активный чипс залит бежевым,
   остальные — обводкой. Счётчик моделей приходит из Битрикса. */
/* Снизу у чипсов было 32 и текст к ним прилипал — добавил 16. */
.yf-pil__chips--filter { gap: 12px; margin: 16px 0 48px; }
.yf-pil__chips--filter .yf-pil__chip {
  gap: 8px; border: 0; cursor: pointer;
  font: 400 16px/1.2 var(--font-display); background: transparent;
  box-shadow: inset 0 0 0 1px var(--clay);
}
.yf-pil__chips--filter .yf-pil__chip.is-active { background: var(--beige); box-shadow: none; }
.yf-pil__chip-count { font: 400 14px/1.2 var(--font-text); color: var(--grey); }
.yf-pil__pro-desc { margin-top: 0; font-size: 16px; line-height: 1.5; color: #3d3d3d; max-width: 900px; }
.yf-pil__pro-desc + .yf-pil__note { margin-top: 20px; }

/* Группы — горизонтальные ряды со snap, как витрина каталога в эталоне:
   все 24 карточки остаются в DOM, но секция не растёт на четыре сетки. */
.yf-pil__products {
  display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: var(--gap);
  margin-top: 32px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 8px; scrollbar-width: thin;
}
.yf-pil__product { scroll-snap-align: start; }
/* [hidden] из браузерного стиля слабее классов — без этой строки фильтр витрины
   не прятал карточки. */
.yf-pil__product[hidden] { display: none; }
/* Подсветка раздела после перехода из навигатора. */
.yf-pil__sub.is-targeted { animation: yf-pil-target 1.2s ease; }
@keyframes yf-pil-target {
  0% { background: var(--beige); }
  100% { background: transparent; }
}
/* Карточки одной высоты: описание тянется, цена и кнопка стоят по общей линии. */
.yf-pil__product { display: grid; gap: 6px; grid-template-rows: auto auto 1fr auto auto; height: 100%; }
.yf-pil__product-photo { align-self: start; }
.yf-pil__product-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.yf-pil__product-photo { background: var(--white); overflow: hidden; }
.yf-pil__products { align-items: stretch; }
/* Кнопка карточки — вторичная: обводка вместо заливки, уже и легче,
   чтобы не спорить с чёрной кнопкой блока «Помочь выбрать модель». */
.yf-pil__product .yf-pil__btn--sm {
  justify-self: start; margin-top: 16px; height: 44px; padding: 0 20px;
  background: transparent; color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black); font-size: 15px;
}
.yf-pil__product .yf-pil__btn--sm:hover { background: var(--black); color: var(--white); }
/* Слот вертикальный, как карточки товара на сайте: оборудование высокое,
   в горизонтальном кадре его приходилось резать. */
.yf-pil__product-photo { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: var(--surface); }
.yf-pil__badge {
  position: absolute; right: 12px; top: 12px; padding: 6px 14px;
  border-radius: var(--radius-pill); background: var(--clay); color: var(--white); font-size: 13px;
}
.yf-pil__product-name { font: 400 18px/1.25 var(--font-display); margin: 0; }
.yf-pil__product-props { font-size: 14px; line-height: 1.4; color: #3d3d3d; }
.yf-pil__product-price { font: 400 20px/1.2 var(--font-display); }
.yf-pil__product-opt {
  border: 0; background: none; padding: 0; cursor: pointer; justify-self: center;
  font: 400 14px/1.4 var(--font-display); color: var(--black);
}
.yf-pil__product-opt:hover { color: var(--brown); }
.yf-pil__pro-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 40px; padding: 24px 32px; border-radius: var(--radius-card); background: var(--surface-neutral);
}
.yf-pil__pro-foot p { font-size: 16px; max-width: 640px; }

/* ---------- 05 Для кого ----------
   Три колонки 388; высоты карточек 448 / 212 / 680 / 280 / 380 — из макета. */
/* Колонки тянутся до общей нижней линии: иначе правая колонка кончалась
   на 26 px выше карточки «Реформер-студии». */
.yf-pil__whom { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.yf-pil__whom-col { display: grid; gap: var(--gap); grid-template-rows: auto 1fr; align-content: stretch; }
.yf-pil__whom-card {
  position: relative; overflow: hidden; padding: var(--card-pad);
  border-radius: var(--radius-card); background: var(--beige);
  display: flex; flex-direction: column; gap: 12px;
}
.yf-pil__whom-card p { font-size: 16px; line-height: 1.45; }
.yf-pil__whom-card--tall { min-height: 448px; }
.yf-pil__whom-card--full { min-height: 680px; justify-content: flex-end; }
.yf-pil__whom-card--dark { background: var(--black); color: var(--white); min-height: 212px; }
.yf-pil__whom-col:last-child .yf-pil__whom-card--dark { min-height: 280px; }
.yf-pil__whom-col:last-child .yf-pil__whom-card--beige { min-height: 380px; }
.yf-pil__whom-card--clay { background: var(--clay); color: var(--white); }
.yf-pil__whom-card--green { background: var(--green-pale); }
.yf-pil__whom-card figure { margin: 0 0 12px; border-radius: var(--radius-sm); overflow: hidden; }
.yf-pil__whom-card figure img { width: 100%; height: 200px; object-fit: cover; }
.yf-pil__whom-pattern {
  position: absolute; left: 50%; top: 123px; width: 243px; height: 243px; transform: translateX(-50%);
  background: url("../img/figma/pattern-arcs.svg") center / contain no-repeat;
}
/* Вектор из макета (узел 6887:1381), а не нарисованный мной. */
.yf-pil__whom-icon {
  width: 80px; height: 144px; display: block; margin-bottom: 8px; background: var(--clay);
  -webkit-mask: url("../img/figma/whom-arcs.svg") left top / contain no-repeat;
  mask: url("../img/figma/whom-arcs.svg") left top / contain no-repeat;opacity: 0;
}

/* ---------- 06 Преимущества ----------
   Нумерация вразбивку: три ряда, позиция каждого пункта задана --col/--row. */
.yf-pil__benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.yf-pil__benefit {
  min-height: 200px; padding: 32px;
  border-radius: var(--radius-card); background: var(--surface-neutral);
  display: grid; align-content: start; gap: 8px;
}

/* Чередование фонов: серый, бежевый, светло-зелёный — схема реализованных страниц. */
.yf-pil__benefit:nth-child(2) { background: var(--beige); }
.yf-pil__benefit:nth-child(4) { background: var(--green-pale); }
.yf-pil__benefit:nth-child(6) { background: var(--green-pale); }
.yf-pil__benefit-num { font: 400 16px/1 var(--font-display); color: var(--brown); }
.yf-pil__benefit h3 { font: 400 24px/1.25 var(--font-display); margin: 0; }
.yf-pil__benefit p { font-size: 15px; line-height: 1.45; color: #3d3d3d; }

.yf-pil__adv-decor { display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: var(--gap); align-items: center; margin-top: 64px; }
/* Вектор из макета: круг-подложка бежевая, сама форма — глиной, иначе
   графика сливалась с белым фоном секции. */
.yf-pil__adv-pattern {
  width: 220px; height: 220px; justify-self: start; display: block;
  background: url("../img/figma/adv-dots-brown.svg") center / contain no-repeat;
}
.yf-pil__adv-decor figure { margin: 0; }
.yf-pil__adv-decor img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: var(--beige); }

.yf-pil__materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px var(--gap); }
.yf-pil__materials li { padding: 24px; border-radius: var(--radius-card); background: var(--surface-neutral); }
.yf-pil__materials li:nth-child(2),
.yf-pil__materials li:nth-child(6) { background: var(--green-pale); }
.yf-pil__materials h3 { font: 400 20px/1.25 var(--font-display); margin: 0 0 6px; }
.yf-pil__materials p { font-size: 15px; line-height: 1.45; color: var(--grey); }

/* ---------- 03 Оптовые условия ----------
   Две колонки 388, левая сдвинута вниз на 183, декоративный паттерн справа.
   Карточек в этой секции в эталоне нет — только иконка, заголовок и текст. */
.yf-pil__terms { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 56px 60px; align-items: start; }
.yf-pil__term { display: grid; gap: 10px; align-content: start; }
/* Кнопка вынесена из карточки со шкалой в свою ячейку: внутри карточки она
   растягивала вторую строку сетки и под «Профессиональным оборудованием»
   оставалась дыра в полэкрана. */
.yf-pil__terms-cta { align-self: start; }
.yf-pil__term-icon { display: block; }
.yf-pil__term p { font-size: 16px; line-height: 1.5; }
.yf-pil__terms-pattern { grid-column: 3; grid-row: 1 / span 2; width: 100%; height: auto; align-self: center; }
.yf-pil__terms .yf-pil__btn { justify-self: start; }
.yf-pil__scale { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: 16px; }
.yf-pil__scale dt { color: var(--grey); }
.yf-pil__scale dd { margin: 0; font-family: var(--font-display); }

/* Ценовые карточки: пилюля с форматом, крупная цифра, пояснение и действие.
   Фоны чередуются — серый, бежевый, светло-зелёный. */
.yf-pil__prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
/* Ссылка прижата к низу карточки: строки описаний разной длины,
   без этого «Выбрать реформер» уезжал ниже соседей. */
.yf-pil__price {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px;
  min-height: 380px; padding: 40px 32px;
  border-radius: var(--radius-card); background: var(--surface-neutral);
}
.yf-pil__price--mid { background: var(--beige); }
.yf-pil__price--top { background: var(--green-pale); }
.yf-pil__price-num { font: 400 32px/1.2 var(--font-display); text-wrap: balance; }
.yf-pil__price--top .yf-pil__price-num { color: var(--green-btn); }
.yf-pil__price-note { font-size: 15px; line-height: 1.45; color: #3d3d3d; }
.yf-pil__price .yf-pil__link-arrow { align-self: end; justify-self: start; }
.yf-pil__price .yf-pil__pill { justify-self: start; }

/* ---------- 07 Кейсы ----------
   Лента с управлением: кнопки листают на карточку, прокрутка пальцем работает.
   Без кнопок было непонятно, что лента вообще листается. */
.yf-pil__cases-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 24px; }
.yf-pil__cases-head .yf-pil__lead { margin-top: 20px; }
.yf-pil__slider-nav { display: flex; gap: 12px; flex: 0 0 auto; }
.yf-pil__slider-btn {
  width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--beige); position: relative; transition: background .15s ease;
}
.yf-pil__slider-btn:hover:not(:disabled) { background: var(--beige-strong); }
.yf-pil__slider-btn:disabled { background: var(--surface-neutral); opacity: 1; cursor: default; }
.yf-pil__slider-btn:disabled::before { border-color: #c4c4c4; }
.yf-pil__slider-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  border-left: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: translate(-40%, -50%) rotate(45deg);
}
.yf-pil__slider-btn--next::before { transform: translate(-60%, -50%) rotate(-135deg); }

.yf-pil__cases {
  display: grid; grid-auto-flow: column; grid-auto-columns: 478px; gap: var(--gap);
  margin-top: var(--gap-lead); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin;
}
.yf-pil__case { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.yf-pil__shop { background: var(--surface-neutral); }
.yf-pil__case figure { margin: 0 0 6px; border-radius: var(--radius-card); overflow: hidden; }
.yf-pil__case img { width: 100%; height: 300px; object-fit: cover; }
.yf-pil__case-city { font-size: 14px; color: var(--brown); }
.yf-pil__case-facts { display: grid; grid-template-columns: 86px 1fr; gap: 6px 16px; margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.yf-pil__case-facts dt { font-family: var(--font-display); color: var(--grey); }
.yf-pil__case-facts dd { margin: 0; }

/* ---------- Состояния наведения ----------
   Собраны в одном месте: раньше часть ссылок не имела своего ховера
   и не отзывалась на курсор. */
.yf-pil__hotspot-link:hover,
.yf-pil__contacts a:hover,
.yf-pil__strip a:hover,
.yf-pil__check a:hover { color: var(--brown); }
.yf-pil__faq-item summary:hover { color: var(--brown); }
.yf-pil__faq-item[open] summary:hover { color: #efded3; }
.yf-pil__case:hover figure img { transform: scale(1.03); }
.yf-pil__case figure img { transition: transform .25s ease; }
.yf-pil__logos img { transition: opacity .2s ease, filter .2s ease; }
.yf-pil__logos li:hover img { opacity: 1; filter: grayscale(1) contrast(1.15); }
.yf-pil__product:hover .yf-pil__product-photo { background: var(--beige); }
.yf-pil__product-photo { transition: background .2s ease; }
.yf-pil__price:hover .yf-pil__link-arrow,
.yf-pil__case:hover .yf-pil__link-arrow { color: var(--brown); }
/* На зелёной карточке коричневый выглядит грязно — ведём в зелёный кнопки. */
.yf-pil__price--top:hover .yf-pil__link-arrow { color: var(--green-btn); }

/* ---------- 09 CTA с формой ----------
   Две половины 592: слева бежевая карточка с полями в одну колонку,
   справа фото. Кнопка выключена, пока не отмечено согласие. */
/* Две отдельные карточки 592 с зазором 56 — так собран блок CTA
   на действующем йога-лендинге (/catalog/yoga-optom/#cta-form). */
.yf-pil__form-card { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.yf-pil__form-side {
  display: grid; align-content: start;
  border-radius: var(--radius-card); background: var(--beige); overflow: hidden;
}
.yf-pil__form-copy { padding: 40px 40px 8px; display: grid; gap: 16px; align-content: start; }
.yf-pil__h2--form { font-size: 36px; line-height: 1.2; max-width: 100%; }
.yf-pil__form-copy p { font-size: 16px; }
.yf-pil__form { display: grid; gap: 12px; padding: 24px 40px 40px; }
.yf-pil__form .yf-pil__check + .yf-pil__check { margin-top: -4px; }
.yf-pil__field { display: grid; }
/* Поле кита: высота 64, отступы 18/20, рамка 1 px серая, радиус pill. */
.yf-pil__field input,
.yf-pil__field select,
.yf-pil__field textarea {
  width: 100%; min-height: var(--field-h);
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 400 16px/1.4 var(--font-text); color: var(--black); background: var(--white);
}
.yf-pil__field textarea { border-radius: var(--radius-card); resize: vertical; }
/* Селект: убираем системный вид и рисуем одну стрелку, иначе в Safari и Chrome
   контрол выглядит по-разному и ломает ряд полей. */
.yf-pil__field--select { position: relative; }
.yf-pil__field select {
  appearance: none; padding-right: 52px; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.yf-pil__field--select::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.yf-pil__field :is(input, select, textarea):focus-visible { outline: 2px solid var(--brown); outline-offset: 1px; }
.yf-pil__field ::placeholder { color: var(--grey-placeholder); }
.yf-pil__form .yf-pil__btn { width: 100%; margin-top: 8px; }
.yf-pil__check { display: flex; gap: 4px; align-items: flex-start; font: 400 14px/1.4 var(--font-text); color: #494949; }
/* Чекбокс кита: 20×20, рамка 1,5 px, радиус 4, отмеченный — графитовый. */
.yf-pil__check input {
  appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 4px 0 0;
  border: 1.5px solid #494949; border-radius: 4px; background: transparent; cursor: pointer;
}
.yf-pil__check input:checked { background: var(--black); border-color: var(--black); }
.yf-pil__check input:checked::after { content: "✓"; display: block; color: #fff; font-size: 13px; line-height: 17px; text-align: center; }
.yf-pil__check input:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.yf-pil__check a { color: var(--brown); }
.yf-pil__form-photo { margin: 0; border-radius: var(--radius-card); overflow: hidden; height: 100%; }
.yf-pil__form-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Контакты — единственный полностью зелёный блок страницы.
   Так же устроен блок вакансий на «Карьере» и секция контактов в опт-финале:
   светло-зелёная поверхность, графитовые кнопки, фото справа. */
/* Снято с узла 9786:15092: карточка 1200×444, поля 40, текст 550, фото 550×364,
   зазор 20; заголовок → контакты 46, контакты → мессенджеры 46. */
.yf-pil__contacts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 550px)); gap: 20px;
  justify-content: space-between; align-items: start;
  padding: 40px; border-radius: var(--radius-card); background: var(--green-pale);
}
.yf-pil__contacts-copy { display: grid; align-content: start; }
.yf-pil__contacts-info { margin-top: 46px; display: grid; gap: 12px; }
.yf-pil__contacts-phone { font: 400 28px/1.2 var(--font-display); }
.yf-pil__contacts-mail { font-size: 20px; color: #3d3d3d; }
.yf-pil__contacts-phone a, .yf-pil__contacts-mail a { text-decoration: none; }
.yf-pil__contacts-phone a:hover, .yf-pil__contacts-mail a:hover { text-decoration: underline; }
.yf-pil__contacts-messengers { display: flex; gap: 16px; margin-top: 46px; }
.yf-pil__msg {
  display: inline-flex; align-items: center; gap: 12px; min-width: 186px; height: 64px;
  padding: 0 24px 0 12px; border-radius: var(--radius-pill);
  background: var(--black); color: var(--white); text-decoration: none;
  font: 400 18px/1.2 var(--font-display); transition: background .15s ease;
}
.yf-pil__msg:hover { background: #2d2d2d; }
.yf-pil__msg-icon { width: 40px; height: 40px; display: block; }
.yf-pil__contacts-alt { font-size: 15px; color: var(--grey); margin-top: 24px; }
.yf-pil__contacts-photo { margin: 0; border-radius: var(--radius-card); overflow: hidden; height: 364px; }
.yf-pil__contacts-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 08 FAQ ----------
   Бежевые карточки-пилюли, шеврон в белом круге, раскрытая — коричневая. */
.yf-pil__faq { display: grid; gap: 12px; }
.yf-pil__faq-item { border-radius: var(--radius-card); background: var(--beige); padding: 24px 28px; min-height: 88px; }
.yf-pil__faq-item summary {
  font: 400 20px/1.4 var(--font-display); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.yf-pil__faq-item summary::-webkit-details-marker { display: none; }
/* Двойной шеврон из макета (узел 6887:1138), не самодельный плюс. */
.yf-pil__faq-item summary::after {
  content: ""; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--white);
  background-image: url("../img/figma/faq-chevron.svg");
  background-size: 19px 17px; background-position: center; background-repeat: no-repeat;
  transition: transform .15s ease;
}
.yf-pil__faq-item[open] { background: var(--brown); color: var(--white); }
.yf-pil__faq-item[open] summary::after { transform: rotate(180deg); }
.yf-pil__faq-item p { margin-top: 12px; font-size: 16px; }
.yf-pil__faq-item[open] a { color: var(--white); }
.yf-pil__faq-table { margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.yf-pil__faq-table td { padding: 8px 24px 8px 0; border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- Поп-ап ---------- */
.yf-pil-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yf-pil-modal[hidden] { display: none; }
/* Как на сайте: оверлеи меню и виджетов — чёрный 40 %. */
.yf-pil-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.yf-pil-modal__window {
  position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto;
  padding: 40px; border-radius: var(--radius-card); background: var(--beige);
  font: 400 16px/1.45 var(--font-text); color: var(--black);
}
.yf-pil-modal__window h2 { font: 400 32px/1.2 var(--font-display); margin: 0 0 12px; }
.yf-pil-modal .yf-pil__form { padding: 0; margin-top: 24px; }
.yf-pil-modal__close { position: absolute; right: 20px; top: 20px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; }
.yf-pil-modal__close::before,
.yf-pil-modal__close::after { content: ""; position: absolute; left: 6px; top: 15px; width: 20px; height: 2px; background: var(--black); }
.yf-pil-modal__close::before { transform: rotate(45deg); }
.yf-pil-modal__close::after { transform: rotate(-45deg); }

/* ============================================================
   Мобильная 375
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- раскладка 375 ----------
     Сверено с мобильным макетом «Оптовый лендинг | йога» (узел 6430:8872,
     opt_page_mob, 375×13177). Числа ниже сняты из метаданных узлов:

       контейнер 351, поля 12; между всеми одиннадцатью секциями ровно 80;
       заголовок секции → контент 24 (62 при заголовке в одну строку 38,
         100 при заголовке в две строки 76 — отбивка в обоих случаях 24);
       H2 32/1,2, заголовок карточки 20/1,4, наборный текст 16/1,4;
       кнопка 52 с полями 8/32 и текстом 16, поле 52 с полями 18/20,
       чипс-вкладка 44 с зазором 12, стрелка слайдера 54;
       карточка 24 поля, радиус 24; карточка в ленте 324, кадр 324×406.

     Чего в мобильном макете нет: логотипы партнёров, shop the look, ценовые
     карточки, материалы, блок контактов — это сущности нашей страницы,
     им взяты общие мобильные значения (одна колонка, поля 24, зазор 16). */
  /* Контейнер тянется по ширине окна: на 375 это ровно 351 из макета,
     а между 376 и 767 страница не остаётся узкой колонкой на белом поле. */
  .yf-pil__container { max-width: 100%; }
  .yf-pil, .yf-pil-modal {
    --container: 351px; --container-pad: 12px;
    --section-gap: 80px; --gap-title: 24px; --gap-lead: 24px; --gap: 16px;
    --control-h: 52px; --field-h: 52px; --card-pad: 24px;
  }
  .yf-pil__h1 { font-size: 32px; }
  .yf-pil__h2 { font-size: 32px; }
  .yf-pil__h3 { font-size: 24px; }
  .yf-pil__h4 { font-size: 20px; }
  .yf-pil__lead { font-size: 16px; }
  .yf-pil__btn { font-size: 16px; }
  .yf-pil__h1, .yf-pil__h2, .yf-pil__h2--form { max-width: 100%; }
  /* Отбивка заголовок → контент в макете одна, 24 — в том числе до лида. */
  .yf-pil__container > :is(.yf-pil__h1, .yf-pil__h2) + .yf-pil__lead { margin-top: 24px; }
  .yf-pil__cases-head .yf-pil__lead { margin-top: 24px; }
  /* На 351 ширину заголовка подобрать нельзя — она одна. Чтобы последняя
     строка не оставалась одним словом, строки выравниваются балансировкой. */
  .yf-pil__h1, .yf-pil__h2, .yf-pil__h3, .yf-pil__h4,
  .yf-pil__hero-title, .yf-pil__h2--form { text-wrap: balance; }

  /* 01 Первый экран. В макете 375×810, текстовый блок 351×260 начинается
     на 277 от верха — это и есть вертикальный центр (810−260)/2 = 275. */
  /* Текст прижат к верху кадра: нижняя треть оставлена под товар. */
  .yf-pil__hero { min-height: 810px; align-items: flex-start; }
  .yf-pil__hero-inner { padding-top: 40px; padding-bottom: 40px; }
  /* Низ кадра открываем: там реформер. Текст держится на верхней половине. */
  .yf-pil__hero-media::after { background: linear-gradient(180deg, rgba(17,17,17,.74) 0%, rgba(17,17,17,.66) 48%, rgba(17,17,17,.28) 100%); }
  .yf-pil__hero-title { font-size: 32px; }
  .yf-pil__hero-lead { font-size: 16px; margin-top: 12px; }
  .yf-pil__hero .yf-pil__cta-row { margin-top: 32px; }

  /* 02 Оффер. Одна колонка, зазор 16. Высоты в макете 320 у текстовых
     карточек и 380 у кадровых; как min-height, чтобы текст не резался. */
  .yf-pil__offer { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .yf-pil__offer-card { grid-column: auto; grid-row: auto; min-height: 320px; }
  .yf-pil__offer-card--photo,
  .yf-pil__offer-card--overlay { min-height: 380px; }
  .yf-pil__offer-card--arcs::before { top: 72px; width: 180px; height: 180px; }
  .yf-pil__offer-card--arcs h3 { margin-top: 180px; }
  .yf-pil__offer-num { font-size: 64px; }
  /* Поверх кадра цифра стоит рядом с подписью, а не отдельной строкой —
     мобильного аналога в макете нет, кегль на ступень ниже. */
  .yf-pil__offer-copy .yf-pil__offer-num { font-size: 48px; }

  /* Логотипы партнёров — по два в ряд */
  .yf-pil__logos-block { margin-top: 40px; padding-top: 28px; }
  .yf-pil__logos-title { font-size: 24px; margin-bottom: 24px; }
  /* Лента логотипов на мобильном идёт плотнее и чуть быстрее. */
  .yf-pil__marquee { gap: 32px; }
  .yf-pil__logos { gap: 32px; animation-duration: 22s; }
  @keyframes yf-pil-marquee { to { transform: translateX(calc(-100% - 32px)); } }
  .yf-pil__logos img { max-height: 32px; max-width: 120px; }
  .yf-pil__logos [data-slot="logo-sberzdorovie"] img { max-width: 140px; }

  /* 04 Оборудование */
  .yf-pil__nav-cards { grid-template-columns: 1fr; }
  .yf-pil__shop { padding: 20px; }
  .yf-pil__shop-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .yf-pil__shot--lead { grid-row: auto; }
  .yf-pil__shot img { height: 200px; }
  .yf-pil__shot--lead img { height: 240px; }
  /* Маркер остаётся 30, чтобы не закрывать товар (замечание 2 аудита 9),
     а зона касания расширена до 44 прозрачным `::after`. Плюс при этом
     рисуется целиком в `::before` двумя полосами-градиентами. */
  .yf-pil__hotspot { width: 40px; height: 40px; }
  .yf-pil__hotspot::before {
    width: 14px; height: 14px; background:
      linear-gradient(var(--white), var(--white)) center / 14px 2px no-repeat,
      linear-gradient(var(--white), var(--white)) center / 2px 14px no-repeat;
  }
  .yf-pil__hotspot::after,
  .yf-pil__hotspot[aria-expanded="true"]::after {
    display: block; width: 44px; height: 44px; background: none; border-radius: 50%;
  }
  .yf-pil__hotspot[aria-expanded="true"]::before {
    background: linear-gradient(var(--white), var(--white)) center / 14px 2px no-repeat;
  }
  /* Ссылки-кнопки со стрелкой: текст 16, но зона касания 44. */
  .yf-pil__link-arrow { min-height: 44px; }
  /* Чекбокс 20 — размер кита, но нажимается весь `label`: 39 по тексту
     в две строки добираем до 44. В макете строка согласия 60. */
  .yf-pil__check { min-height: 44px; }
  .yf-pil__hotspot-card { width: 190px; padding: 12px 14px; transform: translate(20px, -50%); }
  .yf-pil__hotspot-card--left { transform: translate(calc(-100% - 20px), -50%); }
  .yf-pil__hotspot-name { font-size: 15px; }
  .yf-pil__hotspot-price { font-size: 17px; margin: 4px 0 8px; }
  /* Вкладки каталога в макете — лента 44 с зазором 12, до ленты товаров 20. */
  .yf-pil__chips { gap: 12px; }
  .yf-pil__chip { font-size: 16px; min-height: 44px; padding: 0 16px; }
  .yf-pil__chips--filter { margin: 16px 0 20px; }
  .yf-pil__chips + .yf-pil__center { margin-top: 20px; }
  #small > .yf-pil__chips { margin-top: 20px; }
  /* Карточка в ленте 324 при контейнере 351: следующая выглядывает на 27,
     видно, что ряд листается. Кадр 324×406, кнопка 52. */
  .yf-pil__products { grid-auto-columns: 324px; gap: 12px; margin-top: 20px; }
  .yf-pil__product { gap: 8px; }
  .yf-pil__product-photo { aspect-ratio: 324 / 406; }
  .yf-pil__product-name { font-size: 20px; }
  .yf-pil__product-price { font-size: 24px; }
  .yf-pil__product .yf-pil__btn--sm { min-height: 52px; font-size: 16px; }
  .yf-pil__pro-foot { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .yf-pil__pro-foot .yf-pil__btn { width: 100%; }

  /* 05 Для кого. Макет: одна колонка, зазор 16, поля карточки 24,
     декоративный круг 240 и текст под ним с отбивкой 307 от верха. */
  .yf-pil__whom { grid-template-columns: 1fr; }
  .yf-pil__whom-card--tall,
  .yf-pil__whom-card--full,
  .yf-pil__whom-card--dark,
  .yf-pil__whom-col:last-child .yf-pil__whom-card--dark,
  .yf-pil__whom-col:last-child .yf-pil__whom-card--beige { min-height: 0; }
  .yf-pil__whom-card--full { padding-top: 300px; }
  .yf-pil__whom-pattern { top: 24px; width: 240px; height: 240px; }
  .yf-pil__whom-card figure img { height: 160px; }
  .yf-pil__whom-icon { width: 56px; height: 100px; }

  /* 06 Преимущества. В макете первые два блока стоят в два столбца по 163,5;
     у нас это карточки с заливкой и полями 24 — в 163 текст не живёт,
     поэтому одна колонка. Декоративные круги в макете на мобильном есть,
     поэтому ряд с паттерном остаётся видимым. */
  .yf-pil__benefits { grid-template-columns: 1fr; }
  .yf-pil__benefit { min-height: 0; padding: 24px; }
  .yf-pil__adv-decor { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .yf-pil__adv-pattern { width: 100%; height: auto; aspect-ratio: 1; justify-self: stretch; }
  .yf-pil__materials { grid-template-columns: 1fr; gap: 16px; }
  .yf-pil__materials li { padding: 24px; }

  /* 03 Оптовые условия. Макет: пункты в одну колонку с зазором 24,
     кнопка на всю ширину, под ней декоративная графика 351×196
     с отбивкой 40 — на десктопе она стоит справа отдельной колонкой. */
  .yf-pil__terms { grid-template-columns: 1fr; gap: 24px; }
  /* Внутри пункта: иконка 32, до заголовка 20, заголовок → текст 8.
     Одним gap два разных значения не задать, поэтому 8 плюс 12 у иконки. */
  .yf-pil__term { gap: 8px; }
  .yf-pil__term-icon { margin-bottom: 12px; }
  /* В макете декор условий — полоса 351×196. Наш вектор вертикальный (388×557),
     поэтому высота задана по макету, а картинка кадрируется по центру. */
  .yf-pil .yf-pil__terms-pattern { grid-column: 1; grid-row: auto; margin-top: 16px; height: 196px; object-fit: cover; object-position: center; }
  /* Кнопка «Запросить условия опта» лежит внутри карточки со шкалой;
     в макете она отдельная строка на всю ширину с отбивкой 24. */
  .yf-pil__terms .yf-pil__btn { width: 100%; }
  .yf-pil__term .yf-pil__btn { margin-top: 24px; }
  .yf-pil__prices { grid-template-columns: 1fr; }
  .yf-pil__price { min-height: 0; padding: 24px; }

  /* 07 Кейсы. Карточка 324, зазор 20, кадр 324×406, стрелка 54. */
  .yf-pil__cases-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .yf-pil__slider-nav { justify-content: flex-end; }
  .yf-pil__slider-btn { width: 54px; height: 54px; }
  .yf-pil__cases { grid-auto-columns: 324px; gap: 20px; margin-top: 24px; }
  .yf-pil__case img { height: 406px; }

  /* 09 Форма и контакты. В макете порядок обратный десктопному: визуал 351×503
     сверху, карточка с текстом и формой под ним с зазором 16. Заголовок 24/1,4,
     поля карточки 24, поле 52, между полями 12. */
  .yf-pil__form-card { grid-template-columns: 1fr; gap: 16px; }
  .yf-pil__form-photo { order: -1; height: auto; }
  .yf-pil__form-photo img { height: 503px; }
  .yf-pil__form-copy { padding: 24px 24px 12px; gap: 12px; }
  .yf-pil__h2--form { font-size: 24px; }
  .yf-pil__form { padding: 12px 24px 24px; }
  /* Макет: поле 52 при полях 18/20. При тексте 16/1,4 это 58,4 — высоту
     держим по макету, вертикальные поля пересчитаны под неё. */
  .yf-pil__field :is(input, select) { padding-top: 14px; padding-bottom: 14px; }
  .yf-pil__contacts { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .yf-pil__contacts-phone { font-size: 24px; }
  .yf-pil__contacts-info { margin-top: 24px; }
  .yf-pil__contacts-messengers { margin-top: 24px; flex-wrap: wrap; }
  .yf-pil__msg { min-width: 0; flex: 1 1 140px; height: 52px; font-size: 16px; }
  .yf-pil__msg-icon { width: 32px; height: 32px; }
  .yf-pil__contacts-photo { height: 220px; }
  .yf-pil__contacts-photo img { height: 100%; }

  /* 08 FAQ. Макет: поля 20/24, радиус 24, заголовок 20/1,4, стрелка 48,
     зазор между пилюлями 12, закрытая пилюля не ниже 88. */
  .yf-pil__faq-item { padding: 20px 24px; min-height: 88px; }
  .yf-pil__faq-item summary { font-size: 20px; gap: 12px; }
  .yf-pil__faq-item summary::after { flex-basis: 48px; height: 48px; background-size: 23px 20px; }
  .yf-pil__faq-table { font-size: 14px; }

  /* Поп-ап. Класс окна — `__window`; прежнее правило писалось на `__dialog`
     и ни к чему не применялось, поля на мобильном оставались 40. */
  .yf-pil-modal { padding: 12px; }
  .yf-pil-modal__window { padding: 24px 20px; }
  .yf-pil-modal__window h2 { font-size: 24px; }
}

/* ==== Интеграция с Битриксом: формы, согласия, состояния (H01) ==== */

/* Согласие на обработку данных и согласие на рассылку печатают компоненты
   сайта: приводим их разметку к виду макета. */
.yf-pil__form-wrap [class*="intec-grid-item"] { width: 100%; max-width: none; flex: 1 1 auto; }
.yf-pil__form-wrap .startshop-form-result-new-consent { display: flex; gap: 8px; align-items: flex-start; }
.yf-pil__form-wrap .intec-ui-control-checkbox {
  display: inline-flex!important;  align-items: flex-start!important;
  font: 400 14px/1.4 var(--font-text); color: #494949!important; cursor: pointer;
}
.yf-pil__form-wrap .intec-ui-control-checkbox input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.yf-pil__form-wrap .intec-ui-part-selector {
  position: relative!important; flex: 0 0 auto!important; width: 20px!important; height: 20px!important;
  border: 1px solid var(--black)!important; border-radius: 4px!important; background: var(--white);
  transition: background .15s ease, border-color .15s ease!important;
}
.yf-pil__form-wrap .intec-ui-control-checkbox input:checked + .intec-ui-part-selector {
  background: var(--black); border-color: var(--black);
}
.yf-pil__form-wrap .intec-ui-control-checkbox input:checked + .intec-ui-part-selector::after {
  content: "\2713"; position: absolute; inset: 0; display: block; color: #fff;
  font-size: 13px; line-height: 18px; text-align: center;
}
.yf-pil__form-wrap .intec-ui-part-content { font: 400 14px/1.4 var(--font-text); color: #494949; }
.yf-pil__form-wrap .intec-ui-part-content a,
.yf-pil__form-wrap .yf-pil__check a { color: var(--brown); }
.yf-pil__form-wrap .checkboxerrors { color: #c0392b; font-size: 13px; }
.yf-pil__form-wrap .youfit-calls-consent { margin-top: -4px; }
.yf-pil__form-wrap .youfit-calls-consent__label {
  display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer;
}
.yf-pil__form-wrap .youfit-calls-consent__checkbox {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Состояния формы: ошибка поля, недоступная форма, подтверждение отправки. */
.yf-pil__form-error { margin: 0 0 4px; font: 400 13px/1.4 var(--font-text); color: #c0392b; }
.yf-pil__form-message { margin: 0; font: 400 16px/1.5 var(--font-text); }
.yf-pil__form-message a { color: var(--brown); }
.yf-pil__form-done {
  display: grid; gap: 8px; padding: 32px 40px;
  border-radius: var(--radius-card); background: var(--beige);
}
.yf-pil__form-done-title { margin: 0; font: 400 24px/1.2 var(--font-display); }
.yf-pil__form-done p { margin: 0; font-size: 16px; }
.yf-pil-modal .yf-pil__form-done { padding: 24px; background: var(--beige); }
.yf-pil__field--captcha { display: grid; gap: 8px; }
.yf-pil__field--captcha img { border-radius: 8px; }
.yf-pil__offer-card::before, .yf-pil__logos li::before,.yf-pil__benefit::before,.yf-pil__materials li::before,.yf-pil__price::before,.yf-pil__chips li::before,.yf-pil__product::before,.yf-pil__case::before{display:none;}
.yf-pil__nav-card:hover {text-decoration: none;}

.yf-pil__check.main-register-consent input 
{
border-color: #3b3f41;
background-color: #f6f6f6;
border: 1px solid var(--black) !important;
}
.yf-pil__check input:checked {
    background: var(--black);
    border-color: var(--black);
}
.yf-pil__check.main-register-consent span, .yf-pil__check.main-register-consent span:checked
{
    background: none!important;
}

.yf-pil__check .youfit-calls-consent__label input:checked + .intec-ui-part-selector::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}
.intec-ui-part-selector
{
font-size: 0!important;	
}
.yf-pil__form-wrap .intec-ui-part-content a, .yf-pil__form-wrap .yf-pil__check a {
text-decoration: underline;
}