/* ══════════════════════════════════════════════════════════════════════
   Каталог товаров (catalog.php) без скина. Подключается только на страницах
   каталога (functions.php, условие — query var pb_cat). Правила cat-* взяты
   из skin-learn.css как есть; ниже — то, без чего не встают: переменные
   (у скина они только под body.pb-skin-learn), сетка .shell и поля телефона.
   Шрифты — те же, что у сайта (pillow-fonts), не скиновые.
════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #fdf4ec; --ink: #191919; --grey: #707070; --grey-2: #8c8c8c;
  --lime: #7fe046; --lime-h: #64c72d; --plum: #b037a6; --white: #fff;
  --line: #e8dcd2; --wide: 1376px;
  --s25: 25px; --s30: 30px; --s45: 45px; --s65: 65px;
  --font: 'Source Sans 3', Arial, sans-serif;
  --font-head: 'Young Serif', Georgia, serif;
}
.pbl *, .pbl *::before, .pbl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pbl a { color: inherit; }
.pbl img { max-width: 100%; display: block; }
.pbl h1, .pbl h2, .pbl h3, .pbl .h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.1; text-wrap: balance; }
.pbl .shell { max-width: calc(var(--wide) + 64px); margin: 0 auto; padding: 0 32px; width: 100%; }
.pbl { font-family: var(--font); color: var(--ink); overflow-x: hidden; }
@media (max-width: 760px) { .pbl .shell { padding: 0 16px; } }

/* ── хлебные крошки (тот же вид, что на статьях) ── */
.breadcrumbs { margin-top: var(--s45); }
.breadcrumbs ul { display: flex; gap: 10px; list-style: none; font-size: .875rem; letter-spacing: .02em; flex-wrap: wrap; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs li + li:before { content: "»"; color: var(--plum); }
.breadcrumbs a { color: var(--grey); text-decoration: none; }
.breadcrumbs li:last-child { color: var(--ink); }

/* ── каталог товаров партнёрки (theme/catalog.php) ────────────────
   Свои классы, не статейная сетка: у неё тёмная подложка, заголовок
   поверх кадра и спрятанная кнопка. Здесь всё ровно по рядам —
   кадр одной пропорции, заголовок под ним, кнопка прижата вниз. */
.cat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;
  margin:0 0 var(--s45);align-items:stretch}
.cat-card{display:flex;flex-direction:column;background:none;border:0;padding:0}
.cat-card__img{display:block;margin:0 0 14px;border-radius:14px;overflow:hidden;background:var(--line)}
.cat-card__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;transition:transform .25s ease}
.cat-card__img:hover img{transform:scale(1.03)}
.cat-card__title{font-size:17px;line-height:1.35;margin:0 0 8px;font-weight:700}
.cat-card__title a{color:var(--ink);text-decoration:none}
.cat-card__title a:hover{text-decoration:underline}
.cat-card__note{font-size:14px;line-height:1.5;color:var(--ink);opacity:.72;margin:0 0 14px}
.cat-card__cta{margin-top:auto;align-self:start;display:inline-block;
  font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:9px 16px;border:1px solid var(--ink);border-radius:999px}
.cat-card__cta:hover{background:var(--ink);color:var(--white)}
.cat-cards--sections .cat-card__title{font-size:20px}
.cat-more{margin:var(--s45) 0 var(--s25)}

/* шапка каталога: воздух под заголовком и до сортировки */
.cat-head .cat-title{margin:0 0 12px}
.cat-head+.cat-toolbar{margin-top:var(--s25)}
.cat-toolbar{border-bottom:1px solid var(--line);padding-bottom:12px}

@media(max-width:1024px){.cat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.cat-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .cat-card__title{font-size:16px}.cat-cards--sections .cat-card__title{font-size:18px}}
@media(max-width:420px){.cat-cards{grid-template-columns:1fr}}


/* ── левая колонка каталога: сортировки и группы, видны на первом экране ── */
.cat-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:40px;
  align-items:start;margin-top:var(--s25)}
/* Колонка едет вместе со страницей и никогда не обрезается. Залипшая версия
   была выше экрана (1054 px против 790), и «Show» с «Rating» уходили за край —
   их доставала только своя прокрутка, которой никто не находил. Фасеты важнее
   залипания: всё видно сразу, вопрос «куда пропала панель» больше не
   возникает (Kate 03.10.2026, третья жалоба на эту колонку). */
.cat-side{display:flex;flex-direction:column;gap:26px;padding-right:6px}
.cat-facet h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);opacity:.65}
.cat-facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cat-facet__link{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:6px 10px;border-radius:8px;font-size:14px;line-height:1.35;
  color:var(--ink);text-decoration:none}
.cat-facet__link span{font-size:12px;opacity:.5;flex:none}
.cat-facet__link:hover{background:var(--line)}
.cat-facet__link.is-on{background:var(--lime);font-weight:700}
.cat-facet__link.is-on span{opacity:.7}
.cat-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  font-size:14px;opacity:.7}
.cat-toolbar__sort{font-size:13px}
.cat-card__meta{font-size:13px;opacity:.6;margin:0 0 14px}
.cat-empty{opacity:.6}
.cat-layout .cat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cat-pager{display:flex;flex-wrap:wrap;gap:8px}
.cat-pager a,.cat-pager__cur{padding:6px 11px;border-radius:8px;font-size:14px;text-decoration:none}
.cat-pager a{color:var(--ink);border:1px solid var(--line)}
.cat-pager__cur{background:var(--ink);color:var(--white)}
@media(max-width:1024px){
  .cat-layout{grid-template-columns:1fr;gap:28px}
  .cat-side{flex-direction:row;flex-wrap:wrap;gap:20px 32px}
  .cat-facet{flex:1 1 200px}
  .cat-layout .cat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){.cat-layout .cat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.cat-layout .cat-cards{grid-template-columns:1fr}}

/* Главная картинка товара каталога: коробка одного размера на всех страницах.
   Высоту задаёт не картинка (у партнёрки они и квадратные, и вытянутые), а
   фиксированное 3:2 — иначе каждая страница товара открывается по-своему. */
.cat-hero{margin:0 0 var(--s25);border-radius:16px;overflow:hidden;background:var(--line);
  border:1px solid var(--line);aspect-ratio:3/2;display:flex;align-items:center;
  justify-content:center}
.cat-hero img{display:block;width:100%;height:100%;object-fit:contain}
.cat-layout .cat-more{margin-top:var(--s30)}


/* Страница товара каталога: контент слева, справа содержание + сортировки */
.cat-layout--item{grid-template-columns:232px minmax(0,1fr) 264px;gap:32px}
.cat-toc{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--white)}
.cat-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line);opacity:.65}
.cat-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cat-toc a{font-size:14px;color:var(--ink);text-decoration:none;line-height:1.35}
.cat-toc a:hover{text-decoration:underline}
.cat-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:0;
  font-size:14px;opacity:.7}
.cat-meta li+li{position:relative;padding-left:18px}
.cat-meta li+li:before{content:"·";position:absolute;left:5px}
.cat-specs{width:100%;border-collapse:collapse;margin:0 0 var(--s25);font-size:15px}
.cat-specs th,.cat-specs td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.cat-specs th{width:38%;font-weight:600;opacity:.7}
.cat-steps li,.cat-details li{margin-bottom:8px}
.cat-tags{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s25) 0 0}
.cat-tags span{font-size:13px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  opacity:.75}
@media(max-width:1200px){.cat-layout--item{grid-template-columns:232px minmax(0,1fr)}
  .cat-toc{grid-column:2;position:static}}
@media(max-width:1024px){.cat-layout--item{grid-template-columns:1fr}
  .cat-toc{grid-column:auto}}

/* Кнопка скачивания на товаре: главное действие страницы — видно без прокрутки */
.cat-get{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 var(--s25);
  padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:#faf7f4;text-align:center}
.cat-get__btn{display:block;width:100%;max-width:420px;padding:18px 26px;border-radius:999px;
  background:var(--lime);color:var(--ink);font-size:19px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.16);transition:transform .12s,box-shadow .12s}
.cat-get__btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(0,0,0,.2);color:var(--ink)}
.cat-get__btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.cat-get__note{font-size:13px;opacity:.6}

/* поиск по каталогу — первая группа левой колонки */
.cat-search form{display:flex;gap:6px}
.cat-search input[type=search]{flex:1;min-width:0;padding:9px 11px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)}
.cat-search input[type=search]:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--ink)}
.cat-search button{flex:none;padding:9px 12px;font:inherit;font-size:13px;font-weight:700;
  border:1px solid var(--ink);border-radius:8px;background:var(--lime);color:var(--ink);cursor:pointer}
.cat-search button:hover{background:var(--ink);color:var(--white)}
.cat-search__clear{display:inline-block;margin-top:8px;font-size:12px;opacity:.7}
@media (max-width:760px){.cat-side{flex-direction:column}.cat-facet{flex:none;width:100%}}