/* ============================================================
   Я зову — страница категории
   ------------------------------------------------------------
   Главный принцип: ОДИН ИНТЕНТ — ОДИН URL.
   Эта страница одновременно и посадочная с текстом, и витрина
   с товарами, фильтрами и пагинацией. У конкурента это две разные
   страницы: лендинг с текстом, но без каталога, и категория
   с каталогом, но без title, H1 и единого слова текста.
   ============================================================ */

/* ---------- хлебные крошки ---------- */
/* .crumbs переехали в base.css: крошки есть и на страницах,
   которые category.css не подключают, — там они выводились
   обычным нумерованным списком. */

/* ---------- шапка категории ---------- */
.cat-top{padding:1.4rem 0 2.2rem;border-bottom:1px solid var(--rule)}
.cat-top h1{font-size:clamp(1.85rem,4.2vw,2.7rem);line-height:1.1;margin:0 0 .7rem}
.cat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:2.5rem;align-items:start}
.cat-intro{font-size:1rem;color:var(--ink-2);max-width:38rem;margin:0}
.cat-intro + .cat-intro{margin-top:.7rem}
.cat-more{margin-top:.6rem}
.cat-more summary{cursor:pointer;font-size:.9rem;color:var(--brand);list-style:none}
.cat-more summary::-webkit-details-marker{display:none}
.cat-more[open] summary{display:none}
.cat-facts{background:var(--paper-2);border:1px solid var(--rule);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.88rem}
/* Первая колонка — не 5.6rem, а «не меньше 5.6rem».

   Жёсткая ширина рассчитана на «47» и «149 ₽». Стоит поставить
   туда «Бесплатно» или «PDF+PNG» — и значение наезжает на
   подпись. Границы у него нет, поэтому выглядит это не как
   переполнение, а как каша из двух текстов.

   minmax оставляет колонки выровненными на коротких значениях
   и раздвигает их на длинных. */
.cat-facts div{display:grid;grid-template-columns:minmax(5.6rem,auto) 1fr;gap:.8rem;align-items:baseline}
.cat-facts b{font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1.2}
.cat-facts span{color:var(--ink-2)}

/* ---------- фасеты ---------- */
.facets{padding:1.4rem 0;border-bottom:1px solid var(--rule)}
.facet{display:flex;gap:.7rem;align-items:baseline;padding:.4rem 0;flex-wrap:wrap}
.facet > h2{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;min-width:5rem;margin:0;
}
.facet-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:.8rem;margin-top:.6rem;border-top:1px solid var(--rule)}
.found{font-size:.9rem;color:var(--ink-2)}
.found b{color:var(--ink);font-weight:600}
.sorter{display:flex;gap:.5rem;align-items:center;font-size:.88rem;color:var(--ink-3)}
.sorter .sel-btn{font-size:.88rem;padding:.34rem .5rem}
.lbl-inline{white-space:nowrap}

/* ---------- сетка товаров ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.6rem 1.2rem;padding:2rem 0 0}

/* ЧИСЛО КОЛОНОК ЗАДАНО, А НЕ СЛОЖИЛОСЬ

   auto-fill набивает столько колонок, сколько помещается по 11rem,
   и зависит это не от экрана, а от ширины колонки выдачи — то есть
   от того, показана ли сегодня панель фильтров. Замерено на этом
   каталоге:

     1440 и 1280 — 4 карточки (тут auto-fill угадывал)
      1024 — 3
       768 — ЧЕТЫРЕ по 178 точек: панель фильтров ушла в выдвижную,
             колонка стала во всю ширину, и на планшет приехала
             сетка плотнее, чем на ноутбук
       390 — 2
       360 — ОДНА во всю ширину: до двух не хватило одиннадцати
             точек, и каталог превратился в ленту

   Оба края — те самые «слишком мелкие» и «слишком крупные», от
   которых ТЗ и предостерегает. Поэтому число колонок теперь
   названо явно на каждой ширине.

   Правило живёт под .cat-layout, потому что та же сетка .prods
   стоит на поиске и на 404, где колонка одна на всю ширину и
   auto-fill там верен. */
.cat-layout .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){ .cat-layout .prods{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1080px){ .cat-layout .prods{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:359px){ .cat-layout .prods{grid-template-columns:minmax(0,1fr)} }

/* ЧЕЛОВЕК ВЫБРАЛ ЧИСЛО КОЛОНОК САМ

   Решение владельца: по умолчанию три, с переключением на два и
   четыре. Выбор приезжает атрибутом data-ryad (Yzt_Catalog::ryad),
   и правила ниже стоят ПОСЛЕ правил по ширине, потому что отменяют
   именно их.

   На какой ширине выбор действует

     ≥1080 — ровно то, что выбрано: два, три или четыре;
     600…1079 — четыре не даём. Здесь рядом стоит панель фильтров,
       колонка выдачи около 700 точек, и четвёртая карточка выходит
       по 150 — меньше той, с которой каталог и начинали чинить.
       Выбор при этом не теряется: он в адресе и оживёт на широком
       экране;
     <600 — две, как было: выбирать нечего, и переключатель здесь
       спрятан (см. .cat-ryad).

   Умолчание — три, и оно записано здесь обычным правилом для
   ≥1080: в адресе ?ryad=3 не пишется (это был бы второй адрес
   той же страницы), значит data-ryad="3" — самый частый случай,
   а не исключение. */
@media (min-width:600px) and (max-width:1079px){
  .cat-layout[data-ryad="2"] .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1080px){
  .cat-layout[data-ryad="2"] .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-layout[data-ryad="3"] .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-layout[data-ryad="4"] .prods{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Коробка карточки. Сама она ничего не нажимает: внутри ссылка
   на весь товар и кнопка избранного рядом с ней — см.
   Yzt_Parts::tile. Класс остался прежним, потому что по нему
   сетку находят лента, фильтры и проверки. */
.prod{display:flex;flex-direction:column;position:relative}
.prod[hidden]{display:none}
.prod-go{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit}

/* ---------- сердечко «в избранное» (§13, §30 ТЗ каталога) ----------

   Лежит в углу превью, поверх ссылки. Мягкая подложка не
   украшение: у дизайнов фон бывает и белым, и почти чёрным, и
   контур без подложки пропадает на половине карточек.

   Печатается скрытым и показывается скриптом: избранное живёт в
   памяти браузера, и без скрипта его нет вовсе. */
.prod .fav{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  display:grid;place-items:center;width:38px;height:38px;
  border:0;border-radius:50%;cursor:pointer;padding:0;
  background:color-mix(in oklab, var(--card) 72%, transparent);
  backdrop-filter:blur(3px);
  color:var(--ink-2);
  transition:color .12s, background .12s, transform .12s;
}
.prod .fav[hidden]{display:none}
.prod .fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.prod .fav:hover{color:var(--brand);background:var(--card)}
.prod .fav:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.prod .fav:active{transform:scale(.92)}
/* Нажатое — залитое сердце и цвет бренда. Не только цвет: ТЗ
   прямо просит не полагаться на цвет в состоянии «включено», и
   заливка видна тем, кто цвет не различает. */
.prod .fav[aria-pressed="true"]{color:var(--brand)}
.prod .fav[aria-pressed="true"] svg{fill:currentColor}

/* Избранное рядом с покупкой: не кружок, как на плитке, а
   строка со словами. На плитке сердечко одно на шестьдесят
   шесть карточек и подписывать каждое некуда; здесь оно одно на
   странице, и слово рядом объясняет, что будет по нажатию. */
.fav--wide{
  display:inline-flex;align-items:center;gap:.45rem;
  margin:.15rem auto 0;padding:.5rem .8rem;min-height:44px;
  border:0;border-radius:999px;background:none;color:var(--ink-2);
  font:inherit;font-size:.9rem;cursor:pointer;
}
.fav--wide[hidden]{display:none}
.fav--wide svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.fav--wide:hover{color:var(--brand);background:color-mix(in oklab, var(--brand) 8%, transparent)}
.fav--wide:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fav--wide[aria-pressed="true"]{color:var(--brand)}
.fav--wide[aria-pressed="true"] svg{fill:currentColor}

/* Широкое сердечко живёт ЗДЕСЬ, а не в стилях страницы товара.
   Оно нужно в двух местах: у кнопки покупки и в окне быстрого
   просмотра, а окно открывается из каталога. Стили страницы
   товара туда не приезжают, и в окне сердце было чёрным
   квадратом. category.css грузится на всех страницах. */


/* Чип избранного над выдачей. Он же ссылка в обычном режиме и
   он же метка режима — поэтому цвет бренда: остальные чипы
   сняты фильтром, а этот говорит «вы смотрите свой список». */
.f-chip--izb{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand)}
.f-chip--izb svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.6}
a.f-chip--izb{text-decoration:none}
a.f-chip--izb:hover{background:color-mix(in oklab, var(--brand) 10%, transparent)}
/* ---------- «Посмотреть»: кнопка на наведении (§31 ТЗ) ----------

   Только там, где наведение бывает. Пальцем по карточке
   попадают в саму карточку, и это правильный ответ: страница
   дизайна и есть подробный просмотр.

   opacity, а не display: кнопка обязана оставаться в порядке
   обхода клавиатурой — по табуляции до неё доходят и без мыши,
   и тогда её показывает focus-visible. */
.prod .peek{
  position:absolute;left:50%;top:0;
  /* КАК КНОПКА НАХОДИТ НИЖНИЙ КРАЙ ПРЕВЬЮ БЕЗ ЕДИНОГО ЧИСЛА
     ОТ КОЛОНКИ

     Превью — лист А5: aspect-ratio 148/210, то есть его высота
     всегда 1.419 ширины карточки. Проценты у top считаются от
     ВЫСОТЫ родителя (а она тут зависит от длины названия), у
     margin-top — от ШИРИНЫ. Поэтому отступ и задан полями:
     1.419 ширины карточки минус три с небольшим сантиметра на
     саму кнопку. Одно число вместо ресайз-наблюдателя. */
  margin-top:calc(1.419 * 100% - 3.4rem);
  transform:translateX(-50%);
  z-index:2;padding:.5rem 1rem;min-height:40px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--card);color:var(--ink);
  font:inherit;font-size:.85rem;font-weight:500;
  box-shadow:0 6px 20px -8px rgba(24,20,40,.45);
  opacity:0;transition:opacity .12s;
}
.prod .peek[hidden]{display:none}
/* Только там, где наведение бывает: пальцем по карточке
   попадают в саму карточку, и страница дизайна — это и есть его
   подробный просмотр. */
@media (hover: none){ .prod .peek{display:none} }
.prod:hover .peek,.prod:focus-within .peek{opacity:1}
.prod .peek:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px}

/* Ряд избранного — НЕ «выбранные фильтры», хотя выглядит так
   же. Свой контейнер у него потому, что чипы фильтров считают и
   проверки, и панель: избранное среди них означало бы «выбран
   ещё один фильтр», а это не фильтр. */
.izb-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .6rem}
.izb-row[hidden]{display:none}
.prod .yz-inv{border:1px solid var(--rule);box-shadow:var(--shadow-s)}
.prod:hover .yz-inv{box-shadow:var(--shadow-m)}
.prod .name{font-size:.93rem;line-height:1.3}
.prod .meta{font-size:.84rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:baseline}
.prod .meta b{color:var(--ink);font-weight:600;font-size:.95rem}
.prod .tagline{font-size:.78rem;color:var(--ink-3)}
.prod .flag{
  position:absolute;top:.5rem;left:.5rem;z-index:2;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;background:var(--paper);color:var(--brand);
  border:1px solid var(--brand);padding:.12rem .38rem;font-weight:500;
}
.empty{padding:2.5rem 0;color:var(--ink-2);font-size:.95rem}
/* Первая строка пустой выдачи — крупнее остальных: это ответ на
   вопрос «что случилось», и он должен читаться раньше совета. */
.empty-t{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin:0 0 .5rem}
.empty .btn{margin-right:.5rem}
/* Заголовок над плитками «вот они» — тише заголовков каталога:
   это не раздел, а продолжение ответа. */
.empty-h{font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin:.5rem 0 1rem}

/* ---------- пагинация ---------- */
.pager{display:flex;gap:.4rem;align-items:center;padding:2rem 0 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:2.2rem;height:2.2rem;display:grid;place-items:center;padding:0 .6rem;
  border:1px solid var(--rule-2);background:var(--card);text-decoration:none;font-size:.9rem;color:var(--ink-2);
}
.pager .cur{background:var(--brand);border-color:var(--brand);color:var(--paper);font-weight:600}
.pager .gap{border:0;background:transparent}

/* ---------- врезка про живую страницу ---------- */
.upsell{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem;align-items:center;
  background:var(--brand-soft);border:1px solid var(--rule);padding:1.4rem 1.5rem;margin:2.4rem 0 0;
}
.upsell h2{font-size:1.35rem;margin:0 0 .35rem}
.upsell p{margin:0;font-size:.93rem;color:var(--ink-2);max-width:40rem}

/* ---------- готовые тексты приглашения ---------- */
.texts{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.tx{
  background:var(--card);border:1px solid var(--rule);padding:1.05rem 1.15rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* Значок отмечает не повод — он уже в заголовке блока, — а тон
   и канал: голос ребёнка, сообщение в чат, родительская группа.
   Именно по этому признаку текст и выбирают из пятнадцати. */
.tx-ic{
  width:2.1rem;height:2.1rem;padding:.45rem;box-sizing:border-box;margin:0 0 -.1rem;
  background:var(--brand-soft);border-radius:7px;
  fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:background .2s ease,stroke .2s ease;
}
.tx h3{margin:0;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;transition:color .2s ease}
.tx p{margin:0;font-size:.92rem;white-space:pre-line}
.tx .copy{
  align-self:flex-start;margin-top:auto;background:transparent;
  border:1px solid var(--rule-2);border-radius:2px;padding:.34rem .7rem;
  font-size:.83rem;color:var(--ink-2);cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
  /* Две подписи в одной ячейке: «Скопировать» и «Скопировано»
     лежат друг на друге, ширину задаёт длинная. Без этого кнопка
     после нажатия становилась шире, дёргая всю карточку —
     ровно в тот момент, когда мы сообщаем «получилось». */
  display:grid;place-items:center;min-height:44px;
}
.tx .copy > .c-t{grid-area:1/1}
/* Второй спан — только мерка ширины. Он не виден, не читается
   скринридером и не занимает отдельного места. */
.tx .copy > .c-alt{visibility:hidden;pointer-events:none}
/* Кнопка «Скопировать» подсвечивается вместе с карточкой: целиться
   в неё отдельно не нужно, а на карточке с текстом это единственное
   действие — пусть будет видно сразу, как только навёл. */
.tx:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--rule-2)}
.tx:hover .tx-ic{background:var(--brand);stroke:var(--paper)}
.tx:hover h3{color:var(--brand)}
.tx:hover .copy{border-color:var(--brand);color:var(--brand)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tx:hover .tx-ic{stroke:#141112}}
:root[data-theme="dark"] .tx:hover .tx-ic{stroke:#141112}
.tx .copy:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.tx .copy[data-done="1"]{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
/* Отказ отличается от успеха не только словом: восемь процентов
   мужчин не отличат малиновую рамку от кирпичной, но «Не вышло»
   прочтут все — а выделенный текст рядом виден вообще без слов. */
.tx .copy[data-fail="1"]{border-color:var(--brick);color:var(--brick);background:color-mix(in srgb, var(--brick) 7%, transparent)}

/* ---------- как печатать ---------- */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem}
.howto div h3{margin:0 0 .3rem;font-size:1rem;font-weight:600}
.howto div p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* ---------- перелинковка ---------- */
.related{display:grid;gap:1.4rem}
.related h3{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem;font-weight:500}

@media (max-width:720px){
  .cat-grid,.upsell{grid-template-columns:1fr}
  .facet > h2{min-width:100%}
}

/* ============================================================
   БЫСТРЫЙ ПРОСМОТР (§32 ТЗ каталога)
   ------------------------------------------------------------
   Окно — настоящий <dialog>: подложка, Escape, возврат фокуса и
   запрет выхода табуляцией наружу достаются от браузера. Своими
   руками это повторяют неправильно.
   ============================================================ */
.peek-d{
  border:0;padding:0;background:none;max-width:min(54rem,94vw);width:100%;
  max-height:92vh;color:var(--ink);
}
.peek-d::backdrop{background:rgba(24,20,40,.55);backdrop-filter:blur(2px)}
.peek-box{
  position:relative;display:grid;gap:1.6rem;
  /* Превью по содержимому, подписи занимают остальное: у листа
     А5 своя пропорция, и растягивать его долей колонки значит
     оставить вокруг него пустоту или обрезать по высоте. */
  grid-template-columns:auto minmax(14rem,1fr);
  align-items:center;
  padding:1.6rem;border-radius:18px;background:var(--card);
  box-shadow:0 30px 80px -30px rgba(24,20,40,.6);
  max-height:92vh;overflow:auto;
}
.peek-x{
  position:absolute;top:.5rem;right:.6rem;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;
  background:none;color:var(--ink-2);font-size:1.5rem;line-height:1;cursor:pointer;
}
.peek-x:hover{background:var(--rule);color:var(--ink)}
.peek-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Превью крупнее само: у карточки container-type:inline-size и
   все кегли в cqw, то есть размер шрифта считается от ширины.
   Шире коробка — крупнее набор, без единого числа здесь. */
/* Ширину считаем от ВЫСОТЫ экрана: лист А5 выше своей ширины в
   1.419 раза, и на ноутбуке 1440×800 карточка шириной в
   половину окна не поместилась бы по высоте — окно поехало бы
   прокруткой. 60vh высоты — это 42vh ширины. */
.peek-pv{width:min(26rem, 42vh)}
.peek-pv .yz-inv{border:1px solid var(--rule);box-shadow:var(--shadow-m)}

.peek-info{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.peek-cat{font-size:.84rem;color:var(--ink-3)}
.peek-h{margin:0;font-size:1.5rem;line-height:1.2}
.peek-price{margin:0;font-size:1.05rem}
.peek-price b{font-weight:600}
.peek-go{margin-top:.4rem;align-self:stretch;text-align:center}
.peek-fav .fav--wide{margin-left:-.8rem}
.peek-nav{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.peek-arr{
  padding:.5rem .8rem;min-height:40px;border:1px solid var(--rule-2);
  border-radius:999px;background:var(--card);color:var(--ink-2);
  font:inherit;font-size:.86rem;cursor:pointer;
}
.peek-arr:hover:not([disabled]){border-color:var(--brand);color:var(--brand)}
.peek-arr[disabled]{opacity:.4;cursor:default}
.peek-arr:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.peek-n{margin:0;font-size:.8rem;color:var(--ink-3)}

/* На узком экране превью сверху, подписи под ним: две колонки в
   390 точек дали бы карточку в полторы сотни — мельче, чем в
   каталоге, ради которого окно и открыли. */
@media (max-width:719px){
  .peek-box{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.1rem}
  .peek-pv{max-width:15rem;margin:0 auto}
}