/* ============================================================
   каталог с фильтрами. Дополняет styles.css.
   ============================================================ */

.cat-top{padding:18px 0 6px;}
.cat-title{display:flex; align-items:baseline; gap:14px; margin:6px 0 4px;}
.cat-title h1{margin:0; font-size:30px; font-weight:850; letter-spacing:-.6px; min-width:0; overflow-wrap:anywhere;}
.cat-title .cnt{font-size:14px; color:var(--muted); font-weight:600;}
.cat-intro-wrap{max-width:720px; margin-bottom:8px;}
.cat-intro{font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--cat-intro-lines); overflow:hidden;}
.cat-intro-wrap.is-open .cat-intro{display:block; -webkit-line-clamp:unset; overflow:visible;}
.cat-intro-toggle{display:inline-block; margin-top:6px; font-size:13.5px; font-weight:650; color:var(--accent); text-decoration:none; cursor:pointer;}
.cat-intro-toggle:hover{text-decoration:underline;}
.cat-intro-toggle .t-less{display:none;}
.cat-intro-wrap.is-open .cat-intro-toggle .t-more{display:none;}
.cat-intro-wrap.is-open .cat-intro-toggle .t-less{display:inline;}

/* Заголовок раздела: картинка слева (квадрат) + текст. Нет картинки — cat-cover[hidden]
   скрыт, ряд просто прижимается к тексту, пустого места не остаётся. */
.cat-head{display:flex; align-items:center; gap:18px;}
.cat-headtext{min-width:0;}
/* обложка раздела (изображение из карточки раздела в админке): любой формат — квадратом, виден центр */
.cat-cover{flex:0 0 auto; width:92px; height:92px; aspect-ratio:1; margin:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2);}
.cat-cover img{display:block; width:100%; height:100%; object-fit:cover;}

/* пилюли категорий */
.cat-pills{display:none !important;}
.cat-pill{font-size:13.5px; font-weight:650; color:var(--ink-2); background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; cursor:pointer; transition:all var(--dur-fast); white-space:nowrap;}
.cat-pill:hover{border-color:var(--faint);}
.cat-pill.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.catalog{display:grid; grid-template-columns:284px minmax(0,1fr); gap:28px; align-items:start; padding:14px 0 30px;}
/* Панель фильтров выключена настройкой магазина — колонки под неё нет (Д-18): пустая полоса
   слева не занимает место, кнопка её открытия на узком экране тоже не нужна. */
.catalog.no-filters{grid-template-columns:minmax(0,1fr);}
.catalog.no-filters .filters{display:none;}
.catalog.no-filters .filter-open{display:none;}

/* ---- Боковая панель фильтров ---- */
/* Колонка фильтров едет со страницей и занимает высоту по содержимому (сетка — align-items:start):
   кнопка «Показать товары» прилипает к низу экрана, пока колонка не кончилась. */
.filters{z-index:10; background:transparent; border:0; border-radius:0; overflow:visible; display:flex; flex-direction:column; gap:12px;}
.filters-head{display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:6px; padding:0 4px; border-bottom:0;}
.filters-head .ft{font-size:18px; font-weight:600; letter-spacing:-.3px;}
.filters-head .reset{background:none; border:0; color:var(--muted); font-size:12.5px; font-weight:600;}
.filters-head .reset:hover{color:var(--accent);}
.fgroup{border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:visible; position:relative;}
.fgroup-head{display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; padding:16px 20px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:default; letter-spacing:.2px;}
.fgroup-body{padding:0 20px 18px; display:flex; flex-direction:column; gap:11px;}

/* список значений блока: без прокрутки, лишние значения скрыты до «Показать все» */
.fcat-scroll{display:flex; flex-direction:column; gap:11px;}


.fopt{display:flex; align-items:center; gap:11px; cursor:pointer; font-size:13.5px; color:var(--ink-2);}
.fopt .cbx{width:19px; height:19px; border:1.6px solid var(--line); border-radius:5px; background:var(--panel); position:relative; flex-shrink:0; appearance:none; cursor:pointer; transition:all var(--dur-fast);}
.fopt .cbx:checked{background:var(--accent); border-color:var(--accent);}
.fopt .cbx:checked::after{content:""; position:absolute; left:5.5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(45deg);}
.fopt:hover{color:var(--ink);}

/* цена */
.price-box{padding:2px 20px 20px;}
.price-inputs{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.price-inputs .pi{flex:1; display:flex; flex-direction:column; gap:5px;}
.price-inputs label{font-size:11px; color:var(--muted); font-weight:600;}
.price-inputs input{height:42px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); padding:0 12px; font-size:14px; font-weight:650; font-family:inherit; outline:0; width:100%;}
.price-inputs input:focus{border-color:var(--accent);}
.price-inputs .dash{color:var(--faint); margin-top:18px;}
.range{position:relative; height:30px;}
.range .track{position:absolute; top:13px; left:0; right:0; height:4px; border-radius:3px; background:var(--bg-2);}
.range .fill{position:absolute; top:13px; height:4px; border-radius:3px; background:var(--accent); left:var(--fill-from,0%); width:var(--fill-w,0%);}
.range input[type=range]{position:absolute; top:0; left:0; width:100%; height:30px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none;}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:20px; height:20px; border-radius:50%; background:var(--panel); border:2px solid var(--accent); box-shadow:var(--shadow-sm); cursor:pointer;}
.range input[type=range]::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%; background:var(--panel); border:2px solid var(--accent); cursor:pointer;}

/* ---- Тулбар ---- */
.cat-toolbar{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.sort-wrap{display:flex; align-items:center; gap:9px;}
.sort-wrap label{font-size:13px; color:var(--muted); font-weight:600;}
.sort-sel{height:44px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); padding:0 14px; font-size:14px; font-weight:600; font-family:inherit; outline:0; cursor:pointer;}
.sort-sel:focus-within{border-color:var(--accent);}
.view-toggle{display:flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; margin-left:auto;}
.view-toggle button{width:40px; height:36px; border:0; background:none; color:var(--faint); border-radius:7px; display:flex; align-items:center; justify-content:center;}
.view-toggle button svg{width:19px; height:19px;}
.view-toggle button.active{background:var(--panel); color:var(--accent); box-shadow:var(--shadow-sm);}
.filter-open{display:none; align-items:center; gap:9px; height:44px; padding:0 16px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); font-size:14px; font-weight:700;}
.filter-open svg{width:18px; height:18px;}
.filter-open .badge-num{background:var(--accent); color:#fff; border-radius:999px; min-width:20px; height:20px; padding:0 6px; font-size:12px; display:none; align-items:center; justify-content:center;}
.filter-open .badge-num.show{display:flex;}

/* активные чипы: выбранные значения над списком товаров */
.active-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px;}
.active-chips:empty{display:none;}
.sort-wrap{margin-left:0;}
.achip{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 8px 7px 13px;}
.achip button{width:18px; height:18px; border-radius:50%; border:0; background:var(--bg-2); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.achip button:hover{background:var(--accent); color:#fff;}
.achip button svg{width:11px; height:11px;}
.achip.clear-all{color:var(--accent); cursor:pointer; border-color:var(--accent); background:var(--accent-soft);}

/* ---- Сетка товаров ---- */
.prod-grid.cat-grid-list{grid-template-columns:repeat(3,minmax(0,1fr));}
.cat-results{min-width:0;}

/* список (list view) */
.prod-grid.is-list{grid-template-columns:minmax(0,1fr); gap:12px;}
.prod-grid.is-list .prod{flex-direction:row; align-items:center; gap:20px; padding:16px 18px;}
/* плашки («Скидка») — на углу фото, как в сетке: в строке они отнимали место, и «В корзину» вылезала за край */
.prod-grid.is-list .prod-photo{width:120px; height:120px; flex-shrink:0; margin:0;}
.prod-grid.is-list .prod-fav{top:14px; right:14px;}
.prod-grid.is-list .prod-mid{flex:1; min-width:0;}
.prod-grid.is-list .prod-name{min-height:0; margin-bottom:8px; font-size:16px;}
.prod-grid.is-list .prod-foot{flex-direction:column; align-items:flex-end; gap:10px; margin:0; min-width:160px;}
/* цена не заходит под кнопку «в избранное» (она в правом верхнем углу карточки) */
.prod-grid.is-list .prod-price{padding-right:calc(var(--sp-5) + var(--sp-1));}
.prod-grid.is-list .prod-buy{width:auto; padding:0 20px; height:46px; gap:9px;}
.prod-grid.is-list .prod-buy::after{content:attr(aria-label); font-size:14px; font-weight:700;}
.prod-mid{display:contents;}
.prod-grid:not(.is-list) .prod-mid{display:contents;}

/* нет результатов */
.no-res{display:none; flex-direction:column; align-items:center; text-align:center; padding:54px 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--panel);}
.no-res.show{display:flex;}
.no-res .btn[hidden]{display:none;}
.no-res .nr-ic{width:74px; height:74px; border-radius:20px; background:var(--bg-2); color:var(--faint); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.no-res .nr-ic svg{width:36px; height:36px;}
.no-res h3{margin:0 0 8px; font-size:19px;}
.no-res p{margin:0 0 18px; font-size:14px; color:var(--muted); max-width:340px; line-height:1.5;}

/* пагинация */
.pager{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:30px;}
.pager button{min-width:42px; height:42px; padding:0 12px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink); font-size:14px; font-weight:700;}
.pager button:hover{border-color:var(--accent); color:var(--accent);}
.pager button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.pager .pg-gap{padding:0 6px; color:var(--faint); align-self:center;}
.pager button.nav svg{width:17px; height:17px;}

/* мобильная панель фильтров */
.filters-scrim{position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:opacity var(--dur-base);}
.filters-scrim.open{opacity:1; pointer-events:auto;}
body.filters-lock{overflow:hidden;}

@media (max-width:1023px){
  .prod-grid.cat-grid-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .catalog{grid-template-columns:1fr;}
  /* вид «списком»: одна колонка, карточка в столбик — строкой на этой ширине не помещается */
  .prod-grid.cat-grid-list.is-list{grid-template-columns:minmax(0,1fr);}
  .prod-grid.is-list .prod{flex-direction:column; align-items:stretch;}
  .prod-grid.is-list .prod-photo{width:100%; height:150px;}
  .prod-grid.is-list .prod-foot{flex-direction:row; align-items:center; min-width:0;}
  .prod-grid.is-list .prod-price{padding-right:0;}
  .filters{position:fixed; top:0; left:0; bottom:0; width:340px; max-width:90vw; z-index:95; border-radius:0; transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-move); display:flex; flex-direction:column; overflow:auto;}
  .filters.open{transform:none; box-shadow:var(--shadow-lg);}
  .filter-open{display:inline-flex;}
  .filters-head{position:sticky; top:0; background:var(--panel); z-index:2;}
}
@media (max-width:390px){
  .prod-grid.is-list .prod-buy::after{content:"";}
  .prod-grid.is-list .prod-buy{width:46px; padding:0;}
  .cat-head{gap:12px;}
  .cat-cover{width:64px; height:64px;}
  .cat-title h1{font-size:24px;}
  .prod-grid.cat-grid-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .view-toggle{display:none;}
}