/* ============================================================
   TRENDYSONGZ HEADER + NAVIGATION
============================================================ */


/* ============================================================
   HEADER
============================================================ */

.ts-header {
    width: 100%;
ts
    margin: 0;

    padding: 30px 20px 0;

    background: #ffffff;

    box-sizing: border-box;
}


/* ============================================================
   BRAND
============================================================ */

.ts-brand {
    width: 100%;

    text-align: center;
}


.ts-logo {
    display: block;

    margin: 0;

    color: #181818;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 26px;

    font-weight: 900;

    letter-spacing: 2.5px;

    line-height: 1;
}


.ts-tagline {
    display: block;

    margin-top: 8px;

    color: #999999;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


/* ============================================================
   MAIN NAVIGATION
============================================================ */

/* ============================================================
   TRENDYSONGZ HEADER + NAVIGATION
============================================================ */


/* ============================================================
   HEADER
============================================================ */

.ts-header {
    width: 100%;
    margin: 0;
    padding: 30px 20px 0;
    background: #ffffff;
    box-sizing: border-box;
}


/* ============================================================
   BRAND
============================================================ */

.ts-brand {
    width: 100%;
    text-align: center;
}


.ts-logo {
    display: block;
    margin: 0;

    color: #181818;
    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 26px;
    font-weight: 900;

    letter-spacing: 2.5px;
    line-height: 1;
}


.ts-tagline {
    display: block;
    margin-top: 8px;

    color: #999999;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.6px;
    text-transform: uppercase;
}


/* ============================================================
   MAIN NAVIGATION
============================================================ */

.ts-navigation {
    width: 100%;
    max-width: 1280px;

    margin: 24px auto 0;
    padding: 6px;

    background: #6b7228;

    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;

    position: sticky;
    top: 0;

    z-index: 1000;
}


/* ============================================================
   ROW
============================================================ */

.ts-nav-row {
    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 2px;

    box-sizing: border-box;
}


/* ============================================================
   PRIMARY ROW
============================================================ */

.ts-nav-row-primary {
    justify-content: center;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);

    padding-bottom: 4px;
}


.ts-nav-row-primary a {
    position: relative;
}


.ts-nav-row-primary a:not(:last-child)::after {
    content: "|";

    display: inline-block;

    margin-left: 13px;

    color: rgba(255, 255, 255, 0.45);

    font-weight: 400;
}


/* ============================================================
   SECONDARY ROW
============================================================ */

.ts-nav-row-secondary {
    justify-content: center;

    padding-top: 4px;

    text-align: center;
}


/* ============================================================
   SECONDARY INNER
============================================================ */

.ts-nav-secondary-inner {
    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 2px;

    width: fit-content;

    max-width: 100%;

    margin: 0 auto;

    box-sizing: border-box;
}


/* ============================================================
   NAVIGATION LINKS
============================================================ */

.ts-navigation a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    min-height: 36px;

    padding: 0 13px;

    color: #ffffff;

    background: transparent;

    text-decoration: none;

    white-space: nowrap;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.15;

    border-radius: 6px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ============================================================
   HOVER
============================================================ */

.ts-navigation a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}


/* ============================================================
   ACTIVE
============================================================ */

.ts-navigation a.active {
    background: #ffffff;
    color: #555b1f;
}




/* Shared page layout */
.ts-layout,
.ts-layout * {
    box-sizing: border-box;
}

.ts-layout {
    display: grid;
    width: min(calc(100% - 40px), 1180px);
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 28px;
    margin: 28px auto 64px;
}

.ts-main,
.ts-aside {
    min-width: 0;
}

/* Aside */

.ts-sidebar-content {
    position: sticky;
    top: 24px;
}

.ts-aside-section {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e7e7e1;
    border-radius: 12px;
    background: #fff;
}

.ts-aside-section .ts-sidebar-heading {
    position: relative;
    margin: 0 0 16px;
    padding-left: 12px;
    color: #222;
    font-size: 1rem;
    line-height: 1.4;
}

.ts-aside-section .ts-sidebar-heading::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: #6b7228;
    content: "";
}

.ts-aside-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-aside-section li + li {
    border-top: 1px solid #f0f0eb;
}

.ts-aside-section a {
    display: block;
    padding: 10px 0;
    color: #343d25;
    font-size: .87rem;
    text-decoration: none;
}

.ts-aside-section a:hover {
    color: #6b7228;
}

/* Artist links */

.ts-aside-section .ts-aside-artist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ts-aside-section .ts-aside-artist-list li,
.ts-aside-section .ts-aside-artist-list li + li {
    border: 0;
}

.ts-aside-section .ts-aside-artist-list a {
    display: inline-block;
    padding: 7px 11px;
    border: 1px solid #dfe3ce;
    border-radius: 20px;
    background: #f7f8f2;
    color: #4d5827;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.ts-aside-section .ts-aside-artist-list a:hover {
    border-color: #6b7228;
    background: #eef1e3;
    color: #343d25;
}

@media (max-width: 767px) {
    .ts-sidebar-content {
        position: static;
    }
}


/* Cover placeholder used when an image is missing */
.ts-music-cover,
.ts-video-cover,
.ts-album-cover,
.ts-djmix-cover,
.ts-music-list-cover,
.ts-video-list-cover,
.ts-artist-image,
.ts-artist-profile-image,
.ts-music-news-image,
.ts-album-detail-cover,
.ts-news-article-cover {
    position: relative;
    overflow: hidden;
    background: #e9ebdf;
}

.ts-cover-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #edf0e4, #d8dfc5);
    color: #747d3c;
    font-size: 1.8rem;
    font-weight: 800;
}

.ts-music-cover img,
.ts-video-cover img,
.ts-album-cover img,
.ts-djmix-cover img,
.ts-music-list-cover img,
.ts-video-list-cover img,
.ts-artist-image img,
.ts-artist-profile-image img,
.ts-music-news-image img,
.ts-album-detail-cover img,
.ts-news-article-cover img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pagination */
.ts-list-pagination {
    margin: 26px auto;
}

.ts-list-pagination nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ts-list-pagination svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1000px) {
    .ts-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .ts-layout {
        display: block;
        width: min(calc(100% - 28px), 600px);
        margin-top: 18px;
    }

    .ts-aside {
        margin-top: 28px;
    }

    .ts-sidebar-content {
        position: static;
    }
}


/* ============================================================
   SEARCH FORM — DESKTOP
============================================================ */

.ts-nav-search {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex: 0 0 190px;

    width: 190px;
    height: 33px;

    margin: 0 0 0 5px;
    padding: 0 4px 0 11px;

    background: #ffffff;

    border: 0;
    border-radius: 18px;

    box-sizing: border-box;
}


/* ============================================================
   SEARCH LEADING ICON
============================================================ */

.ts-search-leading {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-right: 1px;

    color: #888888;

    font-size: 12px;
}


/* ============================================================
   SEARCH INPUT
============================================================ */

.ts-nav-search input {
    display: block;

    flex: 1 1 auto;

    min-width: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #222222;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
}


.ts-nav-search input::placeholder {
    color: #999999;
}


/* ============================================================
   SEARCH BUTTON — DESKTOP
============================================================ */

.ts-nav-search button {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 58px;
    height: 27px;

    margin: 0;
    padding: 0 10px;

    border: 0;
    border-radius: 14px;

    background: #626920 !important;

    color: #ffffff !important;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}


.ts-nav-search button:hover {
    background: #4f5519 !important;

    transform: scale(1.04);
}



.ts-search-label {
    display: inline;
}

/* ============================================================
   SEARCH ICON
============================================================ */

.ts-search-icon {
    display: none;

    position: relative;

    width: 10px;
    height: 10px;

    border: 2px solid currentColor;

    border-radius: 50%;

    box-sizing: border-box;
}


.ts-search-icon::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 2px;

    right: -4px;
    bottom: -2px;

    background: currentColor;

    border-radius: 2px;

    transform: rotate(45deg);

    transform-origin: left center;
}


/* ============================================================
   DESKTOP SEARCH LABEL
============================================================ */

.ts-search-label {
    display: inline;
}


/* ============================================================
   TABLET
============================================================ */

@media screen and (max-width: 1100px) {

    .ts-navigation {
        width: calc(100% - 20px);
        max-width: 1180px;
    }


    .ts-nav-row {
        justify-content: center;
    }


    .ts-nav-secondary-inner {
        justify-content: center;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    .ts-header {
        padding: 22px 8px 0;
    }


    .ts-logo {
        font-size: 21px;
        letter-spacing: 1.7px;
    }


    .ts-tagline {
        margin-top: 7px;

        font-size: 9px;
        letter-spacing: 1.3px;
    }


    /* ============================================================
       MAIN NAVIGATION — STICKY
    ============================================================ */
    
    .ts-navigation {
        width: 100%;
        max-width: 1180px;
    
        margin: 24px auto 0;
        padding: 6px;
    
        background: #6b7228;
    
        border-radius: 10px;
    
        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.08);
    
        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       BOTH ROWS
    -------------------------------------------------------- */

    .ts-nav-row {
        width: 100%;

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        justify-content: center;

        gap: 0;

        overflow: visible;
    }


    /* --------------------------------------------------------
       PRIMARY
    -------------------------------------------------------- */

    .ts-nav-row-primary {
        padding-bottom: 4px;
    }


    .ts-nav-row-primary a {
        flex: 1 1 0;

        min-width: 0;

        min-height: 35px;

        padding: 0 3px;

        font-size: 10px;

        line-height: 1.05;

        white-space: normal;

        text-align: center;
    }
    


    /* --------------------------------------------------------
       SECONDARY
    -------------------------------------------------------- */

    .ts-nav-row-secondary {
        padding-top: 4px;
    }


    .ts-nav-secondary-inner {
        width: 100%;

        max-width: none;

        display: flex;

        flex-wrap: nowrap;

        align-items: center;

        justify-content: center;

        gap: 0;

        margin: 0;

        overflow: visible;
    }


    .ts-nav-row-secondary > .ts-nav-secondary-inner > a {
        flex: 1 1 0;

        min-width: 0;

        min-height: 32px;

        padding: 0 3px;

        font-size: 9px;

        white-space: nowrap;
    }


    /* ========================================================
       MOBILE SEARCH — CLOSED
    ======================================================== */

    .ts-nav-search {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        margin-left: 3px;

        padding: 0;

        background: transparent;

        border-radius: 50%;

        overflow: hidden;

        transition:
            width 0.25s ease,
            background-color 0.25s ease;
    }


    .ts-search-leading {
        display: none;
    }


    .ts-nav-search input {
        display: none;

        flex: 1 1 auto;

        min-width: 0;

        width: 100%;

        height: 100%;

        padding: 0 8px;

        font-size: 11px;
    }


    /* ========================================================
       MOBILE SEARCH BUTTON
    ======================================================== */

    .ts-nav-search button {
        display: flex;

        align-items: center;
        justify-content: center;

        flex: 0 0 30px;

        width: 30px;
        min-width: 30px;

        height: 30px;

        margin: 0;
        padding: 0;

        border-radius: 50%;

        font-size: 0;
    }


    .ts-search-label {
        display: none;
    }


    /* SHOW CSS SEARCH ICON */

    .ts-search-icon {
        display: block;
    }


    /* ========================================================
       MOBILE SEARCH — OPEN
    ======================================================== */

    .ts-nav-search.is-open {
        flex: 0 0 145px;

        width: 145px;

        background: #ffffff;

        border-radius: 16px;

        overflow: hidden;
    }


    .ts-nav-search.is-open input {
        display: block;
    }


    .ts-nav-search.is-open button {
        flex: 0 0 28px;

        width: 28px;
        min-width: 28px;

        height: 28px;

        margin-right: 1px;

        border-radius: 50%;
    }
}


/* ============================================================
   SMALL PHONES
============================================================ */

@media screen and (max-width: 380px) {

    .ts-header {
        padding-left: 5px;
        padding-right: 5px;
    }


    .ts-logo {
        font-size: 19px;
        letter-spacing: 1.4px;
    }


    .ts-navigation {
        width: 100%;
        padding: 3px;
        border-radius: 7px;
    }


    /* --------------------------------------------------------
       PRIMARY
    -------------------------------------------------------- */

    .ts-nav-row-primary a {
        min-height: 33px;

        padding: 0 2px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       SECONDARY
    -------------------------------------------------------- */

    .ts-nav-row-secondary > .ts-nav-secondary-inner > a {
        padding: 0 2px;

        font-size: 8.5px;
    }


    /* --------------------------------------------------------
       SEARCH
    -------------------------------------------------------- */

    .ts-nav-search {
        flex-basis: 30px;

        width: 30px;

        margin-left: 2px;
    }


    .ts-nav-search.is-open {
        flex-basis: 135px;

        width: 135px;
    }
}



/* ============================================================
   TRENDYSONGZ HOMEPAGE
   MODERN HOMEPAGE / LATEST MUSIC
============================================================ */


/* ============================================================
   HOMEPAGE
============================================================ */

.ts-home {
    width: 100%;
    margin: 0;
    padding: 0 0 70px;
}


/* ============================================================
   HOMEPAGE SECTION
============================================================ */

.ts-section {
    width: 100%;
    margin-top: 42px;
}


/* ============================================================
   SECTION HEADING
   LATEST MUSIC + CENTERED DATE
============================================================ */

.ts-section-heading {
    position: relative;

    width: 100%;

    margin-bottom: 24px;
    padding-bottom: 14px;

    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}


/* ============================================================
   LATEST MUSIC
   LEFT ALIGNED
============================================================ */

.ts-section-heading h2 {
    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.3px;
}


/* ============================================================
   DATE
   CENTERED BELOW LATEST MUSIC
============================================================ */

.ts-section-heading .post-date,
.ts-home-heading .post-date {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* ============================================================
   MUSIC GRID
   DESKTOP = 3 COLUMNS
============================================================ */

.ts-music-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px 20px;

    width: 100%;
}


/* ============================================================
   MUSIC CARD
   DESKTOP
============================================================ */

.ts-music-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    padding: 0;

    color: #111111;

    text-decoration: none;

    background: transparent;

    border: 0;

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.ts-music-card:hover {
    transform: translateY(-3px);
}


/* ============================================================
   MUSIC COVER
   DESKTOP
============================================================ */

.ts-music-cover {
    position: relative;

    width: 100%;
    max-width: 290px;

    aspect-ratio: 1 / 1;

    margin: 0 auto;

    overflow: hidden;

    background: #f1f1f1;

    border-radius: 10px;
}

.ts-music-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.ts-music-card:hover .ts-music-cover img {
    transform: scale(1.045);
}


/* ============================================================
   PLAY OVERLAY
============================================================ */

.ts-music-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(0, 0, 0, 0.30);

    opacity: 0;

    transition:
        opacity 0.25s ease;
}


.ts-music-card:hover .ts-music-overlay {
    opacity: 1;
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.ts-play-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #ffffff;

    color: #6b7228;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.22);

    transform: scale(0.92);

    transition:
        transform 0.2s ease;
}

.ts-music-card:hover .ts-play-button {
    transform: scale(1);
}


/* ============================================================
   MUSIC INFORMATION
   DESKTOP
============================================================ */

.ts-music-info {
    display: block;

    width: 100%;

    min-width: 0;

    padding: 9px 3px 0;

    box-sizing: border-box;
}

/* ============================================================
   LATEST MUSIC — TEXT HIERARCHY
============================================================ */

.ts-home-music-artist {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.ts-home-music-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.ts-home-music-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.ts-home-music-featuring {
    font-size: 12px;
    font-weight: 400;
    color: #6b7228;
}

.ts-home-music-featuring span {
    font-size: 11px;
    font-weight: 400;
    color: #777;
}

.ts-home-music-producer {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    color: #888;
}

/* ============================================================
   ARTIST
============================================================ */

.ts-music-info h3 {
    display: block;

    margin: 0;

    color: #111111;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   SONG TITLE
============================================================ */

.ts-music-info > p {
    display: block;

    margin: 4px 0 0;

    color: #555555;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   FEATURING ARTIST
============================================================ */

.ts-featuring {
    display: inline;

    margin-left: 3px;

    color: #888888;

    font-size: inherit;

    font-weight: 500;
}


/* ============================================================
   VIEW ALL BUTTON
============================================================ */

.ts-section-button {
    margin-top: 32px;

    text-align: center;
}


.ts-section-button a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 22px;

    background: #ffffff;

    border: 1px solid #d9d9d9;

    border-radius: 24px;

    color: #333333;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.ts-section-button a:hover {
    background: #6b7228;

    border-color: #111111;

    color: #ffffff;

    transform: translateY(-1px);
}


/* ============================================================
   TEMPORARY HOMEPAGE SECTIONS
============================================================ */

.ts-placeholder-section {
    margin-top: 55px;

    padding: 25px;

    background: #f8f8f8;

    border-radius: 8px;
}


.ts-placeholder-section h2 {
    margin-top: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;
}


.old-content-item {
    padding: 12px 0;

    border-bottom: 1px solid #e5e5e5;
}


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


.old-content-item a {
    color: #333333;

    text-decoration: none;

    font-size: 14px;
}


.old-content-item a:hover {
    color: #111111;
}


/* ============================================================
   TABLET
============================================================ */

@media screen and (max-width: 991px) {

    .ts-music-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px 16px;
    }


    .ts-music-info h3 {
        font-size: 17px;
    }


    .ts-music-info > p {
        font-size: 14px;
    }
}


/* ============================================================
   MOBILE
   ONE MUSIC ITEM PER ROW
============================================================ */

@media screen and (max-width: 767px) {

    .ts-home {
        padding-bottom: 50px;
    }


    .ts-section {
        margin-top: 32px;
    }

    /* --------------------------------------------------------
       MUSIC GRID
    -------------------------------------------------------- */

    .ts-music-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* --------------------------------------------------------
       MUSIC CARD
       MOBILE = HORIZONTAL
    -------------------------------------------------------- */
    
    .ts-music-card {
        display: flex;
        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;
        min-height: 104px;

        padding: 8px;

        box-sizing: border-box;

        background: #ffffff;

        border: 1px solid #eeeeee;
        border-radius: 10px;

        overflow: hidden;
    }


    /* ========================================================
       COVER — ALWAYS LEFT
    ======================================================== */

    .ts-music-cover {
        position: relative;

        flex: 0 0 88px;

        width: 88px;
        height: 88px;

        margin: 0;

        aspect-ratio: auto;

        overflow: hidden;

        border-radius: 8px;
    }


    .ts-music-cover img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* ========================================================
       DETAILS — ALWAYS RIGHT OF COVER
    ======================================================== */

    .ts-music-info {
        display: block;

        flex: 1 1 auto;

        width: auto;
        min-width: 0;

        padding: 0 10px 0 14px;

        box-sizing: border-box;
    }


    .ts-music-info h3 {
        margin: 0;

        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .ts-music-info > p {
        margin: 6px 0 0;

        font-size: 16px;
        line-height: 1.3;
        font-weight: 600;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .ts-music-producer {
        display: block;

        margin-top: 5px;

        font-size: 12px;
        line-height: 1.35;
    }
    


    


    /* --------------------------------------------------------
       MOBILE PLAY OVERLAY
    -------------------------------------------------------- */

    .ts-music-overlay {
        opacity: 0;

        background:
            rgba(0, 0, 0, 0.28);
    }


    .ts-music-card:active .ts-music-overlay {
        opacity: 1;
    }


    /* --------------------------------------------------------
       MOBILE PLAY BUTTON
    -------------------------------------------------------- */

    .ts-play-button {
        width: 38px;

        height: 38px;

        font-size: 19px;
    }


    



    /* --------------------------------------------------------
       VIEW ALL
    -------------------------------------------------------- */

    .ts-section-button {
        margin-top: 24px;
    }


    .ts-section-button a {
        min-height: 40px;

        padding: 0 18px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       PLACEHOLDER SECTIONS
    -------------------------------------------------------- */

    .ts-placeholder-section {
        margin-top: 35px;

        padding: 18px;
    }


    .ts-placeholder-section h2 {
        font-size: 18px;
    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media screen and (max-width: 380px) {

    .ts-home {
        padding-left: 0;

        padding-right: 0;
    }


    .ts-music-grid {
        gap: 8px;
    }


    .ts-music-card {
        min-height: 94px;

        padding: 7px;

        border-radius: 9px;
    }


    .ts-music-cover {
        flex: 0 0 78px;

        width: 78px;

        height: 78px;

        border-radius: 7px;
    }


    .ts-music-info {
        padding-left: 12px;

        padding-right: 7px;
    }


    .ts-music-info h3 {
        font-size: 17px;
    }


    .ts-music-info > p {
        margin-top: 5px;

        font-size: 15px;
    }


    .ts-play-button {
        width: 34px;

        height: 34px;

        font-size: 17px;
    }

}


/* ============================================================
   LATEST ALBUMS
============================================================ */

.ts-latest-albums {
    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-latest-albums .ts-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e5e5e5;
}

.ts-latest-albums .ts-section-kicker {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: #999;
}

.ts-latest-albums .ts-section-heading h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;

    color: #171717;
}

.ts-latest-albums .ts-section-link {
    font-size: 12px;
    font-weight: 600;

    color: #555;

    text-decoration: none;
}

.ts-latest-albums .ts-section-link:hover {
    color: #111;
}


/* ============================================================
   LATEST ALBUMS
============================================================ */

.ts-latest-albums {
    width: 100%;
}


/* ============================================================
   ALBUM GRID
   DESKTOP = ONE ALBUM PER ROW
============================================================ */

.ts-albums-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
}


/* ============================================================
   ALBUM CARD
============================================================ */

.ts-album-card {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 10px;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 8px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.ts-album-card:hover {
    border-color: #d9d9d9;

    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);

    transform: translateY(-1px);
}


/* ============================================================
   ALBUM COVER
============================================================ */

.ts-album-cover {
    position: relative;

    flex: 0 0 105px;

    width: 105px;
    height: 105px;

    display: block;

    overflow: hidden;

    border-radius: 6px;

    background: #eee;
}

.ts-album-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.ts-album-card:hover .ts-album-cover img {
    transform: scale(1.04);
}


/* ============================================================
   COVER PLAY OVERLAY
============================================================ */

.ts-album-cover-overlay {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(0, 0, 0, .78);

    color: #fff;

    opacity: 0;

    transition: opacity .2s ease;
}

.ts-album-card:hover .ts-album-cover-overlay {
    opacity: 1;
}

.ts-album-cover-overlay svg {
    width: 17px;
    height: 17px;

    margin-left: 2px;
}


/* ============================================================
   ALBUM DETAILS
============================================================ */

.ts-album-details {
    min-width: 0;
    flex: 1;
    padding: 0 18px;
}


/* ============================================================
   ALBUM TITLE
============================================================ */

.ts-album-title {
    display: block;
    margin-bottom: 5px;

    overflow: hidden;

    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;

    color: #171717;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-album-title:hover {
    color: #555;
}

.ts-album-title span {
    font-weight: 500;
    color: #777;
}


/* ============================================================
   ARTIST
============================================================ */

.ts-album-artist {
    display: inline-block;

    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 600;

    color: #555;

    text-decoration: none;
}

.ts-album-artist:hover {
    color: #111;
}


/* ============================================================
   ALBUM META ROWS
   DATE = OWN LINE
   TRACK COUNT = OWN LINE
============================================================ */

.ts-album-meta-row {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 5px;

    font-size: 11px;

    line-height: 1.4;

    color: #999;
}

.ts-album-meta-row svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-albums-empty {
    padding: 35px 20px;

    text-align: center;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 8px;
}

.ts-albums-empty p {
    margin: 0;

    font-size: 13px;

    color: #888;
}


/* ============================================================
   MOBILE
   TWO ALBUMS PER ROW
============================================================ */

@media (max-width: 700px) {

    .ts-latest-albums .ts-section-heading {
        margin-bottom: 15px;
    }

    .ts-latest-albums .ts-section-heading h2 {
        font-size: 19px;
    }


    /* --------------------------------------------------------
       TWO COLUMNS
    -------------------------------------------------------- */

    .ts-albums-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    /* --------------------------------------------------------
       VERTICAL CARD
    -------------------------------------------------------- */

    .ts-album-card {
        display: block;

        padding: 8px;

        border-radius: 7px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-album-cover {
        width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;

        border-radius: 5px;
    }


    .ts-album-cover-overlay {
        width: 34px;
        height: 34px;

        opacity: 1;
    }

    .ts-album-cover-overlay svg {
        width: 15px;
        height: 15px;
    }


    /* --------------------------------------------------------
       DETAILS BELOW COVER
    -------------------------------------------------------- */

    .ts-album-details {
        padding: 10px 2px 3px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-album-title {
        margin-bottom: 4px;

        font-size: 13px;

        line-height: 1.35;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-album-artist {
        margin-bottom: 7px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       META
       EACH ITEM REMAINS ON ITS OWN LINE
    -------------------------------------------------------- */

    .ts-album-meta-row {
        display: flex;

        width: 100%;

        margin-top: 4px;

        gap: 4px;

        font-size: 9.5px;

        line-height: 1.5;
    }

    .ts-album-meta-row svg {
        width: 12px;
        height: 12px;
    }

}



/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .ts-albums-grid {
        gap: 8px;
    }

    .ts-album-card {
        padding: 7px;
    }

    .ts-album-details {
        padding-top: 8px;
    }

    .ts-album-title {
        font-size: 12px;
    }

    .ts-album-artist {
        font-size: 10.5px;
    }

    .ts-album-meta-row {
        font-size: 9px;
    }

}



/* ============================================================
   LATEST VIDEOS
============================================================ */

.ts-videos-section {
    width: 100%;
}


/* ============================================================
   VIDEO GRID
============================================================ */

.ts-videos-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 32px 28px;

    width: 100%;
}


/* ============================================================
   VIDEO CARD
============================================================ */

.ts-video-card {
    display: block;

    width: 100%;

    text-decoration: none;

    color: inherit;
}


/* ============================================================
   VIDEO COVER
============================================================ */

.ts-video-cover {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f1f1f1;
}


/* IMAGE */

.ts-video-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* ============================================================
   HOVER
============================================================ */

.ts-video-card:hover .ts-video-cover img {
    transform: scale(1.035);

    opacity: 0.88;
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.ts-video-play {
    position: absolute;

    right: 14px;
    bottom: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.82);

    color: #fff;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.ts-video-play svg {
    width: 18px;
    height: 18px;

    margin-left: 2px;
}


.ts-video-card:hover .ts-video-play {
    transform: scale(1.08);

    background: #000;
}


/* ============================================================
   VIDEO INFORMATION
============================================================ */

.ts-video-info {
    padding-top: 12px;
}


/* ============================================================
   LATEST VIDEOS — TEXT HIERARCHY
============================================================ */

.ts-video-artist {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.ts-video-title {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}

.ts-video-director {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;
    color: #888;
}


/* ARTIST */

.ts-video-info h3 {
    margin: 0;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 600;

    color: #222;
}


/* VIDEO TITLE */

.ts-video-info p {
    margin: 3px 0 0;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 400;

    color: #666;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-videos-empty {
    padding: 30px 0;

    color: #777;

    font-size: 14px;
}


/* ============================================================
   MOBILE VIDEO LAYOUT
============================================================ */

@media (max-width: 767px) {

    .ts-videos-grid {
        display: flex;

        flex-direction: column;

        gap: 18px;
    }


    .ts-video-card {
        display: grid;

        grid-template-columns: 135px minmax(0, 1fr);

        gap: 14px;

        align-items: center;
    }


    .ts-video-cover {
        width: 135px;

        aspect-ratio: 16 / 10;
    }


    .ts-video-play {
        right: 8px;
        bottom: 8px;

        width: 32px;
        height: 32px;
    }


    .ts-video-play svg {
        width: 14px;
        height: 14px;
    }


    .ts-video-info {
        padding-top: 0;

        min-width: 0;
    }


    .ts-video-info h3 {
        font-size: 14px;

        line-height: 1.35;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .ts-video-info p {
        margin-top: 4px;

        font-size: 13px;

        line-height: 1.4;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }

}





/* ============================================================
   LATEST DJ MIX ON HOMEPAGE
============================================================ */

.ts-djmix-section {
    width: 100%;
}


/* ============================================================
   DJ MIX LIST
============================================================ */

.ts-djmix-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ============================================================
   DJ MIX CARD
============================================================ */

.ts-djmix-card {
    display: grid;

    grid-template-columns: 170px minmax(0, 1fr);

    align-items: center;

    width: 100%;

    min-height: 198px;

    padding: 16px;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 12px;

    text-decoration: none;

    color: inherit;

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* ============================================================
   HOVER
============================================================ */

.ts-djmix-card:hover {
    border-color: #d9d9d9;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);
}


/* ============================================================
   COVER
============================================================ */

.ts-djmix-cover {
    position: relative;

    width: 170px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 9px;

    background: #f1f1f1;
}


.ts-djmix-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.ts-djmix-card:hover .ts-djmix-cover img {
    transform: scale(1.035);
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.ts-djmix-play {
    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.84);

    color: #fff;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.ts-djmix-play svg {
    width: 17px;
    height: 17px;

    margin-left: 2px;
}


.ts-djmix-card:hover .ts-djmix-play {
    transform: translate(-50%, -50%) scale(1.08);

    background: #000;
}


/* ============================================================
   INFORMATION
============================================================ */

.ts-djmix-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding-left: 24px;

    min-width: 0;
}


/* ============================================================
   LABEL
============================================================ */

.ts-djmix-label {
    display: inline-flex;

    margin-bottom: 7px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #888;
}


/* ============================================================
   DJ NAME
============================================================ */

.ts-djmix-dj {
    margin: 0;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 900;

    color: #222;
}


/* ============================================================
   MIX TITLE
============================================================ */

.ts-djmix-title {
    margin: 5px 0 0;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 500;

    color: #333;
}


/* ============================================================
   DURATION
============================================================ */

.ts-djmix-duration {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 10px;

    font-size: 12px;

    font-weight: 500;

    color: #777;
}


.ts-djmix-duration svg {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;
}


/* ============================================================
   ACTION
============================================================ */

.ts-djmix-action {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    font-size: 12px;

    font-weight: 600;

    color: #222;

    transition: gap 0.2s ease;
}


.ts-djmix-action svg {
    width: 16px;
    height: 16px;
}


.ts-djmix-card:hover .ts-djmix-action {
    gap: 10px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-djmix-empty {
    padding: 30px 0;

    font-size: 14px;

    color: #777;
}


/* ============================================================
   MOBILE — KEEP YOUR CURRENT MOBILE DESIGN
============================================================ */

@media (max-width: 767px) {

    .ts-djmix-list {
        gap: 14px;
    }

    .ts-djmix-card {
        grid-template-columns: 130px minmax(0, 1fr);

        min-height: 150px;

        padding: 14px;

        border-radius: 12px;
    }

    .ts-djmix-cover {
        width: 130px;

        border-radius: 8px;
    }

    .ts-djmix-play {
        width: 38px;
        height: 38px;
    }

    .ts-djmix-play svg {
        width: 16px;
        height: 16px;
    }

    .ts-djmix-info {
        padding-left: 17px;
    }

    .ts-djmix-label {
        margin-bottom: 6px;

        font-size: 9px;
    }

    .ts-djmix-dj {
        font-size: 14px;

        line-height: 1.3;
    }

    .ts-djmix-title {
        margin-top: 4px;

        font-size: 15px;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }

    .ts-djmix-duration {
        margin-top: 9px;

        font-size: 12px;
    }

    .ts-djmix-duration svg {
        width: 15px;
        height: 15px;
    }

    .ts-djmix-action {
        margin-top: 11px;

        font-size: 12px;
    }

    .ts-djmix-action svg {
        width: 15px;
        height: 15px;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    .ts-djmix-card {
        grid-template-columns: 110px minmax(0, 1fr);

        padding: 11px;
    }

    .ts-djmix-cover {
        width: 110px;
    }

    .ts-djmix-info {
        padding-left: 13px;
    }

    .ts-djmix-title {
        font-size: 14px;
    }

    .ts-djmix-action {
        font-size: 11px;
    }

}



/* ============================================================
   MUSIC NEWS
============================================================ */

.ts-news-section {
    width: 100%;
}


/* ============================================================
   HEADER
============================================================ */

.ts-news-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.ts-news-heading {
    margin: 0;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 700;

    color: #222;

    text-transform: uppercase;
}


/* ============================================================
   DESKTOP GRID
============================================================ */

.ts-news-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(340px, 1fr);

    gap: 22px;

    width: 100%;
}


/* ============================================================
   FEATURED NEWS
============================================================ */

.ts-news-featured {
    min-width: 0;
}


.ts-news-featured-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.ts-news-featured-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 10px;

    background: #f1f1f1;
}


.ts-news-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.ts-news-featured-link:hover
.ts-news-featured-image img {
    transform: scale(1.025);
}


/* ============================================================
   FEATURED CONTENT
============================================================ */

.ts-news-featured-content {
    padding-top: 13px;
}


.ts-news-category {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: #888;
}


.ts-news-featured-title {
    margin: 0;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 700;

    color: #222;

    transition: color 0.2s ease;
}


.ts-news-featured-link:hover
.ts-news-featured-title {
    color: #555;
}


/* ============================================================
   NEWS META
   DATE + CONTINUE READING
============================================================ */

.ts-news-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    width: 100%;

    margin-top: 10px;
}


.ts-news-date {
    display: block;

    margin: 0;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 500;

    color: #888;

    white-space: nowrap;
}


.ts-news-read-more {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 600;

    color: #333;

    white-space: nowrap;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.ts-news-read-more i {
    font-size: 11px;

    line-height: 1;
}


.ts-news-featured-link:hover
.ts-news-read-more,

.ts-news-small-link:hover
.ts-news-read-more {
    gap: 9px;

    color: #000;
}


/* ============================================================
   SECONDARY NEWS
============================================================ */

.ts-news-secondary {
    display: flex;

    flex-direction: column;

    gap: 18px;

    min-width: 0;
}


.ts-news-small {
    min-width: 0;
}


.ts-news-small-link {
    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    align-items: center;

    gap: 15px;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


/* ============================================================
   SECONDARY IMAGE
============================================================ */

.ts-news-small-image {
    position: relative;

    width: 115px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 8px;

    background: #f1f1f1;
}


.ts-news-small-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}


.ts-news-small-link:hover
.ts-news-small-image img {
    transform: scale(1.04);
}


/* ============================================================
   SECONDARY CONTENT
============================================================ */

.ts-news-small-content {
    min-width: 0;
}


.ts-news-small-title {
    display: -webkit-box;

    margin: 0;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 650;

    color: #222;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color 0.2s ease;
}


.ts-news-small-link:hover
.ts-news-small-title {
    color: #555;
}


/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */

.ts-news-image-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #f1f1f1;

    color: #999;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-news-empty {
    padding: 30px 0;

    font-size: 14px;

    color: #777;
}


/* ============================================================
   VIEW ALL BUTTON
============================================================ */

/*
   Uses the global .ts-section-button styling
   shared with Latest Music, Latest Videos, etc.
*/

.ts-news-section .ts-section-button {
    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid #e5e5e5;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .ts-news-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(280px, 1fr);

        gap: 18px;
    }


    .ts-news-small-link {
        grid-template-columns: 95px minmax(0, 1fr);

        gap: 12px;
    }


    .ts-news-small-image {
        width: 95px;
    }


    .ts-news-small-title {
        font-size: 15px;
    }


    .ts-news-meta {
        gap: 12px;
    }


    .ts-news-read-more {
        font-size: 11px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .ts-news-header {
        margin-bottom: 15px;
    }


    .ts-news-heading {
        font-size: 18px;
    }


    /*
    ------------------------------------------------------------
    Turn desktop feature + secondary layout into
    a single vertical list.
    ------------------------------------------------------------
    */

    .ts-news-grid {
        display: flex;

        flex-direction: column;

        gap: 12px;
    }


    /*
    ------------------------------------------------------------
    FEATURED ARTICLE
    ------------------------------------------------------------
    */

    .ts-news-featured {
        width: 100%;
    }


    .ts-news-featured-link {
        display: grid;

        grid-template-columns: 110px minmax(0, 1fr);

        align-items: center;

        gap: 14px;

        padding: 0;
    }


    .ts-news-featured-image {
        width: 110px;

        aspect-ratio: 1 / 1;

        border-radius: 8px;
    }


    .ts-news-featured-content {
        min-width: 0;

        padding: 0;
    }


    .ts-news-featured-title {
        display: -webkit-box;

        font-size: 15px;

        line-height: 1.4;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    .ts-news-category {
        margin-bottom: 5px;

        font-size: 9px;
    }


    /*
    ------------------------------------------------------------
    DATE + CONTINUE READING
    ------------------------------------------------------------
    */

    .ts-news-meta {
        margin-top: 8px;

        gap: 8px;
    }


    .ts-news-date {
        font-size: 11px;
    }


    .ts-news-read-more {
        gap: 5px;

        font-size: 11px;
    }


    .ts-news-read-more i {
        font-size: 10px;
    }


    /*
    ------------------------------------------------------------
    SECONDARY NEWS
    ------------------------------------------------------------
    */

    .ts-news-secondary {
        gap: 12px;
    }


    .ts-news-small-link {
        grid-template-columns: 110px minmax(0, 1fr);

        gap: 14px;
    }


    .ts-news-small-image {
        width: 110px;

        border-radius: 8px;
    }


    .ts-news-small-title {
        font-size: 15px;

        line-height: 1.4;
    }


    /*
    ------------------------------------------------------------
    VIEW ALL
    ------------------------------------------------------------
    */

    .ts-news-section .ts-section-button {
        margin-top: 18px;
        padding-top: 15px;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    .ts-news-featured-link,
    .ts-news-small-link {
        grid-template-columns: 95px minmax(0, 1fr);

        gap: 12px;
    }


    .ts-news-featured-image,
    .ts-news-small-image {
        width: 95px;
    }


    .ts-news-featured-title,
    .ts-news-small-title {
        font-size: 14px;
    }


    .ts-news-date,
    .ts-news-read-more {
        font-size: 10px;
    }


    .ts-news-read-more i {
        font-size: 9px;
    }

}


/* ============================================================
   TRENDYSONGZ FOOTER
   MATCHES MAIN NAVIGATION WIDTH + COLOR
============================================================ */

.ts-footer {
    width: 100%;
    max-width: 1280px;
    margin: 60px auto 0;
    background: #6b7228;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
}


/* ============================================================
   FOOTER INNER
   SAME WIDTH SYSTEM AS NAVIGATION
============================================================ */

.ts-footer-inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 45px 24px 30px;

    box-sizing: border-box;
}


/* ============================================================
   FOOTER GRID
============================================================ */

.ts-footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 40px;

    padding-bottom: 35px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);
}


/* ============================================================
   BRAND
============================================================ */

.ts-footer-brand h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 23px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.ts-footer-brand p {
    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.7;
}


/* ============================================================
   FOOTER COLUMN
============================================================ */

.ts-footer-column h4 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


/* ============================================================
   FOOTER LINKS
============================================================ */

.ts-footer-links {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.ts-footer-links a {
    display: inline-block;

    width: fit-content;

    color: rgba(255, 255, 255, 0.78);

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.4;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.ts-footer-links a:hover {
    color: #ffffff;

    transform: translateX(3px);
}


/* ============================================================
   SOCIAL LINKS
============================================================ */

.ts-footer-social {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;
}


.ts-footer-social a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.ts-footer-social a:hover {
    background: rgba(255, 255, 255, 0.22);

    transform: translateY(-2px);
}


/* ============================================================
   FOOTER BOTTOM
============================================================ */

.ts-footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;
}


.ts-footer-copyright {
    color: rgba(255, 255, 255, 0.62);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;
}


.ts-footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 18px;
}


.ts-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.62);

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    transition: color 0.2s ease;
}


.ts-footer-bottom-links a:hover {
    color: #ffffff;
}


/* ============================================================
   TABLET
   SAME WIDTH RULE AS NAV
============================================================ */

@media screen and (max-width: 1100px) {

    .ts-footer-inner {
        width: calc(100% - 20px);

        max-width: 1180px;

        margin: 0 auto;

        padding-left: 24px;
        padding-right: 24px;
    }


    .ts-footer-grid {
        gap: 30px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    .ts-footer {
        margin-top: 45px;
    }


    /*
    ------------------------------------------------------------
    EXACT SAME WIDTH AS MOBILE NAV
    ------------------------------------------------------------
    */

    .ts-footer-inner {
        width: 100%;

        max-width: 1180px;

        margin: 0 auto;

        padding: 35px 18px 25px;

        box-sizing: border-box;
    }


    /* --------------------------------------------------------
       FOOTER GRID
    -------------------------------------------------------- */

    .ts-footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 30px 20px;

        padding-bottom: 28px;
    }


    /* --------------------------------------------------------
       BRAND
    -------------------------------------------------------- */

    .ts-footer-brand {
        grid-column: 1 / -1;
    }


    .ts-footer-brand h3 {
        font-size: 21px;

        letter-spacing: 1.2px;
    }


    .ts-footer-brand p {
        max-width: 100%;

        font-size: 12px;

        line-height: 1.7;
    }


    /* --------------------------------------------------------
       COLUMN HEADINGS
    -------------------------------------------------------- */

    .ts-footer-column h4 {
        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 1px;
    }


    /* --------------------------------------------------------
       LINKS
    -------------------------------------------------------- */

    .ts-footer-links {
        gap: 8px;
    }


    .ts-footer-links a {
        font-size: 12px;
    }


    /* --------------------------------------------------------
       SOCIAL
    -------------------------------------------------------- */

    .ts-footer-social {
        margin-top: 16px;
    }


    .ts-footer-social a {
        width: 33px;
        height: 33px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       BOTTOM
    -------------------------------------------------------- */

    .ts-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    .ts-footer-bottom-links {
        flex-wrap: wrap;

        gap: 12px;
    }

}


/* ============================================================
   SMALL PHONES
   MATCH NAV WIDTH
============================================================ */

@media screen and (max-width: 380px) {

    .ts-footer-inner {
        width: 100%;

        padding-left: 14px;
        padding-right: 14px;
    }


    .ts-footer-grid {
        gap: 26px 16px;
    }


    .ts-footer-brand h3 {
        font-size: 19px;
    }


    .ts-footer-brand p {
        font-size: 11px;
    }


    .ts-footer-column h4 {
        font-size: 10px;
    }


    .ts-footer-links a {
        font-size: 11px;
    }


    .ts-footer-bottom {
        gap: 10px;
    }


    .ts-footer-copyright {
        font-size: 11px;
    }


    .ts-footer-bottom-links a {
        font-size: 11px;
    }

}


/* ============================================================
   GO TO TOP
============================================================ */

.ts-go-top {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    font-size: 15px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 9999;
}


.ts-go-top.show {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.ts-go-top:hover {
    background: #333333;
}


/* ============================================================
   GO TOP — MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    .ts-go-top {
        right: 16px;
        bottom: 16px;

        width: 42px;
        height: 42px;
    }

}




/* ============================================================
   TRENDYSONGZ MUSIC PAGE
   /musics/naija
   /musics/ghana
   /musics/african
============================================================ */


/* ============================================================
   PAGE WRAPPER
============================================================ */

.ts-music-page {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   PAGE HEADING
============================================================ */

.ts-music-page-heading {
    position: relative;

    width: 100%;

    margin-bottom: 24px;
    padding-bottom: 14px;
    margin-top: 40px;

    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}


/* ============================================================
   PAGE TITLE
============================================================ */

.ts-music-page-heading h2 {
    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.3px;
}


/* ============================================================
   PAGE DATE
   CENTERED BELOW TITLE
============================================================ */

.ts-music-page-heading .post-date {
    display: block;

    width: 100%;

    margin: 8px 0 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}


/* ============================================================
   MUSIC LIST
============================================================ */

.ts-music-list {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 10px;
}


/* ============================================================
   MUSIC CARD
============================================================ */

.ts-music-list-item {
    width: 100%;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 9px;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.ts-music-list-item:hover {
    border-color: #d2d2d2;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);
}


/* ============================================================
   MUSIC CARD LINK
============================================================ */

.ts-music-list-link {
    display: grid;

    grid-template-columns:
        96px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    width: 100%;

    min-height: 112px;

    padding: 8px;

    box-sizing: border-box;

    color: inherit;

    text-decoration: none;
}


/* ============================================================
   COVER ART
============================================================ */

.ts-music-list-cover {
    position: relative;

    width: 96px;
    height: 96px;

    overflow: hidden;

    border-radius: 7px;

    background: #f1f1f1;

    flex-shrink: 0;
}


.ts-music-list-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}


.ts-music-list-item:hover
.ts-music-list-cover img {
    transform: scale(1.04);
}


/* ============================================================
   MUSIC INFORMATION
============================================================ */

.ts-music-list-info {
    min-width: 0;

    padding: 2px 0;
}


/* ============================================================
   ARTIST NAME
============================================================ */

.ts-music-list-artist {
    display: block;

    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   SONG TITLE
============================================================ */

.ts-music-list-title {
    display: block;

    margin: 4px 0 0;

    color: #444444;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   FEATURING ARTIST
============================================================ */

.ts-music-list-featuring {
    display: block;

    margin: 5px 0 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.ts-music-list-featuring span {
    color: #555555;

    font-weight: 700;
}


/* ============================================================
   PRODUCER
============================================================ */

.ts-music-list-producer {
    display: block;

    margin: 4px 0 0;

    color: #888888;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.ts-music-list-producer span {
    color: #666666;

    font-weight: 700;
}


/* ============================================================
   ACTIONS
============================================================ */

.ts-music-list-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 0 8px;
}


/* ============================================================
   ACTION BUTTON
============================================================ */

.ts-music-list-action {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: #f4f4f4;

    color: #555555;

    font-size: 13px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.ts-music-list-action:hover {
    background: #6b7228;

    color: #ffffff;

    transform: scale(1.06);
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-music-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 30px;
}


.ts-music-pagination .pagination {
    margin: 0;
}


/




/* ============================================================
   TABLET
============================================================ */

@media screen and (max-width: 991px) {

    .ts-music-page-heading h2 {
        font-size: 25px;
    }


    .ts-music-list-link {
        grid-template-columns:
            88px
            minmax(0, 1fr)
            auto;

        gap: 15px;

        min-height: 104px;
    }


    .ts-music-list-cover {
        width: 88px;
        height: 88px;
    }


    .ts-music-list-artist {
        font-size: 16px;
    }


    .ts-music-list-title {
        font-size: 14px;
    }


    .ts-music-list-featuring {
        font-size: 11px;
    }


    .ts-music-list-producer {
        font-size: 10px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    /* --------------------------------------------------------
       PAGE HEADING
    -------------------------------------------------------- */

    .ts-music-page-heading {
        margin-bottom: 18px;

        padding-bottom: 12px;
    }


    .ts-music-page-heading h2 {
        font-size: 21px;

        line-height: 1.3;
    }


    .ts-music-page-heading .post-date {
        margin-top: 7px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       MUSIC LIST
    -------------------------------------------------------- */

    .ts-music-list {
        gap: 8px;
    }


    /* --------------------------------------------------------
       MUSIC CARD
    -------------------------------------------------------- */

    .ts-music-list-item {
        border-radius: 8px;
    }


    /* --------------------------------------------------------
       CARD LAYOUT
    -------------------------------------------------------- */

    .ts-music-list-link {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            auto;

        gap: 12px;

        min-height: 94px;

        padding: 7px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-music-list-cover {
        width: 78px;
        height: 78px;

        border-radius: 6px;
    }


    /* --------------------------------------------------------
       INFORMATION
    -------------------------------------------------------- */

    .ts-music-list-info {
        min-width: 0;

        padding: 0;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-music-list-artist {
        font-size: 15px;

        line-height: 1.25;
    }


    /* --------------------------------------------------------
       SONG TITLE
    -------------------------------------------------------- */

    .ts-music-list-title {
        margin-top: 4px;

        font-size: 14px;

        line-height: 1.3;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-music-list-featuring {
        margin-top: 4px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       PRODUCER
    -------------------------------------------------------- */

    .ts-music-list-producer {
        margin-top: 3px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       ACTIONS
    -------------------------------------------------------- */

    .ts-music-list-actions {
        flex-direction: column;

        gap: 5px;

        padding: 0 3px;
    }


    .ts-music-list-action {
        width: 30px;
        height: 30px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */

    .ts-music-pagination {
        margin-top: 24px;
    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media screen and (max-width: 380px) {

    .ts-music-page-heading h2 {
        font-size: 19px;
    }


    .ts-music-page-heading .post-date {
        font-size: 11px;
    }


    .ts-music-list {
        gap: 7px;
    }


    .ts-music-list-link {
        grid-template-columns:
            68px
            minmax(0, 1fr)
            auto;

        gap: 10px;

        min-height: 82px;

        padding: 6px;
    }


    .ts-music-list-cover {
        width: 68px;
        height: 68px;

        border-radius: 6px;
    }


    .ts-music-list-artist {
        font-size: 14px;
    }


    .ts-music-list-title {
        margin-top: 3px;

        font-size: 13px;
    }


    .ts-music-list-featuring {
        margin-top: 3px;

        font-size: 10px;
    }


    .ts-music-list-producer {
        margin-top: 3px;

        font-size: 9px;
    }


    .ts-music-list-action {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }

}


/* ============================================================
   COLLABORATION TITLE ROW
   SONG TITLE + FEATURING ARTIST ON SAME ROW
============================================================ */

.ts-collaboration-title-row {
    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 7px;

    min-width: 0;

    margin-bottom: 10px;
}


/* ============================================================
   SONG TITLE
============================================================ */

.ts-collaboration-title-row .ts-music-list-title {
    margin: 0;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 500;

    color: #171717;
}


/* ============================================================
   FEATURING ARTIST
============================================================ */

.ts-collaboration-title-row .ts-music-list-featuring {
    display: inline;

    margin: 0;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;

    color: #6b7228;
}


.ts-collaboration-title-row
.ts-music-list-featuring span {
    color: #888;

    font-weight: 500;
}


/* ============================================================
   COLLABORATIONS — MOBILE
============================================================ */

@media (max-width: 700px) {

    .ts-collaboration-title-row {
        gap: 5px;

        margin-bottom: 8px;
    }


    .ts-collaboration-title-row
    .ts-music-list-title {
        font-size: 14px;

        line-height: 1.35;
    }


    .ts-collaboration-title-row
    .ts-music-list-featuring {
        font-size: 11px;

        line-height: 1.35;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .ts-collaboration-title-row {
        gap: 4px;
    }


    .ts-collaboration-title-row
    .ts-music-list-title {
        font-size: 13px;
    }


    .ts-collaboration-title-row
    .ts-music-list-featuring {
        font-size: 10px;
    }

}



/* ============================================================
   TRENDYSONGZ VIDEO PAGE
   /download-latest-videos
============================================================ */


/* ============================================================
   PAGE WRAPPER
============================================================ */

.ts-video-page {
    width: 100%;

    min-width: 0;
}


/* ============================================================
   VIDEO PAGE HEADING
============================================================ */

.ts-video-page-heading {
    position: relative;

    width: 100%;

    margin-top: 40px;
    margin-bottom: 24px;

    padding-bottom: 14px;

    border-bottom: 1px solid #e5e5e5;

    box-sizing: border-box;
}


/* ============================================================
   PAGE TITLE
============================================================ */

.ts-video-page-heading h2 {
    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.3px;
}


/* ============================================================
   SUBTITLE
============================================================ */

.ts-video-page-subtitle {
    margin: 5px 0 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.4;
}


/* ============================================================
   PAGE DATE
============================================================ */

.ts-video-page-heading .post-date {
    display: block;

    width: 100%;

    margin: 8px 0 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}


/* ============================================================
   VIDEO LIST
============================================================ */

.ts-video-list {
    display: flex;

    flex-direction: column;

    width: 100%;
}


/* ============================================================
   VIDEO LIST ITEM
   Clean layout — NO CARD / NO BORDERED BOX
============================================================ */

.ts-video-list-item {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    align-items: center;

    gap: 22px;

    width: 100%;

    padding: 18px 0;

    border-bottom: 1px solid #e8e8e8;

    color: inherit;

    text-decoration: none;

    box-sizing: border-box;
}


/* ============================================================
   VIDEO COVER
   Same visual treatment as homepage Latest Videos
============================================================ */

.ts-video-list-cover {
    position: relative;

    width: 250px;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f1f1f1;

    flex-shrink: 0;
}


/* ============================================================
   COVER IMAGE
============================================================ */

.ts-video-list-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* ============================================================
   COVER HOVER
============================================================ */

.ts-video-list-item:hover
.ts-video-list-cover img {
    transform: scale(1.035);

    opacity: 0.88;
}


/* ============================================================
   PLAY BUTTON
   Same visual style as homepage Latest Videos
============================================================ */

.ts-video-list-play {
    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, 0.82);

    color: #ffffff;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


/* ============================================================
   PLAY ICON
============================================================ */

.ts-video-list-play svg {
    width: 19px;
    height: 19px;

    margin-left: 2px;
}


/* ============================================================
   PLAY HOVER
============================================================ */

.ts-video-list-item:hover
.ts-video-list-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: #000000;
}


/* ============================================================
   VIDEO INFORMATION
============================================================ */

.ts-video-list-info {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding: 2px 0;
}


/* ============================================================
   ARTIST NAME
   Matches music card artist
============================================================ */

.ts-video-list-artist {
    display: block;

    margin: 0;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   VIDEO TITLE
   Matches music card title
============================================================ */

.ts-video-list-title {
    display: block;

    margin: 4px 0 0;

    color: #444444;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   FEATURING ARTIST
   Matches music card featuring
============================================================ */

.ts-video-list-featuring {
    display: block;

    margin: 5px 0 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   FEATURING LABEL
============================================================ */

.ts-video-list-featuring span {
    color: #555555;

    font-weight: 700;
}


/* ============================================================
   DIRECTED BY
   Styled like music "Produced by"
============================================================ */

.ts-video-list-directed {
    display: block;

    margin: 4px 0 0;

    color: #888888;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   DIRECTED BY LABEL
============================================================ */

.ts-video-list-directed span {
    color: #666666;

    font-weight: 700;
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-video-pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-top: 30px;
}


.ts-video-pagination .pagination {
    margin: 0;
}


/* ============================================================
   VIEW ALL
============================================================ */

.ts-video-view-all {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 28px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-videos-empty {
    padding: 40px 0;

    color: #777777;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;
}


/* ============================================================
   TABLET
============================================================ */

@media screen and (max-width: 991px) {

    /* --------------------------------------------------------
       HEADING
    -------------------------------------------------------- */

    .ts-video-page-heading h2 {
        font-size: 25px;
    }


    /* --------------------------------------------------------
       VIDEO ITEM
    -------------------------------------------------------- */

    .ts-video-list-item {
        grid-template-columns:
            220px
            minmax(0, 1fr);

        gap: 18px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-video-list-cover {
        width: 220px;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-video-list-artist {
        font-size: 16px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-video-list-title {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-video-list-featuring {
        font-size: 11px;
    }


    /* --------------------------------------------------------
       DIRECTOR
    -------------------------------------------------------- */

    .ts-video-list-directed {
        font-size: 10px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    /* --------------------------------------------------------
       PAGE HEADING
    -------------------------------------------------------- */

    .ts-video-page-heading {
        margin-top: 30px;

        margin-bottom: 18px;

        padding-bottom: 12px;
    }


    .ts-video-page-heading h2 {
        font-size: 21px;

        line-height: 1.3;
    }


    .ts-video-page-subtitle {
        margin-top: 4px;

        font-size: 13px;
    }


    .ts-video-page-heading .post-date {
        margin-top: 7px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       VIDEO LIST
    -------------------------------------------------------- */

    .ts-video-list {
        width: 100%;
    }


    /* --------------------------------------------------------
       VIDEO ITEM
       ONE PER ROW
    -------------------------------------------------------- */

    .ts-video-list-item {
        grid-template-columns:
            135px
            minmax(0, 1fr);

        gap: 14px;

        padding: 16px 0;

        align-items: center;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-video-list-cover {
        width: 135px;

        aspect-ratio: 16 / 9;
    }


    /* --------------------------------------------------------
       PLAY BUTTON
    -------------------------------------------------------- */

    .ts-video-list-play {
        width: 34px;
        height: 34px;
    }


    .ts-video-list-play svg {
        width: 14px;
        height: 14px;
    }


    /* --------------------------------------------------------
       INFORMATION
    -------------------------------------------------------- */

    .ts-video-list-info {
        padding: 0;

        min-width: 0;
    }


    /* --------------------------------------------------------
       ARTIST
       Same sizing as music mobile
    -------------------------------------------------------- */

    .ts-video-list-artist {
        font-size: 15px;

        line-height: 1.25;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-video-list-title {
        margin-top: 4px;

        font-size: 14px;

        line-height: 1.3;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-video-list-featuring {
        margin-top: 4px;

        font-size: 11px;

        line-height: 1.3;
    }


    /* --------------------------------------------------------
       DIRECTED BY
    -------------------------------------------------------- */

    .ts-video-list-directed {
        margin-top: 3px;

        font-size: 10px;

        line-height: 1.3;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */

    .ts-video-pagination {
        margin-top: 24px;
    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media screen and (max-width: 380px) {

    /* --------------------------------------------------------
       HEADING
    -------------------------------------------------------- */

    .ts-video-page-heading h2 {
        font-size: 19px;
    }


    .ts-video-page-heading .post-date {
        font-size: 11px;
    }


    /* --------------------------------------------------------
       VIDEO ITEM
    -------------------------------------------------------- */

    .ts-video-list-item {
        grid-template-columns:
            110px
            minmax(0, 1fr);

        gap: 10px;

        padding: 13px 0;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-video-list-cover {
        width: 110px;
    }


    /* --------------------------------------------------------
       PLAY
    -------------------------------------------------------- */

    .ts-video-list-play {
        width: 30px;
        height: 30px;
    }


    .ts-video-list-play svg {
        width: 12px;
        height: 12px;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-video-list-artist {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-video-list-title {
        margin-top: 3px;

        font-size: 13px;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-video-list-featuring {
        margin-top: 3px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       DIRECTED BY
    -------------------------------------------------------- */

    .ts-video-list-directed {
        margin-top: 3px;

        font-size: 9px;
    }

}

/* ============================================================
   ARTIST VIDEOS - MUSIC DETAILS
============================================================ */

.ts-artist-videos {
    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-artist-videos .ts-video-page-heading {
    margin-bottom: 18px;
}

.ts-artist-videos .ts-video-page-heading h2 {
    margin: 0;
}


/* ============================================================
   VIDEO LIST ITEM
============================================================ */

.ts-artist-videos .ts-video-list-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /* Small space between cover and information */
    gap: 14px;
}


/* ============================================================
   LANDSCAPE VIDEO COVER
   
============================================================ */

.ts-artist-videos .ts-video-list-cover {
    width: 100px;
    height: 62px;

    flex: 0 0 100px;

    overflow: hidden;
    position: relative;
}


/* ============================================================
   VIDEO COVER IMAGE
============================================================ */

.ts-artist-videos .ts-video-list-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.ts-artist-videos .ts-video-list-play {
    width: 30px;
    height: 30px;
}


/* ============================================================
   VIDEO INFORMATION
============================================================ */

.ts-artist-videos .ts-video-list-info {
    flex: 1;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ============================================================
   ARTIST NAME
============================================================ */

.ts-artist-videos .ts-video-list-artist {
    margin-top: 0;
    margin-bottom: 3px;
}


/* ============================================================
   VIDEO TITLE
============================================================ */

.ts-artist-videos .ts-video-list-title {
    margin-top: 0;
    margin-bottom: 4px;
    font-weight:500;
    
}


/* ============================================================
   DIRECTOR
============================================================ */

.ts-artist-videos .ts-video-list-directed {
    margin-top: 0;
    margin-bottom: 0;
}


/* ============================================================
   VIEW ALL BUTTON
============================================================ */

.ts-artist-videos .ts-section-button {
    margin-top: 25px;
}


/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 767px) {

    .ts-artist-videos .ts-video-list-item {
        gap: 12px;
    }

    .ts-artist-videos .ts-video-list-cover {
        width: 82px;
        height: 52px;

        flex: 0 0 82px;
    }

    .ts-artist-videos .ts-video-list-play {
        width: 27px;
        height: 27px;
    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media screen and (max-width: 380px) {

    .ts-artist-videos .ts-video-list-item {
        gap: 10px;
    }

    .ts-artist-videos .ts-video-list-cover {
        width: 72px;
        height: 46px;

        flex: 0 0 72px;
    }

    .ts-artist-videos .ts-video-list-play {
        width: 24px;
        height: 24px;
    }

}



/* ============================================================
   ARTISTS ALBUMS PAGE
============================================================ */

.ts-artists-albums {
    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-artists-albums .ts-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 8px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e5e5e5;
}

.ts-artists-albums .ts-section-heading h1 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;

    color: #171717;
}


/* ============================================================
   SUBHEADING
============================================================ */

.ts-albums-subheading {
    margin: 6px 0 0;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    align-items: flex-start;

    color: #777;
}


/* ============================================================
   DATE
============================================================ */

.ts-albums-date {
    width: 100%;

    margin-bottom: 20px;

    text-align: center;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    color: #999;
}


/* ============================================================
   ALBUM LIST
   ONE CARD PER ROW
============================================================ */

.ts-artists-albums-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    width: 100%;
}


/* ============================================================
   ALBUM CARD
   ENTIRE CARD IS CLICKABLE
============================================================ */

.ts-artist-album-card {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 12px;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 9px;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.ts-artist-album-card:hover {
    border-color: #d8d8d8;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .06);

    transform: translateY(-1px);

    color: inherit;
    text-decoration: none;
}

.ts-artist-album-card:focus-visible {
    outline: 2px solid #6b7228;
    outline-offset: 2px;
}


/* ============================================================
   ALBUM COVER
============================================================ */

.ts-artist-album-cover {
    position: relative;

    flex: 0 0 150px;

    width: 150px;
    height: 150px;

    display: block;

    overflow: hidden;

    border-radius: 7px;

    background: #eee;
}

.ts-artist-album-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.ts-artist-album-card:hover .ts-artist-album-cover img {
    transform: scale(1.04);
}


/* ============================================================
   COVER OVERLAY
============================================================ */

.ts-artist-album-cover-overlay {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(0, 0, 0, .78);

    color: #fff;

    opacity: 0;

    transition: opacity .2s ease;

    pointer-events: none;
}

.ts-artist-album-card:hover .ts-artist-album-cover-overlay {
    opacity: 1;
}

.ts-artist-album-cover-overlay svg {
    width: 19px;
    height: 19px;

    margin-left: 2px;
}

.ts-artist-album-cover .ts-cover-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ts-artist-album-cover img {
    position: relative;
    z-index: 1;
}

.ts-artist-album-cover-overlay {
    z-index: 2;
}


/* ============================================================
   ALBUM DETAILS
============================================================ */

.ts-artist-album-details {
    min-width: 0;

    flex: 1;

    padding: 4px 24px;
}


/* ============================================================
   ARTIST
   FIRST INFORMATION
============================================================ */

.ts-artist-album-artist {
    display: block;

    margin-bottom: 5px;

    overflow: hidden;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    color: #555;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   ALBUM TITLE
============================================================ */

.ts-artist-album-title {
    display: block;

    margin-bottom: 16px;

    overflow: hidden;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;

    color: #171717;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   FEATURING
============================================================ */

.ts-artist-album-featuring {
    font-size: 13px;
    font-weight: 500;

    color: #777;
}


/* ============================================================
   ALBUM META CONTAINER
============================================================ */

.ts-artist-album-meta {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* ============================================================
   META ROW
============================================================ */

.ts-artist-album-meta-row {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 12px;
    line-height: 1.4;

    color: #888;
}

.ts-artist-album-meta-row svg {
    width: 15px;
    height: 15px;

    flex-shrink: 0;
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-albums-pagination {
    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 28px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-artists-albums-empty {
    padding: 40px 20px;

    text-align: center;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 9px;
}

.ts-artists-albums-empty p {
    margin: 0;

    font-size: 13px;

    color: #888;
}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       SECTION HEADING
    -------------------------------------------------------- */

    .ts-artists-albums .ts-section-heading {
        margin-bottom: 7px;

        padding-bottom: 10px;
    }

    .ts-artists-albums .ts-section-heading h1 {
        font-size: 20px;
    }


    /* --------------------------------------------------------
       SUBHEADING
    -------------------------------------------------------- */

    .ts-albums-subheading {
        margin-top: 5px;

        font-size: 11px;
        line-height: 1.45;
        font-weight: 700;
    }


    /* --------------------------------------------------------
       DATE
    -------------------------------------------------------- */

    .ts-albums-date {
        margin-bottom: 14px;

        text-align: center;

        font-size: 10px;
        font-weight: 700;
    }


    /* --------------------------------------------------------
       ALBUM LIST
       STILL ONE CARD PER ROW
    -------------------------------------------------------- */

    .ts-artists-albums-list {
        gap: 10px;
    }


    /* --------------------------------------------------------
       ALBUM CARD
    -------------------------------------------------------- */

    .ts-artist-album-card {
        align-items: center;

        padding: 9px;

        border-radius: 7px;
    }


    /* --------------------------------------------------------
       ALBUM COVER
    -------------------------------------------------------- */

    .ts-artist-album-cover {
        flex: 0 0 105px;

        width: 105px;
        height: 105px;

        border-radius: 6px;
    }


    /* --------------------------------------------------------
       COVER OVERLAY
    -------------------------------------------------------- */

    .ts-artist-album-cover-overlay {
        width: 34px;
        height: 34px;

        opacity: 1;
    }

    .ts-artist-album-cover-overlay svg {
        width: 15px;
        height: 15px;
    }


    /* --------------------------------------------------------
       ALBUM DETAILS
    -------------------------------------------------------- */

    .ts-artist-album-details {
        padding: 2px 12px;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-artist-album-artist {
        margin-bottom: 3px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       ALBUM TITLE
    -------------------------------------------------------- */

    .ts-artist-album-title {
        margin-bottom: 10px;

        font-size: 15px;

        line-height: 1.3;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-artist-album-featuring {
        font-size: 10px;
    }


    /* --------------------------------------------------------
       META
    -------------------------------------------------------- */

    .ts-artist-album-meta {
        gap: 5px;
    }

    .ts-artist-album-meta-row {
        gap: 5px;

        font-size: 10px;
    }

    .ts-artist-album-meta-row svg {
        width: 12px;
        height: 12px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    /* --------------------------------------------------------
       CARD
    -------------------------------------------------------- */

    .ts-artist-album-card {
        padding: 7px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-artist-album-cover {
        flex: 0 0 92px;

        width: 92px;
        height: 92px;
    }


    /* --------------------------------------------------------
       DETAILS
    -------------------------------------------------------- */

    .ts-artist-album-details {
        padding: 2px 9px;
    }


    /* --------------------------------------------------------
       ARTIST
    -------------------------------------------------------- */

    .ts-artist-album-artist {
        font-size: 11px;
    }


    /* --------------------------------------------------------
       ALBUM TITLE
    -------------------------------------------------------- */

    .ts-artist-album-title {
        margin-bottom: 8px;

        font-size: 13px;
    }


    /* --------------------------------------------------------
       FEATURING
    -------------------------------------------------------- */

    .ts-artist-album-featuring {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       META
    -------------------------------------------------------- */

    .ts-artist-album-meta-row {
        font-size: 9px;
    }

}



/* ============================================================
ARTIST ALBUMS
MUSIC DETAILS PAGE
============================================================ */

.ts-artist-detail-albums {
    width: 100%;
}



.ts-artist-detail-albums .ts-section-heading {
    margin-bottom: 18px;
}

.ts-artist-detail-albums .ts-section-heading h2 {
    margin: 0;
    
    
    font-size: 25px;
    
    line-height: 1.3;


}

/* ============================================================
ALBUM LIST
============================================================ */

.ts-artist-detail-albums .ts-artists-albums-list {
    gap: 10px;
}

/* ============================================================
ALBUM CARD
============================================================ */

.ts-artist-detail-albums .ts-artist-album-card {
    padding: 9px;
}

/* ============================================================
ALBUM COVER
============================================================ */

.ts-artist-detail-albums .ts-artist-album-cover {
    flex: 0 0 105px;
    
    width: 105px;
    height: 105px;


}

/* ============================================================
ALBUM DETAILS
============================================================ */

.ts-artist-detail-albums .ts-artist-album-details {
    padding: 3px 14px;
}

/* ============================================================
ALBUM TITLE
============================================================ */

.ts-artist-detail-albums .ts-artist-album-title {
    margin-bottom: 10px;
    font-size: 18px;


}

/* ============================================================
COVER PLACEHOLDER
============================================================ */

.ts-artist-detail-albums .ts-artist-album-cover-placeholder {
    display: flex;
    
    
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 100%;
    
    background: #eee;
    
    color: #999;
    
    font-size: 25px;


}

/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

    .ts-artist-detail-albums .ts-section-heading {
        margin-bottom: 14px;
    }
    
    
    .ts-artist-detail-albums .ts-section-heading h2 {
        font-size: 20px;
    }
    
    
    .ts-artist-detail-albums .ts-artist-album-cover {
        flex: 0 0 82px;
    
        width: 82px;
        height: 82px;
    }
    
    
    .ts-artist-detail-albums .ts-artist-album-details {
        padding: 2px 10px;
    }
    
    
    .ts-artist-detail-albums .ts-artist-album-title {
        font-size: 15px;
    }


}

/* ============================================================
SMALL PHONES
============================================================ */

@media (max-width: 380px) {


    .ts-artist-detail-albums .ts-artist-album-cover {
        flex: 0 0 72px;
    
        width: 72px;
        height: 72px;
    }
    
    
    .ts-artist-detail-albums .ts-artist-album-details {
        padding: 2px 8px;
    }
    
    
    .ts-artist-detail-albums .ts-artist-album-title {
        font-size: 14px;
    }


}



/* ============================================================
   DJ MIX PAGE
============================================================ */

.ts-djmix-page {
    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-djmix-page .ts-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 8px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e5e5e5;
}

.ts-djmix-page .ts-section-heading h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;

    color: #171717;
}


/* ============================================================
   SUBHEADING
============================================================ */

.ts-djmix-subheading {
    margin: 6px 0 0;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;

    color: #777;
}


/* ============================================================
   DATE
============================================================ */

.ts-djmix-date {
    width: 100%;

    margin-bottom: 20px;

    text-align: center;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    color: #999;
}


/* ============================================================
   DJ MIX LIST
   ONE CARD PER ROW
============================================================ */

.ts-djmix-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    width: 100%;
}


/* ============================================================
   DJ MIX CARD
============================================================ */

.ts-djmix-card {
    display: grid;

    grid-template-columns: 190px minmax(0, 1fr);

    align-items: center;

    width: 100%;

    min-height: 222px;

    padding: 16px;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 12px;

    color: inherit;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* ============================================================
   CARD HOVER
============================================================ */

.ts-djmix-card:hover {
    border-color: #d9d9d9;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-1px);

    color: inherit;

    text-decoration: none;
}


/* ============================================================
   CARD FOCUS
============================================================ */

.ts-djmix-card:focus-visible {
    outline: 2px solid #6b7228;

    outline-offset: 2px;
}


/* ============================================================
   DJ MIX COVER
============================================================ */

.ts-djmix-cover {
    position: relative;

    width: 190px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 9px;

    background: #f1f1f1;
}


.ts-djmix-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.ts-djmix-card:hover .ts-djmix-cover img {
    transform: scale(1.035);
}


/* ============================================================
   PLAY BUTTON
============================================================ */

.ts-djmix-play {
    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.84);

    color: #fff;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.ts-djmix-play svg {
    width: 18px;
    height: 18px;

    margin-left: 2px;
}


.ts-djmix-card:hover .ts-djmix-play {
    transform: translate(-50%, -50%) scale(1.08);

    background: #000;
}


/* ============================================================
   DJ MIX INFORMATION
============================================================ */

.ts-djmix-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    padding-left: 28px;
}


/* ============================================================
   DJ MIX LABEL
============================================================ */

.ts-djmix-label {
    display: inline-flex;

    margin-bottom: 7px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #888;
}


/* ============================================================
   DJ NAME
============================================================ */

.ts-djmix-dj {
    max-width: 100%;

    margin: 0;

    overflow: hidden;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 800;

    color: #222;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   MIX TITLE
============================================================ */

.ts-djmix-title {
    max-width: 100%;

    margin: 5px 0 0;

    overflow: hidden;

    font-size: 20px;

    line-height: 1.35;

    font-weight: 500;

    color: #333;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   DURATION
============================================================ */

.ts-djmix-duration {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 11px;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 500;

    color: #777;
}


.ts-djmix-duration svg {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;
}


/* ============================================================
   ACTION
============================================================ */

.ts-djmix-action {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

    color: #222;

    transition: gap 0.2s ease;
}


.ts-djmix-action svg {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;
}


.ts-djmix-card:hover .ts-djmix-action {
    gap: 10px;
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-djmix-pagination {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 28px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.ts-djmix-empty {
    padding: 40px 20px;

    text-align: center;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 9px;
}


.ts-djmix-empty p {
    margin: 0;

    font-size: 13px;

    color: #888;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       HEADING
    -------------------------------------------------------- */

    .ts-djmix-page .ts-section-heading {
        margin-bottom: 7px;

        padding-bottom: 10px;
    }


    .ts-djmix-page .ts-section-heading h2 {
        font-size: 20px;
    }


    /* --------------------------------------------------------
       SUBHEADING
    -------------------------------------------------------- */

    .ts-djmix-subheading {
        margin-top: 5px;

        font-size: 11px;

        line-height: 1.45;

        font-weight: 700;
    }


    /* --------------------------------------------------------
       DATE
    -------------------------------------------------------- */

    .ts-djmix-date {
        margin-bottom: 14px;

        text-align: center;

        font-size: 10px;

        font-weight: 700;
    }


    /* --------------------------------------------------------
       LIST
    -------------------------------------------------------- */

    .ts-djmix-list {
        gap: 10px;
    }


    /* --------------------------------------------------------
       CARD
    -------------------------------------------------------- */

    .ts-djmix-card {
        grid-template-columns: 125px minmax(0, 1fr);

        min-height: 145px;

        padding: 9px;

        border-radius: 8px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-djmix-cover {
        width: 125px;

        border-radius: 7px;
    }


    /* --------------------------------------------------------
       PLAY BUTTON
    -------------------------------------------------------- */

    .ts-djmix-play {
        width: 36px;
        height: 36px;
    }


    .ts-djmix-play svg {
        width: 15px;
        height: 15px;
    }


    /* --------------------------------------------------------
       INFORMATION
    -------------------------------------------------------- */

    .ts-djmix-info {
        padding-left: 14px;
    }


    /* --------------------------------------------------------
       LABEL
    -------------------------------------------------------- */

    .ts-djmix-label {
        margin-bottom: 5px;

        font-size: 8.5px;
    }


    /* --------------------------------------------------------
       DJ NAME
    -------------------------------------------------------- */

    .ts-djmix-dj {
        font-size: 13px;

        line-height: 1.3;
    }


    /* --------------------------------------------------------
       MIX TITLE
    -------------------------------------------------------- */

    .ts-djmix-title {
        margin-top: 4px;

        font-size: 14px;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: normal;
    }


    /* --------------------------------------------------------
       DURATION
    -------------------------------------------------------- */

    .ts-djmix-duration {
        margin-top: 8px;

        gap: 5px;

        font-size: 10px;
    }


    .ts-djmix-duration svg {
        width: 13px;
        height: 13px;
    }


    /* --------------------------------------------------------
       ACTION
    -------------------------------------------------------- */

    .ts-djmix-action {
        margin-top: 9px;

        gap: 5px;

        font-size: 10px;
    }


    .ts-djmix-action svg {
        width: 14px;
        height: 14px;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    /* --------------------------------------------------------
       CARD
    -------------------------------------------------------- */

    .ts-djmix-card {
        grid-template-columns: 105px minmax(0, 1fr);

        min-height: 125px;

        padding: 7px;
    }


    /* --------------------------------------------------------
       COVER
    -------------------------------------------------------- */

    .ts-djmix-cover {
        width: 105px;
    }


    /* --------------------------------------------------------
       INFORMATION
    -------------------------------------------------------- */

    .ts-djmix-info {
        padding-left: 11px;
    }


    /* --------------------------------------------------------
       LABEL
    -------------------------------------------------------- */

    .ts-djmix-label {
        font-size: 8px;
    }


    /* --------------------------------------------------------
       DJ
    -------------------------------------------------------- */

    .ts-djmix-dj {
        font-size: 12px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-djmix-title {
        font-size: 13px;

        margin-top: 3px;
    }


    /* --------------------------------------------------------
       DURATION
    -------------------------------------------------------- */

    .ts-djmix-duration {
        margin-top: 6px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       ACTION
    -------------------------------------------------------- */

    .ts-djmix-action {
        margin-top: 7px;

        font-size: 9px;
    }

}


/* ============================================================
   TRENDYSONGZ ARTISTS PAGE
============================================================ */


/* ============================================================
   ARTISTS PAGE
============================================================ */

.ts-artists-page {
    width: 100%;

    padding-top: 38px;
}


/* ============================================================
   PAGE HEADER
============================================================ */

.ts-artists-header {
    width: 100%;

    margin-bottom: 42px;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-artists-header .ts-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    width: 100%;

    margin-bottom: 8px;

    padding-bottom: 12px;

    border-bottom: 1px solid #e5e5e5;
}


/* ============================================================
   MAIN ARTISTS TITLE
============================================================ */

.ts-artists-header .ts-section-heading h1 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;

    font-weight: 800;

    color: #171717;

    text-align: left;
}


/* ============================================================
   ARTISTS SUBHEADING
============================================================ */

.ts-artists-intro {
    margin: 6px 0 0;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 700;

    color: #777;

    text-align: left;
}


/* ============================================================
   HEADER DATE
============================================================ */

.ts-artists-date {
    display: block;

    width: 100%;

    margin-bottom: 20px;

    text-align: center;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 700;

    color: #999;

    white-space: nowrap;
}


/* ============================================================
   GENERAL ARTIST SECTION
============================================================ */

.ts-artists-section {
    width: 100%;

    margin-bottom: 38px;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-artists-section .ts-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    width: 100%;

    margin-bottom: 18px;

    padding-bottom: 11px;

    border-bottom: 1px solid #e5e5e5;
}


.ts-artists-section .ts-section-heading h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1.25;

    font-weight: 800;

    color: #171717;
}


/* ============================================================
   ARTIST TOTAL
============================================================ */

.ts-artist-total {
    font-size: 11px;
    line-height: 1.4;

    font-weight: 600;

    color: #888;

    white-space: nowrap;
}


/* ============================================================
   ARTIST GRIDS
============================================================ */

.ts-popular-grid,
.ts-artist-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}


/* ============================================================
   SHARED ARTIST CARD
============================================================ */

.ts-popular-card,
.ts-artist-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 12px;

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


.ts-popular-card:hover,
.ts-artist-card:hover {
    border-color: #d7d7d7;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);

    transform: translateY(-2px);
}


/* ============================================================
   SHARED ARTIST IMAGE
============================================================ */

.ts-popular-image,
.ts-artist-image {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #f1f1f1;

    text-decoration: none;
}


.ts-popular-image img,
.ts-artist-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.ts-popular-card:hover .ts-popular-image img,
.ts-artist-card:hover .ts-artist-image img {
    transform: scale(1.035);
}


/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */

.ts-artist-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #f1f1f1;

    color: #b5b5b5;
}


.ts-artist-placeholder i {
    font-size: 58px;
}


/* ============================================================
   SHARED ARTIST INFORMATION
============================================================ */

.ts-popular-info,
.ts-artist-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    padding: 15px 16px 17px;
}


/* ============================================================
   SHARED ARTIST NAME
============================================================ */

.ts-popular-name,
.ts-artist-name {
    display: block;

    width: 100%;

    margin: 0;

    overflow: hidden;

    font-size: 18px;
    line-height: 1.3;

    font-weight: 800;

    color: #171717;

    text-decoration: none;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ts-popular-name:hover,
.ts-artist-name:hover {
    color: #6b7228;

    text-decoration: none;
}


/* ============================================================
   ARTIST COUNTRY
============================================================ */

.ts-artist-country {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 500;

    color: #777;
}


/* ============================================================
   ARTIST STATS
============================================================ */

.ts-artist-stats {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 11px;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 600;

    color: #555;
}


.ts-artist-stats span + span::before {
    content: "·";

    margin-right: 6px;

    color: #aaa;
}


/* ============================================================
   RECORD LABEL
============================================================ */

.ts-artist-label,
.ts-artist-record-label {
    width: 100%;

    margin-top: 9px;

    overflow: hidden;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 500;

    color: #777;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ts-artist-label span,
.ts-artist-record-label span {
    font-weight: 700;

    color: #555;
}


/* ============================================================
   SHARED VIEW ARTIST LINK
============================================================ */

.ts-artist-view,
.ts-artist-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 14px;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 700;

    color: #6b7228;

    text-decoration: none;

    transition:
        gap 0.2s ease,
        color 0.2s ease;
}


.ts-artist-view i {
    font-size: 11px;
}


.ts-artist-link svg {
    width: 14px;
    height: 14px;

    flex-shrink: 0;
}


.ts-artist-view:hover,
.ts-artist-link:hover {
    gap: 10px;

    color: #555b16;

    text-decoration: none;
}


/* ============================================================
   ALPHABET SEARCH
============================================================ */

.ts-artist-search {
    margin-bottom: 38px;
}


.ts-alphabet {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    width: 100%;
}


.ts-alphabet a {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 31px;

    padding: 0 8px;

    border: 1px solid #dedede;

    border-radius: 6px;

    background: #fff;

    color: #444;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.ts-alphabet a:hover,
.ts-alphabet .ts-alphabet-all:hover {
    background: #6b7228;

    border-color: #6b7228;

    color: #fff;
}


.ts-alphabet .ts-alphabet-all {
    padding-left: 13px;

    padding-right: 13px;
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-artist-pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 24px;
}


.ts-artist-pagination .pagination {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.ts-artist-pagination .page-item {
    margin: 0;
}


.ts-artist-pagination .page-link {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid #dedede;

    border-radius: 6px;

    background: #fff;

    color: #555;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.ts-artist-pagination .page-link:hover {
    background: #f4f5e9;

    border-color: #6b7228;

    color: #6b7228;
}


.ts-artist-pagination .page-item.active .page-link {
    background: #6b7228;

    border-color: #6b7228;

    color: #fff;
}


.ts-artist-pagination .page-item.disabled .page-link {
    opacity: 0.45;

    cursor: not-allowed;
}


/* ============================================================
   AJAX LOADING
============================================================ */

.ts-artist-grid {
    transition: opacity 0.2s ease;
}


.ts-artist-grid.is-loading {
    opacity: 0.45;

    pointer-events: none;
}


.ts-country-section {
    position: relative;
}


/* ============================================================
   COMEDIANS
============================================================ */

.ts-comedian-section {
    margin-top: 10px;
}


/* ============================================================
   SECTION BUTTON
============================================================ */

.ts-artists-page .ts-section-button {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 25px;
}


.ts-artists-page .ts-section-button a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 1px solid #d9d9d9;

    border-radius: 7px;

    background: #fff;

    color: #555;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.ts-artists-page .ts-section-button a:hover {
    background: #6b7228;

    border-color: #6b7228;

    color: #fff;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       ARTISTS PAGE
    -------------------------------------------------------- */

    .ts-artists-page {
        padding-top: 28px;
    }


    /* --------------------------------------------------------
       PAGE HEADER
    -------------------------------------------------------- */

    .ts-artists-header {
        margin-bottom: 32px;
    }


    .ts-artists-header .ts-section-heading {
        margin-bottom: 8px;

        padding-bottom: 10px;
    }


    .ts-artists-header .ts-section-heading h1 {
        font-size: 21px;
    }


    .ts-artists-intro {
        margin-top: 6px;

        font-size: 11px;

        line-height: 1.45;
    }


    .ts-artists-date {
        margin-bottom: 16px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       GENERAL SECTION
    -------------------------------------------------------- */

    .ts-artists-section {
        margin-bottom: 30px;
    }


    .ts-artists-section .ts-section-heading {
        margin-bottom: 13px;

        padding-bottom: 9px;
    }


    .ts-artists-section .ts-section-heading h2 {
        font-size: 18px;
    }


    .ts-artist-total {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       ARTIST GRIDS
    -------------------------------------------------------- */

    .ts-popular-grid,
    .ts-artist-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* --------------------------------------------------------
       SHARED ARTIST CARD
    -------------------------------------------------------- */

    .ts-popular-card,
    .ts-artist-card {
        display: grid;

        grid-template-columns:
            110px minmax(0, 1fr);

        min-height: 125px;

        border-radius: 9px;
    }


    /* --------------------------------------------------------
       SHARED ARTIST IMAGE
    -------------------------------------------------------- */

    .ts-popular-image,
    .ts-artist-image {
        width: 110px;

        height: 100%;

        min-height: 125px;

        aspect-ratio: auto;
    }


    /* --------------------------------------------------------
       SHARED ARTIST INFORMATION
    -------------------------------------------------------- */

    .ts-popular-info,
    .ts-artist-content {
        justify-content: center;

        padding: 11px 13px;
    }


    /* --------------------------------------------------------
       ARTIST NAME
    -------------------------------------------------------- */

    .ts-popular-name,
    .ts-artist-name {
        font-size: 15px;
    }


    /* --------------------------------------------------------
       COUNTRY
    -------------------------------------------------------- */

    .ts-artist-country {
        font-size: 10px;
    }


    /* --------------------------------------------------------
       STATS
    -------------------------------------------------------- */

    .ts-artist-stats {
        margin-top: 8px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       RECORD LABEL
    -------------------------------------------------------- */

    .ts-artist-label,
    .ts-artist-record-label {
        margin-top: 6px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       VIEW ARTIST
    -------------------------------------------------------- */

    .ts-artist-view,
    .ts-artist-link {
        margin-top: 9px;

        font-size: 10px;
    }


    .ts-artist-view i {
        font-size: 9px;
    }


    .ts-artist-link svg {
        width: 12px;
        height: 12px;
    }


    /* --------------------------------------------------------
       PLACEHOLDER
    -------------------------------------------------------- */

    .ts-artist-placeholder i {
        font-size: 42px;
    }


    /* --------------------------------------------------------
       ALPHABET
    -------------------------------------------------------- */

    .ts-artist-search {
        margin-bottom: 30px;
    }


    .ts-alphabet {
        justify-content: flex-start;

        gap: 4px;
    }


    .ts-alphabet a {
        min-width: 29px;

        height: 29px;

        padding: 0 7px;

        border-radius: 5px;

        font-size: 10px;
    }


    .ts-alphabet .ts-alphabet-all {
        padding-left: 11px;

        padding-right: 11px;
    }


    /* --------------------------------------------------------
       PAGINATION
    -------------------------------------------------------- */

    .ts-artist-pagination {
        margin-top: 18px;
    }


    .ts-artist-pagination .pagination {
        gap: 4px;
    }


    .ts-artist-pagination .page-link {
        min-width: 30px;

        height: 30px;

        padding: 0 7px;

        border-radius: 5px;

        font-size: 10px;
    }


    /* --------------------------------------------------------
       SECTION BUTTON
    -------------------------------------------------------- */

    .ts-artists-page .ts-section-button {
        margin-top: 20px;
    }


    .ts-artists-page .ts-section-button a {
        padding: 9px 15px;

        font-size: 10px;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    /* --------------------------------------------------------
       PAGE
    -------------------------------------------------------- */

    .ts-artists-page {
        padding-top: 24px;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .ts-artists-header .ts-section-heading h1 {
        font-size: 19px;
    }


    .ts-artists-intro {
        font-size: 10px;
    }


    .ts-artists-date {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       SHARED ARTIST CARD
    -------------------------------------------------------- */

    .ts-popular-card,
    .ts-artist-card {
        grid-template-columns:
            105px minmax(0, 1fr);

        min-height: 120px;
    }


    /* --------------------------------------------------------
       IMAGE
    -------------------------------------------------------- */

    .ts-popular-image,
    .ts-artist-image {
        width: 105px;

        min-height: 120px;
    }


    /* --------------------------------------------------------
       INFORMATION
    -------------------------------------------------------- */

    .ts-popular-info,
    .ts-artist-content {
        padding: 10px 11px;
    }


    /* --------------------------------------------------------
       NAME
    -------------------------------------------------------- */

    .ts-popular-name,
    .ts-artist-name {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       COUNTRY
    -------------------------------------------------------- */

    .ts-artist-country {
        font-size: 9px;
    }


    /* --------------------------------------------------------
       STATS
    -------------------------------------------------------- */

    .ts-artist-stats {
        margin-top: 6px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       RECORD LABEL
    -------------------------------------------------------- */

    .ts-artist-label,
    .ts-artist-record-label {
        margin-top: 5px;

        font-size: 8.5px;
    }


    /* --------------------------------------------------------
       VIEW ARTIST
    -------------------------------------------------------- */

    .ts-artist-view,
    .ts-artist-link {
        margin-top: 7px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       PLACEHOLDER
    -------------------------------------------------------- */

    .ts-artist-placeholder i {
        font-size: 36px;
    }

}



/* ============================================================
   MUSIC NEWS PAGE
============================================================ */

.ts-music-news-page {
    width: 100%;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.ts-music-news-page .ts-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 8px;
    padding-bottom: 12px;

    border-bottom: 1px solid #e5e5e5;
}

.ts-music-news-page .ts-section-heading h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;

    color: #171717;
}


/* ============================================================
   SUBHEADING
============================================================ */

.ts-music-news-subheading {
    margin: 6px 0 0;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;

    color: #777;
}


/* ============================================================
   CURRENT DAILY DATE
============================================================ */

.ts-music-news-date {
    width: 100%;

    margin-bottom: 20px;

    text-align: center;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    color: #999;
}


/* ============================================================
   NEWS LIST
============================================================ */

.ts-music-news-list {
    width: 100%;
}


/* ============================================================
   NEWS CARD
============================================================ */

.ts-music-news-card {
    width: 100%;

    margin: 0 0 28px;
    padding: 0 0 24px;

    border-bottom: 1px solid #e5e5e5;
}


/* ============================================================
   CARD LINK
============================================================ */

.ts-music-news-card-link {
    display: block;

    width: 100%;

    color: inherit;
    text-decoration: none;

    overflow: hidden;
}


/* ============================================================
   IMAGE
============================================================ */

.ts-music-news-image {
    float: left;

    width: 200px;
    height: 200px;

    margin: 0 22px 12px 0;

    overflow: hidden;
}

.ts-music-news-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   ARTICLE CONTENT
============================================================ */

.ts-music-news-content {
    width: 100%;

    min-height: 200px;

    font-family: Georgia, Garamond, serif;
}


/* ============================================================
   ARTICLE TITLE
============================================================ */

.ts-music-news-title {
    margin: 0 0 10px;

    font-family: Perpetua, Georgia, Garamond, serif;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;

    color: #171717;
}


/* ============================================================
   ARTICLE DESCRIPTION
============================================================ */

.ts-music-news-intro {
    margin: 0;

    max-width: 100%;

    font-family: Georgia, Garamond, serif;

    font-size: 16px;
    line-height: 1.65;

    /*
     * Desktop editorial style:
     * text flows naturally around the image
     * and is justified.
     */
    text-align: justify;

    color: #444;
}


/* Remove unwanted margins from HTML
   that may be stored inside intro. */

.ts-music-news-intro p {
    margin-top: 0;
    margin-bottom: 8px;
}

.ts-music-news-intro p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   ARTICLE META
============================================================ */

.ts-music-news-meta {
    clear: both;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 16px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;

    color: #999;
}

.ts-music-news-meta-separator {
    color: #bbb;
}

.ts-music-news-post-date {
    color: #999;
}


/* ============================================================
   CONTINUE READING
============================================================ */

.ts-music-news-read-more {
    clear: both;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    margin-top: 12px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;

    color: #6b7228;
}

.ts-music-news-arrow {
    font-size: 16px;

    transition: transform 0.2s ease;
}

.ts-music-news-card-link:hover .ts-music-news-arrow {
    transform: translateX(3px);
}


/* ============================================================
   CARD HOVER
============================================================ */

.ts-music-news-card-link:hover .ts-music-news-title {
    color: #6b7228;
}


/* ============================================================
   PAGINATION
============================================================ */

.ts-music-news-page .pagination {
    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 30px;
    margin-bottom: 20px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 768px) {

    .ts-music-news-page .ts-section-heading h2 {
        font-size: 23px;
    }

    .ts-music-news-image {
        width: 160px;
        height: 160px;

        margin-right: 18px;
    }

    .ts-music-news-content {
        min-height: 160px;
    }

    .ts-music-news-title {
        font-size: 23px;
    }

    .ts-music-news-intro {
        font-size: 15px;
        line-height: 1.55;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 576px) {

    .ts-music-news-page .ts-section-heading {
        margin-bottom: 6px;
        padding-bottom: 10px;
    }

    .ts-music-news-page .ts-section-heading h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    .ts-music-news-subheading {
        margin-top: 5px;

        font-size: 12px;
        line-height: 1.4;
    }


    /* --------------------------------------------------------
       CURRENT DATE
    -------------------------------------------------------- */

    .ts-music-news-date {
        margin-bottom: 16px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       NEWS CARD
    -------------------------------------------------------- */

    .ts-music-news-card {
        margin-bottom: 22px;
        padding-bottom: 20px;
    }


    /* --------------------------------------------------------
       IMAGE
    -------------------------------------------------------- */

    .ts-music-news-image {
        width: 125px;
        height: 125px;

        margin-right: 14px;
        margin-bottom: 8px;
    }


    /* --------------------------------------------------------
       CONTENT
    -------------------------------------------------------- */

    .ts-music-news-content {
        min-height: 125px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .ts-music-news-title {
        margin-bottom: 7px;

        font-size: 19px;
        line-height: 1.25;
    }


    /* --------------------------------------------------------
       DESCRIPTION
    -------------------------------------------------------- */

    .ts-music-news-intro {
        font-size: 14px;
        line-height: 1.5;

        /*
         * Justification is removed on small screens
         * for better readability.
         */
        text-align: left;
    }


    /* --------------------------------------------------------
       META
    -------------------------------------------------------- */

    .ts-music-news-meta {
        margin-top: 12px;

        font-size: 11px;
    }


    /* --------------------------------------------------------
       CONTINUE READING
    -------------------------------------------------------- */

    .ts-music-news-read-more {
        margin-top: 10px;

        font-size: 12px;
    }

}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    .ts-music-news-image {
        width: 105px;
        height: 105px;

        margin-right: 12px;
    }

    .ts-music-news-content {
        min-height: 105px;
    }

    .ts-music-news-title {
        font-size: 17px;
    }

    .ts-music-news-intro {
        font-size: 13px;
        line-height: 1.45;
    }

}


/* =========================================================
   TRENDYSONGZ MUSIC DETAIL
   ========================================================= */

.ts-music-detail,
.ts-music-detail *,
.ts-music-detail *::before,
.ts-music-detail *::after {
    box-sizing: border-box;
}

.ts-music-detail {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
}

/* Title and posting details */

.ts-music-header {
    padding: 0 0 16px;
    text-align: left;
}

.ts-music-title {
    margin: 15px 0 0;
    color: #222;
    font-size: 29px;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: break-word;
}

.ts-music-featuring {
    font-weight: 400;
    color: #6b7228;
}

.ts-music-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 7px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    justify-content: flex-start;
}

.ts-music-posted-by {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.ts-music-posted-by:hover {
    color: #6b7228;
}

.ts-music-posted-by strong {
    color: #333;
}

.ts-music-posted-by i {
    margin-left: 3px;
    color: #2d99d7;
}

.ts-music-meta-separator {
    color: #aaa;
}

.ts-music-date {
    color: #777;
}


/* Main card */

.ts-music-detail .ts-music-details-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
}

/* Five cells on one row, label above value */

.ts-music-detail .ts-music-info-bar {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #e4e4e4;
    background: #fafafa;
}

.ts-music-detail .ts-info-item {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 6px 4px;
    overflow: hidden;
    text-align: center;
}

.ts-music-detail .ts-info-item + .ts-info-item {
    border-left: 1px solid #e4e4e4;
}

.ts-music-detail .ts-info-label {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-music-detail .ts-info-value {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #222;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-music-detail .ts-info-value a {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #626b26;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cover and song content */

.ts-music-detail .ts-music-body {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 16px;
}

.ts-music-detail .ts-music-cover {
    position: relative;
    display: block;
    width: 170px;
    height: 170px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #e9ebdf;
}

.ts-music-detail .ts-music-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ts-music-detail .ts-music-content {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.ts-music-detail .ts-song-artist {
    max-width: 100%;
    margin: 0 0 3px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ts-music-detail .ts-song-title-row {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 6px;
    margin: 0 0 10px;
}

.ts-music-detail .ts-song-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ts-music-detail .ts-song-featuring {
    font-size: 13px;
    line-height: 1.3;
}

/* Play button and listening text */

/* ========================================
   MUSIC AUDIO PLAYER
======================================== */

/* Audio player layout */
.ts-music-detail .ts-audio-box {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 8px;
    margin: 0;
    padding: 0;
}

/* Listening text above the controls */
.ts-music-detail .ts-audio-heading {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Play button */
.ts-music-detail .ts-main-play {
    grid-column: 1;
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #6b7228;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Audio progress container */
.ts-music-detail .ts-audio-progress {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Current and total time */
.ts-music-detail .ts-audio-progress span {
    flex: 0 0 auto;
    min-width: 35px;
    color: #555;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Audio progress slider */
.ts-music-detail .ts-progress-bar {
    --progress: 0%;

    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 5px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        #128C7E var(--progress),
        #ddd var(--progress)
    );
}

/* Chrome, Safari and Edge slider thumb */
.ts-music-detail .ts-progress-bar::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 50%;
    background: #128C7E;
    cursor: pointer;
}

/* Firefox slider thumb */
.ts-music-detail .ts-progress-bar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #128C7E;
    cursor: pointer;
}

/* Play button and download button disabled states */
.ts-music-detail .ts-main-play:disabled,
.ts-music-detail .ts-download-button:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}


/* ========================================
   MUSIC DOWNLOAD BUTTON
======================================== */

.ts-music-detail .ts-download-button {
    display: inline-flex;
    width: min(100%, 310px);
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px 0 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: #6b7228;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.ts-music-content .ts-song-artist a,
.ts-music-content .ts-song-artist a:hover,
.ts-music-content .ts-song-artist a:visited {
    color: inherit;
    text-decoration: none;
}

/* About the song */

.ts-music-detail .ts-about-song {
    margin-top: 18px;
    padding: 0;
}

.ts-music-detail .ts-about-song-inner {
    width: 100%;
}

.ts-music-detail .ts-about-heading {
    width: fit-content;
    margin: 0 auto 16px;
    padding: 0 12px 5px;
    border-bottom: 3px solid olive;
    text-align: center;
    text-transform: uppercase;
}

.ts-music-detail .ts-about-text {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
}

.ts-music-detail .ts-about-text p {
    margin: 0 0 12px;
}

/* Mobile */

@media (max-width: 600px) {
    .ts-music-detail .ts-music-title {
        font-size: 19px;
    }

    .ts-music-detail .ts-music-meta {
        font-size: 12px;
    }

    .ts-music-detail .ts-info-item {
        min-height: 42px;
        gap: 2px;
        padding: 4px 2px;
    }

    .ts-music-detail .ts-info-label {
        font-size: 8px;
    }

    .ts-music-detail .ts-info-value {
        font-size: 9px;
    }

    .ts-music-detail .ts-music-body {
        grid-template-columns: minmax(0, 90px) minmax(0, 1fr);
        gap: 9px;
        padding: 10px 7px;
    }

    .ts-music-detail .ts-music-cover {
        width: 90px;
        height: 90px;
    }

    .ts-music-detail .ts-song-artist {
        font-size: 16px;
    }

    .ts-music-detail .ts-song-title {
        font-size: 14px;
    }

    .ts-music-detail .ts-audio-heading {
        font-size: 11px;
    }

    .ts-music-detail .ts-download-button {
        width: 100%;
        min-height: 36px;
        margin-top: 8px;
        padding: 5px;
        font-size: 10px;
    }

    .ts-music-detail .ts-about-text {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .ts-music-detail .ts-music-body {
        grid-template-columns: minmax(0, 75px) minmax(0, 1fr);
        gap: 7px;
    }

    .ts-music-detail .ts-music-cover {
        width: 75px;
        height: 75px;
    }

    .ts-music-detail .ts-info-label {
        font-size: 7px;
    }

    .ts-music-detail .ts-info-value {
        font-size: 8px;
    }
}

/* =========================================================
   SHARE SONG
========================================================= */

.ts-share-section {
    width: 100%;

    margin: 30px 0 0;
    padding: 22px 20px 24px;

    text-align: center;

    box-sizing: border-box;
}


/* =========================================================
   SHARE HEADING
========================================================= */

.ts-share-heading {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 0 0 13px;
}

.ts-share-heading-line {
    width: 50px;
    height: 3px;
    flex: 0 0 55px;
    background: #d8d8d8;
}

.ts-share-heading-text {
    flex: 0 0 auto;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: #6b7228;
}


/* =========================================================
   SHARE DESCRIPTION
========================================================= */

.ts-share-description {
    margin: 0 0 17px;

    font-family: 'Inter', Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 600;

    color: #555;
}


/* =========================================================
   SHARE ACTIONS
========================================================= */

.ts-share-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}


/* =========================================================
   COPY BUTTON
========================================================= */

.ts-share-copy {
    height: 38px;

    min-width: 104px;

    margin: 0;
    padding: 0 13px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid #6b7228;

    border-radius: 5px;

    background: #6b7228;

    color: #fff;

    font-family: 'Inter', Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.ts-share-copy:hover {
    background: #59601f;

    border-color: #59601f;

    transform: translateY(-1px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.ts-share-copy:active {
    transform: translateY(0);
}

.ts-share-copy:focus {
    outline: none;
}

.ts-share-copy:focus-visible {
    outline: 2px solid #6b7228;

    outline-offset: 3px;
}


/* =========================================================
   COPY ICON
========================================================= */

.ts-copy-icon {
    width: 17px;
    height: 17px;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}

.ts-copy-icon i {
    font-size: 11px;
}


/* =========================================================
   COPIED STATE
========================================================= */

.ts-share-copy.is-copied {
    background: #4f581c;

    border-color: #4f581c;

    box-shadow: 0 4px 12px rgba(107, 114, 40, .25);

    animation: tsCopySuccess .25s ease;
}

.ts-share-copy.is-copied .ts-copy-icon i {
    font-size: 12px;
}


@keyframes tsCopySuccess {

    0% {
        transform: scale(.96);
    }

    60% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   ADDTOANY SOCIAL BUTTONS
========================================================= */

.ts-share-socials {
    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


/* Override AddToAny default dimensions */

.ts-share-socials a {
    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid #dedede;

    background-color: #fff !important;

    box-shadow: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.ts-share-socials a:hover {
    transform: translateY(-2px);

    border-color: #6b7228;

    box-shadow: 0 4px 9px rgba(0, 0, 0, .10);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ts-share-section {
        margin-top: 24px;

        padding: 20px 8px 22px;
    }


    .ts-share-heading {
        gap: 9px;

        margin-bottom: 11px;
    }


    .ts-share-heading-line {
        width: 38px;

        flex-basis: 38px;
    }


    .ts-share-heading-text {
        font-size: 9px;

        letter-spacing: 1.5px;
    }


    .ts-share-description {
        margin-bottom: 15px;

        font-size: 12px;
    }


    .ts-share-actions {
        gap: 7px;
    }


    .ts-share-copy {
        height: 36px;

        min-width: 94px;

        padding: 0 10px;

        gap: 6px;

        font-size: 10px;
    }


    .ts-share-socials {
        gap: 6px;
    }


    .ts-share-socials a {
        width: 36px !important;
        height: 36px !important;
    }

}

.ts-section-button {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 25px;
}


.ts-section-button a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 1px solid #d9d9d9;

    border-radius: 7px;

    background: #fff;

    color: #555;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.ts-section-button a:hover {
    background: #6b7228;

    border-color: #6b7228;

    color: #fff;
}


/* ============================================================
   TRENDYSONGZ VIDEO DETAIL
============================================================ */

.ts-video-detail {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 0 20px;

    font-family: Arial, Helvetica, sans-serif;

    color: #222;

    box-sizing: border-box;
}

.ts-video-detail *,
.ts-video-detail *::before,
.ts-video-detail *::after {
    box-sizing: border-box;
}


/* ============================================================
   PAGE HEADER
   MATCHES TS-MUSIC-DETAIL HEADER
============================================================ */

.ts-video-detail-header {
    padding: 0 0 16px;

    text-align: left;
}

.ts-video-detail-title {
    margin: 15px 0 0;

    font-size: 29px;
    line-height: 1.2;

    font-weight: 700;

    color: #222;
}

.ts-video-detail-featuring {
    font-weight: 400;

    color: #6b7228;
}

.ts-video-detail-post-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 7px;

    font-size: 14px;
    line-height: 1.4;

    color: #666;

    justify-content: flex-start;
}

.ts-video-detail-posted-by {
    color: #333;

    text-decoration: none;

    font-weight: 600;
}

.ts-video-detail-posted-by:hover {
    color: #6b7228;
}

.ts-video-detail-posted-by strong {
    color: #333;
}

.ts-video-detail-posted-by i {
    color: #2d99d7;

    margin-left: 3px;
}

.ts-video-detail-meta-separator {
    color: #aaa;
}

.ts-video-detail-date {
    color: #777;
}


/* ============================================================
   VIDEO INFORMATION BAR

   Kept compact so it sits comfortably above the video.
============================================================ */

.ts-video-detail-info-bar {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.05fr)
        minmax(0, 1.15fr)
        minmax(0, 1.05fr);

    min-height: 48px;

    margin: 0 0 12px;
    padding: 0;

    border: 1px solid #dedede;

    border-radius: 4px;

    background: #fafafa;

    overflow: hidden;
}

.ts-video-detail-info-item {
    min-width: 0;

    min-height: 48px;

    margin: 0;
    padding: 7px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    border: 0;

    border-right: 1px solid #e5e5e5;

    overflow: hidden;
}

.ts-video-detail-info-item:last-child {
    border-right: 0;
}


/* ============================================================
   INFO LABEL
============================================================ */

.ts-video-detail-info-label {
    flex: 0 0 auto;

    font-size: 9px;
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: .45px;

    color: #777;

    text-transform: uppercase;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;
}


/* ============================================================
   INFO VALUE
============================================================ */

.ts-video-detail-info-value {
    width: 100%;

    min-width: 0;

    flex: 0 1 auto;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 900;

    text-align: center;

    color: #333;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.ts-video-detail-info-value a,
.ts-video-detail-info-value a:hover,
.ts-video-detail-info-value a:focus,
.ts-video-detail-info-value a:active {
    color: #6b7228;

    text-decoration: none;
}


/* ============================================================
   VIDEO PLAYER SECTION

============================================================ */

.ts-video-detail-player-section {
    width: 100%;

    margin: 0 0 10px;

    padding: 0;
}

.ts-video-detail-player {
    position: relative;

    width: 100%;

    aspect-ratio: 13 / 5;

    background: #000;

    border-radius: 4px;

    overflow: hidden;
}

.ts-video-detail-player video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}


/* ============================================================
   DOWNLOAD BUTTON
============================================================ */

.ts-video-detail-download-wrap {
    width: 100%;

    margin: 0 0 20px;

    padding: 0;
}

.ts-video-detail-download {
    width: 100%;

    min-height: 38px;

    margin: 0;
    padding: 0 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 3px;

    background: #6b7228;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 12px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .3px;

    text-transform: uppercase;

    transition:
        background .2s ease,
        transform .2s ease;
}

.ts-video-detail-download:hover {
    background: #59601f;

    color: #fff !important;

    transform: translateY(-1px);
}

.ts-video-detail-download:active {
    transform: translateY(0);
}

.ts-video-detail-download i {
    font-size: 13px;
}


/* ============================================================
   EXTRA DOWNLOAD
============================================================ */

.ts-video-detail-extra-download {
    margin: -5px 0 22px;

    text-align: center;
}

.ts-video-detail-extra-download a {
    color: #6b7228;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.ts-video-detail-extra-download a:hover {
    text-decoration: underline;
}

.ts-video-detail-extra-download i {
    margin-right: 5px;
}


/* ============================================================
   GENERAL SECTION
============================================================ */

.ts-video-detail-section {
    margin-top: 28px;
}

.ts-video-detail-section-heading {
    position: relative;

    margin: 0 0 18px;
    padding-bottom: 8px;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 800;

    text-align: center;

    color: #333;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.ts-video-detail-section-heading::after {
    content: "";

    display: block;

    width: 65px;
    height: 3px;

    margin: 4px auto 0;

    background: #6b7228;
}


/* ============================================================
   ABOUT VIDEO
============================================================ */

.ts-video-detail-about {
    padding: 28px 20px 35px;

    text-align: center;
}

.ts-video-detail-about-text {
    max-width: 820px;

    margin: 0 auto;

    font-family: 'Inter', Arial, Helvetica, sans-serif;

    font-size: 16px;
    line-height: 1.8;

    font-weight: 600;

    color: #222;

    text-align: left;
}

.ts-video-detail-about-text p {
    margin: 0 0 14px;
}

.ts-video-detail-about-text p:last-child {
    margin-bottom: 0;
}

.ts-video-detail-about-text a {
    color: #6b7228;
}


/* ============================================================
   VIDEO INFORMATION
============================================================ */

.ts-video-detail-information {
    text-align: center;
}

.ts-video-detail-info-text {
    margin: 0 0 12px;

    font-size: 15px;
    line-height: 1.7;
    font-weight: 600;

    color: #444;
}

.ts-video-detail-info-text:last-child {
    margin-bottom: 0;
}


/* ============================================================
   VIDEO NOT AVAILABLE
============================================================ */

.ts-video-detail-notice {
    margin: 25px 0;

    padding: 15px;

    text-align: center;

    background: #fafafa;

    border: 1px solid #e2e2e2;

    border-radius: 4px;

    font-size: 14px;

    line-height: 1.6;

    color: #777;
}


/* ============================================================
   ADDITIONAL AUDIO
============================================================ */

.ts-video-detail-audio-link {
    margin: 25px 0;

    padding: 14px;

    text-align: center;

    background: #fafafa;

    border: 1px solid #e1e1e1;

    border-radius: 4px;

    font-size: 14px;
}

.ts-video-detail-audio-link span {
    color: #777;
}

.ts-video-detail-audio-link a {
    color: #6b7228;

    font-weight: 700;

    text-decoration: none;
}

.ts-video-detail-audio-link a:hover {
    text-decoration: underline;
}



.ts-video-detail-share {
    text-align: center;
}


/* ============================================================
   MORE VIDEOS BY ARTIST
============================================================ */

.ts-video-detail-related {
    margin-top: 38px;
}

.ts-video-detail-related-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.ts-video-detail-related-item {
    display: block;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}

.ts-video-detail-related-cover {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #eee;

    border-radius: 4px;

    overflow: hidden;
}

.ts-video-detail-related-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .25s ease;
}

.ts-video-detail-related-item:hover
.ts-video-detail-related-cover img {
    transform: scale(1.03);
}

.ts-video-detail-related-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, .72);

    border-radius: 50%;

    color: #fff;

    font-size: 14px;
}

.ts-video-detail-related-info {
    padding-top: 8px;
}

.ts-video-detail-related-info h3 {
    margin: 0;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

    color: #6b7228;
}

.ts-video-detail-related-info p {
    margin: 3px 0 0;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    color: #222;
}

.ts-video-detail-related-info span {
    display: block;

    margin-top: 4px;

    font-size: 11px;

    color: #888;
}


/* ============================================================
   YOU MAY ALSO LIKE
============================================================ */

.ts-video-detail-recommendations {
    margin-top: 38px;
    text-align: left;
}

.ts-video-detail-recommendation-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.ts-video-detail-recommendation-item {
    display: flex;

    gap: 12px;

    min-width: 0;

    padding: 8px;

    background: #fff;

    border: 1px solid #e1e1e1;

    border-radius: 4px;

    text-decoration: none;

    transition: border-color .2s ease;
}

.ts-video-detail-recommendation-item:hover {
    border-color: #6b7228;
}

.ts-video-detail-recommendation-cover {
    position: relative;

    flex: 0 0 110px;

    width: 110px;
    height: 82px;

    overflow: hidden;

    background: #eee;

    border-radius: 3px;
}

.ts-video-detail-recommendation-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ts-video-detail-recommendation-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    background: rgba(0, 0, 0, .7);

    border-radius: 50%;

    color: #fff;

    font-size: 10px;
}

.ts-video-detail-recommendation-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.ts-video-detail-recommendation-info h3 {
    margin: 0;

    font-size: 14px;

    line-height: 1.3;

    color: #6b7228;
}

.ts-video-detail-recommendation-info p {
    margin: 3px 0 0;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    color: #222;
}

.ts-video-detail-recommendation-info span {
    margin-top: 4px;

    font-size: 11px;

    color: #888;
}


.ts-video-detail-related .ts-video-detail-section-heading,
.ts-video-detail-recommendations .ts-video-detail-section-heading {
    text-align: left;
}

.ts-video-detail-related .ts-video-detail-section-heading::after,
.ts-video-detail-recommendations .ts-video-detail-section-heading::after {
    margin-left: 0;
    margin-right: 0;
}


/* ============================================================
   VIDEO DETAIL - TABLET
============================================================ */

@media (max-width: 768px) {

    .ts-video-detail {
        max-width: 100%;
        padding: 0 12px;
    }


    /* ========================================================
       HEADER
    ======================================================== */

    .ts-video-detail-header {
        padding-bottom: 12px;
    }

    .ts-video-detail-title {
        margin-top: 10px;

        font-size: 24px;

        line-height: 1.25;
    }

    .ts-video-detail-post-meta {
        margin-top: 6px;

        gap: 6px;

        font-size: 13px;
    }


    /* ========================================================
       VIDEO INFORMATION BAR
    ======================================================== */

    .ts-video-detail-info-bar {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        min-height: 50px;

        margin-bottom: 10px;
    }

    .ts-video-detail-info-item {
        min-height: 50px;

        padding: 6px 4px;

        gap: 3px;
    }

    .ts-video-detail-info-label {
        font-size: 8px;
    }

    .ts-video-detail-info-value {
        font-size: 11px;
    }


    /* ========================================================
       VIDEO PLAYER
    ======================================================== */

    .ts-video-detail-player-section {
        margin-bottom: 8px;
    }

    .ts-video-detail-player {
        aspect-ratio: 16 / 9;

        border-radius: 3px;
    }


    /* ========================================================
       DOWNLOAD
    ======================================================== */

    .ts-video-detail-download-wrap {
        margin-bottom: 16px;
    }

    .ts-video-detail-download {
        min-height: 40px;

        font-size: 12px;
    }


    /* ========================================================
       EXTRA DOWNLOAD
    ======================================================== */

    .ts-video-detail-extra-download {
        margin: -2px 0 18px;
    }


    /* ========================================================
       GENERAL SECTIONS
    ======================================================== */

    .ts-video-detail-section {
        margin-top: 24px;
    }

    .ts-video-detail-section-heading {
        margin-bottom: 15px;

        font-size: 17px;
    }


    /* ========================================================
       ABOUT VIDEO
    ======================================================== */

    .ts-video-detail-about {
        padding: 20px 8px 28px;
    }

    .ts-video-detail-about-text {
        font-size: 15px;

        line-height: 1.7;

        font-weight: 500;
    }


    /* ========================================================
       INFORMATION
    ======================================================== */

    .ts-video-detail-info-text {
        font-size: 14px;

        line-height: 1.65;
    }


    /* ========================================================
       MORE VIDEOS
    ======================================================== */

    .ts-video-detail-related-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .ts-video-detail-related-info {
        padding-top: 6px;
    }

    .ts-video-detail-related-info h3 {
        font-size: 13px;
    }

    .ts-video-detail-related-info p {
        font-size: 13px;
    }


    /* ========================================================
       RECOMMENDATIONS
    ======================================================== */

    .ts-video-detail-recommendation-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .ts-video-detail-recommendation-cover {
        flex: 0 0 95px;

        width: 95px;
        height: 72px;
    }

}


/* ============================================================
   VIDEO DETAIL - SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ts-video-detail {
        padding: 0 10px;
    }


    /* HEADER */

    .ts-video-detail-title {
        font-size: 21px;
    }

    .ts-video-detail-post-meta {
        font-size: 12px;

        gap: 5px;
    }


    /* INFO BAR */

    .ts-video-detail-info-bar {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .ts-video-detail-info-item {
        padding: 5px 2px;
    }

    .ts-video-detail-info-label {
        font-size: 7px;

        letter-spacing: .25px;
    }

    .ts-video-detail-info-value {
        font-size: 10px;
    }


    /* PLAYER */

    .ts-video-detail-player {
        aspect-ratio: 16 / 9;
    }


    /* ABOUT */

    .ts-video-detail-about {
        padding: 18px 4px 25px;
    }

    .ts-video-detail-about-text {
        font-size: 14px;

        line-height: 1.65;
    }


    /* RELATED VIDEOS */

    .ts-video-detail-related-list {
        gap: 8px;
    }

    .ts-video-detail-related-play {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }

    .ts-video-detail-related-info h3 {
        font-size: 12px;
    }

    .ts-video-detail-related-info p {
        font-size: 12px;
    }

    .ts-video-detail-related-info span {
        font-size: 10px;
    }


    /* RECOMMENDATIONS */

    .ts-video-detail-recommendation-cover {
        flex: 0 0 85px;

        width: 85px;
        height: 65px;
    }

    .ts-video-detail-recommendation-info h3 {
        font-size: 13px;
    }

    .ts-video-detail-recommendation-info p {
        font-size: 13px;
    }

}


/* ============================================================
   COMMENTS
============================================================ */

.ts-video-detail-comments {
    margin-top: 40px;
}

.ts-video-detail-comment {
    display: flex;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid #e5e5e5;
}

.ts-video-detail-comment-avatar {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f1f1f1;

    border-radius: 50%;

    color: #777;
}

.ts-video-detail-comment-body {
    min-width: 0;
}

.ts-video-detail-comment-body strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;

    color: #333;
}

.ts-video-detail-comment-body p {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color: #555;
}


/* ============================================================
   COMMENT FORM
============================================================ */

.ts-video-detail-comment-form {
    margin-top: 28px;
}

.ts-video-detail-comment-form h3 {
    margin: 0 0 16px;

    font-size: 18px;

    color: #222;
}

.ts-video-detail-form-group {
    margin-bottom: 14px;
}

.ts-video-detail-form-group label {
    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 700;

    color: #555;
}

.ts-video-detail-form-group input,
.ts-video-detail-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border: 1px solid #d8d8d8;

    border-radius: 4px;

    background: #fff;

    color: #222;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    outline: none;
}

.ts-video-detail-form-group input:focus,
.ts-video-detail-form-group textarea:focus {
    border-color: #6b7228;
}

.ts-video-detail-form-group textarea {
    min-height: 120px;

    resize: vertical;
}

.ts-video-detail-comment-submit {
    min-height: 42px;

    padding: 10px 20px;

    background: #6b7228;

    color: #fff;

    border: 1px solid #5c6321;

    border-radius: 4px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;
}

.ts-video-detail-comment-submit:hover {
    background: #596020;
}


/* ============================================================
   TABLET
   601px - 900px
============================================================ */

@media (max-width: 900px) and (min-width: 601px) {

    .ts-video-detail {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .ts-video-detail-title {
        font-size: 27px;
    }


    /* =====================================================
       INFO BAR
    ===================================================== */

    .ts-video-detail-info-bar {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1.1fr)
            minmax(0, 1fr);

        min-height: 46px;
    }

    .ts-video-detail-info-item {
        min-height: 46px;

        padding: 7px 6px;
    }

    .ts-video-detail-info-label {
        font-size: 10px;
        font-weight: 600;
    }

    .ts-video-detail-info-value {
        font-size: 12px;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .ts-video-detail-player-section {
        margin-bottom: 9px;
    }

    .ts-video-detail-download {
        min-height: 43px;
    }

}


/* ============================================================
   MOBILE
   381px - 600px
============================================================ */

@media (max-width: 600px) {

    .ts-video-detail {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .ts-video-detail-header {
        padding-bottom: 10px;

        text-align: left;
    }

    .ts-video-detail-title {
        margin-top: 12px;

        font-size: 20px;

        line-height: 1.25;
    }

    .ts-video-detail-post-meta {
        display: block;

        margin-top: 6px;

        font-size: 12px;

        line-height: 1.65;
    }

    .ts-video-detail-meta-separator {
        display: none;
    }

    .ts-video-detail-date {
        display: block;
    }


    /* =====================================================
       INFO BAR
    ===================================================== */

    .ts-video-detail-info-bar {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        min-height: 50px;

        margin: 0 0 8px;
    }

    .ts-video-detail-info-item {
        width: 100%;

        min-width: 0;

        min-height: 50px;

        padding: 6px 2px;

        gap: 2px;
    }

    .ts-video-detail-info-label {
        width: 100%;

        min-width: 0;

        font-size: 10px;
        font-weight: 600;

        line-height: 1.1;

        letter-spacing: .1px;

        text-align: center;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: clip;
    }

    .ts-video-detail-info-value {
        width: 100%;

        min-width: 0;

        font-size: 11px;

        line-height: 1.15;

        text-align: center;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =====================================================
       VIDEO

       16:9 is preserved but all surrounding vertical
       spacing is minimized.
    ===================================================== */

    .ts-video-detail-player-section {
        margin: 0 0 8px;
    }

    .ts-video-detail-player {
        width: 100%;

        aspect-ratio: 16 / 9;

        border-radius: 3px;
    }


    /* =====================================================
       DOWNLOAD
    ===================================================== */

    .ts-video-detail-download-wrap {
        margin: 0 0 16px;
    }

    .ts-video-detail-download {
        min-height: 40px;

        padding: 0 10px;

        gap: 6px;

        font-size: 10px;

        letter-spacing: .2px;
    }

    .ts-video-detail-download i {
        font-size: 11px;
    }


    /* =====================================================
       EXTRA DOWNLOAD
    ===================================================== */

    .ts-video-detail-extra-download {
        margin: -2px 0 18px;
    }

    .ts-video-detail-extra-download a {
        font-size: 12px;
    }


    /* =====================================================
       SECTIONS
    ===================================================== */

    .ts-video-detail-section {
        margin-top: 24px;
    }

    .ts-video-detail-section-heading {
        margin-bottom: 15px;

        font-size: 15px;

        letter-spacing: .6px;
    }

    .ts-video-detail-about {
        padding: 24px 12px 30px;
    }

    .ts-video-detail-about-text {
        font-size: 16px;

        line-height: 1.75;
    }


    /* =====================================================
       RELATED VIDEOS
    ===================================================== */

    .ts-video-detail-related-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .ts-video-detail-related-play {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }

    .ts-video-detail-related-info {
        padding-top: 6px;
    }

    .ts-video-detail-related-info h3 {
        font-size: 12px;
    }

    .ts-video-detail-related-info p {
        font-size: 12px;
    }

    .ts-video-detail-related-info span {
        font-size: 9px;
    }


    /* =====================================================
       RECOMMENDATIONS
    ===================================================== */

    .ts-video-detail-recommendation-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .ts-video-detail-recommendation-cover {
        flex-basis: 105px;

        width: 105px;
        height: 78px;
    }


    /* =====================================================
       COMMENTS
    ===================================================== */

    .ts-video-detail-comment {
        padding: 12px 0;
    }

    .ts-video-detail-comment-avatar {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .ts-video-detail-comment-body strong {
        font-size: 13px;
    }

    .ts-video-detail-comment-body p {
        font-size: 13px;
    }

}


/* ============================================================
   VERY SMALL PHONES
   300px - 380px
============================================================ */

@media (max-width: 380px) {

    .ts-video-detail {
        padding-left: 6px;
        padding-right: 6px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .ts-video-detail-title {
        margin-top: 10px;

        font-size: 18px;

        line-height: 1.25;
    }

    .ts-video-detail-post-meta {
        font-size: 11px;
    }


    /* =====================================================
       INFO BAR
    ===================================================== */

    .ts-video-detail-info-bar {
        min-height: 46px;

        margin-bottom: 7px;
    }

    .ts-video-detail-info-item {
        min-height: 46px;

        padding: 5px 1px;

        gap: 2px;
    }

    .ts-video-detail-info-label {
        font-size: 10px;
        font-weight: 600;
    }

    .ts-video-detail-info-value {
        font-size: 10px;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .ts-video-detail-player-section {
        margin-bottom: 7px;
    }


    /* =====================================================
       DOWNLOAD
    ===================================================== */

    .ts-video-detail-download {
        min-height: 36px;

        padding: 0 7px;

        gap: 5px;

        font-size: 9px;
    }

    .ts-video-detail-download i {
        font-size: 10px;
    }


    /* =====================================================
       RELATED
    ===================================================== */

    .ts-video-detail-related-list {
        gap: 8px;
    }

    .ts-video-detail-recommendation-cover {
        flex-basis: 95px;

        width: 95px;
        height: 70px;
    }

}


/* ============================================================
   ALBUM DETAILS PAGE
============================================================ */

.ts-album-detail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    color: #333;
}

/* ============================================================
   ALBUM DETAIL HEADER
============================================================ */

.ts-album-detail-header {
    width: 100%;
    margin: 0 0 12px;
    padding: 0 4px;
    box-sizing: border-box;
}

.ts-album-detail-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: #222;
}

.ts-album-detail-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: #777;
}

.ts-album-detail-posted-by {
    color: #6b7228;
    font-weight: 600;
    text-decoration: none;
}

.ts-album-detail-meta-separator {
    color: #bbb;
}

.ts-album-detail-date {
    color: #777;
}

/* ============================================================
   ALBUM INFO BAR
============================================================ */

.ts-album-detail-info-bar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #e1e1e1;
}

.ts-album-detail-info-item {
    min-width: 0;
    padding: 9px 8px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
}

.ts-album-detail-info-label {
    display: block;
    margin-bottom: 2px;
    color: #888;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
}

.ts-album-detail-info-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: olive;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.ts-album-detail-info-value a {
    color: inherit;
    text-decoration: none;
}
/* ============================================================
   ALBUM HERO
============================================================ */

.ts-album-detail-hero {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px;
    margin: 0 0 15px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

/* COVER */

.ts-album-detail-cover {
    width: 190px;
    min-width: 190px;
    height: 190px;
    overflow: hidden;
    border-radius: 5px;
    background: #f1f1f1;
}

.ts-album-detail-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */

.ts-album-detail-content {
    flex: 1;
    min-width: 0;
    padding: 3px 0;
}

.ts-album-detail-album-title {
    margin: 0 0 7px;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    color: #222;
}

.ts-album-detail-artist {
    margin: 0 0 11px;
    font-size: 15px;
    line-height: 1.4;
    color: #6b7228;
    font-weight: 600;
}

.ts-album-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 5px 0;
    font-size: 13px;
    line-height: 1.5;
}

.ts-album-detail-meta-label {
    color: #777;
    font-weight: 400;
}

.ts-album-detail-meta-value {
    color: #333;
    font-weight: 500;
}

.ts-album-detail-artist a,
.ts-album-detail-artist a:hover,
.ts-album-detail-artist a:visited {
    color: inherit;
    text-decoration: none;
}

.ts-album-detail-info-value a,
a.ts-album-detail-info-value {
    text-decoration: none;
}

/* ============================================================
   ABOUT ALBUM
============================================================ */

.ts-album-detail-section {
    width: 100%;
    margin: 0 0 16px;
}

.ts-album-detail-about {
    padding: 14px;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
}

.ts-album-detail-section-heading {
    position: relative;
    margin: 0 0 11px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    color: #222;
}

.ts-album-detail-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 55px;
    height: 2px;
    background: #6b7228;
}

.ts-album-detail-about-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

.ts-album-detail-about-text p {
    margin: 0 0 10px;
}

.ts-album-detail-about-text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   TRACKLIST
============================================================ */

.ts-album-detail-tracklist-section {
    width: 100%;
    margin-bottom: 18px;
}

.ts-album-detail-tracklist {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

/* TRACK */

.ts-album-detail-track {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
}

.ts-album-detail-track:last-child {
    border-bottom: 0;
}

.ts-album-detail-track:hover {
    background: #fafafa;
}

/* TRACK LINK */

.ts-album-detail-track-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* NUMBER */

.ts-album-detail-track-number {
    width: 30px;
    min-width: 30px;
    margin-right: 8px;
    text-align: center;
    font-size: 12px;
    color: #888;
}

/* INFO */

.ts-album-detail-track-info {
    flex: 1;
    min-width: 0;
}

.ts-album-detail-track-title {
    display: block;
    margin: 0 0 3px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #222;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-album-detail-track-artists {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #777;
}

.ts-album-detail-track-artist {
    color: #6b7228;
}

.ts-album-detail-track-featuring {
    color: #777;
}

.ts-album-detail-track-producer {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #999;
}

/* ACTIONS */

.ts-album-detail-track-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
}

.ts-album-detail-track-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #6b7228;
    text-decoration: none;
    box-sizing: border-box;
}

.ts-album-detail-track-action:hover {
    background: #6b7228;
    color: #fff;
    border-color: #6b7228;
}

.ts-album-detail-track-action svg {
    width: 15px;
    height: 15px;
}

/* EMPTY */

.ts-album-detail-empty {
    padding: 25px 15px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

/* ============================================================
   SHARE SECTION
============================================================ */

.ts-share-section {
    width: 100%;
    padding: 15px;
    margin-bottom: 18px;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}

.ts-share-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 7px;
}

.ts-share-heading-line {
    flex: 1;
    height: 1px;
    background: #ddd;
}

.ts-share-heading-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.ts-share-description {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #888;
}

.ts-share-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ts-share-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 12px;
    cursor: pointer;
}

.ts-share-copy:hover {
    border-color: #6b7228;
    color: #6b7228;
}

.ts-copy-icon {
    display: inline-flex;
    align-items: center;
}

.ts-copy-icon svg {
    width: 15px;
    height: 15px;
}

.ts-copy-label {
    font-size: 12px;
}

.ts-share-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .ts-album-detail-title {
        font-size: 21px;
    }

    .ts-album-detail-hero {
        gap: 14px;
        padding: 12px;
    }

    .ts-album-detail-cover {
        width: 165px;
        min-width: 165px;
        height: 165px;
    }

    .ts-album-detail-album-title {
        font-size: 20px;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .ts-album-detail {
        width: 100%;
        padding: 0;
    }

    /* HEADER */

    .ts-album-detail-header {
        padding: 0 2px;
        margin-bottom: 9px;
    }

    .ts-album-detail-title {
        font-size: 18px;
        line-height: 1.3;
    }

    .ts-album-detail-post-meta {
        margin-top: 5px;
        gap: 5px;
        font-size: 10px;
    }

    /* INFO BAR */

    .ts-album-detail-info-bar {
        margin-bottom: 10px;
        border-radius: 4px;
    }

    .ts-album-detail-info-item {
        padding: 7px 2px;
    }

    .ts-album-detail-info-label {
        font-size: 8px;
    }

    .ts-album-detail-info-value {
        font-size: 11px;
        font-weight: 500;
    }

    /* HERO */

    .ts-album-detail-hero {
        display: flex;
        gap: 11px;
        padding: 9px;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .ts-album-detail-cover {
        width: 125px;
        min-width: 125px;
        height: 125px;
        border-radius: 4px;
    }

    .ts-album-detail-content {
        padding: 0;
    }

    .ts-album-detail-album-title {
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 1.25;
    }

    .ts-album-detail-artist {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .ts-album-detail-meta-row {
        gap: 2px 5px;
        margin: 3px 0;
        font-size: 10px;
        line-height: 1.35;
    }

    .ts-album-detail-meta-label {
        color: #888;
    }

    .ts-album-detail-meta-value {
        font-weight: 500;
    }

    /* ABOUT */

    .ts-album-detail-section {
        margin-bottom: 10px;
    }

    .ts-album-detail-about {
        padding: 10px;
        border-radius: 4px;
    }

    .ts-album-detail-section-heading {
        margin-bottom: 8px;
        padding-bottom: 6px;
        font-size: 15px;
    }

    .ts-album-detail-section-heading::after {
        width: 45px;
    }

    .ts-album-detail-about-text {
        font-size: 12px;
        line-height: 1.6;
    }

    /* TRACKLIST */

    .ts-album-detail-tracklist-section {
        margin-bottom: 10px;
    }

    .ts-album-detail-track {
        padding: 8px 7px;
    }

    .ts-album-detail-track-number {
        width: 23px;
        min-width: 23px;
        margin-right: 5px;
        font-size: 10px;
    }

    .ts-album-detail-track-title {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .ts-album-detail-track-artists {
        gap: 3px;
        font-size: 9px;
    }

    .ts-album-detail-track-producer {
        margin-top: 1px;
        font-size: 8px;
    }

    .ts-album-detail-track-actions {
        gap: 3px;
        margin-left: 5px;
    }

    .ts-album-detail-track-action {
        width: 27px;
        height: 27px;
    }

    .ts-album-detail-track-action svg {
        width: 13px;
        height: 13px;
    }

    /* SHARE */

    .ts-share-section {
        padding: 10px;
        margin-bottom: 10px;
    }

    .ts-share-heading {
        gap: 6px;
        margin-bottom: 5px;
    }

    .ts-share-heading-text {
        font-size: 14px;
    }

    .ts-share-description {
        margin-bottom: 9px;
        font-size: 10px;
    }

    .ts-share-actions {
        gap: 5px;
    }

    .ts-share-copy {
        min-height: 30px;
        padding: 0 8px;
        font-size: 10px;
    }

    .ts-copy-label {
        font-size: 10px;
    }

}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ts-album-detail-title {
        font-size: 17px;
    }

    .ts-album-detail-hero {
        gap: 9px;
        padding: 8px;
    }

    .ts-album-detail-cover {
        width: 110px;
        min-width: 110px;
        height: 110px;
    }

    .ts-album-detail-album-title {
        font-size: 15px;
    }

    .ts-album-detail-artist {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .ts-album-detail-meta-row {
        font-size: 9px;
    }

    .ts-album-detail-info-label {
        font-size: 7px;
    }

    .ts-album-detail-info-value {
        font-size: 10px;
    }

}

/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .ts-album-detail-hero {
        gap: 8px;
        padding: 7px;
    }

    .ts-album-detail-cover {
        width: 95px;
        min-width: 95px;
        height: 95px;
    }

    .ts-album-detail-album-title {
        font-size: 14px;
    }

    .ts-album-detail-artist {
        font-size: 10px;
    }

    .ts-album-detail-meta-row {
        font-size: 8.5px;
    }

    .ts-album-detail-track {
        padding: 7px 5px;
    }

    .ts-album-detail-track-number {
        width: 20px;
        min-width: 20px;
        margin-right: 3px;
    }

    .ts-album-detail-track-title {
        font-size: 11px;
    }

    .ts-album-detail-track-artists {
        font-size: 8px;
    }

    .ts-album-detail-track-action {
        width: 25px;
        height: 25px;
    }

}

/* ============================================================
   EXTRA SMALL DEVICES
============================================================ */

@media (max-width: 330px) {

    .ts-album-detail-cover {
        width: 85px;
        min-width: 85px;
        height: 85px;
    }

    .ts-album-detail-album-title {
        font-size: 13px;
    }

    .ts-album-detail-artist {
        font-size: 9px;
    }

    .ts-album-detail-meta-row {
        font-size: 8px;
    }

    .ts-album-detail-track-actions {
        margin-left: 3px;
    }

    .ts-album-detail-track-action {
        width: 23px;
        height: 23px;
    }

}


/* =========================================================
   TRENDYSONGZ ARTIST DETAILS PAGE
========================================================= */

.ts-artist-detail {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;

    font-family: Arial, Helvetica, sans-serif;
    color: #222;

    box-sizing: border-box;
}

.ts-artist-detail *,
.ts-artist-detail *::before,
.ts-artist-detail *::after {
    box-sizing: border-box;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.ts-artist-page-title {
    width: 100%;
    margin: 15px 0 7px;

    font-family: Georgia, Garamond, serif;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;

    color: indigo;

    text-align: left;
}

.ts-artist-date {
    width: 100%;

    margin: 0 0 18px;

    color: #777;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;

    text-align: center;
}


/* =========================================================
   ARTIST PROFILE
========================================================= */

.ts-artist-profile-section {
    width: 100%;
    margin-bottom: 18px;
}

.ts-artist-profile-card {
    width: 100%;

    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 18px;

    background: #fff;

    border: 1px solid #dedede;
    border-radius: 5px;

    text-align: left;
}


/* =========================================================
   ARTIST PROFILE IMAGE
========================================================= */

.ts-artist-profile-image {
    flex: 0 0 180px;

    width: 180px;
    height: 180px;

    overflow: hidden;

    border-radius: 5px;

    background: #f1f1f1;
}

.ts-artist-profile-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ts-artist-profile-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #999;

    font-size: 45px;
}


/* =========================================================
   ARTIST PROFILE INFORMATION
========================================================= */

.ts-artist-profile-info {
    min-width: 0;
    flex: 1;

    padding-top: 3px;

    text-align: left;
}

.ts-artist-profile-row {
    width: 100%;

    display: flex;
    align-items: baseline;

    padding: 9px 0;

    border-bottom: 1px solid #eeeeee;

    text-align: left;
}

.ts-artist-profile-row:first-child {
    padding-top: 0;
}

.ts-artist-profile-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


/* Profile label */

.ts-artist-profile-label {
    flex: 0 0 120px;

    color: #777;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;

    text-align: left;
}


/* Profile value */

.ts-artist-profile-value {
    min-width: 0;
    flex: 1;

    color: olive;

    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;

    text-align: left;

    overflow-wrap: anywhere;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.ts-artist-section {
    width: 100%;

    margin-bottom: 18px;
    padding: 18px;

    background: #fff;

    border: 1px solid #dedede;
    border-radius: 5px;
}

.ts-artist-section-heading {
    width: 100%;

    margin-bottom: 14px;
    padding-bottom: 8px;

    border-bottom: 1px solid #e2e2e2;

    text-align: left;
}

.ts-artist-section-heading h2 {
    margin: 0;

    color: #222;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;

    text-align: left;
}


/* =========================================================
   ABOUT / BIOGRAPHY
========================================================= */

.ts-artist-about-text {
    width: 100%;

    color: #555;

    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;

    text-align: left;
}

.ts-artist-about-text p {
    margin: 0 0 12px;
}

.ts-artist-about-text p:last-child {
    margin-bottom: 0;
}

.ts-artist-about-text h2,
.ts-artist-about-text h3,
.ts-artist-about-text h4 {
    margin-top: 18px;
    margin-bottom: 8px;

    color: #333;

    text-align: left;
}

.ts-artist-about-text a {
    color: #6b7228;
}


/* =========================================================
   GENERAL INFORMATION
========================================================= */

.ts-artist-info-text {
    color: #555;

    font-size: 15px;
    line-height: 1.7;

    text-align: left;
}

.ts-artist-info-list {
    display: flex;
    flex-direction: column;
}

.ts-artist-info-item {
    padding: 11px 0;

    border-bottom: 1px solid #eeeeee;

    text-align: left;
}

.ts-artist-info-item:first-child {
    padding-top: 0;
}

.ts-artist-info-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ts-artist-info-item-title {
    margin-bottom: 4px;

    color: #333;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;

    text-align: left;
}

.ts-artist-info-item-text {
    color: #666;

    font-size: 14px;
    line-height: 1.65;

    text-align: left;
}


/* =========================================================
   ALBUM LIST
========================================================= */

.ts-artist-albums {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.ts-artist-album {
    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid #dedede;
    border-radius: 5px;
}


/* =========================================================
   ALBUM HEADER
========================================================= */

.ts-artist-album-header {
    position: relative;

    width: 100%;
    min-height: 112px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 14px 55px 14px 14px;

    border: 0;

    background: #fff;

    cursor: pointer;

    text-align: left;

    transition: background 0.2s ease;
}

.ts-artist-album-header:hover {
    background: #fafafa;
}


/* =========================================================
   ALBUM COVER
========================================================= */

.ts-artist-album-cover {
    flex: 0 0 85px;

    width: 85px;
    height: 85px;

    overflow: hidden;

    border-radius: 5px;

    background: #f1f1f1;
}

.ts-artist-album-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ts-artist-album-cover-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #999;

    font-size: 25px;
}


/* =========================================================
   ALBUM HEADER INFORMATION
========================================================= */

.ts-artist-album-header-info {
    min-width: 0;
    flex: 1;

    margin-left: 15px;

    text-align: left !important;
}


/* =========================================================
   ALBUM TITLE
========================================================= */

.ts-artist-album-header-info .ts-artist-album-title {
    display: block;

    width: 100%;

    margin: 0 0 9px;
    padding: 0;

    color: #222;

    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;

    text-align: left !important;
}


/* =========================================================
   ALBUM META
========================================================= */

.ts-artist-album-header-info .ts-artist-album-meta {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 14px;

    margin: 0;
    padding: 0;

    color: #555;

    font-size: 13px;
    line-height: 1.4;

    text-align: left !important;
}


/* =========================================================
   ALBUM META ITEM
========================================================= */

.ts-artist-album-header-info .ts-artist-album-meta-item {
    display: inline-flex;

    align-items: baseline;
    justify-content: flex-start;

    gap: 5px;

    margin: 0;
    padding: 0;

    text-align: left !important;
}


/* =========================================================
   ALBUM META LABEL
========================================================= */

.ts-artist-album-header-info .ts-artist-album-meta-label {
    display: inline;

    margin: 0;
    padding: 0;

    color: #888;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;

    text-align: left !important;
}


/* =========================================================
   ALBUM META VALUE
========================================================= */

.ts-artist-album-header-info .ts-artist-album-meta-value {
    display: inline;

    margin: 0;
    padding: 0;

    color: #444;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;

    text-align: left !important;
}


/* =========================================================
   ALBUM TOGGLE
========================================================= */

.ts-artist-album-toggle {
    position: absolute;

    top: 50%;
    right: 18px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6b7228;

    transform: translateY(-50%);

    transition: transform 0.2s ease;
}

.ts-artist-album.is-open .ts-artist-album-toggle {
    transform:
        translateY(-50%)
        rotate(180deg);
}


/* =========================================================
   ALBUM TRACKS
========================================================= */

.ts-artist-album-tracks {
    display: none;

    width: 100%;

    border-top: 1px solid #e5e5e5;
}

.ts-artist-album.is-open .ts-artist-album-tracks {
    display: block;
}


/* =========================================================
   ALBUM TRACK
========================================================= */

.ts-artist-track {
    width: 100%;
    min-height: 66px;

    display: flex;
    align-items: center;

    padding: 10px 14px;

    background: #fff;

    border-bottom: 1px solid #eeeeee;

    color: inherit;
    text-decoration: none;

    text-align: left;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease;
}

.ts-artist-track:last-child {
    border-bottom: 0;
}

.ts-artist-track:hover {
    background: #fafafa;
    padding-left: 18px;
}


/* =========================================================
   TRACK NUMBER
   ALBUM TRACKS ONLY
========================================================= */

.ts-artist-track-number {
    flex: 0 0 38px;

    color: #999;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;

    text-align: center;
}


/* =========================================================
   TRACK INFORMATION
========================================================= */

.ts-artist-track-info {
    min-width: 0;
    flex: 1;

    text-align: left;
}


/* =========================================================
   TRACK TITLE ROW
========================================================= */

.ts-artist-track-title-row {
    width: 100%;

    display: flex;
    align-items: baseline;

    flex-wrap: wrap;

    gap: 7px;

    text-align: left;
}


/* =========================================================
   TRACK TITLE
========================================================= */

.ts-artist-track-title {
    margin: 0;

    color: #333;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;

    text-align: left;
}


/* =========================================================
   FEATURING
========================================================= */

.ts-artist-track-featuring {
    margin: 0;
    padding: 0;

    color: #6b7228;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

    text-align: left;
}

.ts-artist-track-featuring span {
    margin-right: 4px;

    font-weight: 600;
}


/* =========================================================
   PRODUCER / DIRECTOR
========================================================= */

.ts-artist-track-credit {
    margin-top: 4px;

    color: #888;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 400;

    text-align: left;
}

.ts-artist-track-credit span {
    color: #777;
    font-weight: 600;
}


/* =========================================================
   TRACK ARROW
========================================================= */

.ts-artist-track-arrow {
    flex: 0 0 24px;

    margin-left: 10px;

    color: #999;

    text-align: right;
}

.ts-artist-track:hover .ts-artist-track-arrow {
    color: #6b7228;
}


/* =========================================================
   SINGLES
   NO TRACK NUMBERS
========================================================= */

.ts-artist-singles {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.ts-artist-single {
    width: 100%;
    min-height: 64px;
}

.ts-artist-single .ts-artist-track-info {
    margin-left: 0;
    font-size: 14px;
    text-align: left;
    padding-right: 14px;
}



.ts-artist-single-cover {
    position: relative;
    display: block;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 4px;
    background: #eee;
    margin-right: 12px;
}

.ts-artist-single-cover .ts-cover-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ts-artist-single-cover img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ts-artist-single .ts-artist-track-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ts-featured-song-artist {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   EMPTY TRACKLIST
========================================================= */

.ts-artist-no-tracks {
    padding: 15px;

    color: #888;

    font-size: 14px;
    line-height: 1.5;

    text-align: center;
}





/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767px) {

    .ts-artist-detail {
        max-width: 100%;
        padding: 0 12px;
    }


    /* =====================================================
       PAGE TITLE
    ===================================================== */

    .ts-artist-page-title {
        margin-top: 12px;
        margin-bottom: 6px;

        font-size: 22px;
        line-height: 1.35;
    }

    .ts-artist-date {
        margin-bottom: 14px;

        font-size: 12px;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .ts-artist-profile-card {
        gap: 15px;
        padding: 12px;
    }

    .ts-artist-profile-image {
        flex: 0 0 125px;

        width: 125px;
        height: 125px;
    }

    .ts-artist-profile-info {
        padding-top: 1px;
    }

    .ts-artist-profile-row {
        display: block;

        padding: 4px 0;

        border-bottom: 0;
    }

    .ts-artist-profile-row:first-child {
        padding-top: 0;
    }

    .ts-artist-profile-label {
        display: block;

        width: 100%;
        margin-bottom: 1px;

        font-size: 11px;
        line-height: 1.3;

        text-align: left;
    }

    .ts-artist-profile-value {
        display: block;

        width: 100%;

        font-size: 13px;
        line-height: 1.35;

        text-align: left;
    }


    /* =====================================================
       SECTIONS
    ===================================================== */

    .ts-artist-section {
        margin-bottom: 14px;
        padding: 14px;
    }

    .ts-artist-section-heading {
        margin-bottom: 12px;
        padding-bottom: 7px;
    }

    .ts-artist-section-heading h2 {
        font-size: 18px;
    }


    /* =====================================================
       BIO
    ===================================================== */

    .ts-artist-about-text {
        font-size: 14px;
        line-height: 1.65;
    }


    /* =====================================================
       ALBUM HEADER
    ===================================================== */

    .ts-artist-album-header {
        min-height: 88px;

        padding: 10px 43px 10px 10px;
    }


    /* Album cover */

    .ts-artist-album-cover {
        flex: 0 0 68px;

        width: 68px;
        height: 68px;
    }


    /* Album information */

    .ts-artist-album-header-info {
        margin-left: 11px;

        text-align: left !important;
    }


    /* Album title */

    .ts-artist-album-header-info .ts-artist-album-title {
        margin-bottom: 6px;

        font-size: 15px;
        line-height: 1.3;

        text-align: left !important;
    }


    /* Album metadata */

    .ts-artist-album-header-info .ts-artist-album-meta {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 2px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-meta-item {
        display: flex;

        align-items: baseline;
        justify-content: flex-start;

        width: auto;

        gap: 4px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-meta-label {
        font-size: 11px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-meta-value {
        font-size: 11px;

        text-align: left !important;
    }


    /* Toggle */

    .ts-artist-album-toggle {
        right: 11px;

        width: 24px;
        height: 24px;
    }


    /* =====================================================
       TRACKS
    ===================================================== */

    .ts-artist-track {
        min-height: 61px;

        padding: 9px 10px;
    }

    .ts-artist-track:hover {
        padding-left: 10px;
    }

    .ts-artist-track-number {
        flex: 0 0 29px;

        font-size: 12px;
    }

    .ts-artist-track-title-row {
        gap: 5px;
    }

    .ts-artist-track-title {
        font-size: 14px;
        line-height: 1.35;
    }

    .ts-artist-track-featuring {
        font-size: 12px;
        line-height: 1.35;
    }

    .ts-artist-track-credit {
        margin-top: 3px;

        font-size: 11px;
        line-height: 1.3;
    }

    .ts-artist-track-arrow {
        flex: 0 0 20px;

        margin-left: 6px;
    }

    .ts-artist-single {
        min-height: 59px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ts-artist-detail {
        padding: 0 10px;
    }


    /* =====================================================
       PAGE TITLE
    ===================================================== */

    .ts-artist-page-title {
        margin-top: 10px;

        font-size: 20px;
        line-height: 1.35;
    }

    .ts-artist-date {
        margin-bottom: 12px;

        font-size: 11px;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .ts-artist-profile-card {
        gap: 11px;
        padding: 10px;
    }

    .ts-artist-profile-image {
        flex: 0 0 110px;

        width: 110px;
        height: 110px;
    }

    .ts-artist-profile-label {
        font-size: 10px;
    }

    .ts-artist-profile-value {
        font-size: 12px;
    }


    /* =====================================================
       SECTION
    ===================================================== */

    .ts-artist-section {
        padding: 12px;
    }

    .ts-artist-section-heading h2 {
        font-size: 17px;
    }


    /* =====================================================
       ALBUM HEADER
    ===================================================== */

    .ts-artist-album-header {
        min-height: 78px;

        padding: 8px 40px 8px 8px;
    }

    .ts-artist-album-cover {
        flex: 0 0 58px;

        width: 58px;
        height: 58px;
    }

    .ts-artist-album-header-info {
        margin-left: 9px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-title {
        margin-bottom: 5px;

        font-size: 14px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-meta {
        gap: 2px;

        text-align: left !important;
    }

    .ts-artist-album-header-info .ts-artist-album-meta-label,
    .ts-artist-album-header-info .ts-artist-album-meta-value {
        font-size: 10px;

        text-align: left !important;
    }


    /* =====================================================
       TRACKS
    ===================================================== */

    .ts-artist-track {
        min-height: 58px;

        padding: 8px;
    }

    .ts-artist-track-number {
        flex: 0 0 27px;

        font-size: 10px;
    }

    .ts-artist-track-title {
        font-size: 13px;
    }

    .ts-artist-track-featuring {
        font-size: 11px;
    }

    .ts-artist-track-credit {
        font-size: 10px;
    }

    .ts-artist-track-arrow {
        flex-basis: 18px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .ts-artist-detail {
        padding: 0 8px;
    }

    .ts-artist-page-title {
        font-size: 18px;
    }

    .ts-artist-profile-card {
        gap: 9px;
        padding: 9px;
    }

    .ts-artist-profile-image {
        flex: 0 0 95px;

        width: 95px;
        height: 95px;
    }

    .ts-artist-profile-value {
        font-size: 11px;
    }

    .ts-artist-album-cover {
        flex: 0 0 53px;

        width: 53px;
        height: 53px;
    }

    .ts-artist-album-header-info {
        margin-left: 8px;
    }

    .ts-artist-album-header-info .ts-artist-album-title {
        font-size: 13px;
    }

    .ts-artist-album-header-info .ts-artist-album-meta-label,
    .ts-artist-album-header-info .ts-artist-album-meta-value {
        font-size: 9px;
    }

    .ts-artist-track-number {
        flex-basis: 25px;
    }




}


/* Music detail layout correction */
.ts-music-detail .ts-music-header {
    display: block;
    width: 100%;
    padding: 0 0 16px;
}

.ts-music-detail .ts-music-title {
    display: block;
    width: 100%;
    margin: 15px 0 0;
    overflow-wrap: anywhere;
}

.ts-music-detail .ts-music-meta {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 7px;
}

.ts-music-detail .ts-music-details-card {
    display: block;
    width: 100%;
}

.ts-music-detail .ts-music-info-bar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ts-music-detail .ts-music-body {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 34px;
}

.ts-music-detail .ts-music-content {
    min-width: 0;
    margin: 0;
}

@media (max-width: 600px) {
    .ts-music-detail .ts-music-title {
        font-size: 20px;
    }

    .ts-music-detail .ts-music-meta {
        display: block;
        font-size: 12px;
    }

    .ts-music-detail .ts-music-date {
        display: block;
    }

    .ts-music-detail .ts-meta-separator {
        display: none;
    }

    .ts-music-detail .ts-music-info-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ts-music-detail .ts-music-body {
        grid-template-columns: minmax(0, 125px) minmax(0, 1fr);
        gap: 12px;
        padding: 17px 10px 20px;
    }

    .ts-music-detail .ts-music-cover {
        width: 125px;
        height: 125px;
    }
}

@media (max-width: 380px) {
    .ts-music-detail .ts-music-info-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ts-music-detail .ts-music-body {
        grid-template-columns: minmax(0, 105px) minmax(0, 1fr);
        gap: 9px;
        padding: 14px 7px 17px;
    }

    .ts-music-detail .ts-music-cover {
        width: 105px;
        height: 105px;
    }
}


/* Music detail info bar: every available item stays on one row */
.ts-music-detail .ts-music-details-card > .ts-music-info-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    overflow: hidden !important;
}

.ts-music-detail .ts-music-info-bar > .ts-info-item {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 3px;
    overflow: hidden;
    text-align: center;
}

.ts-music-detail .ts-music-info-bar > .ts-info-item > .ts-info-label,
.ts-music-detail .ts-music-info-bar > .ts-info-item > .ts-info-value,
.ts-music-detail .ts-music-info-bar > .ts-info-item > .ts-info-value > a {
    display: block;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 600px) {
    .ts-music-detail .ts-music-info-bar > .ts-info-item {
        padding: 5px 2px;
    }

    .ts-music-detail .ts-music-info-bar .ts-info-label {
        font-size: 8px;
    }

    .ts-music-detail .ts-music-info-bar .ts-info-value {
        font-size: 9px;
    }
}


/*============================
TS MUSIC NEWS DETAILS CSS
=============================*/

.ts-blog-page {
    width: 100%;
    min-width: 0;
}

.ts-blog-detail {
    padding: 24px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fff;
}

.ts-blog-title {
    margin: 0 0 10px;
    color: #222;
    font-family: Georgia, Garamond, serif;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
}

.ts-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #777;
    font-size: 13px;
}

.ts-blog-featured-image {
    margin: 22px 0;
}

.ts-blog-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.ts-blog-intro {
    margin: 20px 0;
    padding: 10px 0 10px 16px;
    border-left: 4px solid #6b7228;
    font-weight: 700;
}

.ts-blog-body {
    color: #333;
    font-family: Georgia, Garamond, serif;
    font-size: 17px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.ts-blog-intro {
    font-weight: 700;
}

.ts-blog-body p {
    margin: 0 0 18px;
}

.ts-blog-source {
    margin: 24px 0 0;
    color: #777;
    font-size: 12px;
}

.ts-blog-related {
    margin-top: 32px;
}

.ts-blog-related h2 {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.ts-blog-related-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ts-blog-related-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-weight: 700;
    text-decoration: none;
}

.ts-blog-related-card img {
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
    object-fit: cover;
}

@media (max-width: 600px) {
    .ts-blog-detail {
        padding: 16px;
    }

    .ts-blog-intro,
    .ts-blog-body {
        font-size: 15px;
        line-height: 1.65;
    }

    .ts-blog-related-list {
        grid-template-columns: 1fr;
    }
}


/* == TS GENERAL PAGINATION ======= */

.ts-pagination {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px auto;
    font-family: Arial, Helvetica, sans-serif;
}

.ts-pagination a,
.ts-pagination span {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.ts-pagination a:hover {
    border-color: #6b7228;
    color: #6b7228;
}

.ts-pagination .is-current {
    border-color: #6b7228;
    background: #6b7228;
    color: #fff;
}

.ts-pagination .is-disabled {
    color: #999;
    cursor: default;
}

.ts-pagination .ts-pagination-ellipsis {
    min-width: auto;
    padding-inline: 3px;
    border: 0;
    background: transparent;
}

@media (max-width: 600px) {
    .ts-pagination {
        gap: 4px;
    }

    .ts-pagination a,
    .ts-pagination span {
        min-width: 32px;
        min-height: 32px;
        padding: 5px 7px;
        font-size: 12px;
    }
}


.ts-artists-page a.ts-popular-card,
.ts-artists-page a.ts-artist-card,
.ts-artists-page a.ts-popular-card:hover,
.ts-artists-page a.ts-artist-card:hover {
    color: inherit;
    text-decoration: none;
}

.ts-artists-page .ts-popular-card *,
.ts-artists-page .ts-artist-card * {
    text-decoration: none;
}



.ts-music-detail .ts-download-button,
.ts-music-detail .ts-download-button:hover,
.ts-music-detail .ts-download-button:focus {
    text-decoration: none;
}


/*==============================
ADD TO ANY CSS
=============================*/
.ts-share-block {
    margin: 22px 0;
    padding: 18px 10px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-family: Arial, sans-serif;
}

.ts-share-block .ts-share-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: olive;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 2px;
}

.ts-share-heading::before,
.ts-share-heading::after {
    content: "";
    width: 55px;
    height: 1px;
    background: #d8d8d8;
}

.ts-share-block .ts-share-description {
    margin: 0 0 14px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.ts-share-actions,
.ts-share-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-share-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid olive;
    border-radius: 4px;
    background: olive;
    color: #fff;
    font: 700 12px/1.2 Arial, sans-serif;
    cursor: pointer;
}

.ts-share-copy svg {
    width: 15px;
    height: 15px;
}

.ts-share-copy:hover {
    background: #686800;
    border-color: #686800;
}

.ts-share-copy:disabled {
    opacity: 0.7;
    cursor: wait;
}

.ts-share-block .ts-share-socials > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.ts-share-block .ts-share-socials > a:hover {
    background: #f5f5f5;
    border-color: #aaa;
}

.ts-share-block .ts-share-socials .a2a_svg {
    width: 19px !important;
    height: 19px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* Social brand colors */
.ts-share-socials .a2a_button_facebook {
    --share-brand: #1877f2;
}

.ts-share-socials .a2a_button_whatsapp {
    --share-brand: #25d366;
}

.ts-share-socials .a2a_button_x,
.ts-share-socials .a2a_button_threads {
    --share-brand: #000;
}

.ts-share-socials .a2a_button_twitter {
    --share-brand: #1da1f2;
}

.ts-share-socials .a2a_button_telegram {
    --share-brand: #0088cc;
}

.ts-share-socials .a2a_button_linkedin {
    --share-brand: #0a66c2;
}

.ts-share-socials .a2a_button_pinterest {
    --share-brand: #e60023;
}

.ts-share-socials .a2a_button_reddit {
    --share-brand: #ff4500;
}

.ts-share-socials .a2a_button_email {
    --share-brand: #666;
}

.ts-share-socials .a2a_button_copy_link {
    --share-brand: #555;
}

.ts-share-socials .a2a_dd {
    --share-brand: #0166ff;
}

.ts-share-block .ts-share-socials .a2a_svg svg path {
    fill: var(--share-brand, #555) !important;
}

.ts-share-copy:focus-visible,
.ts-share-socials > a:focus-visible {
    outline: 2px solid #555;
    outline-offset: 3px;
}

.ts-share-block .ts-share-status {
    margin: 7px 0 0;
    color: olive;
    font-size: 11px;
}

.ts-share-status:empty {
    display: none;
}

@media (max-width: 480px) {
    .ts-share-actions,
    .ts-share-socials {
        gap: 7px;
    }

    .ts-share-heading::before,
    .ts-share-heading::after {
        width: 35px;
    }

    .ts-share-block .ts-share-description {
        font-size: 12px;
    }
}



/* Public comments */

.ts-comments {
    margin: 28px 0;
    color: #202b23;
    font: 14px/1.6 Arial, sans-serif;
    text-align: left;
}

.ts-comments,
.ts-comments * {
    box-sizing: border-box;
}

.ts-comments [hidden] {
    display: none !important;
}

.ts-comments-header {
    padding-bottom: 14px;
    border-bottom: 1px solid #e6ebe7;
}

.ts-comments-eyebrow {
    color: #7b857c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.ts-comments .ts-comments-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    color: #202b23;
    font: 700 21px/1.3 Arial, sans-serif;
}

.ts-comments-header h2 span {
    padding: 3px 9px;
    border-radius: 20px;
    background: #eef5ef;
    color: #4e7056;
    font-size: 12px;
}

.ts-comments-list {
    margin-bottom: 24px;
}

.ts-comment {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid #edf0ed;
}

.ts-comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #edf5ee;
    color: #40734e;
    font-size: 13px;
    font-weight: 700;
}

.ts-comment-content {
    flex: 1;
    min-width: 0;
}

.ts-comment-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-comment-meta strong {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ts-comment-meta time {
    color: #8a928b;
    font-size: 10px;
}

.ts-comments .ts-comment-content > p {
    margin: 6px 0 0;
    color: #465148;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Separate red heart and count */

.ts-comment-reactions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ts-comment-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #e53945;
    cursor: pointer;
}

.ts-comment-like svg {
    width: 17px;
    height: 17px;
}

.ts-comment-like:hover {
    background: #fff0f1;
}

.ts-comment-like.ts-has-liked svg {
    fill: currentColor;
}

.ts-comment-like:disabled {
    cursor: default;
}

.ts-comment-like:disabled:not(.ts-has-liked) {
    opacity: 0.55;
}

.ts-comment-like:focus-visible {
    outline: 2px solid #e53945;
    outline-offset: 2px;
}

.ts-comment-like-count {
    min-width: 12px;
    color: #7d877e;
    font-size: 11px;
    font-weight: 600;
}

.ts-comment-like-error {
    flex-basis: 100%;
    color: #b52d36;
    font-size: 11px;
}

.ts-comments .ts-comments-empty {
    margin: 0;
    padding: 20px 0;
    color: #7a857b;
    font-size: 13px;
}

/* Public pagination */

.ts-comments-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 12px;
}

.ts-comments-pagination a {
    color: #168044;
    font-weight: 700;
    text-decoration: none;
}

/* Comment form */

.ts-comment-form {
    position: relative;
    padding: 22px;
    border: 1px solid #e0e7df;
    border-radius: 14px;
    background: #fafcf9;
}

.ts-comments .ts-comment-form h3 {
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    color: #202b23;
    font: 700 17px/1.4 Arial, sans-serif;
}

.ts-comments .ts-comment-intro {
    margin: 0 0 18px;
    color: #6d786d;
    font-size: 12px;
}

.ts-comment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ts-comment-form label {
    display: block;
    margin: 14px 0 0;
    font-size: 12px;
    font-weight: 700;
}

.ts-comment-optional {
    color: #899187;
    font-size: 11px;
    font-weight: 400;
}

.ts-comment-form input,
.ts-comment-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid #d9e2d8;
    border-radius: 8px;
    background: #fff;
    color: #202b23;
    box-shadow: none;
    font: 14px/1.5 Arial, sans-serif;
}

.ts-comment-form textarea {
    min-height: 110px;
    resize: vertical;
}

.ts-comment-form input:focus,
.ts-comment-form textarea:focus {
    border-color: #6ba97d;
    outline: 2px solid #c2dec9;
    outline-offset: 2px;
}

.ts-comment-form [aria-invalid="true"] {
    border-color: #c24141;
}

.ts-comment-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ts-comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.ts-comments .ts-comment-footer p {
    flex: 1;
    margin: 0;
    color: #7a8479;
    font-size: 11px;
}

.ts-comment-footer button {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: olive;
    color: #fff;
    font: 700 12px/1.5 Arial, sans-serif;
    cursor: pointer;
}

.ts-comment-footer button:hover {
    background: #686800;
}

.ts-comment-footer button:focus-visible {
    outline: 2px solid olive;
    outline-offset: 3px;
}

.ts-comment-feedback {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid #cce3d0;
    border-radius: 8px;
    background: #edf7ee;
    color: #27623a;
    font-size: 12px;
    white-space: pre-line;
}

.ts-comment-feedback[data-state="error"] {
    border-color: #efcccc;
    background: #fff2f2;
    color: #a32c2c;
}

.ts-comments .ts-comment-feedback p {
    margin: 0 0 4px;
    font-size: 12px;
}

/* Public mobile styles */

@media (max-width: 480px) {
    .ts-comments {
        margin: 24px 0;
    }

    .ts-comment-form {
        padding: 16px;
    }

    .ts-comment-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ts-comment-footer p {
        flex-basis: 100%;
    }

    .ts-comments .ts-comments-header h2 {
        font-size: 20px;
    }
}