/* =========================================
   My Stuff Page — Page-Specific Styles
   ========================================= */

/* ── Profile Summary Panel ───────────────────────────────────────── */
.profile-summary-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
    text-align: center;
}

.profile-summary-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--bg-light);
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.profile-summary-name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    word-break: break-word;
}


/* ── Panel Divider ────────────────────────────────────────────────── */
.panel-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0 12px;
}

/* ── My Shops Panel ───────────────────────────────────────────────── */
.my-shops-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--fs-base);
    line-height: 1.6;
}

.my-shops-empty a {
    color: var(--pink-highlight);
    display: block;
    margin-top: 6px;
}

/* List list (.list-list / .list-item / .list-icon / .list-name)
   moved to components.css (2026-06-01). */

/* ── Center Column Header ─────────────────────────────────────────── */
.mystuff-page-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-color);
}

/* Only the list's own name carries the brand pink; the "List:"
   label in front of it stays in the body colour. */
.mystuff-page-title .title-accent { color: var(--pink-highlight); }

/* ── Subtitle ─────────────────────────────────────────────────────── */
.mystuff-subtitle {
    font-size: var(--fs-base);
    color: var(--text-light);
    margin: 0 0 10px;
    line-height: 1.4;
}
.overflow-actions + .search-hero-bar { margin-top: 10px; }

/* Lists modal rows: Edit/Share reuse the shared .input-action-btn (bare
   rounded-rect, hover pill) instead of bespoke circular buttons. The default
   list's edit renders as a disabled .input-action-btn (inactive icon),
   which keeps names aligned — no extra CSS needed. */

/* ── Mobile Left Column (≤ 1200px) ───────────────────────────────── */
@media (max-width: 1200px) {

    /* No mobile toggle — the left column (Lists filter + Filters) renders
       inline above the products, in the same rounded box as the desktop sidebar. */
    .page-browse .desktop-col-left {
        background: var(--bg-light);
        border-radius: 12px;
        margin: 0 8px 12px;
    }
}

/* ── Lists Panel ────────────────────────────────────────────── */
.list-new-link {
    display: block;
    padding: 7px 8px 12px;
    font-size: var(--fs-base);
    color: var(--pink-highlight);
    text-decoration: none;
    font-weight: 500;
}

.list-new-link:hover { text-decoration: underline; }