/* ══════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ И ДВА СЕМЕЙСТВА СТРАНИЦ (с 12 ноября 2026 года)

   Значения — токены css/tokens.css (README макета калькулятора v4).
   Разметка страниц не менялась: компоненты надеты на существующие
   классы. Подключает header.php после общих таблиц, на всех страницах,
   кроме /landing.

   Семейство задаёт класс на body:
   - body.page-product — /, /calculator, /white-import, /ved-company,
     /partners: заголовки, вводки, кнопки и метки как в макете v4,
     заголовки секций по центру;
   - body.page-content — блог и каталог: заголовки как были (жирные,
     по левому краю), меняется только гарнитура; кнопки, метки
     и карточки — общие компоненты.

   Вес селекторов: все правила начинаются с body.page-… — страницы
   грузят свои таблицы после этой, и правило вида .block .title (0-2-0)
   перебило бы .page-product .title при равном весе. Инлайновые стили
   и !important служебных классов перекрыты явно, ниже по файлу.
   ══════════════════════════════════════════════════════════════════ */


/* ── Кнопки: таблетка, три размера ─────────────────────────────────
   Основная — акцент, hover темнее; второстепенная — белая с рамкой
   #DCDFE5, hover рамка #0E1116 (README: кнопки Telegram и MAX). */

/* L — главный призыв первого экрана */
body.page-product .hd__inner .btn-primary,
body.page-product .btn-custom.btn-primary-blue {
  height: var(--mq-btn-l-h); padding: 0 var(--mq-btn-l-px); border-radius: var(--mq-r-pill);
  font-size: var(--mq-btn-l-fs); font-weight: var(--mq-btn-l-fw);
  background: var(--mq-accent); border: 0; color: #fff; box-shadow: var(--mq-shadow-btn);
}
body.page-product .hd__inner .btn-secondary {
  height: var(--mq-btn-l-h); padding: 0 var(--mq-btn-l-px); border-radius: var(--mq-r-pill);
  font-size: var(--mq-btn-l-fs); font-weight: var(--mq-btn-l-fw);
  background: #fff; border: 1px solid var(--mq-line-3); color: var(--mq-ink);
}
/* В артборде первого экрана главной кнопки стоят абсолютно, по 211 px:
   ширину держим, высоту берём из токена, верх — тот же. */
body.page-product .hd__inner .btn-primary,
body.page-product .hd__inner .btn-secondary { padding: 0; }

/* M — остальные призывы */
body.page-product .btn-custom.btn-outline-white,
body.page-product .wed__calc__btp,
body.page-product .wed__calc__bto,
body.page-product .prl__btn,
body.page-product .BX__btn,
body.page-product .CPT__btn-partner {
  height: var(--mq-btn-m-h); min-height: 0; padding: 0 var(--mq-btn-m-px); border-radius: var(--mq-r-pill);
  font-size: var(--mq-btn-m-fs); font-weight: var(--mq-btn-m-fw);
  display: inline-flex; align-items: center; justify-content: center;
}
body.page-product .wed__calc__btp,
body.page-product .prl__btn,
body.page-product .BX__btn--primary,
body.page-product .CPT__btn-partner {
  background: var(--mq-accent); border: 0; color: #fff; box-shadow: none;
}
body.page-product .btn-custom.btn-outline-white,
body.page-product .wed__calc__bto,
body.page-product .BX__btn--ghost {
  background: #fff; border: 1px solid var(--mq-line-3); color: var(--mq-ink); box-shadow: none;
}
body.page-product .hd__inner .btn-primary:hover,
body.page-product .btn-custom.btn-primary-blue:hover,
body.page-product .wed__calc__btp:hover,
body.page-product .prl__btn:hover,
body.page-product .BX__btn--primary:hover,
body.page-product .CPT__btn-partner:hover {
  background: var(--mq-accent-hover); border-color: var(--mq-accent-hover); color: #fff;
}
body.page-product .hd__inner .btn-secondary:hover,
body.page-product .btn-custom.btn-outline-white:hover,
body.page-product .wed__calc__bto:hover,
body.page-product .BX__btn--ghost:hover {
  background: #fff; border-color: var(--mq-ink); color: var(--mq-ink);
}

/* Контентные страницы: кнопки уже таблетки в цвете акцента (через
   --av-brand), здесь — только размеры L и M. */
body.page-content .bx__btn.bx__btn,
body.page-content .av2__btn.av2__btn {
  height: var(--mq-btn-l-h); min-height: 0; padding: 0 var(--mq-btn-l-px);
  font-size: var(--mq-btn-l-fs); font-weight: var(--mq-btn-l-fw); line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
}
/* малая кнопка липкой плашки статьи — размер S */
body.page-content .av2__btn--sm.av2__btn--sm {
  height: var(--mq-btn-s-h); padding: 0 var(--mq-btn-s-px);
  font-size: var(--mq-btn-s-fs); font-weight: var(--mq-btn-s-fw);
}
body.page-content .av2__aside-btn.av2__aside-btn,
body.page-content .av2__hero-card-btn.av2__hero-card-btn,
body.page-content .cc__btn.cc__btn,
body.page-content .cp__btn.cp__btn,
body.page-content .cp__own-btn.cp__own-btn {
  height: var(--mq-btn-m-h); min-height: 0; padding: 0 var(--mq-btn-m-px);
  font-size: var(--mq-btn-m-fs); font-weight: var(--mq-btn-m-fw);
  display: inline-flex; align-items: center; justify-content: center;
}
body.page-content .cc__btn--wide.cc__btn--wide,
body.page-content .cp__btn--wide.cp__btn--wide,
body.page-content .av2__btn--wide.av2__btn--wide { display: flex; width: 100%; }


/* ── Метки трёх видов ───────────────────────────────────────────────
   1. Надзаголовок — мягкая таблетка: тонировка #EFECFE, текст #4033C9,
      15/600, 5×14 (README: тег первого экрана).
   2. Фильтр — таблетка S; активный — чёрный.
   3. Статус — 12/700, 2×8 (README: бейдж «примерно»): зелёный,
      оранжевый, серый. */

body.page-product .hd__inner .badge,
body.page-product .main__MOBIL-badge,
body.page-product .tp01__badge,
body.page-content .av2__tag:not(.av2__tag--warn) {
  height: auto; min-height: 0; padding: 5px 14px; border: 0; border-radius: var(--mq-r-pill);
  background: var(--mq-accent-tint); color: var(--mq-accent-text);
  font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: normal;
}

body.page-content .bx__chip.bx__chip,
body.page-content .cx__btn.cx__btn,
body.page-content .cc__sort-btn.cc__sort-btn,
body.page-product .tab-btn.tab-btn,
body.page-product .BX__tag.BX__tag {
  height: var(--mq-btn-s-h); min-height: 0; padding: 0 var(--mq-btn-s-px); border-radius: var(--mq-r-pill);
  font-size: var(--mq-btn-s-fs); font-weight: var(--mq-btn-s-fw); line-height: 1;
  background: #fff; border: 1px solid var(--mq-line-3); color: var(--mq-ink-2); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
body.page-content .bx__chip.bx__chip:hover,
body.page-content .cx__btn.cx__btn:hover,
body.page-content .cc__sort-btn.cc__sort-btn:hover,
body.page-product .tab-btn.tab-btn:hover,
body.page-product .BX__tag.BX__tag:hover { border-color: var(--mq-ink); color: var(--mq-ink); }
body.page-content .bx__chip.bx__chip[aria-pressed="true"],
body.page-content .cx__btn.cx__btn[aria-pressed="true"],
body.page-content .cc__sort-btn.cc__sort-btn[aria-pressed="true"],
body.page-product .tab-btn.tab-btn.active {
  background: var(--mq-ink); border-color: var(--mq-ink); color: #fff;
}

body.page-product .tp01__card-chip,
body.page-product .prl__badge,
body.page-product .BX__tooltip,
body.page-content .av2__chip.av2__chip,
body.page-content .av2__tag--warn.av2__tag--warn,
body.page-content .av2__card2-chip.av2__card2-chip,
body.page-content .cx__chip.cx__chip,
body.page-content .cc__chip-w.cc__chip-w,
body.page-content .cp__chip-w.cp__chip-w {
  height: auto; min-height: 0; padding: 2px 8px; border: 0; border-radius: var(--mq-r-pill);
  font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: normal;
  background: var(--mq-neutral-bg); color: var(--mq-ink-4);
}
/* Надзаголовки первого экрана продуктовых страниц — зелёные, как тег
   «Быстрее, чем ваш брокер откроет Excel» на /calculator (#E3F7E9 /
   #12693B, решение автора 12 ноября 2026 года): «Белый импорт для
   селлеров WB и Ozon» на главной, «14 лет в таможенном оформлении»
   на /ved-company. Остальные надзаголовки — в тонировке акцента. */
body.page-product .hd__inner .badge,
body.page-product .main__MOBIL-badge,
body.page-product .tp01__badge { background: var(--mq-ok-bg); color: var(--mq-ok); }
/* зелёный: готово, онлайн, «популярно», «от двери до двери» */
body.page-product .tp01__card-chip.chip-g,
body.page-product .prl__badge,
body.page-content .av2__chip.av2__chip,
body.page-content .cc__chip-w.cc__chip-w,
body.page-content .cp__chip-w.cp__chip-w { background: var(--mq-ok-bg); color: var(--mq-ok); }
/* оранжевый: внимание, обновлено, не принимается */
body.page-product .tp01__card-chip.chip-o,
body.page-product .BX__tooltip,
body.page-content .av2__tag--warn.av2__tag--warn,
body.page-content .av2__card2-chip.av2__card2-chip { background: var(--mq-warn-bg); color: var(--mq-warn); }


/* ── Карточки: одно скругление, одна рамка, без тени ───────────────
   Тень остаётся только у «окон»: окно калькулятора и иллюстрации
   первого экрана (.AN__card главной, .BX__card /partners, .c4__art-card
   и .c4__win на /calculator). */
body.page-product .p__card,
body.page-product .G01__card,
body.page-product .diagram__card,
body.page-product .feature-card,
body.page-product .main-card,
body.page-product .tp01__card,
body.page-product .zio__card,
body.page-product .cards-wrapper .card,
body.page-product .risk__card,
body.page-product .prl__main-card,
body.page-product .WPD__card,
body.page-product .CPT__card,
body.page-product .company__rows,
body.page-content .bx__card:not(.bx__card--accent),
body.page-content .av2__card.av2__card,
body.page-content .av2__shift,
body.page-content .av2__tl-item,
body.page-content .av2__table-wrap,
body.page-content .av2__faq-item,
body.page-content .cx__card.cx__card,
body.page-content .cx__parts,
body.page-content .cc__table,
body.page-content .cp__card {
  border-radius: var(--mq-card-r); border: var(--mq-card-border); box-shadow: none;
}
/* тонированные карточки держат свою рамку, общий у них только радиус */
body.page-content .bx__card--accent,
body.page-content .av2__card2 { border-radius: var(--mq-card-r); box-shadow: none; }
body.page-product .p__tag,
body.page-product .G01__sc { box-shadow: none; }


/* ── Семейство А: продуктовые страницы ─────────────────────────────
   H1 — clamp(32px, 3.9vw, 54px) / 800 / 1.05 / −0.04em;
   H2 секций — clamp(26px, 3vw, 38px) / 800, по центру;
   вводка — clamp(16px, 1.4vw, 18px) / 1.55, #3C4553. */

body.page-product h1.TITLE-MOBILE,
body.page-product .main__MOBIL-title,
body.page-product .wed__calc__ttl,
body.page-product .title__std--hhh2 {
  font-size: clamp(32px, 3.9vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em;
  color: var(--mq-ink); text-wrap: balance;
}
/* Артборд первого экрана главной — 1440 px, масштабируется скриптом:
   кегль в vw он умножил бы на свой масштаб, поэтому значение макета
   для 1440 — 54 px. */
body.page-product .hd__inner .heading {
  font-size: 54px; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--mq-ink);
}

body.page-product h2.TITLE-MOBILE,
body.page-product .h4__title_L,
body.page-product .title-main,
body.page-product .CPT__title__dengi--new {
  font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em;
  color: var(--mq-ink);
}
body.page-product h2.TITLE-MOBILE:not(.CPT__title__dengi--new),
body.page-product .h4__title_L,
body.page-product .title-main { text-align: center; }

/* заголовки внутри карточек и блоков — H3 макета: 800, свой кегль */
body.page-product .risk__title,
body.page-product .company__title,
body.page-product .wed__calc__sc-ttl,
body.page-product .prl__main-card h2,
body.page-product .prl__tl-text h3,
body.page-product .p__card__title,
body.page-product .timeline-title,
body.page-product .WPD__title,
body.page-product .CPT__card__title {
  font-weight: 800; letter-spacing: -.02em; color: var(--mq-ink);
}

body.page-product .SUB_TITLE_Mobile,
body.page-product .subtitle-main,
body.page-product .main__MOBIL-description,
body.page-product .wed__calc__sub,
body.page-product .BX__hero__text,
body.page-product .WPD__heading,
body.page-product .CPT__panel-left__headline {
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; line-height: 1.55; letter-spacing: normal;
  color: var(--mq-ink-2);
}
body.page-product .hd__inner .heading + div {
  font-size: 18px !important; line-height: 1.55 !important; color: var(--mq-ink-2) !important;
}

/* Служебные классы мобильной типографики (.TITLE-MOBILE,
   .SUB_TITLE_Mobile в css/nav.css) держат 20/24 px и серый #A0A0A0
   с !important до 992 px. На продуктовых страницах — значения макета;
   nav.css общий с /landing, поэтому перекрытие здесь, а не там. */
@media (max-width: 992px) {
  body.page-product h1.TITLE-MOBILE,
  body.page-product .title__std--hhh2 {
    font-size: clamp(32px, 3.9vw, 54px) !important; font-weight: 800 !important; line-height: 1.05 !important;
    letter-spacing: -.04em; color: var(--mq-ink) !important;
  }
  body.page-product h2.TITLE-MOBILE {
    font-size: clamp(26px, 3vw, 38px) !important; font-weight: 800 !important; line-height: 1.15 !important;
    letter-spacing: -.03em; color: var(--mq-ink) !important;
  }
  body.page-product .SUB_TITLE_Mobile {
    font-size: clamp(16px, 1.4vw, 18px) !important; line-height: 1.55 !important; color: var(--mq-ink-2) !important;
    font-weight: 400 !important;
  }
}

/* /white-import: ниже 769 px кнопки встают в колонку, а у основной
   flex: 1 1 0% — без этого высота токена ей не достаётся. */
@media (max-width: 768px) {
  body.page-product .wed__calc__btn-row > .wed__calc__btp,
  body.page-product .wed__calc__btn-row > .wed__calc__bto { flex: 0 0 auto; }
}