/* ЭМИНЕССА — страницы каталога: витрина разделов, раздел с таблицей, боковая колонка.

   Внутренние страницы держат ту же систему, что и главная — Manrope, графит, окалина,
   карточки на белом с границей #E4E8ED, — но живут по своей сетке. Главная показывает,
   раздел каталога работает: здесь всё подчинено таблице сортамента.

   Что изменено против шаблона:
   1. Боковое меню было чёрной плитой в 1100px и перетягивало страницу на себя.
      Стало светлой карточкой; вложенные разделы держит вертикальная линейка —
      тот же приём, что в блоке преимуществ на главной.
   2. В строке таблицы стояли радиокнопки: ими выбирали, в чём считать цену при
      добавлении в корзину. Корзины нет, кнопки вырезаны, а цены за метр и за тонну
      разведены по двум колонкам — их и сравнивают при закупке.
   3. Витрина /production/ вообще осталась без стилей: её рисовал компонент Битрикса,
      чей css в копию не попал. Собрана заново на плитках.
   4. Единственное тёмное пятно на странице — карточка с телефоном: заказ идёт звонком,
      и на восьмистах страницах каталога до неё должно быть видно.

   Кромку окалины трогаем только там, где она уже была, — под шапкой таблицы. */

/* ------------------------------------------------------------------ общая сетка */
.catalog-wrapper { grid-column-gap: 34px; }

/* ---------------------------------------------------- витрина разделов /production/ */
/* у компонента Битрикса свой css с float и шириной 20% — перебиваем его по всем свойствам,
   иначе плитки схлопываются в узкие полосы */
.bx_catalog_tile ul.bx_catalog_tile_ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bx_catalog_tile .bx_catalog_tile_ul li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 1px solid #E4E8ED;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.bx_catalog_tile .bx_catalog_tile_ul li a.bx_catalog_tile_img {
  display: block;
  margin: 0;
  width: auto;
  height: 150px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  border-bottom: 1px solid #E9EDF1;
  border-radius: 0;
}

.bx_catalog_tile .bx_catalog_tile_ul h2.bx_catalog_tile_title {
  margin: 0;
  padding: 14px 16px 16px;
  font-size: 15.5px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.bx_catalog_tile .bx_catalog_tile_ul h2.bx_catalog_tile_title a {
  display: block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 15.5px;
  color: #1E232A;
  text-decoration: none;
}

.bx_catalog_tile .bx_catalog_tile_ul li:hover {
  border-color: #B8321C;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px 0 rgba(16, 20, 30, .10);
}
.bx_catalog_tile .bx_catalog_tile_ul li:hover h2.bx_catalog_tile_title a { color: #B8321C; }
.bx_catalog_tile .bx_catalog_tile_ul li a:focus-visible { outline: 2px solid #B8321C; outline-offset: -2px; }

/* -------------------------------------------------------- боковое меню разделов */
.bx-sidebar-block .categories-left {
  background: #fff;
  border: 1px solid #E4E8ED;
  border-radius: 10px;
  padding: 12px 14px;
}

.bx-sidebar-block .categories-left ul a {
  color: #1E232A;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 19px;
}
.bx-sidebar-block .categories-left ul a:hover { color: #B8321C; }

.bx-sidebar-block .categories-left ul li { padding: 6px 0; }
.bx-sidebar-block .categories-left ul li.menu__first-item { padding-left: 12px; }

/* раскрытый раздел: подсвечен цинком, вложенные позиции держит вертикальная линейка */
.bx-sidebar-block .categories-left li.is-opened {
  background: #F5F7F9;
  border-radius: 8px;
  padding: 12px 0 8px;
  margin: 6px 0;
}
.bx-sidebar-block .categories-left ul.menu__second-level {
  margin: 4px 0 0 12px;
  padding-left: 12px;
  border-left: 1px solid #DDE3E9;
}
.bx-sidebar-block .categories-left ul li.menu__second-item { padding-left: 0; }
.bx-sidebar-block .categories-left ul li.menu__second-item a {
  font-size: 14px;
  font-weight: 500;
  color: #5C6773;
}
.bx-sidebar-block .categories-left ul li.menu__second-item a:hover { color: #B8321C; }

/* текущий раздел: окалина вместо серого, стрелку шаблона убираем */
.bx-sidebar-block .categories-left .menu__first-item.is-active:not(.active-child) > a,
.bx-sidebar-block .categories-left .menu__second-item.is-active > a {
  color: #B8321C;
  font-weight: 800;
}
.bx-sidebar-block .categories-left .menu__first-item.is-active:not(.active-child):before,
.bx-sidebar-block .categories-left .menu__second-item.is-active:before { display: none; }

/* ------------------------------------------------------- карточка «звоните» и прайс */
.cat-call {
  margin-bottom: 18px;
  padding: 20px 22px 22px;
  background: #1E232A;
  border-radius: 10px;
}

.cat-call-cap {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A94A0;
}

.cat-call-phone {
  display: inline-block;
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
}
.cat-call-phone:hover { color: #fff; text-decoration: none; }
.cat-call-phone:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cat-call p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 20px;
  color: #A7B0BB;
}

.bx-sidebar-block .category-download-price {
  margin-top: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #E4E8ED;
  border-radius: 10px;
  transition: border-color .16s ease;
}
.bx-sidebar-block .category-download-price:hover { border-color: #B8321C; }
.bx-sidebar-block .category-download-price .icon {
  width: 40px;
  height: 44px;
  margin-right: 16px;
  background-size: 20px auto;
}
.bx-sidebar-block .category-download-price a { color: #1E232A; font-size: 14.5px; }
.bx-sidebar-block .category-download-price .file-data { color: #8A94A0; opacity: 1; font-size: 12.5px; }

/* ---------------------------------------------------------- шапка раздела: фото и текст */
.category-header { grid-template-columns: 420px auto; grid-column-gap: 34px; margin-bottom: 32px; }
.category-header .category-image { height: 200px; }
.category-header .category-image img { border-radius: 10px; object-fit: cover; width: 100%; height: 200px; }
.category-header .small-description { font-size: 15px; line-height: 25px; color: #3C4551; }
.category-header .category-readmore { color: #B8321C; font-weight: 700; }

/* размерные метки над таблицей */
.catalog-body .category-tags {
  background: #fff;
  border: 1px solid #E4E8ED;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 26px;
}
.catalog-body .category-tags .title { font-size: 13.5px; font-weight: 700; color: #5C6773; }
.catalog-body .category-tags a,
.catalog-body .category-tags .category-item {
  border: 1px solid #E4E8ED;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1E232A;
  box-shadow: none;
  transition: border-color .15s ease, color .15s ease;
}
.catalog-body .category-tags a:hover,
.catalog-body .category-tags .category-item:hover { border-color: #B8321C; color: #B8321C; }

/* ------------------------------------------------------------ таблица сортамента
   Селекторы привязаны к .bx_catalog_list_home, а не к .catalog-body: та же таблица
   стоит на странице прайс-листа, где боковой колонки нет. */
.bx_catalog_list_home .category-subsection {
  background: #fff;
  border: 1px solid #E4E8ED;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 26px;
}

.bx_catalog_list_home .subsection-head,
.bx_catalog_list_home .subsection-body .bx_catalog_item,
.category-parent-98 .subsection-head,
.category-parent-98 .subsection-body .bx_catalog_item {
  grid-template-columns: minmax(0, 1fr) 120px 330px;
  align-items: center;
}

.bx_catalog_list_home .subsection-head {
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.bx_catalog_list_home .subsection-head div { padding: 14px 0; }
.bx_catalog_list_home .subsection-head .name { padding-left: 22px; }
/* подписи колонок тише названия раздела — оно здесь заголовок, а не ячейка */
.bx_catalog_list_home .subsection-head .size,
.bx_catalog_list_home .subsection-head .price {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A94A0;
}

.bx_catalog_list_home .subsection-body .bx_catalog_item {
  height: auto;
  min-height: 66px;
  padding: 10px 0;
  border-top: 1px solid #EEF1F4;
  transition: background-color .12s ease;
}
.bx_catalog_list_home .subsection-body .bx_catalog_item:hover { background: #FAFBFC; }

.bx_catalog_list_home .subsection-body .name { padding-left: 22px; }
/* карточек товара нет, названия остаются текстом.
   Шаблон раскладывал ячейку колонкой под ссылку — метке акции нужна строка */
.bx_catalog_list_home .subsection-body .name {
  display: block;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: #1E232A;
}
.bx_catalog_list_home .subsection-body .name a {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: #1E232A;
  text-decoration: none;
}
.bx_catalog_list_home .subsection-body .name a:hover { color: #B8321C; }

/* метка акции: словом, а не значком — как в блоке товаров на главной */
.bx_catalog_list_home .subsection-body .promo-icon {
  display: inline;
  width: auto;
  width: auto;
  height: auto;
  margin-left: 9px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #B8321C;
  vertical-align: 1px;
  cursor: default;
}
.bx_catalog_list_home .subsection-body .promo-icon:after { content: "акция"; }

.bx_catalog_list_home .subsection-body .size-value {
  font-size: 14.5px;
  font-weight: 700;
  color: #1E232A;
  font-variant-numeric: tabular-nums;
}

/* цена за метр и за тонну — две колонки, их и сравнивают при закупке */
.bx_catalog_list_home .subsection-body .price {
  display: flex;
  gap: 26px;
  padding-right: 22px;
}
.bx_catalog_list_home .subsection-body .price .price-meter,
.bx_catalog_list_home .subsection-body .price .price-tons,
.category-parent-98 .price .price-meter,
.category-parent-98 .price .price-tons {
  display: block;
  min-width: 132px;
  padding: 0;
  cursor: default;
}

.bx_catalog_list_home .subsection-body .old-price {
  display: block;
  height: auto;
  margin: 0;
  font-size: 12.5px;
  line-height: 16px;
  color: #98A1AC;
  font-variant-numeric: tabular-nums;
}
.bx_catalog_list_home .subsection-body .old-price span:after { background: #B8321C; opacity: .55; }

.bx_catalog_list_home .subsection-body .price-current {
  font-size: 16px;
  line-height: 21px;
  font-weight: 800;
  color: #8A94A0;
  font-variant-numeric: tabular-nums;
}
.bx_catalog_list_home .subsection-body .price-current span {
  color: #1E232A;
  font-size: 17px;
  letter-spacing: -.01em;
}

.catalog-body .category-description { font-size: 15px; line-height: 25px; color: #3C4551; }

@media only screen and (max-width: 1023px) {
  .bx_catalog_tile ul.bx_catalog_tile_ul { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 767px) {
  .bx_catalog_tile ul.bx_catalog_tile_ul { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bx_catalog_tile .bx_catalog_tile_ul li a.bx_catalog_tile_img { height: 110px; }
  .bx_catalog_tile .bx_catalog_tile_ul h2.bx_catalog_tile_title { padding: 11px 12px 13px; }
  .bx_catalog_tile .bx_catalog_tile_ul h2.bx_catalog_tile_title a { font-size: 14px; line-height: 18px; }

  .cat-call { display: none; }   /* телефон и так закреплён в мобильной шапке */

  /* строка становится в два яруса: сверху название, снизу размер и цена */
  .bx_catalog_list_home .subsection-head,
  .bx_catalog_list_home .subsection-body .bx_catalog_item,
  .category-parent-98 .subsection-head,
  .category-parent-98 .subsection-body .bx_catalog_item {
    grid-template-columns: 1fr auto;
  }
  .bx_catalog_list_home .subsection-head .size,
  .bx_catalog_list_home .subsection-head .price { display: none; }
  .bx_catalog_list_home .subsection-body .name { grid-column: 1 / -1; padding: 0 15px 8px; }
  .bx_catalog_list_home .subsection-body .size { padding-left: 15px; }
  .bx_catalog_list_home .subsection-body .price {
    justify-content: flex-end;
    gap: 18px;
    padding-right: 15px;
  }
  .bx_catalog_list_home .subsection-body .price .price-meter,
  .bx_catalog_list_home .subsection-body .price .price-tons,
  .category-parent-98 .price .price-meter,
  .category-parent-98 .price .price-tons { min-width: 0; text-align: right; }
  .bx_catalog_list_home .subsection-head .name { padding-left: 15px; }
  .catalog-body .category-header { grid-template-columns: 1fr; }
  .catalog-body .category-header .category-image img { height: 170px; }
}