/* Wishlist — the header button, the heart wherever a product is shown, and
   the page listing what was marked. The heart is hidden until the browser
   knows a customer is signed in: the catalog and product pages are cached
   one blob per page, so the markup cannot know who is looking. */

/* ── Header button ──────────────────────────────────────────── */

.favorites-button {
    position: relative;
}

.favorites-button__badge {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.125rem;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.favorites-button__badge.is-empty {
    display: none;
}

/* Desktop only, like the account button — the drawer carries it below 1024px. */
@media (max-width: 1023px) {
    .favorites-button {
        display: none;
    }
}

/* ── The heart itself ───────────────────────────────────────── */

.favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.favorite-btn__icon {
    width: 100%;
    height: 100%;
}

.favorite-btn.is-active .favorite-btn__icon {
    fill: currentColor;
}

/* On a card: over the image, opposite the category chip. */
.favorite-btn--card {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.4375rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.8);
    color: rgba(13, 12, 10, 0.4);
    box-shadow: 0 1px 2px rgba(13, 12, 10, 0.08);
}

.favorite-btn--card:hover {
    background: #fff;
    color: var(--accent);
}

.favorite-btn--card.is-active {
    background: var(--accent);
    color: #fff;
}

/* On the product page: between the quantity stepper and the buy button, the
   same height as both. 8px corners rather than the design's 12px, matching
   every other button here. */
.favorite-btn--detail {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 0.8125rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--muted);
}

.favorite-btn--detail:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.favorite-btn--detail.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── The page ───────────────────────────────────────────────── */

.favorites-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.favorites-page__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
}

.favorites-page__count {
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
}

.favorites-page__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.favorites-page__continue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
}

.favorites-page__continue:hover {
    border-color: var(--ink);
    text-decoration: none;
}

.favorites-page__continue svg {
    width: 1rem;
    height: 1rem;
}

.favorites-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .favorites-page__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The wishlist sits in the account shell now, beside its 220px menu, so it
   gains its fourth column at the same width the catalog does beside its own
   sidebar, not earlier. */
@media (min-width: 1280px) {
    .favorites-page__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.favorites-page__prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.favorites-page__prompt-title {
    margin: 0 0 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.favorites-page__prompt-text {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.favorites-page__prompt-link {
    flex-shrink: 0;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--ink);
    color: var(--paper);
    font-size: 0.875rem;
    font-weight: 600;
}

.favorites-page__prompt-link:hover {
    background: rgba(13, 12, 10, 0.8);
    text-decoration: none;
}

/* ── Empty state ────────────────────────────────────────────── */

.favorites-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 0;
    text-align: center;
}

.favorites-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--muted);
}

.favorites-page__empty-icon svg {
    width: 2.25rem;
    height: 2.25rem;
}

.favorites-page__empty-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink);
}

.favorites-page__empty-text {
    max-width: 20rem;
    margin: 0 0 1.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
}

.favorites-page__empty-cta {
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.favorites-page__empty-cta:hover {
    background: var(--accent-dark);
    text-decoration: none;
}