/* Atlas PPF — единая система карточек каталога (полировка, без редизайна).
   Применяется только к каталогам плёнок (Рулоны / В отрез). */

/* --- Заголовки карточек: обрезка длинных названий (max 2 строки + ellipsis) ---
   Текущие названия короткие (одна строка). Правила — предохранительные: если
   название станет длинным, overflow:hidden не даст ему разорвать карточку. */
#rec4117471401 .t396__elem[data-field-fontsize-value="24"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="24"] .tn-atom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* --- Кнопки CTA «КУПИТЬ ПЛЁНКУ»: стабильный hit-area и фокус --- */
#rec4117471401 .t396__elem[data-field-fontsize-value="14"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="14"] .tn-atom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
#rec4117471401 .t396__elem[data-field-fontsize-value="14"] .tn-atom:focus-visible,
#rec3999226901 .t396__elem[data-field-fontsize-value="14"] .tn-atom:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   Единая геометрия карточки (эталонная форма, без редизайна).
   Все карточки Рулоны/В отрез на одном брейкпоинте совпадают
   по линиям: низ media, title, price, specs, CTA, низ карточки.
   ============================================================ */

/* Title: стабильная высота 2 строк, чтобы цена/specs/CTA не
   «прыгали» между карточками с коротким и длинным названием. */
#rec4117471401 .t396__elem[data-field-fontsize-value="24"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="24"] .tn-atom {
  min-height: 52px;          /* 2 × line-height (26px) */
  line-height: 26px;
  height: auto;
}

/* Price: не сжимать, одна строка, акцентный цвет. */
#rec4117471401 .t396__elem[data-field-fontsize-value="20"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="20"] .tn-atom {
  white-space: nowrap;
  line-height: 22px;
}

/* Specs label: единый кегль/высота, серый. */
#rec4117471401 .t396__elem[data-field-fontsize-value="12"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="12"] .tn-atom {
  font-size: 12px;
  line-height: 13px;
  color: #7a7a7a;
}

/* Specs value: единый кегль/высота; длинное значение (материал)
   не раздувает карточку — clamp 2 строки. */
#rec4117471401 .t396__elem[data-field-fontsize-value="16"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="16"] .tn-atom {
  font-size: 16px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* CTA: фиксированная высота и горизонтальный отступ от specs. */
#rec4117471401 .t396__elem[data-field-fontsize-value="14"] .tn-atom,
#rec3999226901 .t396__elem[data-field-fontsize-value="14"] .tn-atom {
  min-height: 40px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
}

/* Мобильный/планшетный брейкпоинт: чуть меньший кегль title,
   чтобы 2 строки умещались в 52px и не толкали rows. */
@media screen and (max-width: 959px) {
  #rec4117471401 .t396__elem[data-field-fontsize-value="24"] .tn-atom,
  #rec3999226901 .t396__elem[data-field-fontsize-value="24"] .tn-atom {
    min-height: 52px;
    line-height: 26px;
  }
}