/* =========================
   HOME (Главная)
   ВАЖНО:
   - Здесь только правила главной.
   - Переключение вкладок: products / requests / invests (см. static/js/home.js)
   ========================= */

/* Заголовок главной */
.title_cx{
  color:#333;
  text-align:center;
}
.title_cx h1{
  margin:-25px 0 12px;
}
.title_cx .m-cat-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid #d6dbe1;
  border-radius:10px;
  background:#eef1f4;
  color:#3a3f45;
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
  user-select:none;
  white-space:nowrap;
}
.title_cx .m-cat-toggle:hover{
  background:#e5eaee;
}
.title_cx .m-cat-toggle.is-open{
  background:#1c9675;
  border-color:#1c9675;
  color:#fff;
}

/* Переключатель секций */
.home_switch{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:8px 0 4px;
}
.home_switch_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  width:150px;
  text-align:center;
  padding:0 14px;
  border:1px solid #d6dbe1;
  border-radius:10px;
  background:#eef1f4;
  color:#3a3f45;
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
  user-select:none;
  white-space:nowrap;
}
.home_switch_button.active{
  background:#1c9675;
  border-color:#1c9675;
  color:#fff;
  z-index:2;
}

/* =========================
   СЛАЙДЕР СЕКЦИЙ
   ========================= */

/* Окно */
.home_screen_container{
  width:100%;
  overflow:hidden;
}

/* Лента из 3 экранов */
.home_screen_inner{
  display:flex;
  width:300%;
  transition:transform 0.9s ease;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Каждый экран = 1/3 ленты */
.home_screen{
  flex:0 0 33.333333%;
  width:33.333333%;
}

/* Состояния */
.home_screen_inner.products{transform:translateX(0)}
.home_screen_inner.requests{transform:translateX(-33.333333%)}
.home_screen_inner.invests{transform:translateX(-66.666666%)}

/* =========================
   HOME: баннер/промо-блок
   ========================= */
@media (min-width: 992px){
  #home-promos.hero-banner{ margin-top:52px; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  #home-promos.hero-banner{ margin-top:18px; }
}
@media (max-width: 767.98px){
  #home-promos.hero-banner{ margin-top:8px; }
}

/* =========================
   ЛЕЙАУТ: категории слева, карточки справа (desktop)
   ========================= */
.home_screen .flex_container{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Левая колонка категорий (только в HOME) */
.home_screen .flex_container .wrapper{
  flex:0 0 300px;
  width:300px;
  padding-left:20px;
  grid-template-columns:1fr;
}

/* Правая часть */
.home_screen .flex_container .product_table,
.home_screen .flex_container .request_table{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}

/* Скрывать категории если [hidden] */
#home-cats-products[hidden],
#home-cats-requests[hidden]{
  display:none !important;
}

/* =========================
   Сердце (избранное) — снизу справа, без кружка
   ВАЖНО:
   - .card-like может быть <img> (старый вариант)
   - или <button class="card-like"><img ...></button> (правильный вариант)
   Поэтому reset применяем ТОЛЬКО к button.card-like
   ========================= */
.product_card,.card{ position:relative; }

/* Общий стиль позиции/размера — подходит и для <img>, и для <button> */
.card-like{
  position:absolute;
  right:8px;
  bottom:8px;
  width:28px;
  height:28px;
  cursor:pointer;
  z-index:3;
  opacity:.9;
  transition:transform .15s, opacity .2s, filter .2s;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
}

/* Hover — тоже общий */
.card-like:hover{
  transform:scale(1.15);
  opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}

.card-like.on{
  filter:drop-shadow(0 0 2px rgba(255,0,0,.5));
}

/* RESET только если .card-like — это BUTTON (иначе <img.card-like> может визуально “поехать”) */
button.card-like{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  line-height: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Иконка внутри button */
button.card-like > img{
  width:100%;
  height:100%;
  display:block;
}

/* Фокус (доступность) — только для button */
button.card-like:focus-visible{
  outline:2px solid rgba(28,150,117,.55);
  outline-offset:2px;
}

/* =========================
   АДАПТИВ
   ========================= */

/* Планшет и ниже: общий переход в колонку */
@media (max-width: 991px){
  .home_screen .flex_container{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .home_screen .flex_container .wrapper{
    display: grid; /* ← ВОТ ЭТОГО НЕ ХВАТАЛО */
    width:100%;
    flex:0 0 auto;
    padding-left:0;
    margin:0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-sizing:border-box;
  }

  /* FIX: правильные селекторы (таблицы не вложены в .product_table) */
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    width:100%;
    flex:0 0 auto;
    min-width:0;
    box-sizing:border-box;
  }

  .home_switch_button,
  .title_cx .m-cat-toggle{
    flex:1 1 0;
    width:auto;
    min-height:40px;
    padding:0 12px;
    border-radius:10px;
  }

  .title_cx h1{
    font-size:20px;
    margin:8px auto 8px;
    width:min(98%, 720px);
    box-sizing:border-box;
  }
}

/* Мобилка: конкретные правила HOME */
@media (max-width: 767.98px){

  /* Ровные поля контейнера главной */
  .home_screen_container{
    width:100%;
    padding:0;
    margin:4px 4px 4px 0px;
    box-sizing:border-box;
    overflow:hidden;
  }

  /* ЗАЗОР между блоками (экранами) + маска по X, чтобы не было внахлёста */
  .home_screen{
    overflow:hidden;             /* ключевое: соседний экран не виден */
    padding:0 2px;               /* визуальный зазор между блоками */
    box-sizing:border-box;
  }

  .title_cx{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .home_switch{
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:6px !important;
    padding:0 6px !important;
    flex-wrap:nowrap !important;
  }

  .home_switch_button,
  .title_cx .m-cat-toggle{
    flex:1 1 0 !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    position:relative;
    z-index:1;
    min-height:40px;
    padding:0 10px !important;
    border-radius:10px !important;
    font-size:15px;
  }

  /* Категории: убираем вылет по X (это и создаёт внахлёст экранов) */
  .home_screen .flex_container .wrapper{
    overflow-x:hidden;           /* ключевое: ничего не вылезает вправо/влево */
    overflow-y:visible;
    -webkit-overflow-scrolling:auto;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(0,0,0,.06);
    box-sizing:border-box;
  }

  /* FIX: правильные селекторы для таблиц/карточек на мобилке (2 колонки по умолчанию) */
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
  }

  /* Вкладка "Спрос" — объявления в 1 колонку (после категорий) */
  .home_screen_inner.requests .product_table,
  .home_screen_inner.requests .request_table{
    grid-template-columns:1fr !important;
  }

  /* Чтобы внутренности не раздували сетку */
  .home_screen .flex_container .product_table > *,
  .home_screen .flex_container .request_table > *{
    min-width:0;
  }

  /* Сердце меньше */
  .card-like{
    width:26px;
    height:26px;
    right:6px;
    bottom:6px;
  }

  /* На мобилке reset и центрирование — только если это button */
  button.card-like{
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button.card-like > img{
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Страховка от горизонтального вылета именно на HOME */
  .home_screen,
  .home_screen .flex_container,
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    max-width:100%;
    overflow-x:hidden;
  }
}

/* Мелкие */
@media (max-width: 600px){
  .home_switch{ gap:6px; }
  .home_switch_button,
  .title_cx .m-cat-toggle{ padding:0 8px; }
}
@media (max-width: 420px){
  .home_switch{ gap:6px; }
  .home_switch_button,
  .title_cx .m-cat-toggle{ padding:0 6px; font-size:14px; }
}

/* =========================================================
   HOME SWITCH: страховка на самых узких (не ломая текущие !important на мобилке)
   ========================================================= */
@media (max-width: 480px){

  /* если где-то есть hover scale — на мобилке его лучше выключить, чтобы не залезал на соседей */
  .home_switch_button:hover{
    transform:none !important;
  }

  .home_switch_button.active{
    z-index:2;               /* активная сверху, но без перекрытия по ширине */
  }
}

/* ===== Desktop: отступы слева/справа (как просил) ===== */
@media (min-width: 1024px) {
  .home_screen {
    padding-left: 4px;
    padding-right: 2px;
  }
}


/* =========================
   HOME → Инвестиции: отступы между карточками
   (Инвест-проекты и Инвесторы)
   ========================= */

/* 1) Инвест-проекты */
.home_screen .invest_projects_block > a{
  display:block;
}
.home_screen .invest_projects_block > a + a{
  margin-top:12px;
}

/* 2) Инвесторы */
.home_screen .home_invest_title ~ a[href^="/investor/"]{
  display:block;
}
.home_screen .home_invest_title ~ a[href^="/investor/"] + a[href^="/investor/"]{
  margin-top:12px;
}

/* =========================
   HOME → Инвестиции: hover-эффект
   ========================= */

/* Базовый цвет текста в карточке */
.home_screen .investor_card{
  color:#222;
}

/* Фон + тень карточки при hover */
.home_screen .invest_projects_block > a:hover .investor_card,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
  background: rgba(0, 102, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.15);
}

/* ✅ Синим делаем именно ОБЫЧНЫЙ текст карточки (всё, что НЕ strong) */
.home_screen .invest_projects_block > a:hover .investor_card,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
  color:#0066ff;
}

/* ✅ А жирное (labels: Наименование/Описание/Капитал/ФИО) оставляем чёрным */
.home_screen .invest_projects_block > a:hover .investor_card strong,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card strong{
  color:#222;
}

/* На всякий случай: никаких подчёркиваний ссылок */
.home_screen .invest_projects_block > a:hover,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover{
  text-decoration:none;
}

/* Touch-устройства: без hover */
@media (hover: none){
  .home_screen .invest_projects_block > a:hover .investor_card,
  .home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
    background:transparent;
    box-shadow:none;
    color:#222;
  }
  .home_screen .invest_projects_block > a:hover .investor_card strong,
  .home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card strong{
    color:#222;
  }
}

/* =========================
   БЕЙДЖ ПРОВЕРКИ ИНН НА КАРТОЧКЕ
   - зелёный: продавец проверен
   - серый: продавец не проверен / статус не ok
   - только визуальный сигнал, без текста
   ========================= */

/* Контейнер значка */
.inn-check {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
}

.inn-check img{
  display:block;
  width:100%;
  height:100%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

.inn-check.ok img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(49%)
    sepia(93%)
    saturate(1352%)
    hue-rotate(95deg)
    brightness(96%)
    contrast(101%)
    drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

/* Не проверен */
.inn-check.no img{
  opacity:.22;
  filter:none;
}

/* Мобилка: чуть крупнее для читаемости */
@media (max-width:768px){
  .inn-check{
    width:18px;
    height:18px;
  }
}

/* =========================================================
   HOME 2026: единая главная без Продать/Купить/Инвестиции
   ========================================================= */
.home_switch,
.title_cx .m-cat-toggle{ display:none !important; }

.home_screen_inner{ display:block !important; width:100% !important; transform:none !important; }
.home_screen{ width:100% !important; flex:none !important; }
.home-products-only{ display:block !important; }
.home-products-wrap{ width:100%; }

.home_category_tiles{
  width:min(100%, 1500px);
  margin:0 auto 14px;
  padding:8px 10px 14px;
  box-sizing:border-box;
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.home_category_tiles::-webkit-scrollbar{ height:6px; }
.home_category_tiles::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.16); border-radius:999px; }

.home_category_tile{
  flex:0 0 178px;
  min-height:82px;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 14px;
  box-sizing:border-box;
  border-radius:16px;
  background:#06966f;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800;
  font-size:18px;
  line-height:1.12;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.home_category_tile:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  background:#058664;
}

.home_category_tile img{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}

.home_category_tile span{ display:block; }

@media (max-width: 767.98px){
  .home_category_tiles{
    width:100%;
    margin:0 0 8px;
    padding:6px 8px 10px;
    gap:8px;
  }

  .home_category_tile{
    flex:0 0 82px;
    width:82px;
    min-height:82px;
    padding:7px 6px;
    border-radius:14px;
    flex-direction:column;
    gap:5px;
    font-size:11px;
    line-height:1.05;
    text-align:center;
    font-weight:800;
  }

  .home_category_tile img{
    width:42px;
    height:42px;
  }
}

/* 2026-04-26: одинаковая ширина плиток категорий на desktop */
@media (min-width: 768px){
  .home_category_tile{
    flex: 0 0 238px !important;
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    justify-content: center !important;
  }
}

/* 2026-04-26: правка desktop-плиток категорий — ровные, слева, без вылезания */
@media (min-width: 768px){
  .home_category_tiles{
    justify-content: flex-start !important;
  }

  .home_category_tile{
    flex: 0 0 270px !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;

    justify-content: flex-start !important;
    text-align: left !important;

    gap: 12px !important;
    padding: 12px 18px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .home_category_tile img{
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    object-fit: contain !important;
  }

  .home_category_tile span{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* 2026-04-26: mobile-плитки категорий — аккуратный текст в 2 строки */
@media (max-width: 767.98px){
  .home_category_tile{
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    min-height: 86px !important;
    padding: 7px 5px !important;
    gap: 4px !important;

    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .home_category_tile img{
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    object-fit: contain !important;
  }

  .home_category_tile span{
    width: 100% !important;
    max-width: 100% !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 10px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    font-weight: 800 !important;
  }
}

/* 2026-04-26: главная — карточки объявлений как на страницах категорий, 6 в ряд */
.home-products-wrap{
  width:100% !important;
  max-width:1680px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.home-products-wrap .product_table{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:12px !important;
  padding:0 !important;
  align-items:start !important;
  box-sizing:border-box !important;
}

.home-products-wrap .product_table > a{
  display:block !important;
  min-width:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}

.home-products-wrap .product_card{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
}

/* чтобы старый flex-контейнер главной больше не растягивал карточки */
.home-products-only{
  display:block !important;
  width:100% !important;
}

@media (max-width: 1400px){
  .home-products-wrap .product_table{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px){
  .home-products-wrap .product_table{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
}

/* 2026-04-26: главная — карточки как "Все товары": 6×10, одинаковая высота */
.home-products-wrap{
  width:100% !important;
  max-width:1680px !important;
  margin:0 auto !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
}

.home-products-wrap .product_table{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.home-products-wrap .product_table > a{
  display:flex !important;
  height:100% !important;
  min-width:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}

.home-products-wrap .product_card{
  width:100% !important;
  height:100% !important;
  min-height:330px !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}

.home-products-wrap .product_pictures_box{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  max-height:230px !important;
  overflow:hidden !important;
}

.home-products-wrap .product_pictures_box img,
.home-products-wrap .product_pictures{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.home-products-wrap .product_text_box{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
}

.home-products-wrap .pl-card__title{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:2.6em !important;
}

.home-products-wrap .pl-card__descr{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:4.5em !important;
}

@media (max-width:1400px){
  .home-products-wrap .product_table{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width:991px){
  .home-products-wrap{
    padding:0 6px !important;
  }

  .home-products-wrap .product_table{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .home-products-wrap .product_card{
    min-height:285px !important;
  }

  .home-products-wrap .product_pictures_box{
    max-height:none !important;
  }
}