/* ═══════════════════════════════════════════════════════════════════════════
   Страница категории — макет «Е · Дерево слева», утверждён Антоном 02.08.2026.
   Источник значений: design-concepts-2026-07/74-kategoriya-E-derevo.html
   (CSS_A + CSS_A2 + CSS_E в build_kat5.py), перенесены один в один.
   Шрифт — Golos Text из storefront (самохостинг), здесь только веса и размеры.
   Лестница весов после решения 31.07.2026: H1 700, цены 600, заголовки 600,
   веса 800 и 900 не используются.
   ═══════════════════════════════════════════════════════════════════════════ */

.pck{
  --pck-ink:#0e1420; --pck-mut:#69758c; --pck-line:#e7eaf0; --pck-blue:#2456f0;
  --pck-blued:#173dc2; --pck-soft:#eef3ff; --pck-gray:#f5f6f8;
  font-variant-numeric:tabular-nums;
}
.pck a{text-decoration:none;color:inherit}

/* ── шапка: заголовок и лид без белой карточки ── */
.pck .pck-crumb{font-size:12.5px;color:var(--pck-mut);padding:22px 0 12px}
.pck .pck-crumb a:hover{color:var(--pck-blue)}
.pck h1.pck-h1{
  font-weight:700; font-size:40px; line-height:1.08; letter-spacing:-.03em;
  color:var(--pck-ink); margin:0 !important; padding:0; background:none; border:0;
}
.pck .pck-lead{
  color:var(--pck-mut); font-size:16.5px; line-height:1.6;
  margin:14px 0 0 !important; max-width:760px;
}
.pck .pck-lead b{color:var(--pck-ink); font-weight:600}

/* ── верхний блок: хит категории и две плашки ── */
.pck .pck-hero{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; margin:8px 0 0}
.pck .pck-hero__big{
  background:linear-gradient(115deg,#12203f,#2456f0); color:#fff; border-radius:24px;
  padding:32px; position:relative; overflow:hidden; min-height:300px;
  display:flex; flex-direction:column; transition:.18s;
}
.pck .pck-hero__big:hover{transform:translateY(-3px); box-shadow:0 26px 60px rgba(18,32,63,.28)}
.pck .pck-hero__tag{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72); position:relative; z-index:2;
}
.pck .pck-hero__big h2{
  font-weight:600; font-size:28px; line-height:1.14; letter-spacing:-.025em;
  margin:10px 0 8px !important; max-width:62%; position:relative; z-index:2; color:#fff;
}
.pck .pck-hero__big p{
  font-size:14px; color:rgba(255,255,255,.8); line-height:1.6; max-width:58%;
  position:relative; z-index:2; margin:0 !important;
}
.pck .pck-hero__p{margin-top:16px; font-size:15px; color:rgba(255,255,255,.8); position:relative; z-index:2}
.pck .pck-hero__p b{font-size:26px; color:#fff; font-weight:600}
.pck .pck-hero__go{
  margin-top:auto; width:max-content; background:#fff; color:#12203f; border-radius:11px;
  padding:12px 22px; font-size:14px; font-weight:600; position:relative; z-index:2;
}
.pck .pck-hero__big img{
  position:absolute; right:18px; bottom:-14px; width:40%; border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.4); z-index:1;
}
.pck .pck-hero__side{display:grid; grid-template-rows:1fr 1fr; gap:14px}
.pck .pck-mini{
  background:var(--pck-gray); border-radius:20px; padding:20px;
  display:flex; align-items:center; gap:16px; transition:.18s;
}
.pck .pck-mini:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(14,20,32,.1)}
.pck .pck-mini img{width:74px; border-radius:10px; box-shadow:0 10px 26px rgba(14,20,32,.18); flex:none}
.pck .pck-mini b{
  font-size:14.5px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; line-height:1.35;
}
.pck .pck-mini span span{font-size:12px; color:var(--pck-mut); display:block; margin-top:5px}
.pck .pck-mini em{font-style:normal; font-size:16px; font-weight:600; display:block; margin-top:8px}

/* ── две колонки: дерево + товары ── */
.pck .pck-layout{display:grid; grid-template-columns:268px 1fr; gap:26px; margin-top:26px; align-items:start}
.pck .pck-main{min-width:0}

/* ── дерево каталога ── */
.pck .pck-tree{position:sticky; top:70px}
.pck .pck-tree>b{
  display:block; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pck-mut); margin:0 0 12px 14px;
}
.pck .pck-tnode{background:var(--pck-gray); border-radius:14px; margin-bottom:6px; overflow:hidden}
.pck .pck-tnode>summary,
.pck .pck-tflat{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:12px 16px; font-size:14px; font-weight:600; color:var(--pck-ink); transition:.14s;
}
.pck .pck-tnode>summary::-webkit-details-marker{display:none}
.pck .pck-tnode>summary:hover,
.pck .pck-tflat:hover{background:#eceef3}
.pck .pck-tnode em,
.pck .pck-tflat em{margin-left:auto; font-style:normal; font-size:12px; color:var(--pck-mut); font-weight:600}
.pck .pck-tnode>summary::after{content:"▾"; font-size:10px; color:var(--pck-mut); transition:.2s}
.pck .pck-tnode[open]>summary::after{transform:rotate(180deg)}
.pck .pck-tnode[open]{background:#fff; box-shadow:0 0 0 1.5px var(--pck-line) inset}
.pck .pck-tnode[open]>summary{background:var(--pck-soft); color:var(--pck-blued)}
.pck .pck-tflat.is-current{background:var(--pck-soft); color:var(--pck-blued)}
.pck .pck-tkids{padding:6px}
.pck .pck-tkids a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-size:13.5px; color:#3d4a63; transition:.13s;
}
.pck .pck-tkids a:hover{background:var(--pck-gray); color:var(--pck-ink)}
.pck .pck-tkids a.is-current{background:var(--pck-blue); color:#fff; font-weight:600}
.pck .pck-tkids a.is-current em{color:rgba(255,255,255,.75)}
.pck .pck-tkids a em{margin-left:auto; font-style:normal; font-size:12px; color:var(--pck-mut)}

/* ── поиск по разделу и сортировка ── */
.pck .pck-tools{display:flex; gap:10px; margin-bottom:18px}
.pck .pck-search{
  flex:1; display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid var(--pck-line); border-radius:14px; padding:0 16px;
}
.pck .pck-search input{
  flex:1; border:0; outline:0; padding:13px 0; font-size:14px; font-family:inherit;
  background:transparent; color:var(--pck-ink); min-width:0;
}
.pck .pck-search svg{color:#98a2b3; flex:none}
.pck .pck-sort{
  background:#fff; border:1.5px solid var(--pck-line); border-radius:14px;
  padding:0 38px 0 16px; font-size:14px; font-weight:600; color:var(--pck-ink);
  cursor:pointer; appearance:none; -webkit-appearance:none; min-width:208px; font-family:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2369758c' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
}
.pck .pck-sort-go{
  background:var(--pck-blue); color:#fff; border:0; border-radius:14px;
  padding:0 20px; font-size:14px; font-weight:600; cursor:pointer;
}
.pck .pck-count{font-size:13px; color:var(--pck-mut); margin:-8px 0 14px}

/* ── сетка товаров: три в ряд ── */
.pck .pck-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pck .pck-card{
  background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  transition:.18s; box-shadow:0 0 0 1px var(--pck-line);
}
.pck .pck-card:hover{box-shadow:0 24px 54px rgba(14,20,32,.15); transform:translateY(-3px)}
.pck .pck-card__im{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--pck-gray); display:block}
.pck .pck-card__im img{width:100%; height:100%; object-fit:cover; display:block}
.pck .pck-off{
  position:absolute; left:12px; top:12px; background:rgba(255,255,255,.94); color:#c4320a;
  font-size:11px; font-weight:700; border-radius:99px; padding:4px 9px;
}
.pck .pck-card__bd{padding:15px 17px 17px; display:flex; flex-direction:column; flex:1}
.pck .pck-card__nm{
  font-size:14px; line-height:1.35; font-weight:600; min-height:38px;
  margin:0 !important; color:var(--pck-ink); letter-spacing:0;
}
.pck .pck-card__nm a:hover{color:var(--pck-blue)}
.pck .pck-card__at{font-size:11.5px; color:#9aa4b6; margin-top:7px}
.pck .pck-card__pr{margin-top:auto; padding-top:12px; font-size:18px; font-weight:600; letter-spacing:-.01em}
.pck .pck-card__pr s{font-size:12.5px; font-weight:400; color:var(--pck-mut); margin-left:7px}

/* ── кнопка: сплошной фирменный синий, «в корзине» — зелёная ── */
.pck .pck-buy{
  margin-top:12px; border:0; border-radius:11px; padding:11px 16px; font-weight:600;
  font-size:13px; cursor:pointer; background:var(--pck-blue); color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:.16s; width:100%; font-family:inherit;
}
.pck .pck-buy:hover{background:var(--pck-blued)}
.pck .pck-buy.is-added{background:#027a48}
.pck .pck-buy.is-added:hover{background:#026a3e}
.pck .pck-buy.is-loading{opacity:.72; cursor:default}
.pck .pck-buy--off{background:var(--pck-gray); color:var(--pck-mut) !important; cursor:default}
.pck .pck-buy--wide{width:max-content; margin-top:16px; padding:12px 22px; font-size:14px}

/* ── пустой раздел ── */
.pck .pck-empty{
  background:var(--pck-gray); border-radius:20px; padding:28px;
  font-size:14.5px; line-height:1.6; color:var(--pck-ink);
}
.pck .pck-empty p{margin:0 !important}

/* ── адаптив: точки те же, что в макете ── */
@media(max-width:1000px){
  .pck .pck-hero{grid-template-columns:1fr}
  .pck .pck-hero__big h2,
  .pck .pck-hero__big p{max-width:100%}
  .pck .pck-hero__big img{display:none}
  .pck .pck-layout{grid-template-columns:1fr}
  .pck .pck-tree{position:static}
  .pck .pck-grid{grid-template-columns:repeat(2,1fr)}
  .pck h1.pck-h1{font-size:30px}
}
@media(max-width:560px){
  .pck .pck-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .pck .pck-card{border-radius:16px}
  .pck .pck-card__bd{padding:12px 13px 14px}
  .pck .pck-tools{flex-direction:column}
  .pck .pck-sort{width:100%; padding:13px 38px 13px 16px}
  .pck h1.pck-h1{font-size:26px}
  .pck .pck-hero__big{padding:24px; min-height:0}
  .pck .pck-hero__big h2{font-size:23px}
}

/* Скрытие при поиске: у карточки display:flex, он перебивает атрибут [hidden].
   Без этого правила счётчик пишет «Показано 1 из 31», а на экране все 31. */
.pck .pck-card[hidden]{display:none !important}

/* ── устойчивость верхнего блока к незагруженным картинкам ──────────────
   Пока обложки грузятся, у баннера не должно быть «резинового» роста:
   высота задана заранее, картинке зарезервированы пропорции. Иначе на
   медленной сети блок сначала распирает на пол-экрана, а потом схлопывается. */
.pck .pck-hero__big{max-height:420px}
.pck .pck-hero__big img{
  width:38%; max-width:300px; height:auto; max-height:82%;
  object-fit:contain; aspect-ratio:3/4;
}
.pck .pck-hero__side{grid-template-rows:1fr 1fr; min-height:0}
.pck .pck-mini{min-height:0; overflow:hidden}
.pck .pck-mini img{width:74px; height:98px; object-fit:contain; background:#fff}

/* ── «Показать ещё» в сетке и в дереве ── */
.pck .pck-card.is-more{display:none !important}
.pck .pck-tkids a.is-more{display:none !important}
.pck .pck-more{
  display:block; margin:22px auto 0; background:#fff; border:1.5px solid var(--pck-line);
  border-radius:14px; padding:13px 28px; font-size:14px; font-weight:600; font-family:inherit;
  color:var(--pck-ink); cursor:pointer; transition:.15s;
}
.pck .pck-more:hover{border-color:var(--pck-blue); color:var(--pck-blued)}
.pck .pck-tmore{
  display:block; width:100%; margin-top:4px; background:none; border:0; padding:9px 12px;
  font-size:13px; font-weight:600; color:var(--pck-blue); cursor:pointer;
  text-align:left; font-family:inherit;
}
.pck .pck-tmore:hover{color:var(--pck-blued)}

/* ── FAQ раздела: та же плитка, что на карточке товара ── */
.pck .pck-faqsec{margin-top:10px}
.pck h2.pck-st{
  font-weight:600; font-size:26px; line-height:1.2; letter-spacing:-.02em;
  margin:0 0 6px !important; color:var(--pck-ink);
}
.pck .pck-sub{color:var(--pck-mut); font-size:13.5px; margin-bottom:18px}
.pck .pck-faq{display:grid; gap:10px; max-width:900px}
.pck .pck-faq details{
  background:#fafbfd; border:1px solid transparent; border-radius:16px;
  padding:16px 20px; transition:.15s;
}
.pck .pck-faq details[open]{background:#fff; border-color:var(--pck-line)}
.pck .pck-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  font-size:15px; font-weight:600; color:var(--pck-ink);
}
.pck .pck-faq summary::-webkit-details-marker{display:none}
.pck .pck-pm{
  margin-left:auto; flex:none; width:22px; height:22px; position:relative;
  transition:transform .18s;
}
.pck .pck-pm::before,
.pck .pck-pm::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--pck-blue);
  transform:translate(-50%,-50%); border-radius:2px;
}
.pck .pck-pm::before{width:13px; height:2px}
.pck .pck-pm::after{width:2px; height:13px}
.pck .pck-faq details[open] .pck-pm{transform:rotate(135deg)}
.pck .pck-faq details > div{padding-top:12px}
.pck .pck-faq details p{
  margin:0 !important; font-size:14.5px; line-height:1.65; color:#3d4a63;
}
@media(max-width:560px){
  .pck h2.pck-st{font-size:21px}
  .pck .pck-faq details{padding:14px 16px}
}

/* На узком экране дерево прячем — так в макете Е (#kx .tree{display:none} до 1000px).
   Иначе с телефона человек сначала листает список разделов, а товары уезжают
   на второй экран. Навигация по разделам на мобильном живёт в бургер-меню. */
@media(max-width:1000px){
  .pck .pck-tree{display:none}
  .pck .pck-layout{gap:0}
}

/* v005: обложка в баннере — наискосок, как на плитках главной
   (#pcsoft-home-v2 .phv2-tile img{transform:rotate(3deg)}). Приём взят оттуда,
   ничего не изобретено: угол, радиус и тень те же. */
.pck .pck-hero__big img{
  transform:rotate(3deg); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}

/* Строки-дубля «Windows 11 Pro · По телефону» в карточке больше нет —
   имя товара и так её содержит. Отступ до цены держим ровным. */
.pck .pck-card__nm{margin-bottom:10px !important}
.pck .pck-mini b{-webkit-line-clamp:3}

/* v006: цена идёт сразу под названием. Раньше `margin-top:auto` у цены прижимал
   её к низу карточки, и у товаров с коротким названием между строкой и ценой
   зияла пустота в пол-карточки. Теперь к низу прижата только кнопка. */
.pck .pck-card__nm{min-height:0 !important; margin-bottom:8px !important}
.pck .pck-card__pr{margin-top:0 !important; padding-top:0 !important}
.pck .pck-buy{margin-top:auto}
.pck .pck-card__bd{gap:0}

/* ── SEO-текст раздела: открытый, в три колонки, без «Подробнее» ── */
.pck .pck-seosec{margin-top:6px}
.pck .pck-seo{
  background:var(--pck-gray); border-radius:24px; padding:34px 36px;
}
.pck .pck-seo h2{
  font-weight:600; font-size:26px; line-height:1.2; letter-spacing:-.02em;
  margin:0 0 12px !important; color:var(--pck-ink);
}
.pck .pck-seo__intro{
  font-size:15.5px; line-height:1.65; color:#3d4a63; margin:0 0 26px !important; max-width:900px;
}
.pck .pck-seo__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.pck .pck-seo__col h3{
  font-weight:600; font-size:16px; line-height:1.3; margin:0 0 10px !important; color:var(--pck-ink);
}
.pck .pck-seo__col p{
  font-size:14px; line-height:1.65; color:#55607a; margin:0 0 10px !important;
}
.pck .pck-seo a{color:var(--pck-blue); text-decoration:underline; text-underline-offset:2px}
.pck .pck-seo a:hover{color:var(--pck-blued)}
.pck .pck-hero__h{
  display:block; font-weight:600; font-size:28px; line-height:1.14; letter-spacing:-.025em;
  margin:10px 0 8px; max-width:62%; position:relative; z-index:2; color:#fff;
}
@media(max-width:1000px){
  .pck .pck-seo__cols{grid-template-columns:1fr; gap:20px}
  .pck .pck-seo{padding:24px 22px}
  .pck .pck-hero__h{max-width:100%}
}
@media(max-width:560px){
  .pck .pck-seo h2{font-size:21px}
  .pck .pck-hero__h{font-size:23px}
}

/* ═══ v007: правки по замечаниям Антона 02.08.2026 ═══════════════════════
   1) Никаких синих подложек — баннер хита светлый, как плитка первого экрана
      главной (#pcsoft-home-v2 .phv2-tile: серый фон, тёмный текст, тёмная кнопка).
   2) SEO-текст и вопросы — ОДИН блок на светлой подложке: слева заголовок,
      абзац и чипы, справа аккордеон. Вид взят у согласованного блока главной
      .phv2-seo3, чтобы аккордеон на сайте был везде одинаковый.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── баннер хита: светлый ── */
.pck .pck-hero__big{
  background:var(--pck-gray) !important; color:var(--pck-ink);
  box-shadow:none;
}
.pck .pck-hero__big:hover{box-shadow:0 22px 50px rgba(14,20,32,.12)}
.pck .pck-hero__tag{color:var(--pck-mut)}
.pck .pck-hero__h{color:var(--pck-ink)}
.pck .pck-hero__big p{color:var(--pck-mut)}
.pck .pck-hero__p{color:var(--pck-mut)}
.pck .pck-hero__p b{color:var(--pck-ink)}
.pck .pck-hero__go{background:#0e1420; color:#fff}
.pck .pck-hero__big img{box-shadow:0 24px 60px rgba(14,20,32,.22)}

/* ── единый блок «текст + вопросы» ── */
.pck .pck-seosec{margin-top:8px}
.pck .pck-seo{
  background:var(--pck-gray); border-radius:24px; padding:34px 36px;
  display:grid; grid-template-columns:360px 1fr; gap:14px 44px; align-items:start;
}
.pck .pck-seo h2{
  font-weight:600; font-size:22px; line-height:1.2; letter-spacing:-.02em;
  margin:0 0 10px !important; color:var(--pck-ink);
}
.pck .pck-seo__intro{
  font-size:13.5px; line-height:1.65; color:#46536b; margin:0 !important;
}
.pck .pck-seo__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.pck .pck-seo__chips a{
  border:1px solid #dfe3ea; border-radius:99px; padding:5px 12px;
  font-size:11.5px; font-weight:600; color:#3d4a63; background:#fff; white-space:nowrap;
}
.pck .pck-seo__chips a:hover{border-color:var(--pck-blue); color:var(--pck-blued)}

/* аккордеон — один в один как на главной */
.pck .pck-seo__faq details{
  background:transparent; border:0; border-bottom:1px solid #e3e7ee;
  border-radius:0; margin:0; overflow:visible;
}
.pck .pck-seo__faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:14px; padding:17px 2px;
  font-size:15px; font-weight:600; color:var(--pck-ink);
}
.pck .pck-seo__faq summary::-webkit-details-marker{display:none}
.pck .pck-seo__faq summary::after{
  content:"+"; font-weight:500; font-size:20px; line-height:1; color:#9aa4b6; flex:none;
}
.pck .pck-seo__faq details[open] summary::after{content:"−"}
.pck .pck-seo__faq details > div{padding:0 2px 16px}
.pck .pck-seo__faq p{font-size:13px; line-height:1.7; color:#46536b; margin:0 !important}
.pck .pck-seo__faq a{color:var(--pck-blued); border-bottom:1px solid #cdd9f7; text-decoration:none}
.pck .pck-seo__faq a:hover{color:var(--pck-blue)}
.pck .pck-seo__intro a{color:var(--pck-blued); border-bottom:1px solid #cdd9f7; text-decoration:none}

@media(max-width:1000px){
  .pck .pck-seo{grid-template-columns:1fr; padding:24px 22px; gap:6px}
  .pck .pck-seo__faq{margin-top:14px}
}
@media(max-width:560px){
  .pck .pck-seo h2{font-size:19px}
  .pck .pck-seo__faq summary{font-size:14px; padding:15px 2px}
}

/* v008: фон страницы у витрины #f5f6f8 — плитка того же цвета на нём не видна.
   Блок делаем белым: тогда это карточка на светлом поле, как в эталоне. */
.pck .pck-seo{background:#fff; box-shadow:0 0 0 1px #edeff3}

/* Единый аккордеон для разделов без своего текста: тот же вид, что и в блоке
   выше и на главной. Прежние мягкие плитки #fafbfd отменены — Антон 02.08.2026:
   «сделай аккордеон нашим, чтобы он везде был одинаковый». */
.pck .pck-faqsec .pcsoft-shell{background:#fff; border-radius:24px; padding:30px 34px; box-shadow:0 0 0 1px #edeff3}
.pck .pck-faq{max-width:none}
.pck .pck-faq details{
  background:transparent !important; border:0 !important; border-bottom:1px solid #e3e7ee !important;
  border-radius:0 !important; padding:0 !important; margin:0 !important;
}
.pck .pck-faq summary{
  padding:17px 2px; font-size:15px; font-weight:600; color:var(--pck-ink);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.pck .pck-faq .pck-pm{display:none}
.pck .pck-faq summary::after{
  content:"+"; font-weight:500; font-size:20px; line-height:1; color:#9aa4b6; flex:none;
}
.pck .pck-faq details[open] summary::after{content:"−"}
.pck .pck-faq details > div{padding:0 2px 16px}
.pck .pck-faq details p{font-size:13px; line-height:1.7; color:#46536b}

/* v009: фон сайта у витрины #f5f6f8, и плитка того же цвета с ним сливается —
   на маленьких плитках главной это незаметно, а баннер во весь экран читался
   как серое пятно. Баннер и плашки делаем белыми с тонкой обводкой: так же,
   как карточки товаров и блок вопросов. Ни одной синей подложки. */
.pck .pck-hero__big{
  background:#fff !important; box-shadow:0 0 0 1px #edeff3;
}
.pck .pck-hero__big:hover{box-shadow:0 0 0 1px #e2e6ee, 0 22px 50px rgba(14,20,32,.10)}
.pck .pck-mini{background:#fff; box-shadow:0 0 0 1px #edeff3}
.pck .pck-mini:hover{box-shadow:0 0 0 1px #e2e6ee, 0 20px 44px rgba(14,20,32,.10)}

/* v010: заголовок блока уходил на третью строку в узкой колонке.
   Колонку чуть шире, кегль на ступень ниже, текст короче на одно слово. */
.pck .pck-seo{grid-template-columns:400px 1fr}
.pck .pck-seo h2{font-size:21px; line-height:1.22}
@media(max-width:1200px){.pck .pck-seo{grid-template-columns:340px 1fr}}
@media(max-width:1000px){.pck .pck-seo{grid-template-columns:1fr}}

/* ═══ v011: приводим категорию к языку главной ════════════════════════════
   Замер: на главной белый фон даёт обёртка блока (#pcsoft-home-v2), а body
   и .pcsoft-main серые (#f5f6f8). На категории обёртки не было — потому весь
   экран и выглядел серым. Ставим белый фон странице, а плитки красим по
   правилу главной: серое на белом.
   Решение Антона 03.08.2026: большой баннер синий, две плашки рядом серые.
   ═══════════════════════════════════════════════════════════════════════ */
.pck{background:#fff}

/* большой баннер — снова синий, как в утверждённом макете Е */
.pck .pck-hero__big{
  background:linear-gradient(115deg,#12203f,#2456f0) !important;
  color:#fff; box-shadow:none;
}
.pck .pck-hero__big:hover{box-shadow:0 26px 60px rgba(18,32,63,.28)}
.pck .pck-hero__tag{color:rgba(255,255,255,.72)}
.pck .pck-hero__h{color:#fff}
.pck .pck-hero__big p{color:rgba(255,255,255,.8)}
.pck .pck-hero__p{color:rgba(255,255,255,.8)}
.pck .pck-hero__p b{color:#fff}
.pck .pck-hero__go{background:#fff; color:#12203f}
.pck .pck-hero__big img{box-shadow:0 26px 60px rgba(0,0,0,.4)}

/* две плашки рядом — серые: на белом фоне они читаются как отдельные плитки */
.pck .pck-mini{background:var(--pck-gray); box-shadow:none}
.pck .pck-mini:hover{box-shadow:0 20px 44px rgba(14,20,32,.10)}
.pck .pck-mini img{background:transparent}

/* блок текста и вопросов — серый на белом, ровно как SEO-блок главной */
.pck .pck-seo{background:var(--pck-gray); box-shadow:none}

/* карточки товаров остаются белыми: на белом фоне их держит тонкая обводка */
.pck .pck-card{box-shadow:0 0 0 1px var(--pck-line)}

/* ═══ v012: правки Антона 03.08.2026 ═════════════════════════════════════
   1) Нижний блок — снова на белом, как было.
   2) Дерево категорий — белое, без серых пилюль.
   3) Свой выпадающий список сортировки: белая панель, а не тёмная панель ОС.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) блок текста и вопросов — белый */
.pck .pck-seo{background:#fff; box-shadow:0 0 0 1px #edeff3}
.pck .pck-seo__chips a{background:#fff}

/* 2) дерево: белые строки, разделённые тонкой линией */
.pck .pck-tnode{background:#fff; border-radius:12px; margin-bottom:2px}
.pck .pck-tnode > summary,
.pck .pck-tflat{background:#fff; border-radius:12px}
.pck .pck-tnode > summary:hover,
.pck .pck-tflat:hover{background:#f5f6f8}
.pck .pck-tnode[open]{background:#fff; box-shadow:none}
.pck .pck-tnode[open] > summary{background:var(--pck-soft); color:var(--pck-blued)}
.pck .pck-tflat.is-current{background:var(--pck-soft); color:var(--pck-blued)}
.pck .pck-tkids{padding:2px 0 6px 0}
.pck .pck-tkids a{background:#fff}
.pck .pck-tkids a:hover{background:#f5f6f8}
.pck .pck-tkids a.is-current{background:var(--pck-blue); color:#fff}

/* 3) выпадающий список сортировки */
.pck .pck-sel{position:relative; min-width:216px}
.pck .pck-sel__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1.5px solid var(--pck-line); border-radius:14px;
  padding:13px 16px; font-size:14px; font-weight:600; color:var(--pck-ink);
  font-family:inherit; cursor:pointer; transition:.14s;
}
.pck .pck-sel__btn:hover{border-color:#cdd9f7}
.pck .pck-sel__btn svg{color:var(--pck-mut); flex:none; transition:transform .18s}
.pck .pck-sel__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pck .pck-sel__list{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--pck-line); border-radius:14px;
  padding:6px; margin:0; list-style:none;
  box-shadow:0 18px 44px rgba(14,20,32,.14);
}
.pck .pck-sel__list li{
  padding:11px 12px; border-radius:10px; font-size:14px; color:#3d4a63; cursor:pointer;
}
.pck .pck-sel__list li:hover{background:#f5f6f8; color:var(--pck-ink)}
.pck .pck-sel__list li.is-current{color:var(--pck-ink); font-weight:600; background:#f5f6f8}
@media(max-width:560px){.pck .pck-sel{min-width:0; width:100%}}

/* ═══ v013 ══════════════════════════════════════════════════════════════
   1) Серая полоса между блоком вопросов и подвалом — это фон .pcsoft-main,
      торчавший ниже нашей белой обёртки. Красим весь main категории в белый.
   2) Дерево возвращаем на серые плитки: на белом фоне белые пункты сливались
      со страницей, и колонка навигации переставала читаться как колонка.
   ═══════════════════════════════════════════════════════════════════════ */
body.pcsoft-storefront--category .pcsoft-main{background:#fff}

.pck .pck-tnode{background:var(--pck-gray); border-radius:14px; margin-bottom:6px}
.pck .pck-tnode > summary,
.pck .pck-tflat{background:transparent; border-radius:14px}
.pck .pck-tflat{background:var(--pck-gray)}
.pck .pck-tnode > summary:hover,
.pck .pck-tflat:hover{background:#eceef3}
.pck .pck-tnode[open]{background:#fff; box-shadow:0 0 0 1.5px var(--pck-line) inset}
.pck .pck-tnode[open] > summary{background:var(--pck-soft); color:var(--pck-blued)}
.pck .pck-tkids{padding:6px}
.pck .pck-tkids a{background:transparent}
.pck .pck-tkids a:hover{background:var(--pck-gray)}
.pck .pck-tkids a.is-current{background:var(--pck-blue); color:#fff}

/* ── v014 (03.08.2026): блок раздела без вопросов ──
   У страниц года выпуска и редакции свой короткий текст без аккордеона:
   сотня одинаковых наборов вопросов на страницах вида «AutoCAD 2024» —
   дорвейный признак, а не расширенный сниппет. В сетке 360px + 1fr такой
   абзац сжимался в узкую колонку, а справа зияла пустота. */
.pck .pck-seo--solo{grid-template-columns:1fr; gap:0}
.pck .pck-seo--solo .pck-seo__intro{max-width:900px; font-size:14px}

/* v015 (2026-08-08): карточка — цена не липнет к кнопке и не прыгает по высоте */
.pck-card{display:flex;flex-direction:column}
.pck-card__bd{display:flex;flex-direction:column;flex:1 1 auto}
.pck-card__nm{min-height:44px}
.pck-card__pr{margin-top:auto;padding-top:12px;padding-bottom:12px}

/* v016: цена на одной высоте (мин-высота заголовка в 2 строки) и не липнет к кнопке */
.pck .pck-card__nm{min-height:40px !important}
.pck .pck-card__pr{margin-bottom:12px}