/* Component: WishlistPage --------------------------------------------------
   Objects of Desire borrows the catalogue wholesale — ProductGrid draws the
   columns, ProductCard draws the objects. Only the three things the catalogue
   has no equivalent of live here: the count line, the holding state while the
   list is being read, and the foot of the wishlist card. */
@layer components {

  .tp-wishlist__count {
    min-height: 1em;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-chip);
    text-transform: uppercase;
    color: var(--tp-color-text-muted);
  }

  .tp-wishlist__count:empty {
    /* Still reserves its line, so the grid does not jump when a count lands. */
    visibility: hidden;
  }

  /* ---- Holding ---------------------------------------------------------
     A guest's list is in their browser, so the page cannot know it until the
     client speaks. Showing "nothing kept" in that gap would be a lie, so the
     page says what it is doing instead and neither state flashes. */
  .tp-wishlist__pending {
    margin-top: var(--tp-space-8);
    font-size: var(--tp-size-body-s);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-text-muted);
  }

  .tp-wishlist.is-settled .tp-wishlist__pending,
  .tp-wishlist.is-pending .tp-wishlist__empty {
    display: none;
  }

  /* Phase 9 — the page reserves its room once, and keeps it.
     The list is not known at render time, so the page would otherwise settle
     at the height of one line and then jump when the answer arrives. The
     reservation belongs to BOTH states, not to the holding state: releasing it
     on settle was itself a shift — the same jump, upwards. Held on the block
     that changes, so the footer below it never moves. */
  .tp-wishlist__grid {
    min-height: 60vh;
  }

  .tp-wishlist__empty[hidden] {
    display: none;
  }

  /* Without scripting there is no client to wait for, so the holding line
     would never resolve. The <noscript> block speaks instead. */
  html:not(.tp-js) .tp-wishlist__pending,
  html:not(.tp-js) .tp-wishlist.is-pending .tp-wishlist__empty {
    display: none;
  }

  /* ---- The kept card's foot --------------------------------------------
     The control itself is WishlistButton's quiet variant; only its place on
     the card belongs here. */
  .tp-product-card--wishlist .tp-product-card__foot {
    margin-top: var(--tp-space-3);
  }
}