/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN 2.0 — КАТАЛОГ (overlay поверх widgets.css/shop.css, 15.09 AI-2)
   Директива владельца: «начни с 0, разве так выглядят проекты в мире?»
   Нулевой аудит (линза Faire/Ozon): карточка-монстр, фото 20%, плоская
   иерархия, жёлтый шум. Правило 2.0: карточка = СЛОЙ СКАНИРОВАНИЯ
   (фото → имя → цена → прогресс → CTA), ярусная лестница = слой решения
   (страница пула). Загружается ПОСЛЕДНИМ — каскад перекрывает @container
   правила widgets.css той же специфичности.
   Откат: убрать <link> из catalog.html.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#16181D; --ink-2:#5B616E; --ink-3:#9AA1AC;
  --line:#E8EAEE; --line-2:#F1F3F6;
  --paper-2:#F7F8FA;
  --amber:#FFDE00; --amber-deep:#8A6D00;
  --green:#0E9F6E; --green-soft:#E6F6F0;
}

/* ── сетка: плотнее (4-5 колонок на десктопе). ID-специфичность бьёт
     shop.css:79 #catalog-grid:not(.cat-rubrics){1fr} — сознательную
     список-простыню, которую аудит линзы назвал главным провалом каталога ── */
#catalog-grid.grid-pools:not(.cat-rubrics){grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px}

/* ── КАРТОЧКА: фото сверху на ЛЮБОЙ ширине контейнера (перекрывает
     @container widgets.css: 132px сбоку / 172px сбоку) ── */
.prc2{border-radius:16px;border:1.5px solid var(--line);transition:transform .18s,box-shadow .18s,border-color .18s}
.prc2:hover{border-color:transparent;box-shadow:0 14px 44px rgba(22,24,29,.14);transform:translateY(-3px)}
.prc2__main{display:block;padding:10px}
.prc2__body{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"photo" "r1" "sub" "tiers" "foot"}
.prc2__photo{grid-area:photo;min-height:0;aspect-ratio:1/1.02;background:var(--paper-2);
  border-radius:12px;font-size:40px}
.prc2__photo img{border-radius:12px}

/* строка 1: имя + цена — вертикально, цена крупнее всех */
.prc2__r1{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.prc2__t{flex:none;min-width:0;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.005em;
  color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.prc2__pr{display:flex;align-items:baseline;gap:7px;white-space:nowrap;flex-wrap:wrap}
.prc2__pr b{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.prc2__pr s{color:var(--ink-3);font-size:12px;font-weight:500}
.prc2__pr em{font-style:normal;font-size:11px;font-weight:800;color:var(--green);
  background:var(--green-soft);border-radius:7px;padding:2.5px 7px}
.prc2__pr .prc2__auto{margin-left:0;font-size:9.5px;padding:2px 7px}

/* подзаголовок: одна приглушённая строка */
.prc2__sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prc2__sub b{color:var(--blue);font-weight:700}
.prc2__desc{display:none}          /* слой сканирования: описание — на странице пула */

/* ярусы: ТОЛЬКО рекомендованный ряд (лестница целиком — на странице пула) */
.prc2__tiers{border-top:1px solid var(--line-2);padding-top:8px;gap:0}
.prc2__tr:not(.prc2__tr--rec){display:none}
.prc2__tr{background:transparent;border-radius:0;padding:0}
.prc2__tr--rec{background:transparent;box-shadow:none}
.prc2__l1{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;overflow:hidden}
.prc2__tr--rec .prc2__l1 b{color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.01em}
.prc2__l1 i{font-size:10.5px;color:var(--ink-3)}
.prc2__sv{font-size:10.5px;font-weight:800;color:var(--green);margin-left:auto;flex:none}
.prc2__l2{margin-top:5px;gap:8px}
.prc2__l2 .wg-scale{height:6px;background:var(--line-2)}
.prc2__l2 .wg-scale.y{background:var(--line-2)}
.prc2__l2 .wg-scale i{background:linear-gradient(90deg,#FFDE00,#FFC900)}
.prc2__pc{font-size:11px;font-weight:800;color:var(--ink)}
.prc2__tr--rec .prc2__pc{color:var(--ink)}
.prc2__hd{flex:1 1 auto;min-width:0;font-size:10px;color:var(--ink-3);-webkit-line-clamp:1}

/* футер: одна строка бейджей + полная CTA */
.prc2__foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.prc2__log{display:none}            /* вес/габариты — слой решения (пул) */
.prc2__mro{font-size:10px;padding:2.5px 8px;border-color:var(--line);background:var(--paper-2)}
.prc2__start{font-size:10px;padding:2.5px 8px}
.prc2__hold{font-size:10px;color:var(--ink-3);background:var(--paper-2);padding:2.5px 8px}
.prc2__hold b{color:var(--ink-2);font-weight:700}
.prc2__cta{flex:1 1 100%;text-align:center;justify-content:center;margin:4px 0 0;
  font-size:12.5px;font-weight:800;color:var(--ink);background:var(--amber);
  border-radius:9px;padding:10px 12px;box-shadow:none}
.prc2:hover .prc2__cta{box-shadow:0 4px 14px rgba(255,200,0,.35)}

/* поставщик: нейтральная строка (был янтарный градиент) */
.prc2__sup{background:var(--paper-2);border-top:1px solid var(--line-2);padding:9px 12px;gap:9px}
.prc2__sup:hover{background:#EEF0F3}
.prc2__sup-ic{width:32px;height:32px;border-radius:9px;font-size:12px;font-weight:800;
  color:var(--ink);background:#fff;border:1px solid var(--line)}
.prc2__sup-b b{font-size:11.5px}
.prc2__sup-b i{font-size:10px;color:var(--ink-3)}
.prc2__sup-go{color:var(--ink-3);font-size:10.5px}
.prc2__sup:hover .prc2__sup-go{color:var(--ink)}

/* живой фон-спарклайн карточки: тише */
.prc2 .pd-spark{opacity:.5}

/* ── РУБРИКИ (состояние А): дисциплина цвета ── */
.cat-rub:hover{border-color:var(--ink);box-shadow:0 12px 28px rgba(20,20,20,.10)}
.cat-rub:hover .cat-rub__ic{background:var(--paper-2)}

/* ── ДЕМО-ПОЛОСА: нейтральная (было янтарное пятно) ── */
.demo-strip2{margin:12px 0 4px;padding:11px 16px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.demo-strip2 b{color:var(--ink)}
.demo-strip2 a{color:var(--blue)}

/* ── мобильная плотность ── */
@media (max-width:640px){
  #catalog-grid.grid-pools:not(.cat-rubrics){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prc2__main{padding:8px}
  .prc2__t{font-size:13px}
  .prc2__pr b{font-size:18px}
  .prc2__cta{font-size:11.5px;padding:9px 10px}
}