/* page-catalog.css — стили, специфичные для страницы. База — в main.css */

h1,h2,h3{font-family:'Newsreader',serif;font-weight:500;line-height:1.1;letter-spacing:-0.01em}
/* PAGE HEAD */
  .page-head{padding:54px 0 30px}
.crumbs{font-size:14px;color:var(--ink-faint);margin-bottom:18px}
.crumbs a{text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--ink-soft)}
.page-head h1{font-size:clamp(34px,5vw,52px);margin-bottom:12px}
.page-head p{color:var(--ink-soft);font-size:17px;max-width:560px}
.cat-tabs{display:flex;gap:8px;margin-top:24px}
.cat-tab{font-family:'Archivo';font-size:15px;font-weight:600;padding:11px 22px;border-radius:100px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:all .25s var(--ease)}
.cat-tab:hover{border-color:var(--ink-faint);color:var(--ink)}
.cat-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* TOOLBAR */
  .toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px;flex-wrap:wrap}
.toolbar .count{font-size:15px;color:var(--ink-soft)}
.toolbar .count b{color:var(--ink);font-weight:600}
.toolbar-right{display:flex;align-items:center;gap:12px}
.filter-toggle{display:none}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 38px 10px 14px;font-family:'Archivo';font-size:14px;color:var(--ink);cursor:pointer;transition:border-color .25s}
.select select:hover{border-color:var(--ink-faint)}
.select::after{content:'';position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:translateY(-65%) rotate(45deg);pointer-events:none}
/* LAYOUT */
  .catalog{display:grid;grid-template-columns:264px 1fr;gap:38px;padding-bottom:80px}
/* FILTERS */
  .filters{position:sticky;top:100px;align-self:start}
.filter-group{padding:22px 0;border-bottom:1px solid var(--line)}
.filter-group:first-child{padding-top:0}
.filter-group h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-family:'Archivo';font-weight:600;margin-bottom:16px}
.check{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer;font-size:15px;color:var(--ink-soft);transition:color .2s}
.check:hover{color:var(--ink)}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;cursor:pointer;flex-shrink:0;transition:all .2s;position:relative;background:var(--card)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check .tag{margin-left:auto;font-size:13px;color:var(--ink-faint)}
/* range (visual) */
  .range-vals{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.range-vals b{color:var(--ink);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;height:3px;border-radius:4px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.filter-actions{padding-top:22px}
.filter-actions .btn{width:100%;justify-content:center}
.clear-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--ink-faint);text-decoration:none;transition:color .25s}
.clear-link:hover{color:var(--accent)}
/* PAGINATION */
  .pagination{display:flex;justify-content:center;gap:8px;margin-top:50px}
.pagination a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink-soft);font-size:15px;transition:all .25s}
.pagination a:hover{border-color:var(--ink-faint);color:var(--ink)}
.pagination a.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* RESPONSIVE */
  @media(max-width:1000px){
    .prod-grid{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:1024px){
    .catalog{grid-template-columns:1fr;gap:0}
    /* filters become a slide-down panel toggled by a button */
    .filters{position:fixed;top:0;left:0;width:100vw;height:100dvh;background:var(--card);z-index:45;transform:translateX(-100%);transition:transform .35s var(--ease);overflow-y:auto;padding:88px 28px 32px;top:0}
    .filters.open{transform:translateX(0)}
    .filters-head{display:flex!important;justify-content:space-between;align-items:center;margin-bottom:8px}
    .filter-toggle{display:inline-flex}
    .page-head{padding:36px 0 22px}
  }
/* навбар сворачивается в бургер только с планшетов */
  @media(max-width:900px){
    .nav-links{display:none}.menu-btn{display:block}.nav-cta{display:none}
  }
@media(min-width:1025px){
    .filters-head{display:none}
  }
/* empty state + show-more (shared) */
  .empty-state{display:none;text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty-state.show{display:block}
.empty-state svg{color:var(--ink-faint);margin-bottom:16px}
.empty-state h3{font-size:22px;color:var(--ink);margin-bottom:8px}
.show-more{display:none;justify-content:center;margin-top:28px}
.show-more .btn{padding:13px 28px}
@media(max-width:560px){
    .wrap{padding:0 20px}
    .foot-grid{grid-template-columns:1fr}
    .toolbar{gap:12px}
    /* compact horizontal tiles on mobile (как на главной) */
    .prod-grid{grid-template-columns:1fr;gap:12px}
    .card{display:flex;flex-direction:row;align-items:stretch}
    .card > a{
      display:flex;flex-direction:row;align-items:stretch;
      width:100%;flex:1;
    }
    .card > a > .card-body{flex:1;min-width:0}
    /* фото-зона: квадрат, фиксированная ширина, по центру */
    .card-img{
      width:130px;flex-shrink:0;
      aspect-ratio:1/1;
      border-bottom:none;
      border-right:1px solid var(--line);
      display:flex;align-items:center;justify-content:center;
      padding:10px;
    }
    .card-img img{
      width:100%;height:100%;
      object-fit:contain;
      padding:0;
    }
    .card-img .unit{width:72%;height:32px;margin:0}
    .badge{display:none}
    .card-body{padding:12px 14px}
    .card-body .brand{font-size:10px;letter-spacing:.06em}
    .card-body h3{font-size:16px;margin:3px 0 8px}
    .specs{gap:5px;margin-bottom:9px;flex-wrap:nowrap;overflow:hidden}
    .spec{font-size:11px;padding:3px 7px;white-space:nowrap}
    .card-foot{padding-top:9px}
    .price{font-size:18px}
    .price small{font-size:12px}
    .link-btn{font-size:12px}
  }
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}