.inner-header__favorite-count[hidden],
.favorites__clear[hidden],
.favorites__loading[hidden],
.favorites__empty[hidden],
.favorites__error[hidden] {
    display: none !important;
}

.inner-header__favorites {
    position: relative;
}

.inner-header__favorite-count {
    position: absolute;
    z-index: 2;
    top: -7px;
    right: -9px;
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #7181be;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.favorites-directory {
    min-height: 65vh;
    padding: 0 0 90px;
}

.favorites__loading,
.favorites__error {
    padding: 44px 0;
    color: #44606c;
    font-size: 15px;
}

.favorites__error {
    color: #9b2f2f;
}

.favorites[aria-busy="true"] .favorites__list {
    opacity: 0.55;
    pointer-events: none;
}

.favorites__empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
}

[data-favorite-toggle] {
    touch-action: manipulation;
}

[data-favorite-toggle]:focus-visible,
.inner-header__favorites:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .favorites-directory {
        padding-bottom: 60px;
    }
}

/* Typography follows the main Figma system. */
.favorites-directory,
.favorites-directory button,
.favorites-directory input,
.inner-header__favorites {
  font-family: "Montserrat", Arial, sans-serif;
}

.inner-header__favorite-count {
  font-family: "Cormorant", "PT Serif", Georgia, "Times New Roman", serif;
}