@keyframes cursor-blink {
    0% {
        opacity: 0;
    }
}

.blink {
    animation: cursor-blink 1s steps(2) infinite;
    margin-left: .5rem;
}

wa-page {
    --menu-width: 30ch;
}

wa-page[view="mobile"] {
    --menu-width: auto;

    [slot*="main"], main {
        padding: var(--wa-space-xl);
    }
}

wa-page header[slot="header"], wa-page[view="desktop"] [slot*="navigation"] {
    background-color: var(--wa-color-surface-raised);
}

wa-page[view="mobile"] [slot*="navigation"] {
    padding: 0;
}

.card-header {
    padding: 0;
    margin: 0;
}

[slot="navigation"] {
    a {
        --wa-color-text-link: var(--wa-color-text-normal);
        --wa-link-decoration-default: none;
        --wa-link-decoration-hover: none;
        --flank-size: 2rem;
        font-weight: var(--wa-font-weight-action);
        border-radius: var(--wa-border-radius-m);
        padding: var(--wa-space-xs);

        &:hover {
            background-color: color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-brand-fill-quiet));
        }
    }
    wa-icon {
        align-items: center;
        aspect-ratio: 1;
        color: var(--wa-color-brand-fill-loud);
        display: flex;
        justify-content: center;
    }
    #recent wa-icon {
        border-radius: var(--wa-border-radius-s);
    }
}

wa-page > [slot="header"], wa-page > [slot="footer"] {
    background-color: var(--wa-color-surface-raised);
}

wa-button.discord::part(base) {
    background: #5865f2;
    color: var(--wa-color-text-normal);
}

wa-button.telegram::part(base) {
    background: #27a6e6;
    color: var(--wa-color-text-normal);
}

wa-button.bluesky::part(base) {
    background: #0085ff;
    color: var(--wa-color-text-normal);
}

.product-card {
    position: relative;
}

.product-card::part(body), .full-height {
    height: 100%;
}

wa-page[view="mobile"] {
    [data-desktop] {
        display: none;
    }
    .site-title {
        font-size: var(--wa-font-size-xl);
    }
    [slot="main-header"] {
        padding: var(--wa-space-l);
    }
}

wa-page[view="desktop"] {
    [data-mobile] {
        display: none;
    }
    .site-title {
        font-size: var(--wa-font-size-2xl);
    }
}