/**
 * Standalone /wishlist/ page (inc/template-parts/wishlist/wishlist-page.php).
 * Mirrors the layout conventions already used by contact.css and
 * account.css - full-width container capped at the shared max-width,
 * tokenized surfaces/text, no page-specific colors invented here.
 */

.hs-wishlist-page {
  max-width: var(--hs-container-max-width);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hs-container-padding-inline);
  padding-block: var(--hs-space-32) var(--hs-space-64);
}

.hs-wishlist-page__title {
  font-size: var(--hs-font-size-h3);
  margin-block-end: var(--hs-space-24);
  color: var(--hs-color-text);
}

.hs-wishlist-page__empty {
  color: var(--hs-color-text-muted);
  font-size: var(--hs-font-size-body-sm);
}

.hs-wishlist-page__empty a {
  color: var(--hs-color-primary-600);
  text-decoration: underline;
  margin-inline-start: var(--hs-space-4);
}

/* Self-contained product grid: the wishlist page doesn't load the
   homepage-sections stylesheet that normally defines .hs-product-grid
   (see inc/setup.php - that stylesheet is only enqueued from within
   homepage/block section renders), so the rule is defined here instead
   of assuming it's already present. Same column/gap values as the
   homepage version for visual consistency. */
.hs-wishlist-page .hs-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hs-space-24);
}

@media (max-width: 64rem) {
  .hs-wishlist-page .hs-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 48rem) {
  .hs-wishlist-page .hs-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hs-space-16);
  }
}
@media (max-width: 30rem) {
  .hs-wishlist-page .hs-product-grid {
    grid-template-columns: 1fr;
  }
}