/* Match the shared ringtone-list cards; keep list-page resets scoped to this module. */
.home-trending-ringtones{--navy:#10172f;--purple:#4839f6;--line:#e3e6ee}
.home-trending-ringtones .ringtone-list,.home-trending-ringtones .ringtone-list *{box-sizing:border-box}
.home-trending-ringtones .ringtone-list{padding:0;color:var(--navy);font:16px Inter,ui-rounded,"SF Pro Rounded","Segoe UI",Arial,sans-serif}
.home-trending-ringtones .ringtone-list a{color:inherit;text-decoration:none}
.home-trending-ringtones .ringtone-list button{font:inherit;-webkit-tap-highlight-color:transparent}
.home-trending-ringtones .ringtone-list svg{display:block}
.home-trending-ringtones .tone-meta svg,.home-trending-ringtones .icon-button svg,.home-trending-ringtones .download-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.home-trending-ringtones .tone-copy h2{letter-spacing:normal;font-weight:700}
.home-trending-ringtones .ringtone-list .download-button{color:#fff}
.home-trending-ringtones .ringtone-list {
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 12px;
    align-items: stretch;
}
.home-trending-ringtones .ringtone-card {
    --tone-gradient: linear-gradient(135deg, #f472b6, #a21caf);
    --tone-accent: #a21caf;
    --tone-accent-rgb: 162, 28, 175;
    min-width: 0;
    max-width: 100%;
    padding: 16px 13px 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 7px rgba(24, 32, 61, .06);
}
.home-trending-ringtones .ringtone-card[data-sound-type="mantra"] { --tone-gradient: linear-gradient(135deg, #a78bfa, #6d28d9); --tone-accent: #6d28d9; --tone-accent-rgb: 109, 40, 217; }
.home-trending-ringtones .ringtone-card[data-sound-type="chant"] { --tone-gradient: linear-gradient(135deg, #818cf8, #4338ca); --tone-accent: #4338ca; --tone-accent-rgb: 67, 56, 202; }
.home-trending-ringtones .ringtone-card[data-sound-type="aarti"] { --tone-gradient: linear-gradient(135deg, #fb923c, #c2410c); --tone-accent: #c2410c; --tone-accent-rgb: 194, 65, 12; }
.home-trending-ringtones .ringtone-card[data-sound-type="bhajan"] { --tone-gradient: linear-gradient(135deg, #4ade80, #15803d); --tone-accent: #15803d; --tone-accent-rgb: 21, 128, 61; }
.home-trending-ringtones .ringtone-card[data-sound-type="bgm"] { --tone-gradient: linear-gradient(135deg, #60a5fa, #1d4ed8); --tone-accent: #1d4ed8; --tone-accent-rgb: 29, 78, 216; }
.home-trending-ringtones .ringtone-card[data-sound-type="instrumental"] { --tone-gradient: linear-gradient(135deg, #2dd4bf, #0f766e); --tone-accent: #0f766e; --tone-accent-rgb: 15, 118, 110; }
.home-trending-ringtones .ringtone-card[data-sound-type="damru"] { --tone-gradient: linear-gradient(135deg, #fbbf24, #a16207); --tone-accent: #a16207; --tone-accent-rgb: 161, 98, 7; }
.home-trending-ringtones .ringtone-card[data-sound-type="sfx"] { --tone-gradient: linear-gradient(135deg, #fb7185, #be123c); --tone-accent: #be123c; --tone-accent-rgb: 190, 18, 60; }
.home-trending-ringtones .ringtone-card[data-sound-type="notification"] { --tone-gradient: linear-gradient(135deg, #38bdf8, #0369a1); --tone-accent: #0369a1; --tone-accent-rgb: 3, 105, 161; }
.home-trending-ringtones .ringtone-card[data-sound-type="song"] { --tone-gradient: linear-gradient(135deg, #f472b6, #a21caf); --tone-accent: #a21caf; --tone-accent-rgb: 162, 28, 175; }
.home-trending-ringtones .ringtone-card[data-sound-type="remix"] { --tone-gradient: linear-gradient(135deg, #c084fc, #7c3aed); --tone-accent: #7c3aed; --tone-accent-rgb: 124, 58, 237; }
.home-trending-ringtones .tone-head { display: flex; align-items: flex-start; gap: 8px; }
.home-trending-ringtones .play-button {
    flex: 0 0 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--tone-gradient);
    box-shadow: 0 7px 18px rgba(var(--tone-accent-rgb), .16);
    cursor: pointer;
    touch-action: manipulation;
    transition: filter .2s ease, box-shadow .2s ease;
}
.home-trending-ringtones .play-button:hover { filter: saturate(1.08) brightness(.97); box-shadow: 0 9px 22px rgba(var(--tone-accent-rgb), .24); }
.home-trending-ringtones .play-disc { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: #fff; }
.home-trending-ringtones .play-disc svg { grid-area: 1 / 1; width: 30px; height: 30px; fill: currentColor; }
.home-trending-ringtones .play-disc .play-loading-icon { display: none; fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 38 16; }
.home-trending-ringtones .play-button.is-loading .play-state-icon,
.home-trending-ringtones .detail-play-button.is-loading .play-state-icon { display: none; }
.home-trending-ringtones .play-button.is-loading .play-loading-icon,
.home-trending-ringtones .detail-play-button.is-loading .play-loading-icon { display: block; animation: home-tone-loading-spin .75s linear infinite; }
.home-trending-ringtones .play-button:disabled,
.home-trending-ringtones .detail-play-button:disabled { cursor: wait; }
.home-trending-ringtones .tone-copy { flex: 1; min-width: 0; }
.home-trending-ringtones .tone-copy h2 { min-height: 2.1rem; max-width: 310px; margin: 0; font-size: 16px; line-height: 1.05; overflow-wrap: anywhere; }
.home-trending-ringtones .tone-meta { display: flex; align-items: center; gap: 7px; color: #33405f; font-size: 12px; }
.home-trending-ringtones .tone-meta span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.home-trending-ringtones .tone-meta svg { width: 16px; height: 16px; stroke-width: 1.5; }
.home-trending-ringtones .tone-meta i { width: 1px; height: 15px; background: #cfd3dc; }
.home-trending-ringtones .tone-actions { flex: 0 0 32px; display: flex; flex-direction: column; gap: 1px; }
.home-trending-ringtones .icon-button { width: 32px; height: 32px; padding: 6px; border: 0; color: #53607e; background: none; cursor: pointer; }
.home-trending-ringtones .icon-button svg { width: 100%; height: 100%; stroke-width: 1.7; }
.home-trending-ringtones .icon-button.heart.active svg { fill: #ef4e78; stroke: #ef4e78; }
.home-trending-ringtones .tags { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 5px 7px; }
.home-trending-ringtones .tag { max-width: 100%; padding: 6px 9px; border: 1px solid #dce0ea; border-radius: 5px; font-size: 12px; line-height: 1.15; overflow-wrap: anywhere; transition: border-color .2s, color .2s; }
.home-trending-ringtones .tag:hover { border-color: var(--purple); color: var(--purple); }
.home-trending-ringtones .download-row { margin-top: auto; padding-top: 15px; display: flex; justify-content: flex-end; }
.home-trending-ringtones .download-button {
    min-width: 106px;
    height: 30px;
    padding: 0 10px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    background: var(--tone-accent);
    box-shadow: 0 5px 14px rgba(var(--tone-accent-rgb), .2);
    font-size: 12px;
    font-weight: 650;
    transition: filter .2s ease, box-shadow .2s ease;
}
.home-trending-ringtones .download-button:hover { filter: brightness(.9); box-shadow: 0 7px 18px rgba(var(--tone-accent-rgb), .3); }
.home-trending-ringtones .download-button svg { width: 18px; height: 18px; stroke-width: 1.8; }

.home-trending-ringtones .ringtone-list{padding:0}
@keyframes home-tone-loading-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){
.home-trending-ringtones .ringtone-list{display:block}
.home-trending-ringtones .ringtone-card{margin-bottom:12px}
.home-trending-ringtones .tone-head{gap:10px}
.home-trending-ringtones .play-button{flex-basis:52px;height:52px}
.home-trending-ringtones .play-disc{width:36px;height:36px}
.home-trending-ringtones .play-disc svg{width:34px;height:34px}
.home-trending-ringtones .tone-copy h2{line-height:1}
.home-trending-ringtones .tone-meta{gap:8px;font-size:13px}
.home-trending-ringtones .tone-meta span{gap:8px}
.home-trending-ringtones .tone-meta svg{width:17px;height:17px}
.home-trending-ringtones .tone-meta i{height:16px}
.home-trending-ringtones .tone-actions{flex-basis:74px;flex-direction:row;gap:2px}
.home-trending-ringtones .icon-button{width:36px;height:40px;padding:7px}
.home-trending-ringtones .tags{margin-top:10px}
.home-trending-ringtones .tag{padding-inline:10px}
.home-trending-ringtones .ringtone-card .download-button{height:28px;padding:0 6px 0 0;gap:3px}
}
@media(min-width:560px){.home-trending-ringtones .icon-button.heart{margin:-5px 0 5px}}
@media(prefers-reduced-motion:reduce){.home-trending-ringtones .play-button,.home-trending-ringtones .tag,.home-trending-ringtones .download-button{transition:none}}
/* Shared player share/favourite feedback is appended to the document body. */
.action-toast {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: calc(var(--bottom-nav, 0px) + env(safe-area-inset-bottom) + 16px);
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    color: #fff;
    background: #17203a;
    box-shadow: 0 8px 24px rgba(8, 12, 27, .25);
    font-size: 14px;
    font-weight: 650;
    text-align: center;
    transform: translateX(-50%);
}
.action-toast[hidden] { display: none; }