/* ============================================================
   Умный Магазин — каталог с фильтрами. Дополняет 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;}
.cat-title .cnt{font-size:14px; color:var(--faint); font-weight:600;}
.cat-intro{font-size:14.5px; color:var(--muted); line-height:1.5; max-width:720px; margin-bottom:8px;}

/* пилюли категорий */
.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;}

/* ---- Боковая панель фильтров ---- */
.filters{position:sticky; top:96px; 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:850; letter-spacing:-.3px;}
.filters-head .reset{background:none; border:0; color:var(--faint); 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.has-active{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 28%,transparent);}
.fg-pop{position:absolute; left:calc(100% + 16px); top:8px; z-index:20; display:none; background:var(--panel); border-radius:14px; padding:6px; box-shadow:var(--shadow); cursor:pointer;}
.fg-pop::before{content:""; position:absolute; left:-5px; top:18px; width:12px; height:12px; background:var(--panel); transform:rotate(45deg);}
.fg-pop .fp-btn{position:relative; z-index:1; display:flex; align-items:center; gap:7px; white-space:nowrap; background:var(--accent); color:#fff; font-size:13.5px; font-weight:700; border-radius:9px; padding:11px 20px;}
.fg-pop:hover .fp-btn{background:var(--accent-hover);}
.fg-pop .fp-btn b{font-weight:800;}
.fg-pop b{font-weight:800;}
.fgroup.has-active:hover .fg-pop, .fgroup.has-active:focus-within .fg-pop{display:flex;}
@media (max-width:1023px){ .fg-pop{display:none !important;} }
.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:pointer; letter-spacing:.2px;}
.fgroup-head .chev{width:16px; height:16px; color:var(--faint); transition:transform var(--dur-base);}
.fgroup.collapsed .chev{transform:rotate(-90deg);}
.fgroup-body{padding:0 20px 18px; display:flex; flex-direction:column; gap:11px;}
.fgroup.collapsed .fgroup-body{display:none;}

/* блок Категория/Подкатегория: как обычный блок + 5 видимых и скролл */
.fcat-scroll{max-height:212px; overflow-y:auto; display:flex; flex-direction:column; gap:11px; scrollbar-width:thin;}
.fcat-scroll::-webkit-scrollbar{width:5px;}
.fcat-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}


.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);}
.fopt .cnt{margin-left:auto; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;}
.fopt input:checked ~ .cnt{color:var(--accent);}

/* swatch-чипы вязкости */
.fchips{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 18px;}
.fchip{font-size:12.5px; font-weight:650; color:var(--ink-2); background:var(--bg-2); border:1.5px solid var(--line); border-radius:8px; padding:7px 11px; cursor:pointer; transition:all var(--dur-fast); user-select:none;}
.fchip:hover{border-color:var(--faint);}
.fchip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

/* цена */
.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(--faint); 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);}
.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 38px 0 14px; font-size:14px; font-weight:600; font-family:inherit; outline:0; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center;}
.sort-sel:focus{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:none !important;}
.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,1fr);}
.cat-results{min-width:0;}

/* список (list view) */
.prod-grid.is-list{grid-template-columns:1fr; gap:12px;}
.prod-grid.is-list .prod{flex-direction:row; align-items:center; gap:20px; padding:16px 18px;}
.prod-grid.is-list .prod-badges{position:static; flex-direction:row; order:0;}
.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-buy{width:auto; padding:0 20px; height:46px; gap:9px;}
.prod-grid.is-list .prod-buy::after{content:"В корзину"; 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 .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;}

@media (max-width:1023px){
  .prod-grid.cat-grid-list{grid-template-columns:repeat(2,1fr);}
  .catalog{grid-template-columns:1fr;}
  .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){
  .cat-title h1{font-size:24px;}
  .prod-grid.cat-grid-list{grid-template-columns:1fr 1fr; gap:12px;}
  .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-buy::after{content:"";}
  .prod-grid.is-list .prod-buy{width:46px; padding:0;}
  .view-toggle{display:none;}
}