/* =========================================
   List Page — Page-Specific Styles
   ========================================= */

/* ── Owner badges (Verified / Curator) ───────────────────────────── */
.owner-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    vertical-align: middle;
    margin-left: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
    background: var(--pink-highlight-pale);
    color: var(--pink-highlight);
    border: 1px solid var(--pink-highlight);
}

.admin-badge {
    background: var(--blue-highlight-pale);
    color: var(--blue-highlight);
    border: 1px solid var(--blue-highlight);
}

/* ── Owner handle (@nickname) ─────────────────────────────────────── */
.list-owner-handle {
    font-size: var(--fs-base);
    color: var(--text-light);
    margin: -6px 0 8px;
}

/* ── Celebrity bio ────────────────────────────────────────────────── */
.list-owner-bio {
    font-size: var(--fs-base);
    color: var(--text-light);
    line-height: 1.5;
    text-align: center;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Social link buttons ──────────────────────────────────────────── */
.list-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

/* .list-social-btn removed 2026-07-28 — the social chips now use the
   system pair .btn-neutral + .btn-sm (28px tier, --fs-sm, --radius-control),
   so there is no bespoke chip to keep in sync with the button scale. */
/* ── Celebrity avatar — larger than standard user avatar ─────────── */
.celebrity-avatar {
    width: 88px !important;
    height: 88px !important;
    border: 2px solid var(--pink-highlight) !important;
}

/* The ≤1200px collapse that used to live here is gone with the owner card and
   the toggle bar that opened it. Nothing sets .mobile-left-open on this page
   any more, so keeping the rule left the column stuck at max-height:0 between
   1100px and 1200px — where the bottom-sheet trigger is also hidden, putting
   the filters out of reach entirely. mystuff.css already styles this selector
   for the same breakpoint; /list now inherits it, like /saved. */

/* The share-access banner is the first child of the 3-column grid, so it has to
   be told to span; .notice's own 4px bottom margin also leaves it crowding the
   columns underneath. Below 1100px .desktop-grid-wrapper is a plain block and
   the banner spans on its own — grid-column is simply inert there, so this
   needs no breakpoint of its own. */
.list-access-notice {
    grid-column: 1 / -1;
    /* Below 1100px the wrapper is a plain block with no gutter, while .app-content
       insets its own content by 16px — unmatched, the banner alone ran edge to
       edge. Above it the grid supplies the alignment and only the gap is wanted. */
    margin: 0 16px 12px;
}

@media (min-width: 1100px) {
    .list-access-notice {
        margin: 0 0 12px;
    }
}

/* "Copy List to My Stuff" — centered call-to-action under the product grid. */
/* Layout only. The panel treatment — blue-pale ground, --radius-lg, padding —
   comes from .explainer-panel, composed in the markup rather than copied here,
   so the two stay one look. The old border-top separator is gone with it: the
   panel's own ground already sets the block apart from the product grid. */
.list-copy-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin-top: 16px;
}
/* Was .text-muted, which the panel's own .explainer-panel-text replaced; keyed
   on the element so the error line is held to the same measure. */
.list-copy-row p { max-width: 460px; }