/* Wishlist — the saved kittens in the shop's own cards, five to a row.

   wishlist.php renders both the grid and the empty state and hides whichever
   does not apply; js/main.js only toggles between them client-side when the
   last card on the page is un-hearted, so it never has to fetch either. */

.wishlist {
    padding: 60px 0 90px;
}

/* [hidden] and .wishlist__grid/.wishlist__empty are equal specificity, so
   without the [hidden] variants here the later, own-display rule below would
   win the cascade and the grid or empty state would stay visible even once
   js/main.js sets the .hidden property. */
.wishlist__grid[hidden],
.wishlist__empty[hidden] { display: none; }

.wishlist__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   24px 16px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.wishlist__grid > .product-card { margin: 0; }

.wishlist__empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            18px;
    padding:        50px 20px 60px;
    text-align:     center;
    color:          var(--color-primary);
}

/* .wishlist__empty-text is the no-content fallback's own class; Gutenberg's
   admin-edited paragraph carries none, so both are targeted here */
.wishlist__empty-text,
.wishlist__empty > p {
    max-width:   440px;
    margin:      0;
    font-size:   16px;
    line-height: 26px;
    color:       var(--color-text);
}
.wishlist__empty > p + p { margin-top: 12px; }

/* ── Laptop ──────────────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
    .wishlist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wishlist { padding: 40px 0 70px; }
    .wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Two columns all the way down, the same as the shop listing these cards
   come from — a phone-width single column would leave them twice the size
   they are on the page the visitor saved them from. */
@media (max-width: 767px) {
    .wishlist { padding: 30px 0 50px; }
    .wishlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}