/* ========================================================================
   ИДЕАЛЬНЫЕ ЗАГОЛОВКИ В КАРТОЧКАХ КАТАЛОГА (/catalog)
   ======================================================================== */

/* 1. Делаем саму карточку гибкой, чтобы она тянулась на 100% высоты колонки */
.catalog .items .item .item-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* 2. Выстраиваем заголовок и артикул строго в одну линию */
.catalog .items .item .item-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 15px 0 10px 0;
    flex-grow: 1; /* Выталкивает цену и иконки вниз */
    gap: 15px; /* Безопасный отступ между названием и артикулом */
}

/* 3. Настраиваем левую часть (Сам заголовок) */
.catalog .items .item .item-title .title {
    font-family: 'Rubik', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #222222;
    line-height: 1.3;
    margin: 0;
    transition: color 0.3s ease; /* Плавная смена цвета */
}

/* 4. Настраиваем правую часть (Артикул / ID объекта) */
.catalog .items .item .item-title .object-id {
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    color: #888888;
    white-space: nowrap; /* Категорически запрещаем перенос на новую строку */
    flex-shrink: 0; /* Запрещаем артикулу сжиматься */
    margin-top: 2px;
}

/* 5. МАГИЯ НАВЕДЕНИЯ: Делаем текст золотым при наведении на карточку */
.catalog .items .item .item-link:hover .item-title .title {
    color: #D0B483; /* Золотой цвет из твоей фирменной палитры */
}