/* ==========================================================================
   TSVETOMANIA — переопределение стилей счётчика «Избранное» в хедере
   Путь: /local/templates/main/components/intensa.favorite/counter/.default/style.css

   Цвета брендбука: основной #A11826, акцент #F13A5F
   Шрифт: Tilda Sans (основной)

   Сохранены имена классов .intensa-favorite-counter и .intensa-favorite-icon —
   совместимы с JS модуля Intensa и с возможными правилами header.css.
   ========================================================================== */

.intensa-favorite-counter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
}

.intensa-favorite-counter:hover,
.intensa-favorite-counter:focus-visible {
    text-decoration: none;
    color: #A11826;
    outline: none;
}

/* Обёртка для SVG — нужна для позиционирования бейджа-счётчика */
.intensa-favorite-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

/* Сама иконка сердца */
.intensa-favorite-icon {
    width: 26px;
    height: 24px;
    display: block;
    transition: transform .2s ease;
}

.intensa-favorite-icon path {
    transition: fill .2s ease, stroke .2s ease;
}

/* На hover сердце заполняется акцентом */
.intensa-favorite-counter:hover .intensa-favorite-icon path {
    fill: #A11826;
}

.intensa-favorite-counter:active .intensa-favorite-icon {
    transform: scale(0.92);
}

/* Подпись «Избранное» */
.intensa-favorite-title {
    font-family: 'Tilda Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #1A1A1A;
    white-space: nowrap;
    transition: color .2s ease;
}

.intensa-favorite-counter:hover .intensa-favorite-title {
    color: #A11826;
}

/* Бейдж счётчика — в правом верхнем углу иконки */
.intensa-favorite-counter .intensa-favorite-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #A11826;
    color: #fff;
    font-family: 'Tilda Sans', -apple-system, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    border: 2px solid #fff;
    box-sizing: border-box;
    letter-spacing: -0.02em;
    /* сбрасываем left/top/background-color из прежнего style.css,
       чтобы старые правила не конкурировали */
    left: auto;
}

/* Скрываем бейдж при count = 0 */
.intensa-favorite-counter .intensa-favorite-badge.is-empty {
    display: none;
}

/* Скрываем подпись на планшетах и мобильных — как было в старом шаблоне */
@media (max-width: 1250px) {
    .intensa-favorite-title {
        display: none;
    }
}

/* На маленьких экранах немного уменьшаем иконку */
@media (max-width: 768px) {
    .intensa-favorite-icon-wrap {
        width: 26px;
        height: 26px;
    }
    .intensa-favorite-icon {
        width: 24px;
        height: 22px;
    }
    .intensa-favorite-counter .intensa-favorite-badge {
        top: -5px;
        right: -7px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding-right: 1px;
    }
}