/* catalog.css — каталог: раздел, подраздел, «Кому», «Повод», акции, поиск — one template (sketch 2.B1–B6).
   Panel 300 + gap 30 + grid 960 at 1440 (S01 PRIEMY §Совмещение), every size × --px. */
.cat__head { padding-top: calc(26 * var(--px)); padding-bottom: calc(34 * var(--px)); }
.cat__h1 { font: 300 calc(44 * var(--px))/1.08 var(--f-mono); text-transform: uppercase; max-width: 26ch; }
.cat__lead { margin-top: calc(14 * var(--px)); font-size: calc(17 * var(--px)); color: var(--ink-2); }
.cat__body { display: grid; grid-template-columns: calc(300 * var(--px)) 1fr; gap: var(--gap); align-items: start; }

/* ---------- panel (R16 composition, S01 language: [01] marks, chips, colour circles) ---------- */
/* no scroll inside the panel (r1: the full-page shot showed it cut at «Кому»): the panel scrolls with the page and sticks —
   at the top while it fits the window, by its bottom edge when it is taller (--ph = its height, set by js/catalog.js) */
.panel { position: sticky; top: min(calc(var(--hdr) + 16px), calc(100svh - var(--ph, 0px) - 16px)); border-radius: var(--r); }
.panel__in { display: grid; gap: calc(10 * var(--px)); }
.pg { border: 1px solid var(--line); border-radius: var(--r); padding: calc(18 * var(--px)) calc(18 * var(--px)) calc(20 * var(--px)); background: var(--white); }
.pg__h { display: flex; align-items: center; gap: 8px; font: 400 calc(14 * var(--px))/1 var(--f-mono); text-transform: uppercase; margin-bottom: calc(14 * var(--px)); letter-spacing: .02em; }
.pg--acc summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.pg--acc summary::-webkit-details-marker { display: none; }
.pg--acc .chev { margin-left: auto; width: 10px; height: 10px; transition: transform .25s var(--ease); }
.pg--acc[open] summary { margin-bottom: calc(14 * var(--px)); }
.pg--acc[open] .chev { transform: rotate(180deg); }
.pg__list { display: grid; gap: 2px; }
.pg__list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(8 * var(--px)) calc(12 * var(--px)); border-radius: 999px;
  font-size: calc(14.5 * var(--px)); line-height: 1.25;  }
.pg__list a small { font: 400 calc(12 * var(--px))/1 var(--f-mono); color: var(--ink-2); }
.pg__list a:hover { color: var(--violet); }
.pg__list a.on { background: var(--lilac); color: var(--ink); font-weight: 600; }
.pg__subs { margin: 2px 0 6px calc(12 * var(--px)); padding-left: calc(10 * var(--px)); border-left: 1px solid var(--line); display: grid; gap: 1px; }
.pg__subs a { font-size: calc(13.5 * var(--px)); padding: calc(6 * var(--px)) calc(10 * var(--px)); }
.pg .chips { gap: 6px; }
.pg .chip { height: calc(32 * var(--px)); padding: 0 calc(12 * var(--px)); font-size: calc(13 * var(--px)); }
.pg [data-extra] { display: none; }
.pg.all [data-extra] { display: inline-flex; }
.pg__more { margin-top: 10px; font-size: calc(13 * var(--px)); color: var(--violet); border-bottom: 1px dashed rgba(93, 33, 145, .45); }
.pg.all .pg__more { display: none; }
.range { display: grid; grid-template-columns: 1fr 10px 1fr; align-items: center; gap: 6px; margin-top: calc(14 * var(--px)); }
.range i { height: 1px; background: var(--ink-2); }
.range .inp { height: calc(40 * var(--px)); border-radius: 999px; background: var(--pill); border-color: transparent; text-align: center; font-size: calc(14 * var(--px)); padding: 0 8px;
  -moz-appearance: textfield; }
.range .inp::-webkit-outer-spin-button, .range .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slider { position: relative; height: 22px; margin-top: 12px; }
.slider::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line); }
.slider__fill { position: absolute; top: 10px; height: 2px; background: var(--violet); }
.slider input { position: absolute; left: 0; width: 100%; top: 0; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 2px solid var(--violet); cursor: grab; }
.slider input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--violet); cursor: grab; }
.sw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
.sw button { display: flex; align-items: center; gap: 8px; font-size: calc(13 * var(--px)); padding: 3px 0; text-align: left; color: var(--ink); }
.sw i { flex: none; width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 30, 51, .14);  }
.sw button[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--violet); }
.sw button[aria-pressed="true"] { font-weight: 700; }
.pg__checks { display: grid; gap: 10px; }
.pmini { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: calc(20 * var(--px)); border-radius: var(--r); background: var(--lilac);
  min-height: calc(170 * var(--px)); }
.pmini b { position: relative; z-index: 1; font: 300 calc(22 * var(--px))/1.1 var(--f-mono); text-transform: uppercase; }
.pmini .sil { right: -16%; bottom: -26%; width: 46%; height: 84%; transform: rotate(-10deg); }   /* r1: 62% touched the heading and the link */
.pmini__go { position: relative; z-index: 1; margin-top: auto; font-size: calc(13 * var(--px)); color: var(--violet); font-weight: 600; }

/* ---------- top bar, chips of sub-sections and the picked filters ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-bottom: calc(14 * var(--px)); border-bottom: 1px solid var(--line); }
.bar__n { font: 400 calc(14 * var(--px))/1 var(--f-mono); text-transform: uppercase; color: var(--ink-2); }
.sort { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: calc(14 * var(--px)); color: var(--ink-2); }
.sort select { appearance: none; border: 0; background: none; font: 600 calc(14 * var(--px)) var(--f-text); color: var(--ink); padding-right: 18px; cursor: pointer; }
.sort .chev { position: absolute; right: 0; width: 10px; height: 10px; pointer-events: none; }
.subs { padding-top: calc(16 * var(--px)); }
.picked { display: flex; flex-wrap: wrap; gap: 8px; padding-top: calc(14 * var(--px)); }
.picked button { display: inline-flex; align-items: center; gap: 6px; height: calc(32 * var(--px)); padding: 0 calc(12 * var(--px)); border-radius: 999px; background: var(--pill);
  font-size: calc(13 * var(--px)); }
.picked button::after { content: "×"; font-size: 1.2em; line-height: 1; color: var(--ink-2); }
.picked .picked__all { background: none; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.picked .picked__all::after { content: none; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--px)) var(--gap); padding-top: calc(26 * var(--px)); }
.grid .card { opacity: 1; }
.empty { padding: calc(60 * var(--px)) 0; display: grid; gap: 14px; justify-items: start; }
.pager { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--px)); padding-top: calc(50 * var(--px)); }
.pager__more { min-width: calc(260 * var(--px)); }
.pager__nums { display: flex; gap: 8px; align-items: center; }
.pager__nums a, .pager__nums span { min-width: calc(40 * var(--px)); height: calc(40 * var(--px)); padding: 0 6px; display: grid; place-items: center; border-radius: 50%;
  font: 400 calc(14 * var(--px))/1 var(--f-mono); border: 1px solid var(--line);  }
.pager__nums a:hover { border-color: var(--violet); }
.pager__nums .on { background: var(--violet); border-color: var(--violet); color: #fff; }
.pager__nums .gap { border: 0; }
.custom { min-height: calc(330 * var(--px)); padding: calc(52 * var(--px)) calc(56 * var(--px)); }
.custom h2 { max-width: 16ch; position: relative; z-index: 1; }
.custom p { max-width: 50%; font-size: calc(16 * var(--px)); }
.custom .sil { right: 4%; top: -12%; width: 30%; height: 130%; }
.custom .custom__sil2 { right: 30%; top: auto; bottom: -30%; width: 14%; height: 80%; transform: rotate(-8deg); }
.seo { max-width: calc(900 * var(--px)); }
.seo__txt { margin-top: 14px; font-size: calc(14 * var(--px)); color: var(--ink-2); display: grid; gap: 8px; max-height: calc(118 * var(--px)); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.seo.all .seo__txt { max-height: none; -webkit-mask-image: none; mask-image: none; }
.seo.all .pg__more { display: none; }