/* ==========================================================
   Каталог: шапка категории, фильтры, сортировка, сетка карточек
   ========================================================== */

/* ============================================================
   СТРАНИЦА КАТАЛОГА (категория с товарами).
   Общие токены/хедер/подвал/крошки/FAQ/SEO переиспользуются.
   Верстка рассчитана на серверный рендер: карточки — один экран
   выдачи + пагинация. В демо фильтрацию отрабатывает JS, но
   разметка и data-атрибуты готовы под WP_Query.
   ============================================================ */


/* ---------- Шапка категории (компактная, не hero) ---------- */
.cat-hero{padding:calc(var(--hdr-h) + clamp(30px,5vw,60px)) 0 clamp(30px,4vw,50px);border-bottom:1px solid var(--line)}

.cat-hero h1{font-family:var(--display);font-weight:200;font-size:clamp(30px,4.4vw,58px);letter-spacing:-.02em;line-height:1.05;max-width:20ch;margin:0 0 20px}

.cat-hero h1 em{font-style:normal;color:var(--glow)}

.cat-hero__lead{color:var(--mute);font-size:clamp(15px,1.2vw,17px);max-width:64ch}

.cat-hero__stats{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,36px);margin-top:26px}

.cat-hero__stats div{display:flex;align-items:baseline;gap:8px}

.cat-hero__stats b{font-family:var(--display);font-weight:300;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.02em}

.cat-hero__stats span{color:var(--mute);font:400 11px/1 var(--mono);letter-spacing:.08em}

/* ---------- Раскладка: фильтры + сетка ---------- */
.shop{display:grid;grid-template-columns:264px 1fr;gap:clamp(20px,2.4vw,42px);align-items:start;padding-top:clamp(34px,4vw,54px)}

@media (max-width:920px){.shop{grid-template-columns:1fr;gap:0}}

/* ---------- Панель фильтров ---------- */
.filters{position:sticky;top:calc(var(--hdr-h) + 18px)}

.filters__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}

.filters__head b{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.filters__reset{color:var(--glow);font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .3s}

.filters.has-active .filters__reset{opacity:1;pointer-events:auto}

.fg{border-top:1px solid var(--line);padding:18px 0}

.fg:last-child{border-bottom:1px solid var(--line)}

.fg__t{font-size:13.5px;font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}

.fg__t .mono{color:var(--mute);font-size:10px;letter-spacing:.06em}

.opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;color:rgba(var(--ink-rgb), .82);font-size:14px;transition:color .2s}

.opt:hover{color:var(--foam)}

.opt input{width:16px;height:16px;flex-shrink:0;accent-color:var(--glow);cursor:pointer;margin:0}

.opt input[type=radio]{border-radius:50%}

.opt .cnt{margin-inline-start:auto;color:var(--mute-ink);font:400 11px/1 var(--mono)}

/* Ползунок цены */
.price-range{padding-top:4px}

.price-range__val{display:flex;justify-content:space-between;margin-bottom:14px;font:500 12px/1 var(--mono);color:var(--glow);letter-spacing:.04em}

.price-range__track{position:relative;height:2px;background:var(--line);border-radius:2px}

.price-range__fill{position:absolute;height:100%;background:var(--glow);border-radius:2px}

.price-range input[type=range]{position:absolute;top:-9px;width:100%;height:20px;margin:0;appearance:none;background:transparent;pointer-events:none}

.price-range input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--night);border:1.5px solid var(--glow);cursor:pointer;pointer-events:auto}

.price-range input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--night);border:1.5px solid var(--glow);cursor:pointer;pointer-events:auto}

.price-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(var(--accent-rgb), .3)}

/* Мобильная кнопка фильтров + шторка */
.filters-bar{display:none;gap:10px;position:sticky;top:calc(var(--hdr-h));z-index:40;background:var(--night);padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:20px}

.filters-bar button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:2px;font-size:13.5px;transition:border-color .3s}

.filters-bar button:hover{border-color:var(--glow)}

.filters-bar .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--glow);color:var(--on-accent);font:500 10px/18px var(--mono);text-align:center}

@media (max-width:920px){
  .filters-bar{display:flex}
  .filters{
    position:fixed;inset:0;z-index:70;background:var(--night);
    padding:calc(var(--hdr-h) + 20px) var(--pad) 100px;overflow-y:auto;
    transform:translateX(-100%);transition:transform .4s var(--ease);visibility:hidden;
  }
  .filters.is-open{transform:none;visibility:visible}
  .filters__close{position:absolute;top:calc(var(--hdr-h) + 20px);right:var(--pad);width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
  .filters__apply{position:fixed;left:var(--pad);right:var(--pad);bottom:16px;justify-content:center}
}

@media (min-width:921px){.filters__close,.filters__apply{display:none}}

/* ---------- Тулбар: найдено + сортировка ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}

.toolbar__cnt{color:var(--mute);font-size:14px}

.toolbar__cnt b{color:var(--foam);font-weight:600}

.sort{display:flex;align-items:center;gap:10px}

.sort label{color:var(--mute);font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}

.sort select{
  background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 32px 9px 12px;
  color:var(--foam);font:400 13.5px/1 var(--body);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%239BA1A9' stroke-width='1.3'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

.sort select:focus{outline:none;border-color:var(--glow)}

.sort option{background:var(--night-2)}

/* Активные фильтры-чипсы */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}

.chips:empty{display:none}

.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:2px;font-size:12.5px;color:var(--mute)}

.chip button{color:var(--mute);display:grid;place-items:center;transition:color .2s}

.chip button:hover{color:var(--glow)}

/* Пустая выдача */
.empty{display:none;text-align:center;padding:60px 20px;color:var(--mute)}

.empty svg{color:var(--mute-ink);margin-bottom:18px}

.empty b{display:block;font-family:var(--display);font-weight:300;font-size:22px;color:var(--foam);margin-bottom:10px}

/* ---------- Пагинация ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:clamp(38px,4vw,56px)}

.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:2px;font:400 14px/1 var(--body);color:rgba(var(--ink-rgb), .8);transition:.25s var(--ease)}

.pager a:hover{border-color:var(--glow);color:var(--glow)}

.pager [aria-current]{background:var(--foam);color:var(--night);border-color:var(--foam);font-weight:600}

.pager .gap{border:0;color:var(--mute)}

.pager .nav-a{gap:8px}

.pager .nav-a[aria-disabled]{opacity:.35;pointer-events:none}

/* ---------- Подкатегории-ссылки (для SEO и навигации) ---------- */
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

.subcats a{padding:9px 15px;border:1px solid var(--line);border-radius:2px;font-size:13.5px;color:rgba(var(--ink-rgb), .8);transition:.25s var(--ease)}

.subcats a:hover{border-color:var(--glow);color:var(--glow)}

.subcats a.on{background:var(--foam);color:var(--night);border-color:var(--foam);font-weight:500}