.favorites-page-shell {
    width: 100%;
    gap: var(--space-28);
    padding: var(--space-28) 0 var(--space-50);
}

.favorites-page-shell [hidden] {
    display: none !important;
}

.favorites-page-head {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-18);
    padding-bottom: var(--space-18);
    border-bottom: var(--border-thin) solid rgba(24,30,45,0.08);
}

.favorites-page-kicker {
    margin: 0 0 var(--space-6);
    color: var(--main-theme-color);
    letter-spacing: 0;
    text-transform: uppercase;
}

.favorites-page-head h1 {
    margin: 0;
    font: 600 clamp(34px, 5vw, 56px)/1.05 var(--main-font);
    letter-spacing: 0;
    color: #111111;
}

.favorites-page-head p:not(.favorites-page-kicker) {
    max-width: 720px;
    margin: var(--space-10) 0 0;
    color: #5e5b66;
}

.favorites-page-catalog-link,
.favorites-page-primary-link {
    flex: 0 0 auto;
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-18);
    border-radius: var(--main-border-radius);
    background: var(--main-theme-color);
    color: #ffffff;
    font: 700 var(--main-font-size-1)/1 var(--main-font);
    text-decoration: none;
}

.favorites-page-status,
.favorites-page-empty {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.favorites-page-status {
    gap: var(--space-10);
    color: #5e5b66;
    font: 600 var(--main-font-size-1)/1.4 var(--main-font);
}

.favorites-page-loader {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255,16,138,0.16);
    border-top-color: var(--main-theme-color);
    animation: favorites-page-spin 0.8s linear infinite;
}

.favorites-page-empty {
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-38) var(--space-18);
    border: var(--border-thin) solid rgba(24,30,45,0.08);
    border-radius: var(--main-border-radius);
    background: #fbfbfd;
}

.favorites-page-empty-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: #ff108a12;
    color: var(--main-theme-color);
}

.favorites-page-empty h2 {
    margin: 0;
    font: 600 var(--font-size-28)/1.15 var(--main-font);
}

.favorites-page-empty p {
    max-width: 430px;
    margin: 0;
    color: #5e5b66;
    font: 500 var(--font-size-16)/1.45 var(--main-font);
}

.favorites-page-results {
    width: 100%;
}

.favorites-page-count {
    margin-bottom: var(--space-16);
    color: #6a6672;
    font: 500 var(--font-size-14)/1.2 var(--main-font);
}

.favorites-results-grid {
    width: 100%;
}

@keyframes favorites-page-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .favorites-page-shell {
        padding-top: var(--space-18);
        gap: var(--space-20);
    }

    .favorites-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .favorites-page-head h1 {
        font-size: 36px;
    }

    .favorites-page-head p:not(.favorites-page-kicker) {
        font-size: var(--font-size-16);
    }

    .favorites-page-catalog-link,
    .favorites-page-primary-link {
        width: 100%;
    }
}