/* ═══════════════════════════════════════════════════════════════════════════
   СЛУЖБА ЗАБОТЫ — redesign 2026-07: hero + карточки-инструменты
   Порядок секций файла = порядок секций страницы:
   настройки → hero/контакты → карточки-инструментов → липкие чипы → панели/
   сабтабы → формы → вердикт-панель сборки → строки узлов → rig-visual →
   ручная сборка → compat-проверки → квизы/карточки товаров → FAQ →
   mobile → reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Настройки страницы ──
   Локальные алиасы репойнтятся на семантические токены (00-settings/colors.css),
   тот же паттерн, что в compare.css/cart.css. */
.care-page{
  --sup-ok:var(--success);      /* совместимо, «мощности хватает» */
  --sup-warn:var(--warning);    /* предупреждение: слабоват, не хватает */
  --sup-danger:var(--danger);  /* ошибка: несовместимо */
  padding:var(--sp-9) var(--page-x) var(--sp-8);
  max-width:var(--container-page);
  margin:0 auto;
}

/* ── Hero: бренд-строка, заголовок, живой контакт ── */
/* Мера в 720px держала не только текст, но и ЗАГОЛОВОК: «Служба заботы о
   клиентах» кеглем 64px в неё не помещалась и ломалась на две строки, из-за
   чего рядом с однострочным «Сравнением» читалась заметно мельче — хотя обе
   набраны одинаково (замер: 64px / Unbounded / 800 / -1.92px у обеих).

   Мера нужна абзацу, а не заголовку: длинную строку тяжело читать, короткую
   реплику в одно слово — нет. Поэтому ограничение переехало на текст. */
.care-hero{ margin-bottom:var(--sp-5); }
.care-hero .care-sub,
.care-hero .care-lead{ max-width:66ch; }
.care-title{
  font-family:var(--font-display),sans-serif;
  font-size:var(--fs-page-title); font-weight:800; color:var(--white);
  line-height:1.06; letter-spacing:-.03em;
  margin:0;
}
.care-sub{ color:var(--text-soft); margin:14px 0 0; font-size:var(--fs-5); line-height:1.65; }

.care-contacts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-3); }
.care-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--h-btn-sm); padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--glass);
  color:var(--text); font-size:var(--fs-3); text-decoration:none;
  transition:border-color var(--dur-base), color var(--dur-base);
}
.care-chip .ic{ width: var(--icon-sm); height: var(--icon-sm); }
.care-chip-wa{ color:var(--text-hi); }
.care-chip-wa:hover{ border-color:var(--cyan-a45); color:var(--cyan); }
.care-chip-status{ color:var(--text-dim); }
.care-chip-status.is-open{ color:var(--sup-ok); border-color:color-mix(in srgb, var(--success) 30%, transparent); }
.care-status-dot{
  width:8px; height:8px; border-radius:50%; background:var(--text-faint);
  flex-shrink:0;
}
.care-chip-status.is-open .care-status-dot{
  background:var(--sup-ok); box-shadow:0 0 10px color-mix(in srgb, var(--success) 70%, transparent);
}

/* ── Карточки-инструменты ── */
.care-tools{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-bottom:var(--sp-2);
}
.care-tool{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:18px; text-align:left; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--text); font-family:var(--font-body);
  transition:border-color var(--dur-base), background var(--dur-base), transform var(--dur-base);
}
.care-tool:hover{ border-color:var(--cyan-a35); transform:translateY(-3px); }
.care-tool:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.care-tool.is-active{
  border-color:var(--cyan);
  background:var(--cyan-a05);
}
.care-tool-top{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-bottom:6px; color:var(--text-dim);
}
.care-tool.is-active .care-tool-top{ color:var(--cyan); }
.care-tool-top .ic{ width: var(--icon-md); height: var(--icon-md); }
.care-tool-name{ font-size:var(--fs-5); font-weight:700; color:var(--text-hi); }
.care-tool-desc{ font-size:var(--fs-2); color:var(--text-dim); line-height:1.45; }

/* ── Панели инструментов ── */
/* Прячем панели только после JS-bootstrap (.js на <html>) — тот же приём, что у
   .js .anim-ready в 01-base/helpers.css. Раньше здесь стоял голый display:none,
   и без JS вся база знаний, квизы и «Апгрейд ПК» были недоступны: краулер видел
   FAQPage-разметку, описывающую контент, которого на странице фактически нет.
   display:none — сильнее, чем opacity:0: такой текст поисковик считает скрытым
   и обесценивает. Без JS страница просто длинная, но целиком читаемая. */
.js .care-panel{ display:none; }
.js .care-panel.is-active{ display:block; animation:careFadeUp .35s ease both; }
@keyframes careFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.care-panel-head{ max-width:760px; margin-bottom:var(--sp-3); }
.care-panel-head h2{
  font-size:var(--fs-8); font-weight:700; color:var(--text-hi); margin:0 0 10px;
}
.care-panel-head p{ color:var(--text-soft); margin:0; line-height:1.6; font-size:var(--fs-4); }

.care-subtabs{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.care-subtab{
  height:var(--h-tab); padding:0 18px; cursor:pointer;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:transparent; color:var(--text-dim);
  font-size:var(--fs-3); font-family:var(--font-body);
  transition:border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.care-subtab:hover{ color:var(--text-hi); }
.care-subtab.is-active{
  background:var(--cyan); border-color:var(--cyan);
  color:var(--cta-ink); font-weight:600;
}
/* Та же логика, что у .care-panel выше: без JS показываем все подразделы. */
.js .build-sub{ display:none; }
.js .build-sub.is-active{ display:block; }

/* ── Гайд «с чего начать» ── */
.care-steps{ display:grid; gap:14px; max-width:760px; margin:0 auto; }
.care-step{
  display:flex; gap:16px; padding:18px;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
}
.care-step-num{
  flex-shrink:0; width:38px; height:38px; display:flex; align-items:center;
  justify-content:center; border-radius:50%;
  border:1px solid var(--cyan-a40); color:var(--cyan);
  font-family:var(--font-mono); font-weight:500;
}
.care-step-title{ font-size:var(--fs-5); font-weight:700; color:var(--text-hi); margin:6px 0 6px; }
.care-step-text{ color:var(--text-soft); font-size:var(--fs-3); line-height:1.6; margin:0; }
.care-presets{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.preset-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--h-btn-sm); padding:0 16px; cursor:pointer;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--glass-2); color:var(--text);
  font-size:var(--fs-3); font-family:var(--font-body);
  transition:border-color var(--dur-base), color var(--dur-base), transform var(--dur-base);
}
.preset-btn:hover{ border-color:var(--cyan-a45); color:var(--text-hi); transform:translateY(-2px); }
.preset-btn .ic{ width: var(--icon-sm); height: var(--icon-sm); }

/* ── Формы подбора ──
   Переключатель уценки живёт внутри формы/квиза, который он влияет (несколько
   независимых чекбоксов синхронизирует main.js по data-clearance-toggle) - не
   единой плашкой над страницей. В desktop-ряду он стоит рядом с кнопкой
   действия (align-items:flex-end выравнивает по низу); на мобильном форма
   становится колонкой, и чекбокс просто идёт по DOM-порядку перед кнопкой. */
.care-form{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  margin-bottom:var(--sp-3);
}
.care-form-inline{ margin-bottom:var(--sp-2); }
.care-form .clearance-check{ margin-bottom:1px; }
.clearance-inline-row{ margin-bottom:var(--sp-2); }
.care-field{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
.care-field>span{
  font-size:var(--fs-1); color:var(--text-dim); letter-spacing:.04em;
}
.care-field input[type="number"], .care-field input[type="search"]{
  height:var(--h-input); padding:0 14px; border-radius:var(--r-md);
  border:1px solid var(--field-border); background:var(--glass);
  color:var(--text-hi); font-size:var(--fs-4); font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
.care-field input:focus-visible{ outline:2px solid var(--cyan); outline-offset:-1px; }
.care-submit{
  height:var(--h-input); padding:0 26px; cursor:pointer;
  border:none; border-radius:var(--r-md);
  background:var(--grad-cta); color:var(--cta-ink);
  font-size:var(--fs-4); font-weight:700; font-family:var(--font-body);
  transition:transform var(--dur-base), box-shadow var(--dur-base);
}
.care-submit:hover{ transform:translateY(-2px); box-shadow:var(--shadow-cta); }
.care-submit:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

.care-hint{ color:var(--text-dim); font-size:var(--fs-3); line-height:1.6; margin:0 0 var(--sp-2); }
.care-hint a{ color:var(--cyan); }

/* ── Вердикт-панель сборки (рендерит main.js) ── */
.care-verdict-slot{ margin-bottom:14px; }
.care-verdict{
  padding:20px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.care-verdict.is-partial{ border-color:var(--line); }
.care-verdict-main{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.care-verdict-status{
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-5); font-weight:700; color:var(--text-hi);
}
.care-verdict-status .ic{ width: var(--icon-md); height: var(--icon-md); color:var(--sup-ok); }
.care-verdict.is-partial .care-verdict-status .ic{ color:var(--text-dim); }
.care-verdict-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.care-check{
  display:inline-flex; align-items:center;
  padding:4px 11px; border-radius:var(--r-pill);
  font-size:var(--fs-1); border:1px solid var(--line); color:var(--text-dim);
  cursor:default;
}
.care-check.is-ok{ color:var(--sup-ok); border-color:color-mix(in srgb, var(--success) 32%, transparent); }
.care-check.is-warn{ color:var(--sup-warn); border-color:color-mix(in srgb, var(--warning) 32%, transparent); }
.care-check.is-error{ color:var(--sup-danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.care-check.is-info{ color:var(--ice); border-color:var(--ice-a25); }

.care-verdict-total{ text-align:right; }
.care-total-label{ display:block; font-size:var(--fs-1); color:var(--text-dim); }
.care-total-sum{
  display:block; font-family:var(--font-mono); font-weight:500;
  font-size:var(--fs-8); color:var(--text-hi); font-variant-numeric:tabular-nums;
}
.care-total-note{ display:block; font-size:var(--fs-2); color:var(--text-dim); max-width:260px; }

.care-verdict-actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:16px;
}
.care-btn-primary{
  height:var(--h-btn-sm); padding:0 18px; cursor:pointer;
  border:none; border-radius:var(--r-md);
  background:var(--cyan); color:var(--cta-ink);
  font-size:var(--fs-3); font-weight:700; font-family:var(--font-body);
  transition:transform var(--dur-base), box-shadow var(--dur-base);
}
.care-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px var(--cyan-a30); }
.care-btn-primary.is-done{ background:var(--sup-ok); }
.care-btn-ghost{
  height:var(--h-btn-sm); padding:0 18px; cursor:pointer;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:transparent; color:var(--text);
  font-size:var(--fs-3); font-family:var(--font-body);
  transition:border-color var(--dur-base), color var(--dur-base);
}
.care-btn-ghost:hover{ border-color:var(--cyan-a45); color:var(--text-hi); }
.care-btn-mini{
  height:var(--h-chip); padding:0 13px; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:transparent; color:var(--text-dim);
  font-size:var(--fs-2); font-family:var(--font-body);
  transition:border-color var(--dur-base), color var(--dur-base);
}
.care-btn-mini:hover{ color:var(--text-hi); border-color:var(--glass-line); }
.care-btn-ghost.is-done{ border-color:color-mix(in srgb, var(--success) 40%, transparent); color:var(--sup-ok); }
/* гость нажал «Оставить заявку» → кнопка превращается в WhatsApp + регистрацию */
.care-request-alt{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
.care-request-alt .care-btn-ghost{ display:inline-flex; align-items:center; text-decoration:none; }
.care-request-reg{ font-size:var(--fs-2); color:var(--text-dim); }
.care-request-reg:hover{ color:var(--cyan); }
.care-verdict-note{ margin:12px 0 0; font-size:var(--fs-2); color:var(--text-dim); line-height:1.55; }
.care-verdict-note a{ color:var(--cyan); }

/* ── Строки узлов сборки ── */
.care-rows-slot{ margin-bottom:var(--sp-2); }
.care-rows{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.care-row{ padding:12px 16px; }
.care-row+.care-row{ border-top:1px solid var(--line); }
.care-row-main{
  display:grid; grid-template-columns:120px 1fr auto auto;
  align-items:center; gap:14px;
}
.care-row-slot{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint);
}
.care-row-name{ color:var(--text-hi); font-size:var(--fs-4); text-decoration:none; min-width:0; }
.care-row-name:hover{ color:var(--cyan); }
.care-row-price{
  font-family:var(--font-mono); font-size:var(--fs-4); color:var(--text-hi);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.care-row-arg{
  grid-column:2/-1; margin:4px 0 0; font-size:var(--fs-2);
  color:var(--text-dim); line-height:1.5;
}
.care-row.is-order{ background:var(--pure-white-a02); }
.care-row-badge{
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:var(--r-pill); border:1px dashed var(--glass-line);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
}
.build-add{
  height:32px; padding:0 13px; cursor:pointer; white-space:nowrap;
  border-radius:var(--r-md); border:1px solid var(--cyan-a40);
  background:transparent; color:var(--cyan);
  font-size:var(--fs-2); font-family:var(--font-body);
  transition:background var(--dur-base), color var(--dur-base);
}
.build-add:hover{ background:var(--cyan-a12); }
.build-add.is-added{ border-color:color-mix(in srgb, var(--success) 40%, transparent); color:var(--sup-ok); }
.build-error{ color:var(--sup-warn); font-size:var(--fs-3); }

/* Сбой запроса подбора: объяснение + повтор на месте. Пустой блок вместо
   результата покупатель читает как «ничего не нашлось», хотя не дошёл запрос. */
.care-retry{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
  padding:1rem 1.1rem;
  border:1px solid var(--pure-white-a10); border-radius:var(--r-card);
  background:var(--pure-white-a04);
}
.care-retry-text{ color:var(--sup-warn); font-size:var(--fs-3); }
.care-retry-btn{
  min-height:var(--tap-min); padding:0 15px; cursor:pointer;
  border-radius:var(--r-button); border:1px solid var(--cyan-a40);
  background:transparent; color:var(--cyan);
  font-size:var(--fs-3); font-family:var(--font-body);
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.care-retry-btn:hover{ background:var(--cyan-a12); }
.care-retry-btn:active{ scale:.96; }

/* ── Визуальная «сборка» — 8 узлов из pc_builder.SLOTS «загораются» по мере
   подбора (бюджет) или ручного выбора. Разметка общая для обоих режимов
   (store/_rig_visual.html); main.js переключает .is-filled и текст плитки. ── */
.rig-visual{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.7rem;
  margin-bottom:1.4rem;
}
.rig-slot{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem .9rem;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  transition:border-color var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.rig-slot-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius: var(--r-sm);
  background:var(--pure-white-a04);
  color:var(--white-a35);
  transition:color var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard);
}
.rig-slot-icon .ic{ width: var(--icon-sm); height: var(--icon-sm); }

/* название узла (не выбранного товара - см. комментарий в _rig_visual.html).
   Перенос на 2 строки, а не обрезка троеточием: без второй строки (текст
   товара убран) в плитке хватает высоты, а «Материнская плата»/«Оперативная
   память» в одну строку с иконкой и чеком физически не влезают. */
.rig-slot-name{
  min-width:0;
  flex:1;
  font-size:var(--fs-micro);
  font-weight:600;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--white-a50);
  transition:color var(--dur-slow) var(--ease-standard);
}
.rig-slot.is-filled{
  border-color:var(--cyan-a35);
  background:var(--cyan-a05);
  box-shadow:0 0 0 1px var(--cyan-a08), 0 8px 24px var(--cyan-a10);
}
.rig-slot.is-filled .rig-slot-icon{ color:var(--cyan); background:var(--cyan-a14); }
.rig-slot.is-filled .rig-slot-name{ color:var(--white); }

/* каскадная «сборка» по очереди — только в момент применения результата
   подбора по бюджету (main.js на миг добавляет .is-cascading перед update);
   у ручной сборки клик по одному узлу остаётся мгновенным. */
.rig-visual.is-cascading .rig-slot{ transition-delay:calc(var(--i, 0) * 55ms); }
.rig-visual.is-cascading .rig-slot-icon{ transition-delay:calc(var(--i, 0) * 55ms); }

/* ── Ручная сборка ── */
.care-manual{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--sp-2); }
.care-manual-row{
  display:grid; grid-template-columns:230px 1fr; align-items:center; gap:14px;
  padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--glass);
}
.care-manual-name{
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-3); font-weight:600; color:var(--text);
}
.care-manual-name .ic{ width: var(--icon-sm); height: var(--icon-sm); color:var(--text-dim); flex-shrink:0; }
.care-manual-advice{ margin:0; font-size:var(--fs-2); color:var(--text-dim); line-height:1.5; }
.care-total{
  font-family:var(--font-mono); font-size:var(--fs-6); font-weight:500;
  color:var(--text-hi); font-variant-numeric:tabular-nums;
  margin-bottom:var(--sp-2);
}

/* ── Проверки совместимости (ручная сборка + апгрейд) ── */
.care-compat{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--sp-2); }
.compat-missing{ color:var(--text-dim); font-size:var(--fs-3); margin:0; }
/* Статус проверки несут ЦВЕТ РАМКИ и мягкая заливка того же тона, а не
   толстая полоса слева. Раньше здесь стоял border-left:3px нужного цвета
   плюс обнулённые радиусы левого края — карточка выглядела обрубленной, а
   цветной кант на боку плашки читается как шаблонный приём. Смысл сохранён
   полностью: тон тот же, различимость выше (цвет теперь идёт по всему
   периметру и в фоне, а не полоской в 3px у самого края). */
.care-check-card{
  --check-tone: var(--text-faint);
  padding:14px 16px; border-radius:var(--r-md);
  border:1px solid color-mix(in srgb, var(--check-tone) 42%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--check-tone) 9%, transparent), transparent 60%),
    var(--glass);
}
.care-check-card.is-ok{ --check-tone: var(--sup-ok); }
.care-check-card.is-warn{ --check-tone: var(--sup-warn); }
.care-check-card.is-error{ --check-tone: var(--sup-danger); }
.care-check-card.is-info{ --check-tone: var(--ice); }
.care-check-title{ margin:0 0 4px; font-size:var(--fs-4); font-weight:700; color:var(--text-hi); }
.care-check-msg{ margin:0; font-size:var(--fs-3); color:var(--text-soft); line-height:1.55; }
.care-suggest{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line);
}
.care-suggest-info{ font-size:var(--fs-3); color:var(--text-soft); }
.care-suggest-info a{ color:var(--cyan); text-decoration:none; }
.care-suggest-info a:hover{ text-decoration:underline; }

/* ── Апгрейд: сетка «что у вас стоит» ── */
.care-grid-head{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  margin:0 0 12px;
}
.care-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px; margin-bottom:var(--sp-3);
}

/* ── Квизы ── */
.care-quiz-q{ font-size:var(--fs-4); font-weight:600; color:var(--text-hi); margin:0 0 12px; }
.care-quiz-opts{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.quiz-opt{
  height:var(--h-btn-sm); padding:0 18px; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--glass); color:var(--text);
  font-size:var(--fs-3); font-family:var(--font-body);
  transition:border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.quiz-opt:hover{ border-color:var(--cyan-a40); color:var(--text-hi); }
.quiz-opt.is-active{
  border-color:var(--cyan); color:var(--cyan);
  background:var(--cyan-a07);
}
.quiz-result{ max-width:820px; }
.quiz-result h3{ font-size:var(--fs-6); font-weight:700; color:var(--text-hi); margin:0 0 8px; }
.quiz-result>p{ color:var(--text-soft); font-size:var(--fs-4); line-height:1.6; margin:0 0 10px; }
.care-link{
  display:inline-block; color:var(--cyan); font-size:var(--fs-3);
  text-decoration:none; margin-bottom:var(--sp-2);
}
.care-link:hover{ text-decoration:underline; }

/* ── Карточки товаров в подборах (ноутбуки/периферия/принтеры) ── */
.care-cards-head{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  margin:0 0 10px;
}
.care-cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}
.care-card{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--glass);
  transition:border-color var(--dur-base), transform var(--dur-base);
}
.care-card:hover{ border-color:var(--cyan-a40); transform:translateY(-3px); }
.care-card-img{
  display:block; aspect-ratio:4/3; background:var(--pure-white);
}
.care-card-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.care-card-body{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; }
.care-card-name{ font-size:var(--fs-3); color:var(--text-hi); line-height:1.4; }
.care-card-reason{ font-size:var(--fs-1); color:var(--text-dim); line-height:1.45; }
.care-card-price{
  font-family:var(--font-mono); font-size:var(--fs-4); font-weight:500;
  color:var(--cyan); font-variant-numeric:tabular-nums;
}
.care-card.is-skeleton{ min-height:220px; }

/* подбор пуст → предложение заявки */
.care-empty-suggest{
  padding:16px 18px; border:1px dashed var(--glass-line); border-radius:var(--r-lg);
}
.care-empty-suggest p{ margin:0 0 12px; color:var(--text-soft); font-size:var(--fs-3); }

/* ── Чекбокс «Учитывать уценённый товар» (общий компонент страницы) ── */
.clearance-check{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height:var(--h-btn-sm, 40px);
  padding:0 .9rem;
  border-radius: var(--r-md);
  background:var(--pure-white-a04);
  border:1px solid var(--pure-white-a12);
  color:var(--white-a80);
  font-size:var(--fs-3);
  font-weight:500;
  cursor:pointer;
  user-select:none;
  transition:border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.clearance-check:hover{
  border-color:var(--cyan-a35);
  color:var(--pure-white);
}
.clearance-check input[type="checkbox"]{
  position:absolute;
  width:0;
  height:0;
  opacity:0;
}
.clearance-check-box{
  position:relative;
  width:16px;
  height:16px;
  flex-shrink:0;
  border-radius: var(--r-xs);
  border:1px solid var(--pure-white-a32);
  background:var(--pure-white-a04);
  transition:background var(--dur-base), border-color var(--dur-base);
}
.clearance-check-box::after{
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform var(--dur-fast) var(--ease-entrance);
}
.clearance-check input:checked~.clearance-check-box{
  background:var(--cyan);
  border-color:var(--cyan);
}
.clearance-check input:checked~.clearance-check-box::after{
  transform:rotate(45deg) scale(1);
}
.clearance-check input:focus-visible~.clearance-check-box{
  box-shadow:0 0 0 3px var(--cyan-a30);
}

/* ── FAQ: поиск + группы ── */
.care-faq-search{
  display:flex; align-items:center; gap:10px;
  max-width:520px; height:var(--h-input); padding:0 16px;
  border:1px solid var(--field-border); border-radius:var(--r-md);
  background:var(--glass); margin-bottom:var(--sp-2);
}
.care-faq-search .ic{ width: var(--icon-sm); height: var(--icon-sm); color:var(--text-dim); flex-shrink:0; }
.care-faq-search input{
  flex:1; min-width:0; border:none; background:transparent;
  color:var(--text-hi); font-size:var(--fs-4); font-family:var(--font-body);
}
.care-faq-search input:focus{ outline:none; }
.care-faq-search:focus-within{ border-color:var(--cyan-a45); }
.care-faq-empty{ color:var(--text-dim); font-size:var(--fs-3); margin:0 0 var(--sp-2); }
.care-faq-empty a{ color:var(--cyan); }

/* Сетка групп: заголовок и его список — один неразрывный блок (.care-faq-cluster),
   на широком экране блоки встают по два в ряд. Одной колонкой правая половина
   экрана простаивала, а десять групп уходили на несколько экранов прокрутки.
   align-items:start — раскрытый вопрос растит только свою колонку, соседняя
   остаётся на месте (у CSS columns группы перетекали бы между колонками). */
.care-faq-grid{ display:grid; gap:var(--sp-4) var(--sp-3); align-items:start; }
.care-faq-cluster{ min-width:0; }
/* JS-фильтр прячет опустевшую группу через cluster.hidden — display из класса
   перебил бы UA-правило [hidden]{display:none}, поэтому гасим явно. */
.care-faq-cluster[hidden]{ display:none; }
.care-faq-group{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 12px;
}
.care-faq-list{ display:flex; flex-direction:column; gap:8px; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--glass);
}
.faq-item summary{
  padding:14px 18px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:var(--fs-4); font-weight:600; color:var(--text);
  transition:color var(--dur-base);
  /* радиус плашки повторён явно — кольцо фокуса идёт по её форме
     (наследовать радиус <details> нельзя, см. 01-base/accessibility.css) */
  border-radius:var(--r-md);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; flex-shrink:0;
  font-family:var(--font-mono); font-size:var(--fs-5); color:var(--text-dim);
  transition:transform var(--dur-base);
}
.faq-item[open] summary{ color:var(--text-hi); }
.faq-item[open] summary::after{ transform:rotate(45deg); color:var(--cyan); }
.faq-item summary:hover{ color:var(--text-hi); }
.faq-item p{
  /* max-width по тексту, а не по плашке: колонка на широком мониторе доходит
     до ~850px, а строка длиннее ~75 знаков теряется при переводе взгляда */
  margin:0; padding:0 18px 16px; max-width:75ch;
  color:var(--text-soft); font-size:var(--fs-3); line-height:1.65;
}
.faq-item a{ color:var(--cyan); }

/* Порог 981px = порог рейла в 01-base/layout.css. Ниже него боковые поля
   страницы всё ещё 90px с каждой стороны, колонка ужалась бы до ~300px и
   вопрос ломался бы на три строки — там список остаётся одной колонкой. */
@media(min-width: 981px){
  .care-faq-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile ── */
@media(max-width: 1100px){
  .care-tools{ grid-template-columns:repeat(2, 1fr); }
}

@media(max-width: 760px){
  /* top = высота фикс-навбара (--nav-h) + воздух: иначе заголовок «Служба
     заботы» заезжает под шапку (та же схема, что account/compare/wishlist). */
  .care-page{ padding:calc(var(--nav-h) + var(--sp-1)) var(--sp-2) var(--sp-6); }
  .care-contacts{ gap:8px; }
  .care-tools{ gap:8px; }
  .care-tool{ padding:14px; }
  .care-tool-desc{ display:none; }
  .care-form{ align-items:stretch; flex-direction:column; }
  .care-field{ min-width:0; }
  .care-verdict-main{ flex-direction:column; }
  .care-verdict-total{ text-align:left; }
  .care-total-note{ max-width:none; }
  .care-row-main{ grid-template-columns:1fr auto; }
  .care-row-slot{ grid-column:1/-1; }
  .care-row-arg{ grid-column:1/-1; }
  .care-manual-row{ grid-template-columns:1fr; align-items:stretch; }
  .care-cards{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}

@media(max-width: 480px){
  .care-tools{ grid-template-columns:repeat(2, 1fr); }
  .care-tool-name{ font-size:var(--fs-3); }
  .care-quiz-opts{ gap:8px; }
  .quiz-opt{ font-size:var(--fs-2); padding:0 14px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .care-panel.is-active{ animation:none; }
  .care-tool, .care-tool:hover,
  .care-card, .care-card:hover,
  .preset-btn, .preset-btn:hover,
  .care-submit, .care-submit:hover,
  .care-btn-primary, .care-btn-primary:hover{
    transition:none; transform:none;
  }
  .rig-slot, .rig-slot-icon{
    transition:none;
  }
}