/* ELVENSONG_PRODUCTS_MOBILE_1_0_0
   Мобильная вёрстка списка товаров (/admin/products).

   Проблема: в мобильной карточке товара название выводилось классом
   line-clamp-1 (одна строка + многоточие), поэтому длинные названия
   обрезались («Автомагнитола Teyes Lux One…») и разные модели выглядели
   одинаково.

   Решение: на телефоне показываем полное название — оно аккуратно
   переносится на несколько строк и выводится чуть меньшим кеглем.
   Оформление самой карточки (фото, строки Арт./Категория/Цена/Остаток,
   кнопки) не меняется — правится только заголовок.

   Область действия умышленно узкая: table.es-m-cards td.es-m-primary +
   [class*="line-clamp"]. Такие обрезанные названия есть только на странице
   товаров, поэтому остальные разделы админки не затрагиваются.
   На десктопе (>=768px) ничего не меняется. */

@media screen and (max-width: 767px) {
  /* Заголовок карточки: снимаем обрезку, переносим на несколько строк,
     делаем чуть компактнее. */
  html.es-admin-shell table.es-m-cards td.es-m-primary [class*="line-clamp"] {
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Ряд «фото + название»: название занимает всю оставшуюся ширину
     и не выдавливает фото за пределы карточки. */
  html.es-admin-shell table.es-m-cards td.es-m-primary > div:has(> [class*="line-clamp"]) {
    min-width: 0 !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-primary > div > [class*="line-clamp"] {
    flex: 1 1 auto !important;
  }
}