/* Ariana Nila: page stylesheet for the Wishlist page template.
   Loaded on those pages only, straight after style.css (inc/page-styles.php).
   Every rule here came out of style.css unchanged and keeps its original
   order. A "copy of style.css" rule repeats a style.css rule that followed
   the one before it there, so it still wins now that this file loads later;
   tests/Unit/PageStyles/PageStylesTest.php keeps each copy identical. */

/* ═══════════════════════════════════════════════
   WISHLIST PAGE
   ═══════════════════════════════════════════════ */

.an-wishlist-page {
    padding-top: calc(var(--topbar-h, 36px) + var(--an-header-h, 68px) + 24px);
    padding-bottom: 80px;
}

.an-wishlist-page__head {
    padding-top: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--an-off-white);
    margin-bottom: 32px;
}

.an-wishlist-page__title-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 12px;
}

.an-wishlist-page__title {
    font-family: var(--an-serif);
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 300;
    color: var(--an-black);
    margin: 0;
}

.an-wishlist-page__count {
    font-family: var(--an-sans);
    font-size: 13px;
    color: var(--an-charcoal);
    letter-spacing: 0.04em;
}

/* ── [hidden] overrides — author CSS display values must not beat the hidden attribute ─── */
.an-wishlist-page__loading[hidden],
.an-wishlist-page__empty[hidden] {
    display: none !important;
}

/* ── Loading dots ─── */
.an-wishlist-page__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 80px 0;
}

.an-wishlist-page__loading-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--an-grey-light);
    animation: an-wl-pulse 1.2s ease-in-out infinite;
}

.an-wishlist-page__loading-dot:nth-child(2) { animation-delay: 0.2s; }

.an-wishlist-page__loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Empty state ─── */
.an-wishlist-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 80px 0;
    text-align: center;
}

.an-wishlist-page__empty svg {
    width: 52px;
    height: 52px;
    color: var(--an-grey-light);
}

.an-wishlist-page__empty p {
    font-family: var(--an-serif);
    font-size: 20px;
    font-weight: 300;
    color: var(--an-black);
    margin: 0;
}

@media (max-width: 640px) {
    .an-wishlist-page {
        padding-top: calc(var(--topbar-h, 36px) + var(--an-header-h, 68px) + 16px);
    }
}