/* Start:/local/templates/aspro_max_artgsm/redesign2026/css/crm.css?178872469410479*/
/* ============================================================
   ART-GSM Редизайн 2026 — страница /remart/ (РемАрт — CRM для мастерских), 06.09.2026
   ТЗ: docs/TZ_remart_crm_page_addendum_20260906.md. Подключается только на этой
   странице (SetAdditionalCSS в /remart/index.php) — общие home.css/app.js не трогаем.
   Токены Style B (цвета, отступы, радиусы, кнопки) — base.css + theme-b.css;
   здесь только раскладка страницы. Все правила под .ag-remart / data-cur="/remart/".
   ============================================================ */

/* Легаси-пустоты Aspro в .page-top (те же 97 px, что сняты на /optom/, контактах и в блоге) */
body.ag-styleb[data-cur="/remart/"] .page-top { padding-top: 10px !important; padding-bottom: 0 !important; margin: 0 auto !important; min-height: 0 !important; }
body.ag-styleb[data-cur="/remart/"] .page-top .topic { padding-top: 2px !important; padding-bottom: 0 !important; }
body.ag-styleb[data-cur="/remart/"] .page-top h1,
body.ag-styleb[data-cur="/remart/"] .page-top #pagetitle { margin: 0 0 2px !important; }
body.ag-styleb[data-cur="/remart/"] .page-top > div:has(.breadcrumbs) { padding-top: 2px !important; padding-bottom: 2px !important; }
body.ag-styleb[data-cur="/remart/"] .page-top .breadcrumbs { margin: 0 !important; }

/* ---- корень: та же колея, что у H1 и крошек (.maxwidth-theme, 1408) ---- */
.ag-remart { width: 100%; min-width: 0; padding: var(--s-8) 0 var(--s-40); display: flex; flex-direction: column; gap: var(--s-24); }
/* Сбросы Aspro (styles.css шаблона): `ul:not([id*="bx_"]) > li:before {content:"—"}` (0,1,3) и `ul > li {margin:8px 0 0 21px}`
   протекают в любой список. Важно: этот файл подключён через SetAdditionalCSS → набор PAGE, который Битрикс печатает
   ДО CSS шаблона, поэтому при равной специфичности побеждает Aspro — гасим с запасом: `body .ag-remart …` (0,1,4). */
.ag-remart ul { list-style: none; margin: 0; padding: 0; }
.ag-remart ul > li { margin: 0; padding: 0; }
body .ag-remart ul > li::before { content: none; margin: 0; }
.ag-remart h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 var(--s-16); padding: 0; color: var(--ink); }
.ag-remart h3 { margin: 0; padding: 0; }
.ag-remart p { margin: 0; }
.ag-remart .btn svg { width: 16px; height: 16px; }

/* ---- 1. Hero: текст слева, схема статусов справа ----
   Отступы hero-элементов — с префиксом .ag-remart, иначе их гасят сбросы `.ag-remart p/ul` выше (0,1,1 > 0,1,0). */
.rm-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-40); align-items: center; padding: var(--s-8) 0 var(--s-8); }
.rm-hero-copy { min-width: 0; }
.ag-remart .rm-sub { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 56ch; margin: 0 0 var(--s-20); }
.ag-remart .rm-bullets { display: flex; flex-direction: column; gap: var(--s-10); margin: 0 0 var(--s-24); }
.ag-remart .rm-bullets > li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; max-width: 62ch; }
.ag-remart .rm-bullets > li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--accent); }
.rm-cta { display: flex; flex-direction: column; align-items: flex-start; }
.ag-remart .rm-honest { font-size: 13px; line-height: 1.5; color: var(--ink-2); /* ink-3 = 3.5:1 на белом, обещание про 30 дней должно читаться */ margin: var(--s-12) 0 0; max-width: 52ch; }

.rm-scheme { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-20); box-shadow: var(--shadow-md); }
.rm-scheme-cap { display: flex; align-items: center; gap: var(--s-10); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-12); }
.rm-scheme-cap img { width: 28px; height: 28px; margin: 0; /* Aspro img {margin:auto} во flex сдвигал иконку */ border-radius: 8px; border: 1px solid var(--line); flex: none; }
.rm-scheme-tag { margin-left: auto; font-weight: 500; }
.rm-orders { display: flex; flex-direction: column; }
.rm-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-14); align-items: center; padding: var(--s-10) 0; border-top: 1px solid var(--line); font-size: 13px; }
.rm-order:first-child { border-top: 0; padding-top: 0; }
.rm-no { font-family: var(--mono); font-feature-settings: "tnum" 1; font-size: 12px; color: var(--ink-3); }
.rm-dev { font-weight: 600; line-height: 1.3; min-width: 0; }
.rm-dev small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.rm-st { font-size: 11px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.rm-st--a { background: #e0ecff; color: #1d4fd7; }
.rm-st--b { background: #fff3d6; color: #8a5a00; }
.rm-st--c { background: #dcfce7; color: #15803d; }
.rm-st--d { background: #ede9fe; color: #5b21b6; }
.rm-qr { margin-top: var(--s-14); padding-top: var(--s-14); border-top: 1px dashed var(--line-2); display: flex; align-items: center; gap: var(--s-12); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.rm-qr i { flex: none; width: 36px; height: 36px; border-radius: 8px; opacity: .75;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 6px);
  background-blend-mode: multiply; }

/* ---- 2. «Почему мы это сделали» — белая карточка ---- */
.rm-why { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-28) var(--s-32); }
.rm-why p { max-width: 66ch; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* ---- 3. «Что умеет» — 8 карточек 4×2 ---- */
.rm-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-14); }
.rm-feat-grid article { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-16) var(--s-16) var(--s-20); display: flex; flex-direction: column; gap: var(--s-6); }
.rm-idx { font-family: var(--mono); font-feature-settings: "tnum" 1; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
.rm-feat-grid h3 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.rm-feat-grid p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- 4. Условия беты + Для кого ---- */
.rm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-20); align-items: start; }
.rm-cond { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-24) var(--s-28); }
.rm-cond ul { display: flex; flex-direction: column; gap: var(--s-10); }
.ag-remart .rm-cond li { display: flex; gap: var(--s-10); align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.rm-cond .rm-check { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.rm-who { min-width: 0; background: var(--blue-soft); border-radius: var(--r-lg); padding: var(--s-24) var(--s-28); }
.rm-who p { font-size: 15.5px; line-height: 1.55; max-width: 60ch; color: var(--ink); }

/* ---- 5. Вопросы — 4 раскрывающихся блока, открыты по умолчанию ---- */
.rm-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-14); }
.rm-faq-grid details { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-12) var(--s-16); }
.rm-faq-grid summary { display: flex; gap: var(--s-10); align-items: center; min-height: 44px; /* touch-цель */ list-style: none; cursor: pointer; padding: var(--s-4) 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.rm-faq-grid summary::-webkit-details-marker { display: none; }
.rm-faq-grid summary::marker { content: ''; }
.rm-faq-grid summary span { flex: 1 1 auto; min-width: 0; }
.rm-faq-grid .rm-chev { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); transition: transform .2s ease; }
.rm-faq-grid details[open] .rm-chev { transform: rotate(180deg); }
.rm-faq-grid details p { margin: var(--s-8) 0 var(--s-4); font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---- 6. Тёмный финальный блок со второй кнопкой ---- */
.rm-final { background: #11151c; /* тот же тёмный, что у блока «Оптом» на главной (home.css .opt) */ color: #fff; border-radius: var(--r-lg); padding: var(--s-32) var(--s-40); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-20); }
.rm-final-copy { min-width: 0; max-width: 60ch; }
.rm-final h2 { color: #fff; margin: 0 0 var(--s-6); }
.rm-final p { color: #cbd5e1; font-size: 15px; line-height: 1.5; }
.rm-final .btn { flex: none; }

/* ---- адаптив ---- */
@media (max-width: 1100px) {
  .rm-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rm-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-20); }
  .rm-two, .rm-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-final { padding: var(--s-24); }
  .rm-why { padding: var(--s-24); }
}
@media (max-width: 640px) {
  .ag-remart { gap: var(--s-16); padding-bottom: var(--s-28); }
  .ag-remart h2 { font-size: 21px; }
  .rm-sub { font-size: 16px; }
  .rm-feat-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-cta, .rm-cta .btn, .rm-final .btn { width: 100%; }
  .rm-why, .rm-cond, .rm-who { padding: var(--s-20); }
  .rm-final { padding: var(--s-20); }
  .rm-scheme { padding: var(--s-16); }
}
@media (prefers-reduced-motion: reduce) { .rm-faq-grid .rm-chev { transition: none; } }

/* End */
/* /local/templates/aspro_max_artgsm/redesign2026/css/crm.css?178872469410479 */