/* ============================================================
   KREP_RED163 · krep-red163.css
   КРЕПИОН · часть 163 · 31.08.2026 · РЕДИЗАЙН ГЛАВНОЙ, экран 1
   РЕДАКЦИЯ 7: фильтр — левая колонка на всех экранах каталога,
   пустота под шапкой убрана
   РЕДАКЦИЯ 5: экран категории — фильтры слева, таблица бело-зелёная
   РЕДАКЦИЯ 4: перебрана мобильная версия — шапка, меню,
   полоса выгод и двери ужаты под узкий экран

   Слой ПОВЕРХ index.html и krep-home.css. Оригиналы не тронуты.
   Работает только на главной (класс .krr-on ставит krep-red163.js).

   ОТКАТ: убрать из index.html строки с krep-red163.css и
          krep-red163.js — сайт вернётся как был.
   ============================================================ */

@media screen {

/* ---------- 1. ШАПКА И МЕНЮ: ТЁМНЫЙ БЛОК ------------------- */
html.krr-on .topbar.glass{
  background: #0f1512 !important;
  border-color: #0f1512 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 22px !important;
  margin: 0 !important;
}
html.krr-on .topbar .tagline{ color: #9fb3a8 !important; }
html.krr-on .topbar .contact,
html.krr-on .topbar .contact .lbl,
html.krr-on .topbar .contact .val,
html.krr-on .topbar .cart-btn{ color: #ffffff !important; }
html.krr-on .topbar .contact .lbl{ color: #9fb3a8 !important; }
html.krr-on .topbar .cart-btn{
  background: transparent !important;
  border: 1px solid #2a3a33 !important;
}

/* поиск в шапке — белое поле по центру тёмной полосы */
html.krr-on .topbar .search{
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 10px !important;
}
html.krr-on .topbar .search input{
  background: transparent !important;
  color: #14201a !important;
  padding: 11px 18px 11px 46px !important;
  font-size: 14px !important;
}
html.krr-on .topbar .brand-text .tagline{ font-size: 12px !important; }
html.krr-on .topbar .logo-3d img{ height: 40px !important; }
html.krr-on .topbar .search input::placeholder{ color: #7d8c85 !important; }
html.krr-on .topbar .search .ic{ color: #7d8c85 !important; }

/* кнопки темы и воды на главной не нужны: тема одна, вода выключена */
html.krr-on .topbar #themeBtn,
html.krr-on .topbar #waterBtn{ display: none !important; }

/* меню разделов — продолжение тёмного блока */
html.krr-on .nav.glass{
  background: #14201a !important;
  border-color: #14201a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  margin: 0 0 0 0 !important;
  padding: 0 16px !important;
}
html.krr-on .nav.glass a{ color: #cfe0d7 !important; font-size: 14px !important; padding: 10px 16px !important; }
html.krr-on .nav.glass a:hover{ color: #ffffff !important; }
html.krr-on .nav.glass a.active{ color: #ffffff !important; }

/* ---------- 2. ПОЛОСА ВЫГОД ПОД МЕНЮ ----------------------- */
/* бегущая строка предложений на главной убрана по решению владельца */
html.krr-on .krep-tick{ display: none !important; }

.krr-bar{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 22px;
  padding: 9px 22px;
  margin: 0 0 13px;
  background: #ffffff;
  border-bottom: 1px solid #e3e8e5;
  font-size: 13.5px; color: #35443d;
}
.krr-bar a{ color: #35443d; text-decoration: none; }
.krr-bar a:hover{ color: #129b54; }
.krr-bar b{ font-weight: 600; }
.krr-bar span.sep{ color: #d5ddd9; }

/* ---------- 3. ГЕРОЙСКИЙ БЛОК: ОДНА КОЛОНКА ---------------- */
html.krr-on .hero.hero-home{
  display: block !important;
  text-align: left !important;
}
html.krr-on .hero-home .bolt-stage{ display: none !important; }
html.krr-on .hero-home .hero-aside{ margin: 0 0 10px !important; }
html.krr-on .hero-home .hero-text h1{
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 0 0 2px !important;
}
html.krr-on .hero-home .hero-text p{
  font-size: 12.5px !important;
  margin: 0 !important;
  color: #5b6b63 !important;
}
html.krr-on .hero-home .hero-count{ display: none !important; }

/* ---------- 4. ДВЕ ДВЕРИ — ОТКЛЮЧЕНЫ ----------------------
   Решение владельца 01.09.2026: блоки убраны, поиск в шапке
   закрывает ту же задачу. Правило ниже гасит их и у тех, у кого
   в браузере остался старый скрипт.                          */
.krr-doors{ display: none !important; }

.krr-doors{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 0 13px;
}
.krr-door{
  background: #ffffff; border: 1px solid #e3e8e5;
  border-radius: 14px; padding: 12px 15px 14px;
}
.krr-door h2{
  font-size: 16px; font-weight: 800; margin: 0 0 2px; color: #14201a;
}
.krr-door p{ font-size: 12px; color: #5b6b63; margin: 0 0 9px; line-height: 1.3; }

.krr-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.krr-chip{
  border: 1px solid #dbe3df; background: #f6f8f7; color: #26332c;
  border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
.krr-chip:hover{ border-color: #129b54; color: #129b54; }

.krr-form{ display: flex; gap: 9px; }
.krr-form input{
  flex: 1 1 auto; min-width: 0;
  border: 1px solid #dbe3df; border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit;
  background: #ffffff; color: #14201a;
}
.krr-form input::placeholder{ color: #93a29a; }
.krr-form button{
  flex: 0 0 auto; min-height: 42px; padding: 0 17px;
  border: none; border-radius: 10px; cursor: pointer;
  background: #129b54; color: #ffffff;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.krr-form button:hover{ background: #0f8a4a; }

.krr-tasks{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.krr-task{
  border: 1px solid #dbe3df; background: #ffffff; border-radius: 12px;
  padding: 9px 6px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: #26332c; line-height: 1.2;
  text-align: center; text-decoration: none; display: block;
  min-height: 48px;
}
.krr-task span{ display: block; font-size: 11px; font-weight: 500; color: #7d8c85; margin-top: 2px; }
.krr-task:hover{ border-color: #129b54; color: #129b54; }

/* ---------- 5. ЛЕНТА ДОВЕРИЯ ------------------------------- */
.krr-trust{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #ffffff; border: 1px solid #e3e8e5; border-radius: 16px;
  margin: 16px 0 0; padding: 12px 0;
}
.krr-trust > div{
  padding: 2px 18px; border-right: 1px solid #eef2f0;
  font-size: 13.5px; font-weight: 700; color: #14201a; line-height: 1.3;
}
.krr-trust > div:last-child{ border-right: none; }
.krr-trust small{
  display: block; font-size: 12px; font-weight: 500; color: #7d8c85; margin-top: 2px;
}
.krr-trust b{ font-weight: 700; }

/* ---------- 6. COOKIE: ТОНКАЯ ПОЛОСА ВНИЗУ ----------------- */
html.krr-on .cookie{
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: none !important;
}
html.krr-on .cookie-card{
  display: flex !important; align-items: center !important;
  gap: 16px !important; flex-wrap: wrap !important;
  border-radius: 0 !important; padding: 10px 20px !important;
}
html.krr-on .cookie-card b{ display: none !important; }
html.krr-on .cookie-card span{ margin: 0 !important; flex: 1 1 260px !important; font-size: 13px !important; }
html.krr-on .cookie-ok{
  width: auto !important; flex: 0 0 auto !important;
  padding: 9px 22px !important; min-height: 40px !important;
}

}

/* ---------- 7. УЗКИЕ ЭКРАНЫ -------------------------------- */
@media screen and (max-width: 900px){
  .krr-doors{ grid-template-columns: 1fr; }
  .krr-trust{ grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .krr-trust > div:nth-child(2){ border-right: none; }
}

@media screen and (max-width: 620px){

  /* --- шапка: слоган убран, логотип мельче --------------- */
  html.krr-on .topbar.glass{ padding: 8px 12px !important; }
  html.krr-on .topbar .brand-text{ display: none !important; }
  html.krr-on .topbar .logo-3d img{ height: 34px !important; }
  html.krr-on .topbar .search input{
    padding: 10px 14px 10px 42px !important;
    font-size: 13.5px !important;
  }

  /* --- меню: одна прокручиваемая строка, слова не режутся - */
  html.krr-on .nav.glass{
    padding: 0 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.krr-on .nav.glass::-webkit-scrollbar{ display: none; }
  html.krr-on .nav.glass a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  /* --- полоса выгод: одна строка с прокруткой ------------- */
  .krr-bar{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 14px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 11px;
  }
  .krr-bar::-webkit-scrollbar{ display: none; }
  .krr-bar a{ white-space: nowrap; }
  .krr-bar a:last-child{ margin-left: 14px !important; }

  /* --- двери: без пояснений, плотнее --------------------- */
  .krr-doors{ gap: 9px; margin-bottom: 11px; }
  .krr-door{ padding: 11px 12px 12px; border-radius: 12px; }
  .krr-door h2{ font-size: 15.5px; margin-bottom: 7px; }
  .krr-door p{ display: none; }
  .krr-chip{ padding: 5px 9px; font-size: 12px; }
  .krr-form input{ padding: 9px 11px; font-size: 13px; }
  .krr-form button{ min-height: 40px; padding: 0 15px; font-size: 13px; }
  .krr-tasks{ grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .krr-task{ padding: 8px 3px; font-size: 12px; min-height: 44px; }
  .krr-task span{ font-size: 10.5px; }

  /* --- заголовок и лента доверия ------------------------- */
  html.krr-on .hero-home .hero-text h1{ font-size: 17px !important; }
  html.krr-on .hero-home .hero-text p{ display: none !important; }
  .krr-trust{ grid-template-columns: 1fr; padding: 11px 0; }
  .krr-trust > div{ border-right: none; padding: 7px 14px; }
}

/* ============================================================
   ЭКРАН КАТЕГОРИИ: фильтры уходят в левую колонку
   ============================================================ */
@media screen {

  .krr-catwrap{ display: block; }

  .krr-catwrap.on{
    display: grid !important;
    grid-template-columns: 214px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* пустота под шапкой на экранах каталога */
  html.krr-cat-mode .hero.hero-home{ margin: 0 !important; padding: 0 !important; }
  html.krr-cat-mode .hero-home .hero-aside{ display: none !important; }
  html.krr-cat-mode .krr-bar{ margin-bottom: 10px !important; }
  html.krr-cat-mode .popular:empty{ display: none !important; }
  html.krr-cat-mode .crumbs{ margin: 0 4px 10px !important; }
  html.krr-cat-mode .krr-catwrap{ margin-top: 0 !important; }
  html.krr-cat-mode #grid.scat-host{ margin-top: 0 !important; }

  /* дерево стандартов уже НЕ отдельная левая колонка страницы:
     оно живёт внутри правой части, справа от фильтра */
  html.krr-cat-mode .scat-two{ grid-template-columns: 190px minmax(0, 1fr) !important; }

  .krr-catwrap.on #scatFilterHost{
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 14px;
    padding: 14px;
  }
  .krr-catwrap.on #scatFilterHost .scat-filters{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .krr-catwrap.on #scatFilterHost .scat-filters select{
    width: 100% !important;
    padding: 9px 11px !important;
    font-size: 13px !important;
  }
  .krr-catwrap.on #scatFilterHost .scat-filters label.chk{ font-size: 13px !important; }
  .krr-catwrap.on #scatFilterHost .scat-filters .scat-reset{ width: 100% !important; }

  html.krr-on #grid .scat-body{
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e3e8e5 !important;
    border-radius: 14px !important;
  }

  /* --- шапка результатов --- */
  html.krr-on .scat-head2{ font-size: 13px !important; }
  .krr-spec{
    margin-left: 14px; font-size: 13px; font-weight: 600;
    color: #129b54; text-decoration: none; white-space: nowrap;
  }
  .krr-spec:hover{ text-decoration: underline; }

  /* --- таблица --- */
  html.krr-on .scat-tbl th{
    font-size: 11px !important;
    color: #7d8c85 !important;
    padding: 10px !important;
    border-bottom: 1px solid #e3e8e5 !important;
  }
  html.krr-on .scat-tbl td{
    padding: 11px 10px !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid #eef2f0 !important;
  }
  html.krr-on .scat-tbl tr:hover td{ background: #f6f8f7 !important; }

  html.krr-on .scat-tbl .krr-size{ font-weight: 600; white-space: nowrap; }
  html.krr-on .scat-tbl .krr-attr{ color: #5b6b63; white-space: nowrap; }
  html.krr-on .scat-tbl .scat-pf{
    text-align: right !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }

  /* наличие — точка состояния перед подписью */
  html.krr-on .scat-tbl .scat-st{ white-space: nowrap; }
  html.krr-on .scat-tbl .scat-st::before{
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
    background: #b4b2a9;
  }
  html.krr-on .scat-tbl .scat-st.yes::before{ background: #1d9e75; }
  html.krr-on .scat-tbl .scat-st.ask::before{ background: #ba7517; }
  html.krr-on .scat-tbl .scat-st.mov::before{ background: #378add; }
}

@media screen and (max-width: 900px){
  .krr-catwrap.on{ grid-template-columns: 1fr !important; }
}