/* Раздел-серия — «витрина серии» (реестр п. 34, page_blocks/series_head.php, list_elements_1.php).
   Только раскладка, отступы и переключение табов. Вид (рамка, скругление, характеристики, цвета статусов,
   кнопки, значки файлов, табы) — классами темы. */

/* Строка-ориентир на посадочной внутри серии: «Подборка в серии «…» · Все товары серии» */
.series-landing-note {
  margin: -8px 0 14px;
}
.series-head__link {
  border-bottom: 1px dashed currentColor;
}

/* Шапка: фото | характеристики и описание | карточка с ценой и материалами */
.series-head {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 0 0 28px;
}
.series-head__pic {
  flex: 0 0 300px;
  height: 300px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.series-head__pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.series-head__main {
  flex: 1 1 320px;
  min-width: 0;
}
.series-head__props-title {
  margin: 0 0 12px;
}
.series-head .properties__item + .properties__item {
  margin-top: 8px;
}
.series-head__text {
  margin: 18px 0 0;
  line-height: 1.6;
}
.series-head__main > .series-head__text:first-child {
  margin-top: 0;
}
.series-head__text > :last-child {
  margin-bottom: 0;
}

/* Карточка справа */
.series-head__side {
  flex: 0 0 300px;
  padding: 24px;
}
/* Нет характеристик и описания — карточка занимает всё место и раскладывается в строку:
   цена и наличие слева, материалы справа (иначе узкая карточка прижималась к левому краю) */
.series-head--no-main .series-head__side {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
}
.series-head--no-main .series-head__offer {
  flex: 0 1 360px;
}
/* …а если и материалов нет — одна строка: «Цена по запросу · ● Под заказ … [Запросить цену]» */
.series-head--no-main.series-head--no-res .series-head__offer {
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.series-head--no-main.series-head--no-res .series-head__stock,
.series-head--no-main.series-head--no-res .series-head__ask {
  margin: 0;
  width: auto;
}
.series-head--no-main .series-head__res {
  flex: 0 1 300px;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.series-head__offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.series-head__price {
  line-height: 1.2;
}
.series-head__stock {
  margin: 4px 0 0;
}
.series-head__ask {
  margin: 12px 0 0;
  width: 100%;
}

/* Кнопки материалов — столбиком на всю ширину карточки */
.series-head__res {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--stroke_black, #ececec);
}
.series-res {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.series-res__label {
  flex: 1;
  min-width: 0;
}
/* счётчик «2» в кнопке серым; при наведении кнопка темы заливается цветом — счётчик в цвет текста кнопки */
.series-res:hover .series-res__label .color_999,
.series-res:focus .series-res__label .color_999 {
  color: inherit !important;
  opacity: .75;
}
.series-res__icon,
.series-res__svg {
  display: inline-flex;
  flex-shrink: 0;
}
/* у кнопок темы svg заливается цветом текста — значкам ссылок нужен только контур */
.series-res__svg svg,
.series-res__svg svg * {
  fill: none !important;
  stroke: currentColor;
}
.series-res-dd {
  position: relative;
  width: 100%;
}
.series-res-dd > summary {
  list-style: none;
  cursor: pointer;
}
.series-res-dd > summary::-webkit-details-marker {
  display: none;
}
.series-res-dd__menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, 90vw);
  padding: 6px 0;
  background: var(--card_bg_black, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.series-res-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}
.series-res-dd__name {
  flex: 1;
  min-width: 0;
}

/* Табы «Товары / Подробное описание» — во всю ширину под шапкой.
   В табе описания скрыты содержимое левой колонки (меню, фильтр), сортировка и список. */
.series-tabs {
  margin: 0 0 24px;
}
.series-desc-pane {
  display: none;
}
.series-desc-pane--open,
body.series-tab-desc .series-desc-pane {
  display: block;
}
/* левая колонка (меню, фильтр) в табе описания пустеет, но ширину держит — описание обычной ширины, как текст
   в разделе, а не во весь экран (решение заказчика 10.10) */
body.series-tab-desc .main-wrapper > .left_block,
body.series-tab-desc .main-wrapper > .left_block * {
  /* !important и без анимации: у элементов фильтра (галочки) своя visibility и плавные переходы темы —
     без этого раскрытые значения фильтра на долю секунды оставались видны */
  visibility: hidden !important;
  transition: none !important;
}
/* текст посадочной (под списком) относится к её товарам — в табе описания серии его не показываем */
body.series-tab-desc .inner_wrapper > .group_description_block:not(.series-desc-pane),
body.series-tab-desc .products-heading-block,
body.series-tab-desc .selections-content-block,
body.series-tab-desc .js_wrapper_items .filter-panel,
body.series-tab-desc .js_wrapper_items .ajax_load {
  display: none;
}
body.series-tab-desc .series-desc-pane {
  padding-top: 0;
}
/* Описание серии: широкие таблицы (схемы обозначения, техданные) — с прокруткой вбок, а не за край экрана;
   картинки — не шире колонки */
.series-desc-pane table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.series-desc-pane img {
  max-width: 100%;
  height: auto;
}

/* Прайс серии с колонками характеристик (вид «прайсом», «По колонкам»): у темы блок цены и кнопок — 500 px,
   колонка — 160 px; рядом с фильтром даже две колонки не помещались и «В корзину» уходила за правый край.
   series.css подключается только на страницах серий — обычные разделы не задевает. */
@media (min-width: 992px) {
  .table-props-rows.table-props-cols .catalog-table__info-bottom {
    flex: 0 0 400px;
    width: 400px;
  }
  .table-props-cols .catalog-table__item-wrapper.props {
    width: 120px;
  }
}

@media (max-width: 1199px) {
  .series-head {
    flex-wrap: wrap;
  }
  .series-head__main {
    flex-basis: calc(100% - 332px);
  }
  .series-head__side,
  .series-head--no-main .series-head__side {
    flex: 1 1 100%;
  }
  .series-head__res {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .series-res,
  .series-res-dd,
  .series-head__ask {
    width: auto;
  }
}
@media (max-width: 767px) {
  .series-head {
    gap: 16px;
  }
  .series-head__pic {
    flex: 1 1 100%;
    height: 200px;
  }
  /* характеристики на смартфоне — одной фразой «название — значение», которая переносится как обычный текст
     (мобильная тема ставит название, тире и значение в три строки; колонки ломались на длинных названиях) */
  .series-head .properties__item {
    display: block;
  }
  .series-head .properties__item .properties__item--inline {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .series-head .properties__hr {
    margin: 0 4px;
  }
  /* выпадающие списки материалов на смартфоне раскрываются на месте, под кнопкой, во всю ширину карточки —
     плавающее окно уходило за края экрана */
  .series-head__res {
    flex-direction: column;
  }
  .series-head__res .series-res,
  .series-res-dd,
  .series-res-dd > summary {
    width: 100%;
  }
  .series-res-dd__menu {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 6px 0 0;
    box-shadow: none;
  }
  .series-res-dd__item {
    padding: 8px 12px;
  }
  .series-head__main {
    flex-basis: 100%;
  }
  .series-head__side {
    padding: 16px;
  }
}

/* ======================================================================
   Список серий на странице раздела (реестр п. 37, page_blocks/series_list.php) — колонка справа от фильтра.
   Строка — сетка: картинка | код | суть | бренды | товаров | цена | наличие; на смартфоне — картинка слева,
   справа код, суть и строка «товаров · цена · наличие».
   ====================================================================== */
.series-list {
  margin: 0 0 32px;
}
.series-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 16px;
}
/* заголовок со счётчиком — разметка и вид заголовка «Товары» (products-heading), только без его отступа снизу */
.series-list__title.products-heading {
  margin: 0;
}
.series-list__find {
  flex: 0 1 260px;
}
/* поле поиска — компактное: у темы form-control высотой 48 px и крупным шрифтом */
.series-list__input.form-control {
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}
.series-list__input.form-control::placeholder {
  font-size: 13px;
}
.series-list__table {
  overflow: hidden;
}
.series-list__row {
  display: grid;
  grid-template-columns: 48px minmax(80px, 0.8fr) minmax(0, 2fr) minmax(0, 1fr) 112px 120px 112px;
  align-items: center;
  gap: 0 16px;
  padding: 10px 16px;
  text-decoration: none;
}
.series-list__row + .series-list__row {
  border-top: 1px solid var(--stroke_black, #ececec);
}
a.series-list__row:hover {
  background: var(--darkerblack_bg_black, #f8f8f8);
}
.series-list__row--th {
  padding-top: 8px;
  padding-bottom: 8px;
}
.series-list__meta {
  display: contents;
}
.series-list__pic {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* миниатюра открывается во весь экран: курсор-лупа и значок «увеличить» при наведении (как на странице «О компании») */
.series-list__pic[data-series-zoom] {
  cursor: zoom-in;
}
.series-list__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  color: var(--theme-base-color, #e73636);
  fill: currentColor;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.series-list__zoom svg {
  width: 14px;
  height: 14px;
}
.series-list__pic:hover .series-list__zoom {
  opacity: 1;
}
/* на сенсорных экранах увеличения нет (нажатие открывает серию) — значок и курсор не нужны */
@media (hover: none) {
  .series-list__zoom {
    display: none;
  }
  .series-list__pic[data-series-zoom] {
    cursor: pointer;
  }
}
.series-list__pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.series-list__code {
  overflow-wrap: anywhere;
  /* в мобильной теме у font-bold другой вес — код серии должен выделяться и там */
  font-weight: 600;
}.series-list__num {
  text-align: right;
  white-space: nowrap;
}
.series-list__stock {
  white-space: nowrap;
}
/* серия без подходящих под фильтр товаров — серая, но кликабельная (как были плитки, п. 5.5) */
.series-list__row--off {
  opacity: 0.45;
  filter: grayscale(1);
}
.series-list__row--off:hover {
  opacity: 0.7;
}
/* «Показать все»: сначала 10 строк; при поиске видны все совпадения */
.series-list:not(.series-list--all):not(.series-list--search) .series-list__row--over,
.series-list__row--miss {
  display: none;
}
/* «Показать ещё N серий» — последняя строка таблицы: текст цветом темы по центру, стрелка вниз (раскрыто — вверх) */
.series-list__row.series-list__more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  color: var(--theme-base-color, #e73636);
  font-family: inherit;
  cursor: pointer;
}
.series-list__row.series-list__more:hover {
  background: var(--darkerblack_bg_black, #f8f8f8);
}
.series-list__more-arrow {
  transition: transform .15s;
}
.series-list--all .series-list__more-arrow {
  transform: rotate(180deg);
}
.series-list--search .series-list__more {
  display: none !important;
}
.series-list--all .series-list__more-show,
.series-list:not(.series-list--all) .series-list__more-hide {
  display: none;
}
.series-list__nothing {
  padding: 16px 0 0;
}
@media (max-width: 1199px) {
  .series-list__row {
    grid-template-columns: 48px minmax(70px, 0.8fr) minmax(0, 2fr) 100px 110px 104px;
  }
  /* бренды — на средних экранах прячем: им не хватает места */
  .series-list__brands,
  .series-list__row--th > span:nth-child(4) {
    display: none;
  }
}
@media (max-width: 767px) {
  .series-list__find {
    flex-basis: 100%;
  }
  .series-list__row--th {
    display: none;
  }
  .series-list__row,
  .series-list__row + .series-list__row {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "pic code" "pic desc" "pic meta";
    align-items: start;
    gap: 2px 12px;
    padding: 12px;
  }
  .series-list__row--th + .series-list__row {
    border-top: 0;
  }
  .series-list__pic { grid-area: pic; }
  .series-list__code { grid-area: code; }
  .series-list__desc { grid-area: desc; }
  .series-list__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    margin-top: 4px;
  }
  .series-list__brands {
    display: block;
    flex-basis: 100%;
  }
  .series-list__brands:empty {
    display: none;
  }
  .series-list__num {
    text-align: left;
  }
}
@media (max-width: 767px) {
  /* строка «Показать ещё» — не по сетке строк серий */
  .series-list__row.series-list__more {
    align-items: center;
    gap: 8px;
  }
}

/* Длинные названия серий (11.10.2026): код и описание — в одной колонке «Серия», код сверху, описание под ним серым;
   код — до 2 строк, описание — до 2 строк, дальше «…» (полный текст — в подсказке при наведении и на странице серии).
   Описанию достаётся ширина обеих прежних колонок — строки списка низкие (на экране 1024 px — 84 px вместо 141),
   до товаров не надо долго листать. Смартфон — как был (код, описание, строка «товаров · цена · наличие»). */
.series-list__code,
.series-list__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 768px) {
  .series-list__row:not(.series-list__more) {
    grid-template-columns: 48px minmax(0, 2.8fr) minmax(0, 1fr) 112px 120px 112px;
    grid-template-areas: "pic code brands count price stock" "pic desc brands count price stock";
    row-gap: 2px;
  }
  .series-list__row.series-list__row--th {
    grid-template-areas: "pic code brands count price stock";
  }
  .series-list__row--th > span:nth-child(1) { grid-area: pic; }
  .series-list__row--th > span:nth-child(2) { grid-area: code; }
  .series-list__row--th > span:nth-child(3) { display: none; }
  .series-list__row--th > span:nth-child(4) { grid-area: brands; }
  .series-list__row--th > span:nth-child(5) { grid-area: count; }
  .series-list__row--th > span:nth-child(6) { grid-area: price; }
  .series-list__row--th > span:nth-child(7) { grid-area: stock; }
  .series-list__pic { grid-area: pic; }
  .series-list__code { grid-area: code; align-self: end; }
  .series-list__desc { grid-area: desc; align-self: start; }
  .series-list__brands { grid-area: brands; }
  .series-list__count { grid-area: count; }
  .series-list__price { grid-area: price; }
  .series-list__stock { grid-area: stock; }
}
/* средние экраны — без колонки «Бренды» (как и раньше) */
@media (min-width: 768px) and (max-width: 1199px) {
  .series-list__row:not(.series-list__more) {
    grid-template-columns: 48px minmax(0, 1fr) 100px 110px 104px;
    grid-template-areas: "pic code count price stock" "pic desc count price stock";
  }
  .series-list__row.series-list__row--th {
    grid-template-areas: "pic code count price stock";
  }
}

/* Смартфон (12.10.2026): код и описание серии — одной строкой «ВЕ6 · Гидрораспределители…» (разделитель — как у строки серий
   в меню «Каталог»), вместе не больше 2 строк, дальше «…». На компьютере обёртка не видна — код над описанием, как выше. */
.series-list__name {
  display: contents;
}
.series-list__sep {
  display: none;
}
@media (max-width: 767px) {
  .series-list__row,
  .series-list__row + .series-list__row {
    grid-template-areas: "pic name" "pic meta";
  }
  .series-list__name {
    grid-area: name;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .series-list__name .series-list__code,
  .series-list__name .series-list__desc {
    display: inline;
    overflow: visible;
  }
  .series-list__sep {
    display: inline;
    margin: 0 6px;
  }
}

/* Длинный список серий (бэклог п. 28, 13.10.2026): кнопки брендов над списком (применяют фильтр по бренду),
   «Показать ещё 20» порциями, полоса «Показано N из M · Свернуть список · К товарам» прилипает к низу экрана, пока
   список раскрыт (на смартфоне — над панелью иконок, отступ ставит скрипт). Вид кнопок — «чипы» темы (chip). */
.series-list__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 16px;
}
/* у chip темы display:flex — атрибут hidden сам по себе его не прячет */
.series-list__chips[hidden],
.series-list__chip[hidden] {
  display: none !important;
}
.series-list__chip.active {
  border-color: var(--theme-base-color, #e73636);
}
.series-list__chip-n {
  margin-left: 2px;
  opacity: .55;
}
.series-list__chip[disabled] {
  opacity: .45;
  cursor: default;
}
/* брендов больше, чем помещается в строку (компьютер): лишние — по «Ещё N» (какие — решает скрипт по ширине; выбранный
   виден всегда). На смартфоне — все бренды лентой, «Ещё» не нужна */
.series-list__chips-more[hidden] {
  display: none !important;
}
.series-list__chips:not(.series-list__chips--all) .series-list__chip--extra {
  display: none;
}
@media (max-width: 767px) {
  .series-list__chips-more {
    display: none !important;
  }
}
.series-list__bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 10px 16px;
  background: var(--card_bg_black, #fff);
  border: 1px solid var(--stroke_black, #ececec);
  border-radius: var(--border-radius, 8px);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
}
.series-list--open:not(.series-list--search) .series-list__bar {
  display: flex;
}
/* 14.10 (замечание заказчика: полоса выглядела отдельной плашкой) — она продолжение таблицы серий: вплотную под ней,
   та же рамка, у таблицы снизу нет скругления; над строками при прокрутке — лёгкая тень сверху. */
.series-list--open:not(.series-list--search) .series-list__table {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.series-list--open .series-list__bar {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, .05);
}
/* список раскрыт целиком — строка «Свернуть» в таблице не нужна: прямо под ней полоса со «Свернуть список» */
.series-list--open.series-list--all:not(.series-list--search) .series-list__row.series-list__more {
  display: none;
}
/* над панелью иконок темы (смартфон): её высота = иконки + env(safe-area-inset-bottom, 22px) — то же правило здесь,
   чтобы на iPhone полоса двигалась вместе с панелью (series_list.php ставит --taurus-panel-h) */
.series-list--panel .series-list__bar {
  bottom: calc(var(--taurus-panel-h, 61px) + env(safe-area-inset-bottom, 22px));
}
.series-list__bar-btn {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--theme-base-color, #e73636);
  font: inherit;
  cursor: pointer;
}
.series-list__bar-btn:hover {
  opacity: .8;
}
@media (max-width: 767px) {
  /* кнопки брендов на смартфоне — лента, которая листается пальцем вбок */
  .series-list__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .series-list__chips::-webkit-scrollbar {
    display: none;
  }
  .series-list__chip {
    flex: none;
  }
  .series-list__bar {
    padding: 10px 12px;
  }
  .series-list__bar-info {
    flex-basis: 100%;
  }
}

/* Сортировка списка серий по колонкам (бэклог п. 30, 14.10.2026): заголовок — кнопка, у выбранной колонки — стрелка
   цветом темы. Только на компьютере: на смартфоне заголовков колонок нет. */
.series-list__sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.series-list__sort:hover,
.series-list__sort--on {
  color: var(--white_text_black, #222);
}
.series-list__sort-arrow {
  display: inline-block;
  margin-left: 3px;
  color: var(--theme-base-color, #e73636);
  font-size: 10px;
}
.series-list__sort-arrow:empty {
  display: none;
}
/* ряд выбранных фильтров над сериями (filter_result_top) — во вкладке «Подробное описание» серии не нужен */
body.series-tab-desc .subsections-content-block .filter-result-info {
  display: none;
}
/* Поиск серии: крестик очистки — значок темы (как у поиска в шапке), виден, пока в поле что-то введено (series_list.php).
   Браузерный крестик поля type="search" (свой вид, только при наведении) скрыт — замечание заказчика 14.10. */
.series-list__find {
  position: relative;
}
.series-list__input.form-control {
  padding-right: 40px;
}
.series-list__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.series-list__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* поле нажатия больше самого крестика — легко попасть (замечание заказчика 14.10) */
  width: 36px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.series-list__clear[hidden] {
  display: none;
}

/* 14.10.2026 (решение заказчика): на компьютере строка серии — как на смартфоне: «КОД · описание» одним текстом, не больше
   2 строк (раньше код — отдельной строкой над описанием, до 3 строк) — строки ниже, до товаров ближе. Колонки «Товаров»,
   «Цена», «Наличие» — уже (было 112/120/112 px, стало 84/96/84 — по ширине самого длинного текста, замер 14.10), место —
   колонке «Серия». «Наличие» — по правому краю, как числа (решение заказчика). «Товаров» под фильтром («24 из 24 товаров»)
   переносится на 2 строки — строка серии всё равно двухстрочная. Тот же вид — и на странице поиска (series_row.php общий). */
@media (min-width: 768px) {
  .series-list__row:not(.series-list__more) {
    grid-template-columns: 48px minmax(0, 2.8fr) minmax(0, 1fr) 84px 96px 84px;
    grid-template-areas: "pic name brands count price stock";
    row-gap: 0;
  }
  .series-list__count {
    white-space: normal;
  }
  .series-list__stock,
  .series-list__row--th > span:nth-child(7) {
    text-align: right;
  }
  .series-list__row.series-list__row--th {
    grid-template-areas: "pic name brands count price stock";
  }
  .series-list__row--th > span:nth-child(2) {
    grid-area: name;
  }
  .series-list__name {
    grid-area: name;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .series-list__name .series-list__code,
  .series-list__name .series-list__desc {
    display: inline;
    overflow: visible;
  }
  .series-list__sep {
    display: inline;
    margin: 0 6px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .series-list__row:not(.series-list__more) {
    grid-template-columns: 48px minmax(0, 1fr) 84px 96px 84px;
    grid-template-areas: "pic name count price stock";
  }
  .series-list__row.series-list__row--th {
    grid-template-areas: "pic name count price stock";
  }
}