/* Cleanbot redesign — страница каталога
   Источник: Redesign/catalog.css. Все селекторы ограничены областью .cleanbot-redesign (класс на <body>).
   @import шрифта убран: Onest подключает тема (functions.php). */

/* ============================================================
   CLEANBOT — каталог роботов-мойщиков
   Дополняет styles.css: здесь только то, чего нет на главной
   ============================================================ */

/* ---------- Шапка каталога ---------- */
.cleanbot-redesign .cat-top{ padding-block:30px clamp(28px, 3vw, 40px); }
.cleanbot-redesign .crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 22px;
  font-size:14px; color:var(--text-3);
}
.cleanbot-redesign .crumbs a{ transition:color .2s var(--ease); }
.cleanbot-redesign .crumbs a:hover{ color:var(--acc); }
.cleanbot-redesign .crumbs span[aria-current]{ color:var(--text-2); }
.cleanbot-redesign .crumbs i{ font-style:normal; opacity:.5; }
.cleanbot-redesign .cat-title{ margin:0 0 18px; }
.cleanbot-redesign .cat-lead{ max-width:720px; }
/* ---------- Панель управления выдачей ---------- */
.cleanbot-redesign .toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.cleanbot-redesign .toolbar__found{ font-size:15px; color:var(--text-2); }
.cleanbot-redesign .toolbar__found b{ color:var(--text); font-weight:600; }
.cleanbot-redesign .sort{ position:relative; display:inline-flex; align-items:center; }
.cleanbot-redesign .sort svg{ position:absolute; pointer-events:none; color:var(--text-2); }
.cleanbot-redesign .sort svg:first-of-type{ left:18px; }
.cleanbot-redesign .sort svg:last-of-type{ right:18px; }
.cleanbot-redesign .sort select{
  appearance:none; -webkit-appearance:none;
  height:52px; padding:0 46px 0 46px;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--text);
  font-size:15px; font-weight:600;
  cursor:pointer;
  transition:border-color .2s var(--ease);
}
.cleanbot-redesign .sort select:hover{ border-color:var(--text-3); }
/* кнопка фильтров — только на узких экранах */
.cleanbot-redesign .filters-toggle{ display:none; }
.cleanbot-redesign .filters__foot{ display:none; }
/* ---------- Раскладка: фильтры + сетка ---------- */
.cleanbot-redesign .cat-layout{
  display:grid;
  grid-template-columns:296px minmax(0, 1fr);
  gap:28px;
  align-items:start;          /* без этого sticky в колонке не работает */
  padding-top:28px;
}
/* без min-width:0 колонка растягивается под ленту карточек */
.cleanbot-redesign .cat-layout > *{ min-width:0; }
/* ---------- Фильтры ---------- */
.cleanbot-redesign .filters{
  position:sticky;
  top:calc(var(--hdr-h) + 20px);
  padding:16px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
}
.cleanbot-redesign .filters__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:16px;
}
.cleanbot-redesign .filters__head h2{ margin:0; font-size:20px; font-weight:600; letter-spacing:-.025em; }
.cleanbot-redesign .filters__reset{
  font-size:14px; font-weight:500; color:var(--text-3);
  transition:color .2s var(--ease);
}
.cleanbot-redesign .filters__reset:hover{ color:var(--acc); }
.cleanbot-redesign .fgroup{ border-top:1px solid var(--line); }
.cleanbot-redesign .fgroup__h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:16px 0;
  text-align:left;
  font-size:15.5px; font-weight:600; letter-spacing:-.015em; color:var(--text);
}
.cleanbot-redesign .fgroup__h svg{ flex:none; color:var(--text-3); transition:transform .28s var(--ease); }
.cleanbot-redesign .fgroup.is-closed .fgroup__h svg{ transform:rotate(-90deg); }
.cleanbot-redesign .fgroup__body{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .3s var(--ease);
}
.cleanbot-redesign .fgroup.is-closed .fgroup__body{ grid-template-rows:0fr; }
.cleanbot-redesign .fgroup__body > div{ overflow:hidden; }
.cleanbot-redesign .fgroup__list{ display:flex; flex-direction:column; gap:0; padding-bottom:16px; }
/* у последней группы этот отступ разделять нечего — он бы удвоил низ карточки */
.cleanbot-redesign .fgroup:last-of-type .fgroup__list{ padding-bottom:0; }
.cleanbot-redesign .fcheck{
  display:flex; align-items:center; gap:11px;
  padding:4px 0;
  font-size:15px; color:var(--text-2);
  cursor:pointer;
  transition:color .18s var(--ease);
}
.cleanbot-redesign .fcheck:hover{ color:var(--text); }
.cleanbot-redesign .fcheck input{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:none;
  width:19px; height:19px; margin:0;
  border:1.5px solid #CDD3DA; border-radius:6px;
  background:#fff;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.cleanbot-redesign .fcheck input[type="radio"]{ border-radius:50%; }
.cleanbot-redesign .fcheck input:checked{ background:var(--acc); border-color:var(--acc); }
.cleanbot-redesign .fcheck input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5.6px; top:2.4px;
  width:5px; height:9.5px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.cleanbot-redesign .fcheck input[type="radio"]:checked::after{
  content:''; position:absolute; left:50%; top:50%;
  width:7px; height:7px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%);
}
.cleanbot-redesign .fcheck__n{ margin-left:auto; font-size:13.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.cleanbot-redesign .fcheck.is-empty{ opacity:.4; }
/* ---------- Цена в фильтрах ---------- */
.cleanbot-redesign .fprice{ display:flex; align-items:center; gap:10px; padding-bottom:16px; }
.cleanbot-redesign .fprice__f{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:6px;
  height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cleanbot-redesign .fprice__f:focus-within{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(11,169,219,.14); }
.cleanbot-redesign .fprice__f > span{ flex:none; font-size:14px; color:var(--text-3); }
.cleanbot-redesign .fprice__f input{
  width:100%; min-width:0; padding:0;
  border:0; background:none;
  font-size:15px; font-weight:500; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cleanbot-redesign .fprice__f input:focus{ outline:none; }
.cleanbot-redesign .fprice__dash{ flex:none; width:8px; height:1px; background:var(--text-3); }
.cleanbot-redesign .fslider{ position:relative; height:16px; margin-bottom:18px; }
.cleanbot-redesign .fslider__track{
  position:absolute; left:7px; right:7px; top:7px;
  height:3px; border-radius:2px; background:var(--surface-2);
}
.cleanbot-redesign .fslider__fill{ position:absolute; inset:0; border-radius:2px; background:var(--acc); }
.cleanbot-redesign .fslider__knob{
  position:absolute; top:1px;
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--acc);
}
.cleanbot-redesign .fslider__knob--a{ left:0; }
.cleanbot-redesign .fslider__knob--b{ right:0; }
/* ---------- Сетка товаров ---------- */
.cleanbot-redesign .pgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.cleanbot-redesign .pcard.is-hidden{ display:none; }
/* пустая выдача */
.cleanbot-redesign .pempty{
  display:none;
  padding:64px 24px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--r-lg);
}
.cleanbot-redesign .pempty.is-on{ display:block; }
.cleanbot-redesign .pempty p{ margin:0 0 20px; color:var(--text-2); }
/* ритм блоков задан в styles.css */
.cleanbot-redesign #models{ padding-bottom:60px; }
/* ---------- Таблица сравнения ---------- */
.cleanbot-redesign .ctable-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  scrollbar-width:none;          /* свой прогресс-бар под таблицей — родной не нужен */
}
.cleanbot-redesign .ctable-wrap::-webkit-scrollbar{ display:none; }
.cleanbot-redesign .ctable{ width:100%; min-width:720px; border-collapse:separate; border-spacing:0; }
.cleanbot-redesign .ctable th{
  padding:18px 26px; text-align:left; vertical-align:middle;
  background:var(--surface);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2);
  white-space:nowrap;
}
.cleanbot-redesign .ctable td{
  padding:22px 26px; vertical-align:top;
  border-top:1px solid var(--line);
  font-size:15.5px; line-height:1.55; color:var(--text-2);
}
.cleanbot-redesign .ctable td:first-child{ color:var(--text); font-weight:600; white-space:nowrap; }
.cleanbot-redesign .ctable tbody tr:hover td{ background:#FAFBFC; }
/* ---------- Поверхности ---------- */
.cleanbot-redesign .surf-note{
  display:flex; align-items:flex-start; gap:12px;
  margin-block:28px 0;              /* браузерный margin-bottom у <p> ломал ритм секций */
  padding:18px 22px;
  border-radius:var(--r-md);
  background:var(--acc-tint);
  font-size:14.5px; line-height:1.55; color:var(--acc-press);
}
.cleanbot-redesign .surf-note svg{ flex:none; margin-top:1px; }
/* ---------- Адаптив ---------- */
@media (max-width:1180px){  .cleanbot-redesign .cat-layout{ grid-template-columns:262px minmax(0, 1fr); gap:22px; }
  .cleanbot-redesign .pgrid{ grid-template-columns:repeat(2, 1fr); }

}
@media (max-width:900px){  .cleanbot-redesign .cat-layout{ grid-template-columns:minmax(0, 1fr); padding-top:22px; }
/* фильтры уезжают в выдвижную панель */
  .cleanbot-redesign .filters-toggle{
    display:inline-flex; align-items:center; gap:9px;
    height:52px; padding:0 22px;
    border:1px solid var(--line); border-radius:999px;
    background:#fff; color:var(--text);
    font-size:15px; font-weight:600;
  }
  .cleanbot-redesign .filters-toggle b[hidden]{ display:none; }
  .cleanbot-redesign .filters-toggle b{
    display:inline-grid; place-items:center;
    min-width:22px; height:22px; padding:0 6px;
    border-radius:999px; background:var(--acc); color:#fff;
    font-size:12px; font-weight:600;
  }
  .cleanbot-redesign .filters{
    position:fixed; inset:auto 0 0 0; z-index:95;
    max-height:82vh; overflow-y:auto;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border:0; box-shadow:0 -20px 60px rgba(16,16,16,.22);
    transform:translateY(101%);
    transition:transform .34s var(--ease);
  }
  .cleanbot-redesign .filters.is-open{ transform:translateY(0); }
  .cleanbot-redesign .filters__close{
    display:inline-grid; place-items:center;
    width:34px; height:34px; border-radius:50%;
    background:var(--surface); color:var(--text);
  }
  .cleanbot-redesign .filters-backdrop{
    position:fixed; inset:0; z-index:94;
    background:rgba(16,16,16,.42);
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s;
  }
  .cleanbot-redesign .filters-backdrop.is-on{ opacity:1; visibility:visible; }

}
@media (min-width:901px){  .cleanbot-redesign .filters__close{ display:none; }

}
@media (max-width:620px){  .cleanbot-redesign #models{ padding-bottom:40px; }
/* «Найдено» отдельной строкой, под ней — Фильтры и сортировка рядом */
  .cleanbot-redesign .toolbar{ flex-wrap:wrap; justify-content:flex-start; gap:14px 8px; }
  .cleanbot-redesign .toolbar__found{ flex:1 0 100%; }
/* сортировка слева, фильтры справа и во всю оставшуюся ширину */
  .cleanbot-redesign .sort{ order:1; flex:0 0 auto; }
  .cleanbot-redesign .filters-toggle{ order:2; flex:1 1 auto; justify-content:center; }
/* иконку не сжимаем вместе с кнопкой */
  .cleanbot-redesign .filters-toggle svg{ flex:none; }
  .cleanbot-redesign .sort svg:first-of-type{ left:12px; }
  .cleanbot-redesign .sort svg:last-of-type{ right:12px; }
/* иконка и «галка» — по 12px от краёв, между иконкой и текстом 6px:
     12 + 17 (бокс иконки) + 6 − 1 (рамка селекта) = 34px */
  .cleanbot-redesign .sort select{ height:46px; padding:0 34px; font-size:14px; }
  .cleanbot-redesign .filters-toggle{ height:46px; padding:0 16px; gap:6px; }
/* попап фильтров — по центру экрана, а не шторкой снизу */
  .cleanbot-redesign .filters{
    inset:0; margin:auto;
    width:min(100% - 32px, 400px); height:fit-content;
    max-height:78vh;
    border-radius:var(--r-lg);
    box-shadow:0 24px 70px rgba(16,16,16,.28);
    transform:translateY(10px) scale(.97);
    opacity:0; visibility:hidden;
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .cleanbot-redesign .filters.is-open{ transform:none; opacity:1; visibility:visible; }
/* попап = шапка + прокручиваемая середина + закреплённый футер,
     иначе кнопка «уезжает» из панели при прокрутке и ресайзе */
  .cleanbot-redesign .filters{ display:flex; flex-direction:column; overflow:hidden; }
  .cleanbot-redesign .filters__head{ flex:none; }
  .cleanbot-redesign .filters__body{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    margin-inline:-24px; padding-inline:24px;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .cleanbot-redesign .filters__body::-webkit-scrollbar{ display:none; }
  .cleanbot-redesign .filters__foot{
    flex:none; display:block;
    margin:0 -24px -16px; padding:12px 24px 16px;
    background:#fff;
    box-shadow:0 -12px 18px -12px rgba(16,16,16,.16);
  }
  .cleanbot-redesign .filters__apply{
    display:block; width:100%; height:48px; padding:0 20px;
    border:0; border-radius:999px;
    background:var(--ink); color:#fff;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
    cursor:pointer;
    transition:background .22s var(--ease);
  }
  .cleanbot-redesign .filters__apply:active{ background:#000; }
/* второстепенный текст таблицы сравнения */
  .cleanbot-redesign .ctable td{ font-size:13px; padding:16px 20px; }
  .cleanbot-redesign .ctable th{ padding:14px 20px; }
/* minmax(0,…) — иначе длинный тег с nowrap раздувает колонку */
  .cleanbot-redesign .pgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .cleanbot-redesign .pcard__flags{ display:none; }
/* в узкой карточке теги не помещаются, а «Подробнее» дублирует саму карточку */
  .cleanbot-redesign .pcard__tags, .cleanbot-redesign .pcard__more{ display:none; }
  .cleanbot-redesign .pcard__media img{ top:12%; height:80%; }
  .cleanbot-redesign .pcard__price{ font-size:16px; }

}

/* Reference filter card: roomy controls and a consistent mobile sheet. */
.cleanbot-redesign .filters{ padding:22px 24px 28px; border-radius:28px; }
.cleanbot-redesign .filters__head{ padding-bottom:20px; }
.cleanbot-redesign .filters__head h2{ font-size:22px; }
.cleanbot-redesign .filters__reset{ font-size:15px; }
.cleanbot-redesign .fgroup__h{ padding:20px 0; font-size:17px; }
.cleanbot-redesign .fcheck{ min-height:34px; font-size:16px; line-height:1.3; }
.cleanbot-redesign .fcheck input{ width:21px; height:21px; }
.cleanbot-redesign .fcheck__n{ flex:none; }
.cleanbot-redesign .fgroup__list{ padding-bottom:22px; }
.cleanbot-redesign .fprice__f{ height:48px; padding-inline:10px; border-radius:14px; }
.cleanbot-redesign .fslider{ height:36px; margin:0 10px 16px; }
.cleanbot-redesign .fslider__track{ left:0; right:0; top:17px; }
.cleanbot-redesign .fslider__knob{ top:9px; width:19px; height:19px; padding:0; cursor:ew-resize; }
.cleanbot-redesign .fslider__knob::before{ content:''; position:absolute; inset:-12px; }
.cleanbot-redesign .fslider__knob--a{ transform:translateX(-50%); }
.cleanbot-redesign .fslider__knob--b{ transform:translateX(50%); }
.cleanbot-redesign .filters :focus-visible{ outline:2px solid var(--acc); outline-offset:4px; }
@media (min-width:1181px){
  .cleanbot-redesign .cat-layout{ grid-template-columns:320px minmax(0,1fr); }
}
@media (max-width:900px){
  .cleanbot-redesign .filters{
    inset: auto 0 0; margin:0 auto; width:min(100%,480px); height:auto;
    max-height:88vh; max-height:88dvh; padding:20px 24px 0;
    display:flex; flex-direction:column; overflow:hidden;
    border-radius:28px 28px 0 0;
    transform:translateY(101%); opacity:0; visibility:hidden;
    transition:transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .cleanbot-redesign .filters.is-open{ transform:none; opacity:1; visibility:visible; }
  .cleanbot-redesign .filters__head{ flex:none; gap:12px; padding-bottom:16px; }
  .cleanbot-redesign .filters__head h2{ margin-right:auto; }
  .cleanbot-redesign .filters__close{ flex:none; width:44px; height:44px; }
  .cleanbot-redesign .filters__reset{ min-height:44px; }
  .cleanbot-redesign .filters__body{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    margin-inline:-24px; padding:0 24px 20px;
  }
  .cleanbot-redesign .fcheck{ min-height:44px; }
  .cleanbot-redesign .filters__foot{
    display:block; flex:none; margin:0 -24px;
    padding:12px 24px max(16px,env(safe-area-inset-bottom)); background:#fff;
    border-top:1px solid var(--line);
  }
  .cleanbot-redesign .filters__apply{
    display:block; width:100%; min-height:48px; border:0; border-radius:999px;
    background:var(--ink); color:#fff; font:inherit; font-weight:600;
  }
}
@media (prefers-reduced-motion:reduce){
  .cleanbot-redesign .filters, .cleanbot-redesign .fgroup__body{ transition:none; }
}