.profile-artists-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}

/* =========================
   PROFILE ALBUM GRID
========================= */
.profile-album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 991px) {
    .profile-album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .profile-album-grid { grid-template-columns: 1fr; }
}

.profile-album-card {
    cursor: pointer;
}

.profile-album-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
}

.profile-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-album-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 8px;
}

.profile-album-artist {
    font-size: 0.8rem;
    opacity: 0.75;
}


    .profile-artists-slider::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }


    .profile-artists-slider::-webkit-scrollbar {
        height: 6px;
    }

    .profile-artists-slider::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
    }

.profile-artist-card {
    min-width: 130px;
    max-width: 130px;
    height: 130px;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    background-clip: padding-box;
    transition: border-color .15s ease;
}

/* Background image grows *inside* the card on hover (overflow is
   clipped), card stays put — no scale-up of the element itself,
   no drop shadow, just the existing teal border highlight. */
.profile-artist-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .25s ease;
    z-index: 0;
}
.profile-artist-card > * { position: relative; z-index: 1; }

    .profile-artist-card:hover {
        border-color: #2B988F;
    }

    .profile-artist-card:hover::before {
        transform: scale(1.08);
    }

.profile-artist-name {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   PROFILE ALBUMS SLIDER
========================= */

.profile-albums-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .profile-albums-slider::-webkit-scrollbar {
        display: none;
    }

.profile-album-card {
    min-width: 130px;
    max-width: 130px;
    height: 130px;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    background-clip: padding-box;
    transition: border-color .15s ease;
}

.profile-album-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .25s ease;
    z-index: 0;
}
.profile-album-card > * { position: relative; z-index: 1; }

    .profile-album-card:hover {
        border-color: #2B988F;
    }

    .profile-album-card:hover::before {
        transform: scale(1.08);
    }

.profile-album-name {
    width: 100%;
    padding: 6px 8px 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-album-artist {
    width: 100%;
    padding: 0 8px 6px 8px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


        .profile-slider-controls button:hover {
            background: #222;
            transform: scale(1.05);
        }

    .profile-slider-controls .material-icons {
        font-size: 22px;
    }


.profile-slider-wrapper .slider-arrow-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity .2s ease, transform .15s ease;
}

.profile-slider-wrapper .slider-arrow-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.profile-slider-wrapper .slider-arrow-btn .material-icons {
    font-size: 20px;
}


/* =========================
   MUSIC TASTE SUBHEADERS
========================= */

.music-subsection {
    display: flex;
    flex-direction: column;
}

.music-subheader {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgb(128, 128, 128);
    margin-bottom: 12px;
}

    .music-subheader .material-icons {
        font-size: 18px;
        opacity: 0.6;
    }

.profile-slider-wrapper .slider-arrow-btn {
    display: none;
}

/* =========================
   MUSIC TASTE � MASONRY MOSAIC
========================= */

.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: 140px;
    gap: 16px;
    grid-auto-flow: dense;
}

.music-card {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    background-clip: padding-box;
    transition: border-color .2s ease;
    display: flex;
    align-items: flex-end;
}

/* Image grows inside the card (clipped by overflow:hidden) — the
   card itself doesn't move or scale, no drop shadow, just the teal
   border highlight. */
.music-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .3s ease;
    z-index: 0;
}
.music-card > * { position: relative; z-index: 1; }

    .music-card:hover {
        border-color: #2B988F;
    }

    .music-card:hover::before {
        transform: scale(1.07);
    }

.music-card-meta {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
    color: #fff;
}

.music-card-title {
    font-weight: 600;
    font-size: .95rem;
}

.music-card-artist {
    font-size: .8rem;
    opacity: .85;
}

/* Size Variations */

.music-size-1 {
    grid-row: span 1;
}

.music-size-2 {
    grid-row: span 2;
}

.music-size-3 {
    grid-row: span 3;
}

.music-size-wide {
    grid-column: span 2;
    grid-row: span 2;
}

.music-spotify-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease;
}

    .music-spotify-btn:hover {
        background: #1db954;
        color: #fff;
    }

    .music-card {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    background-clip: padding-box;
    transition: border-color .2s ease;
    display: flex;
    align-items: flex-end;
}
/* =========================
   PROFILE � FAVORITE ALBUM GRID
========================= */

.favorite-album-grid {
    display: grid;
    gap: 30px;
}

/* Desktop � 4 columns (2 rows visible if 8 albums) */
@media (min-width: 992px) {
    .favorite-album-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet � 3 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .favorite-album-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile � 2 columns */
@media (max-width: 767px) {
    .favorite-album-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.favorite-album-grid .album-card {
    position: relative;
    cursor: pointer;
}

.favorite-album-grid .album-cover {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #1a1a1f;
    border: 2px solid rgba(0,0,0,0.2);
    /* Keep the dark loading-placeholder fill from bleeding under the
       translucent border (background-clip defaults to border-box,
       which made the border read as a solid black ring). */
    background-clip: padding-box;
    box-shadow: none;
    transition: border-color .15s ease;
}

    .favorite-album-grid .album-cover img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s ease;
    }

/* Cover art zooms within its clipped frame; the tile keeps its
   footprint, no shadow, teal border on hover. */
.favorite-album-grid .album-card:hover .album-cover {
    border-color: #2B988F;
    box-shadow: none;
}
.favorite-album-grid .album-card:hover .album-cover img {
    transform: scale(1.07);
}

.favorite-album-grid .album-meta {
    margin-top: 6px;
}

/* More tile */
.favorite-album-grid .album-more-tile {
    cursor: pointer;
}
.favorite-album-grid .album-more-tile .album-cover {
    background: #111;
}
.favorite-album-grid .album-more-tile:hover .album-cover {
    border-color: #2B988F;
}
.favorite-album-grid .album-mini-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
}
.favorite-album-grid .album-mini-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.favorite-album-grid .album-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    letter-spacing: 1px;
    z-index: 2;
}

/* Show Less tile */
.favorite-album-grid .album-show-less-tile .album-cover {
    background: linear-gradient(145deg, #1a3a38, #0f2422) !important;
    border: 2px dashed rgba(43, 152, 143, 0.4) !important;
}
.favorite-album-grid .album-show-less-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #2B988F;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.favorite-album-grid .album-show-less-content .material-icons {
    font-size: 1.6rem;
    color: #2B988F;
    transition: transform 0.15s ease;
}
.favorite-album-grid .album-show-less-tile:hover .album-show-less-content .material-icons {
    transform: translateY(-3px);
}
.favorite-album-grid .album-show-less-tile:hover .album-cover {
    border-color: rgba(43, 152, 143, 0.75) !important;
}

.favorite-album-grid .album-title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}

.favorite-album-grid .album-artist {
    font-size: 0.75rem;
    color: #888;
}


/* =========================
   FAVORITE ARTISTS GRID
========================= */

.favorite-artist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    justify-items: center;
    align-items: start;
}



@media (max-width: 992px) {
    .favorite-artist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



.artist-card {
    cursor: pointer;
}

.artist-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
    border: 2px solid #e5e7eb;
    transition: border-color 0.15s;
}

    .artist-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.15s;
    }

/* Avatar frame stays fixed; only the photo inside the clipped
   circle zooms. Teal border highlight retained, no shadow. */
.artist-card:hover .artist-avatar {
    border-color: #2B988F;
}

.artist-card:hover img {
    transform: scale(1.07);
}

.artist-more-tile .artist-avatar {
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
}

.artist-more-tile {
    cursor: pointer;
}

.artist-card {
    text-align: center;
    cursor: pointer;
}

.artist-name {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6c757d;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* =====================================
   ARTIST GRID FOOTER (Show More)
===================================== */

.artist-grid-footer {
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 16px;
    padding: 12px 0;
    text-align: center;
}

.artist-show-more-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #bbb;
    text-decoration: none;
    transition: color .2s ease;
}

    .artist-show-more-link:hover {
        color: #2b988f;
    }


.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
}

.activity-meta {
    font-size: .8rem;
    opacity: .7;
}

.activity-footer {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.activity-footer-sep {
    color: #ccc;
}

.activity-show-less-dim {
    color: #ccc !important;
    pointer-events: none;
}

.shimmer-row {
    height: 48px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63% );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}


/* =========================
   PROFILE ACTIVITY � COMPACT (RT SYSTEM)
========================= */

.activity-feed {
    display: flex;
    flex-direction: column;
}



/* =========================
   RT TOGGLE SWITCH
========================= */

.rt-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    .rt-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.rt-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.18s ease;
}

    .rt-slider:before {
        content: "";
        position: absolute;
        height: 14px;
        width: 14px;
        left: 3px;
        top: 3px;
        background: white;
        border-radius: 50%;
        transition: transform 0.18s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

.rt-switch input:checked + .rt-slider {
    background: var(--rt-primary);
}

    .rt-switch input:checked + .rt-slider:before {
        transform: translateX(16px);
    }


.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rt-border);
    font-size: 0.8rem;
    color: #374151;
    background: transparent;
}

    .activity-item:last-child {
        border-bottom: none;
    }

.activity-compact-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.activity-compact-icon {
    font-size: 18px;
    color: var(--rt-primary);
    opacity: 0.85;
}

.activity-compact-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .activity-compact-text .text-muted {
        color: var(--rt-muted) !important;
    }

.activity-compact-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--rt-muted);
}

/* =========================
   PROFILE — PORTRAIT GRIDS (books, films)
   Books and films covers are 2:3 portrait — reuse the album grid layout
   but override the cover aspect-ratio so the artwork isn't square-cropped.
========================= */
.favorite-portrait-grid .album-cover {
    aspect-ratio: 2 / 3;
}

/* =========================
   PROFILE — CREATOR ROLE CHIP
   Tiny "Director" / "Actor" tag rendered under names on the People grid
   so it's obvious what filmography opens on click.
========================= */
.favorite-artist-grid .artist-role-chip {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2B988F;
    background: rgba(43, 152, 143, 0.08);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.2;
}

/* =========================
   FAVORITES PAGE (favorites.php) — artist/album horizontal sliders
   Markup/JS (favorites.js) already built the arrow buttons + scrollBy
   handlers; this file was missing the layout that turns .favorites-slider
   into an actual horizontal row, so there was nothing to scroll.
========================= */

.favorites-nav {
    display: flex;
    gap: 6px;
}

.favorites-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.favorites-arrow:hover { background: #2B988F; color: #fff; }
.favorites-arrow .material-icons { font-size: 20px; }

.favorites-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.favorites-slider::-webkit-scrollbar { display: none; }
.favorites-slider:empty::after {
    content: 'Nothing here yet.';
    color: #9aa0a8;
    font-size: 0.85rem;
    padding: 8px 0;
}

.favorite-card {
    flex: 0 0 auto;
    width: 130px;
    text-align: center;
}
.favorite-card img {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    object-fit: cover;
    background: #f0f2f5;
    display: block;
}
.favorite-name {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.favorite-sub {
    font-size: 0.72rem;
    color: #9aa0a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   PROFILE — SECTION COUNT BADGE
   Inline pill rendered next to the h4 text (e.g. "Bookshelf  12") so
   the viewer sees the full collection size without expanding. Lives
   inside the h4 so the base .section-header column layout doesn't
   push it onto its own row.
========================= */
.section-count {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f1f3f6;
    border-radius: 999px;
    padding: 2px 9px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}