/* =========================================================================
 * Wishlist page (/wishlist/) — layout, grid, and empty state.
 *
 * Loaded only on the wishlist page via dealer_wishlist_enqueue_assets().
 * The active-heart fill on cards lives in product-card.css (.is-active rule)
 * because it is owned by the card component, not by this page.
 *
 * Source of truth: docs/systems/WISHLIST-SYSTEM.md
 * ========================================================================= */

.dealer-wishlist-page .dealer-wishlist {
    width: 100%;
    margin: 0 auto;
    padding-block: 32px;
}

.dealer-wishlist-page .dealer-wishlist__header {
    margin-bottom: 28px;
    text-align: center;
}

.dealer-wishlist-page .dealer-wishlist__title {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
 * Grid — reuses .dealer-product-list--catalog (real grid at every breakpoint)
 * but overrides the desktop column count back to 6 (catalog uses 5).
 * Mobile (2) and tablet (3) come from the base .dealer-product-list vars.
 * ------------------------------------------------------------------------- */

.dealer-wishlist-page .dealer-wishlist__grid {
    margin: 0;
}

@media (min-width: 1024px) {
    .dealer-wishlist-page .dealer-product-list--catalog.dealer-product-list__items {
        --product-list-visible-desktop: 6;
        grid-template-columns: repeat(var(--product-list-visible-desktop), minmax(0, 1fr));
    }
}

/* -------------------------------------------------------------------------
 * Empty state — centered stack with CTA to the catalog.
 * ------------------------------------------------------------------------- */

.dealer-wishlist-page .dealer-wishlist__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 16px;
    text-align: center;
}

.dealer-wishlist-page .dealer-wishlist__empty-title {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

.dealer-wishlist-page .dealer-wishlist__empty-text {
    margin: 0;
    max-width: 480px;
    color: var(--color-black);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    line-height: 1.5;
}

.dealer-wishlist-page .dealer-wishlist__empty-cta {
    margin-top: 8px;
    min-width: 220px;
}

/* -------------------------------------------------------------------------
 * Strip Storefront chrome that fights the centered layout — Storefront's
 * page article keeps a default left-aligned heading we replaced with the
 * removed storefront_page_header. Make sure no leftover article margins
 * push the content off-center.
 * ------------------------------------------------------------------------- */

.dealer-wishlist-page article.page {
    border: 0;
    padding: 0;
}

.dealer-wishlist-page .entry-content {
    margin: 0;
}