/* Каталог: /shop/, разделы /product-category/…/, поиск по товарам (woocommerce/archive-product.php, inc/catalog.php).
   Сетка и карточки — .pgrid / .pcard главной (home.css, site.css), первый экран — .phero (site.css).
   Здесь: первый экран каталога, лента разделов на кремовом фоне, панель «поиск / цена / сортировка»
   (на телефоне сворачивается), выбранные фильтры, номера страниц, пустой результат. Сначала телефон. */

/* Первый экран: компактнее, ниже на том же кремовом фоне — лента разделов */
.phero--catalog{padding-bottom:22px}
/* свечение — выше и меньше, чтобы угасало внутри первого экрана, а не обрывалось над лентой разделов */
@media (min-width:768px){.phero--catalog::before{top:-330px;width:620px;height:620px}}
.phero--catalog .h{overflow-wrap:break-word}
.phero--catalog .lead{max-width:740px;text-wrap:pretty}
.phero--catalog .phero-meta{gap:6px 20px;font-size:13.5px;font-weight:400;color:var(--ink)}
.phero--catalog .phero-meta > span::before{content:"✦";color:var(--gold);font-size:11px}
@media (min-width:768px){.phero--catalog{padding-bottom:30px}.phero--catalog .phero-meta{font-size:14px}}

/* Лента разделов */
.cat-nav{position:relative;background:var(--cream);padding:4px 0 30px}
.cat-nav .chipnav a{background:rgba(255,255,255,.5)}
.cat-nav .chipnav a:hover{background:#fff}
.cat-nav .chipnav a.is-current{background:var(--ink)}
@media (min-width:768px){.cat-nav{padding-bottom:44px}}
/* на компьютере лента плотнее — 13 разделов в два ряда, сетка товаров ближе к первому экрану */
@media (min-width:1100px){
  .cat-nav{padding-bottom:48px}
  .cat-nav .chipnav{gap:6px}
  .cat-nav .chipnav a{min-height:38px;padding:0 12px;font-size:11.5px;letter-spacing:.08em}
}

/* Список моделей: панель, сетка, страницы */
.cat-list{padding-top:34px}
@media (min-width:768px){.cat-list{padding-top:40px}}
@media (min-width:1100px){.cat-list{padding-top:44px}}

.cat-tools{display:grid;gap:12px;margin-bottom:26px}

/* «Фильтры и сортировка» — кнопка-раскрывашка на телефоне и планшете */
.cat-toggle > summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px 0 18px;border:1px solid var(--ink);background:#fff;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .25s,color .25s}
.cat-toggle > summary::-webkit-details-marker{display:none}
.cat-toggle > summary:hover{background:var(--cream)}
.cat-toggle[open] > summary{background:var(--ink);color:#fff}
.cat-toggle > summary .ico{width:18px;height:18px}
.cat-toggle .count{margin-left:0}
.cat-toggle .cat-chev{margin-left:auto;transition:transform .25s}
.cat-toggle[open] .cat-chev{transform:rotate(180deg)}

/* Панель фильтров: на телефоне — под кнопкой, когда она раскрыта; с 1024 px — всегда в одну строку */
.cat-panel{display:none;position:relative;gap:16px;padding:22px 18px 22px;background:var(--cream);border:1px solid var(--line)}
.cat-panel::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-gold);pointer-events:none}
.cat-panel > *{position:relative}
.cat-toggle[open] ~ .cat-panel{display:grid}
.cat-f{min-width:0}
.cat-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
.cat-f .sform{border-color:var(--line)}
.cat-f .sform:hover{border-color:var(--gold)}
.cat-f .sform:focus-within{border-color:var(--gold-text)}
.cat-price{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center}
.cat-price input{-moz-appearance:textfield;appearance:textfield}
.cat-price input::-webkit-outer-spin-button,.cat-price input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cat-dash{height:1px;background:var(--gold);margin:0 5px}
.cat-f--go .btn{width:100%;min-height:50px}
@media (min-width:600px) and (max-width:1023px){
  .cat-toggle[open] ~ .cat-panel{grid-template-columns:1fr 1fr}
  .cat-f--search{grid-column:1/-1}
  .cat-f--go{grid-column:1/-1}
}
@media (min-width:1024px){
  .cat-tools{gap:14px;margin-bottom:30px}
  .cat-toggle{display:none}
  .cat-panel,.cat-toggle[open] ~ .cat-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,.9fr) auto;align-items:end;gap:16px 20px;padding:20px 26px 22px}
  .cat-panel::before{inset:8px}
  .cat-f--go .btn{width:auto;padding:0 30px}
}

/* «Показано 1–44 из 801» и выбранные фильтры */
.cat-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cat-count{font-size:14px;color:var(--muted);letter-spacing:.02em}
.cat-count b{font-weight:500;color:var(--ink)}
.cat-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cat-active a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px 0 14px;border:1px solid var(--line-gold);background:var(--cream);font-size:13.5px;font-weight:400;line-height:1.25;text-decoration:none;color:var(--ink);transition:border-color .2s,background-color .2s}
.cat-active a:hover{border-color:var(--gold-text);background:#fff}
.cat-active .ico{width:15px;height:15px;color:var(--gold-text)}
.cat-active a.cat-reset{border-color:transparent;background:none;padding:0 4px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.cat-active a.cat-reset:hover{color:var(--gold-text)}

/* Сетка — как «Из каталога» на главной, ряды с воздухом */
.cat-grid{row-gap:28px}
@media (min-width:768px){.cat-grid{row-gap:44px}}
@media (min-width:1100px){.cat-grid{row-gap:52px}}

/* Номера страниц: на телефоне номера, под ними «Назад» / «Дальше»; с 768 px — в одну строку */
.cat-pager{display:grid;justify-content:stretch;justify-items:center;gap:12px;margin-top:40px}
.cat-pager ul{gap:4px}
.cat-pager a,.cat-pager span.page-numbers{min-width:42px;height:46px;padding:0 8px}
.cat-pager-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%}
.cat-pager a.prev,.cat-pager a.next{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 16px}
.cat-pager .ico{width:16px;height:16px;color:var(--gold-text)}
.cat-pager a:hover .ico{color:var(--ink)}
@media (min-width:768px){
  .cat-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:60px}
  .cat-pager ul{gap:6px}
  .cat-pager a,.cat-pager span.page-numbers{min-width:48px;height:48px;padding:0 12px}
  .cat-pager-nav{display:contents}
  .cat-pager a.prev{order:-1;margin-right:10px;height:48px;padding:0 20px}
  .cat-pager a.next{order:1;margin-left:10px;height:48px;padding:0 20px}
}

/* Пустой результат */
.cat-empty{gap:16px}
.cat-empty h3{font-size:28px}
.cat-empty .sform{width:100%;max-width:520px}
.cat-empty-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.cat-empty-actions .btn{padding:0 20px;min-height:50px;white-space:normal;text-align:center}
@media (max-width:599px){.cat-empty{padding:26px 20px}.cat-empty-actions .btn{width:100%}}
@media (min-width:768px){.cat-empty{padding:40px 40px 42px}.cat-empty h3{font-size:32px}}

/* Число моделей под описанием раздела */
.phero .lead .phero-count{margin-top:.6em;font-size:.88em;letter-spacing:.02em;color:var(--muted)}
/* Текст о разделе под моделями (inc/catalog.php, monro_cat_text) — сразу после сетки, без второго большого отступа */
.cat-text{padding-top:0}
.cat-text .prose{max-width:820px}