/* ==========================================================================
   SoulSync Music Discover — Premier App Redesign (Deezer & Spotify Aesthetic)
   Cinematic Hero Billboard, Deezer Flow Moods, Tactile Spotify Cards,
   Ambient Lighting & Glassmorphic Surfaces
   ========================================================================== */

/* ── 1. Discover Canvas & Dynamic Ambient Environment ────────────────────── */
.discover-container {
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 16px 28px 96px;
    box-sizing: border-box;
    background: transparent;
}

/* Ambient dynamic background lighting */
.discover-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 600px;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--discover-glow-rgb, var(--accent-rgb)), 0.22) 0%, rgba(var(--discover-glow-rgb, 162, 56, 255), 0.08) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* ── 3. Cinematic Hero Billboard (Full-Width Immersion) ──────────────────── */


.discover-command-hero {
    width: 100% !important;
    flex: 1 1 100% !important;
}

.discover-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 400px !important;
    height: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--white-a10) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--white-a15) !important;
    background: #0d111a !important;
}

/* Full-bleed background image with right-side placement and cinematic grading */
.discover-hero-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 85% 25% !important;
    transform: scale(1.02);
    transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
    filter: saturate(1.15) contrast(1.05);
}

.discover-hero:hover .discover-hero-background {
    transform: scale(1.05);
}

/* Scrim vignette — deep obsidian left shield guaranteeing 100% text legibility */
.discover-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, #0a0d14 0%, rgba(10, 13, 20, 0.98) 42%, rgba(10, 13, 20, 0.7) 65%, rgba(10, 13, 20, 0.15) 88%, transparent 100%),
        linear-gradient(0deg, #0a0d14 0%, rgba(10, 13, 20, 0.8) 25%, transparent 65%),
        linear-gradient(180deg, rgba(10, 13, 20, 0.45) 0%, transparent 35%) !important;
    pointer-events: none;
    z-index: 1;
}

/* Hide duplicate square image inside the hero */
.discover-hero-image {
    display: none !important;
}

/* Hero Content Area — Strictly Left-Aligned Flagship Layout */
.discover-hero-content,
.discover-command-hero .discover-hero-content {
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 28px 60px 14px !important;
    max-width: min(1120px, 78%) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.discover-hero-info,
.discover-command-hero .discover-hero-info {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
}

/* eyebrow: a quiet accent line, not a neon badge. the count lives here too */
.discover-hero-label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 14px 0 !important;
    text-shadow: none !important;
}

.discover-hero-label-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

.discover-hero-count {
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid var(--white-a20);
    color: var(--white-a50);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Massive Spotify/Deezer Title */
.discover-hero-title,
.discover-command-hero .discover-hero-title {
    font-size: clamp(30px, 3.8vw, 54px) !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
    text-align: left !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7) !important;
}

/* Subtitle & Recommendation Reason */
.discover-hero-subtitle,
.discover-command-hero .discover-hero-subtitle {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    color: var(--white-a85) !important;
    max-width: 850px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* meta: one quiet line. genres as words, popularity as a meter, ownership as text */
.discover-hero-seed {
    color: #fff;
    font-weight: 700;
}

.discover-hero-meta,
.discover-command-hero .discover-hero-meta {
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 24px 0 !important;
}

.discover-hero-meta-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.hero-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* a dot between items, never before the first */
.hero-meta-item + .hero-meta-item::before {
    content: '';
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: var(--radius-circle);
    background: var(--white-a40);
}

.hero-meta-item.hero-popularity {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero-popularity .meta-value {
    display: none;
}

.hero-popularity .meta-label {
    font-weight: 500;
}

.hero-pop-meter {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.hero-pop-meter > span {
    width: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.hero-pop-meter > span:nth-child(1) { height: 40%; }
.hero-pop-meter > span:nth-child(2) { height: 55%; }
.hero-pop-meter > span:nth-child(3) { height: 70%; }
.hero-pop-meter > span:nth-child(4) { height: 85%; }
.hero-pop-meter > span:nth-child(5) { height: 100%; }

.hero-pop-meter > span.on {
    background: var(--accent);
}

.discover-hero .hero-genres {
    gap: 0 !important;
}

.discover-hero .genre-tag {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    text-transform: capitalize;
}

.discover-hero .genre-tag + .genre-tag::before {
    content: ', ';
}

.discover-hero .hero-owned {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: inherit;
    color: rgba(var(--accent-light-rgb), 0.95);
    font-weight: 600;
}

.discover-hero .hero-owned--none {
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

/* Primary Action Buttons */
.discover-hero-actions,
.discover-command-hero .discover-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
}

.discover-hero-actions .discover-hero-button,
.discover-hero-actions .watchlist-toggle-btn {
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Spotify-style Primary Pill / Play Button */
.discover-hero-button.primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--accent) !important;
    color: #05130a !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    padding: 11px 24px !important;
    border-radius: 9999px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.45) !important;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-hero-button.primary:hover {
    transform: scale(1.04) translateY(-1px) !important;
    box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.6) !important;
    background: #22c55e !important;
    color: #000000 !important;
}

.discover-hero-button.primary:active {
    transform: scale(0.98) !important;
}

/* Secondary Discography Pill */
.discover-hero-button.secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--white-a12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 11px 22px !important;
    border-radius: 9999px !important;
    border: 1px solid var(--white-a18) !important;
    cursor: pointer !important;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-hero-button.secondary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: var(--white-a30) !important;
    transform: translateY(-1px) !important;
}

/* foot: the rotation as faces on the left, two quiet links on the right */
.discover-hero-controls {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 8px 60px 26px !important;
    box-sizing: border-box !important;
}

.discover-hero-indicators {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    /* flex-start, never center: a centred row that overflows pushes the
       first face off the left edge, where no scroll can reach it */
    justify-content: flex-start !important;
    /* room for the active face's ring, which a scroller would clip */
    padding: 6px !important;
    margin: -6px !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.discover-hero-indicators::-webkit-scrollbar {
    display: none;
}

.hero-indicator {
    background: transparent !important;
    border: none !important;
    padding: 4px 2px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

.hero-indicator-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: var(--white-a35) !important;
    transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-indicator.active .hero-indicator-dot {
    width: 22px !important;
    background: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent) !important;
}

.hero-indicator:hover .hero-indicator-dot {
    background: var(--white-a65) !important;
}

.hero-indicator--face {
    padding: 3px !important;
    border-radius: var(--radius-circle) !important;
}

.hero-indicator-face {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(0.4);
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9);
    transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.hero-indicator-face--blank {
    display: grid;
    place-items: center;
    background: var(--white-a12);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.hero-indicator--face:hover .hero-indicator-face {
    opacity: 0.9;
    filter: none;
}

.hero-indicator--face.active .hero-indicator-face {
    opacity: 1;
    filter: none;
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9), 0 0 0 4px var(--accent);
}

.hero-indicator:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9) !important;
    outline-offset: 2px !important;
}

.discover-hero-bottom-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

.discover-hero-bottom-actions button {
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    color: var(--white-a70) !important;
    border-radius: 9999px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: color 160ms ease, background 160ms ease !important;
}

.discover-hero-bottom-actions button:hover:not(:disabled) {
    background: var(--white-a10) !important;
    color: #ffffff !important;
}

.discover-hero-bottom-actions button:disabled {
    opacity: 0.55;
    cursor: default !important;
}

.discover-hero-view-all::after {
    content: ' \2192';
}

/* Prev/Next Hero Arrow Chevrons */
.discover-hero-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-circle) !important;
    background: rgba(10, 13, 20, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--white-a12) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transition: all 180ms ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.discover-hero:hover .discover-hero-nav {
    opacity: 1 !important;
}

.discover-hero-nav-prev { left: 16px !important; }
.discover-hero-nav-next { right: 16px !important; }

.discover-hero-nav:hover {
    background: var(--white-a25) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* ── 5. Discovery Zones: a title, one line, then the rows ────────────────── */
.discovery-zone {
    margin: 0 0 56px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    /* the sticky nav sits over the top of a zone it scrolled to */
    scroll-margin-top: 64px;
}

.discovery-zone::before {
    display: none !important;
}

.discovery-zone-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

.discovery-zone-head::before {
    display: none !important;
}

.discovery-zone-head h2 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.discovery-zone-head p {
    font-size: 0.9rem !important;
    color: var(--white-a50) !important;
    margin: 6px 0 0 !important;
}

/* one row of chips, one per zone on the page. sticky, so it's always a tap away */
.dsc-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -4px 28px;
    padding: 12px 4px;
    background: linear-gradient(180deg, rgba(10, 11, 13, 0.96) 0%, rgba(10, 11, 13, 0.9) 70%, rgba(10, 11, 13, 0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dsc-nav-chips {
    display: flex;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.dsc-nav-chips::-webkit-scrollbar {
    display: none;
}

.dsc-nav-chip,
.dsc-nav-layout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--white-a08);
    background: var(--white-a06);
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dsc-nav-chip:hover,
.dsc-nav-layout:hover {
    background: var(--white-a12);
    color: #fff;
}

.dsc-nav-chip.active {
    background: #fff;
    border-color: #fff;
    color: #0a0b0d;
}

.dsc-nav-layout {
    padding: 0 14px;
    background: transparent;
    color: var(--white-a60);
}

.dsc-nav-chip:focus-visible,
.dsc-nav-layout:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 2px;
}

/* Oct 13 batch, M-03: the sticky chip bar starts at the page's left
   edge, so on phones its first chip slides under the fixed hamburger
   ("For You" reads "r You") and the chip scroller runs straight into
   the layout button, slicing a chip mid-word at rest. Clear the
   hamburger on the left; give the scroller end padding and a fade so a
   partially-scrolled chip reads as scrollable, not clipped. */
@media (max-width: 768px) {
    .dsc-nav {
        padding-left: 64px;
    }
    .dsc-nav-chips {
        padding-right: 20px;
        mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    }
}

@media (max-width: 640px) {
    .dsc-nav-layout span {
        display: none;
    }
    .dsc-nav-layout {
        width: 34px;
        padding: 0;
        justify-content: center;
    }
}

/* ── 6. Spotify-Style Tactile Music Cards ────────────────────────────────── */
/* Grids & Horizontal Rails */
.discover-mixes-grid,
.discover-carousel,
.discover-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding: 6px 2px 18px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--white-a15) transparent !important;
}

.discover-mixes-grid::-webkit-scrollbar,
.discover-carousel::-webkit-scrollbar,
.discover-grid::-webkit-scrollbar {
    height: 6px;
}

.discover-mixes-grid::-webkit-scrollbar-thumb,
.discover-carousel::-webkit-scrollbar-thumb,
.discover-grid::-webkit-scrollbar-thumb {
    background: var(--white-a15);
    border-radius: 3px;
}

/* Multi-row library grid exception for Your Albums */
[id="your-albums-section"] .discover-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 18px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
}

[id="your-albums-section"] .discover-grid > .ya-card {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Mix Cards */
.discover-mix-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    scroll-snap-align: start !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid var(--white-a06) !important;
    border-radius: var(--radius-xl) !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    cursor: pointer !important;
}

.discover-mix-card:hover {
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: var(--white-a15) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* Mix Cover Container */
.mix-card-cover {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Floating Circular Spotify Play Button */
.mix-card-play {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-circle) !important;
    background: var(--accent) !important;
    color: #000000 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.9) !important;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-mix-card:hover .mix-card-play {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.mix-card-play:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.55) !important;
    background: #22c55e !important;
}

.mix-card-play:active {
    transform: translateY(0) scale(0.96) !important;
}

/* fewer than four real covers: one full-bleed cover, not a mosaic with holes */
.mix-card-cover.mix-card-cover--single {
    display: block !important;
}

.mix-card-tile--full {
    width: 100%;
    height: 100%;
}

/* Mix Title & Meta */
.mix-card-name {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 12px !important;
    line-height: 1.3 !important;
}

.mix-card-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

.mix-card-meta {
    font-size: 0.78rem !important;
    color: var(--white-a45) !important;
    margin-top: 4px !important;
}

/* ── Base Music Cards (.ya-card) ─────────────────────────────────────────── */
.discover-grid > .ya-card,
.discover-carousel > .ya-card,
.ya-card.discover-album-card,
.ya-card.recommended-artist-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
    scroll-snap-align: start !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid var(--white-a06) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.discover-grid > .ya-card:hover,
.discover-carousel > .ya-card:hover,
.ya-card.discover-album-card:hover,
.ya-card.recommended-artist-card:hover {
    transform: translateY(-6px) !important;
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: var(--white-a16) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}

/* Album Cards & Deezer Picks (Square Artwork & Tactile Spotify/Deezer Shape) */
.ya-card.discover-album-card {
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: left !important;
    cursor: pointer !important;
}

.ya-card.discover-album-card .ya-card-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    background: var(--white-a04) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.ya-card.discover-album-card .ya-card-gradient {
    display: none !important;
}

.ya-card.discover-album-card .ya-card-info {
    position: static !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

.ya-card.discover-album-card .ya-card-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
}

.ya-card.discover-album-card .ya-card-sub {
    font-size: 0.78rem !important;
    color: var(--white-a65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
}

.ya-card-img img {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ya-card:hover .ya-card-img img {
    transform: scale(1.04) !important;
}

.ya-card-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.ya-card-sub {
    font-size: 0.78rem !important;
    color: var(--white-a75) !important;
}

/* Recommended Artist Cards & Your Artists (Spotify Artist Avatar Aesthetic) */
.ya-card.recommended-artist-card,
[id="your-artists-carousel"] .ya-card {
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.ya-card.recommended-artist-card .recommended-card-image,
.ya-card.recommended-artist-card .ya-card-img,
[id="your-artists-carousel"] .ya-card .ya-card-img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: var(--radius-circle) !important;
    overflow: hidden !important;
    margin: 0 auto 12px !important;
    background: var(--white-a04) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
    border: 2px solid var(--white-a08) !important;
    position: relative !important;
}

.ya-card.recommended-artist-card .recommended-card-image img,
.ya-card.recommended-artist-card .ya-card-img img,
[id="your-artists-carousel"] .ya-card .ya-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ya-card.recommended-artist-card:hover .recommended-card-image img,
.ya-card.recommended-artist-card:hover .ya-card-img img,
[id="your-artists-carousel"] .ya-card:hover .ya-card-img img {
    transform: scale(1.06) !important;
}

.recommended-card-image-fallback {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    background: var(--white-a04) !important;
}

.ya-card.recommended-artist-card .ya-card-info,
[id="your-artists-carousel"] .ya-card .ya-card-info {
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
}

.ya-card.recommended-artist-card .ya-card-name,
[id="your-artists-carousel"] .ya-card .ya-card-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
}

.ya-card.recommended-artist-card .ya-card-sub,
[id="your-artists-carousel"] .ya-card .ya-card-sub {
    font-size: 0.76rem !important;
    color: var(--white-a45) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 6px !important;
}

/* the reason names your artists; cutting it at one line cut the names off */
.ya-card.recommended-artist-card .ya-card-sub {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

.ya-card.recommended-artist-card .ya-card-why {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
}

.ya-why-chip {
    font-size: 0.68rem !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    background: var(--white-a08) !important;
    color: var(--white-a80) !important;
    border: 1px solid var(--white-a08) !important;
    font-weight: 500 !important;
}

/* Eye Symbol Watchlist Button (Top-Right on Artist Cards — matches Your Artists) */
.ya-watchlist-btn,
.recommended-artist-card .recommended-card-watchlist-btn,
.recommended-card-watchlist-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--white-a12) !important;
    color: var(--white-a65) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                background 180ms ease,
                border-color 180ms ease,
                color 180ms ease !important;
}

.ya-card:hover .ya-watchlist-btn,
.ya-card:hover .recommended-card-watchlist-btn,
.recommended-artist-card:hover .recommended-card-watchlist-btn,
.recommended-artist-card:focus-within .recommended-card-watchlist-btn,
.ya-watchlist-btn.active,
.ya-watchlist-btn.watching,
.recommended-card-watchlist-btn.watching,
.recommended-card-watchlist-btn.active {
    opacity: 1 !important;
}

.ya-watchlist-btn:hover:not(:disabled),
.recommended-card-watchlist-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: var(--white-a30) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.ya-watchlist-btn.active,
.ya-watchlist-btn.watching,
.recommended-card-watchlist-btn.watching,
.recommended-card-watchlist-btn.active {
    opacity: 1 !important;
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), 0.4) !important;
    background: rgba(var(--accent-rgb), 0.18) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3) !important;
}

.recommended-card-watchlist-btn .sr-only,
.recommended-card-watchlist-btn span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (hover: none), (max-width: 768px) {
    .ya-watchlist-btn,
    .recommended-artist-card .recommended-card-watchlist-btn {
        opacity: 0.92 !important;
        transform: none !important;
    }
}

/* ── 7. Stations: a face with a play button, and a name that opens it ───── */
.discover-stations-row {
    grid-auto-columns: 176px !important;
    gap: 16px !important;
    padding: 4px 2px 14px !important;
}

.discover-station-card {
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 16px 14px !important;
    border-radius: 18px !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid var(--white-a06) !important;
    transition: background 200ms ease, border-color 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-station-card:hover {
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: var(--white-a14) !important;
    transform: translateY(-4px) !important;
}

/* library radio leads the row, so it wears the accent */
.discover-station-card.discover-station-card--library {
    background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), rgba(22, 27, 38, 0.6) 70%) !important;
}

.discover-station-art-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.discover-station-art {
    width: 100% !important;
    height: 100% !important;
    font-size: 2.4rem !important;
    font-weight: 800;
    color: var(--white-a85);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

.discover-station-art--library {
    color: #fff;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 55%),
        linear-gradient(145deg, var(--accent), #0c5a2b) !important;
}

.discover-station-play {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--accent);
    color: #05130a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.discover-station-card:hover .discover-station-play,
.discover-station-card:focus-within .discover-station-play,
.discover-station-play[aria-busy='true'] {
    opacity: 1;
    transform: translateY(0);
}

.discover-station-play:hover:not(:disabled) {
    transform: scale(1.06);
}

.discover-station-play:focus-visible,
.discover-station-open:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 2px;
}

.discover-station-spinner {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-circle);
    border: 2px solid rgba(5, 19, 10, 0.3);
    border-top-color: #05130a;
    animation: dsc-spin 0.8s linear infinite;
}


.discover-station-open {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.discover-station-open:disabled {
    cursor: progress;
}

.discover-station-open:hover .discover-station-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: none) {
    .discover-station-play {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discover-station-spinner {
        animation: none;
    }
}

/* ── 8. Taste Dial (Adventurousness Wave) ─────────────────────────────────── */
/* min-height auto on purpose. style.css still carried min-height: 100% from
   the old two-column rows, which stretched the dial ~100px past its content
   and, with the margins here, pushed it 20px into the shelf below. */
.adv-wave,
.discovery-zone .adv-wave {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: auto !important;
    background: linear-gradient(135deg, rgba(20, 26, 38, 0.75) 0%, rgba(12, 16, 24, 0.85) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--white-a08) !important;
    border-radius: 18px !important;
    padding: 18px 22px 16px !important;
    margin: 8px 0 32px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

.adv-wave-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.adv-wave-label {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--white-a65) !important;
    margin: 0 !important;
}

.adv-wave-state {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    background: var(--white-a08) !important;
    border: 1px solid var(--white-a12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.adv-wave-track,
.discovery-zone .adv-wave-track {
    position: relative !important;
    height: 72px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(10, 13, 20, 0.85) !important;
    border: 1px solid var(--white-a08) !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
}

.adv-wave-ends {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--white-a45) !important;
    padding: 0 2px !important;
    margin: 0 !important;
}

.adv-wave-help {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--white-a55) !important;
    margin: 0 !important;
}

/* ── 9. Deezer Editorial Curated Shelf ────────────────────────────────────── */
[id="deezer-editorial"] {
    position: relative !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    background: linear-gradient(135deg, rgba(162, 56, 255, 0.07) 0%, rgba(18, 22, 32, 0.7) 100%) !important;
    border: 1px solid rgba(162, 56, 255, 0.22) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 40px !important;
}

[id="deezer-editorial"] .discovery-zone-title {
    background: linear-gradient(135deg, #ffffff 40%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.dz-ed-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.dz-ed-search {
    width: 100% !important;
    max-width: 380px !important;
    background: var(--white-a07) !important;
    border: 1px solid var(--white-a12) !important;
    border-radius: 9999px !important;
    padding: 10px 18px !important;
    font-size: 0.86rem !important;
    color: #ffffff !important;
    outline: none !important;
    transition: all 180ms ease !important;
}

.dz-ed-search:focus {
    background: var(--white-a12) !important;
    border-color: rgba(162, 56, 255, 0.6) !important;
    box-shadow: 0 0 16px rgba(162, 56, 255, 0.25) !important;
}

.dz-ed-genres {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 2px 0 6px !important;
}

.dz-ed-genres::-webkit-scrollbar {
    display: none !important;
}

.dz-ed-genre {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--white-a70) !important;
    background: var(--white-a06) !important;
    border: 1px solid var(--white-a08) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 160ms ease !important;
}

.dz-ed-genre:hover {
    color: #ffffff !important;
    background: var(--white-a12) !important;
}

.dz-ed-genre.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #a238ff, #7928ca) !important;
    border-color: #a238ff !important;
    box-shadow: 0 4px 14px rgba(162, 56, 255, 0.4) !important;
}

.dz-ed-progress {
    width: 100% !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: var(--white-a10) !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}

.dz-ed-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #a238ff, #06b6d4) !important;
    border-radius: 9999px !important;
    transition: width 200ms ease !important;
}

/* Hero Help & Blacklist frosted glass buttons */
.tool-help-button.discover-page-help-button,
.discover-blacklist-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-circle) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--white-a14) !important;
    color: var(--white-a80) !important;
    cursor: pointer !important;
    transition: all 180ms ease !important;
}

.tool-help-button.discover-page-help-button:hover,
.discover-blacklist-btn:hover {
    background: var(--white-a20) !important;
    color: #ffffff !important;
    border-color: var(--white-a30) !important;
    transform: scale(1.06) !important;
}

/* ── 10. Premier Artist Map & Artist Web Hubs (Explore & Build) ──────────── */
.discover-hub-row--tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .discover-hub-row--tools {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.discover-hub-row--tools .artmap-hub {
    position: relative !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(17, 23, 37, 0.75) 0%, rgba(10, 14, 24, 0.88) 100%) !important;
    border: 1px solid var(--white-a08) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--white-a08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.discover-hub-row--tools .artmap-hub:hover {
    border-color: var(--white-a14) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), inset 0 1px 0 var(--white-a12) !important;
}

/* Background atmosphere with subtle glowing color clouds */
.discover-hub-row--tools .artmap-hub-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: radial-gradient(circle at 18% 18%, rgba(162, 56, 255, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 82% 82%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                linear-gradient(145deg, #0f1422 0%, #090c14 100%) !important;
    opacity: 0.95 !important;
}

/* Give the second card (Artist Web) an electric blue / indigo glow accent */
.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-bg {
    background: radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 82% 82%, rgba(162, 56, 255, 0.1) 0%, transparent 50%),
                linear-gradient(145deg, #0b1526 0%, #080c14 100%) !important;
}

.discover-hub-row--tools .artmap-hub-bg::after {
    display: none !important;
}

.discover-hub-row--tools .artmap-hub-bg::before {
    opacity: 0.18 !important;
}

/* Hub Content & Header */
.discover-hub-row--tools .artmap-hub-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 24px 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.discover-hub-row--tools .artmap-hub-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.discover-hub-row--tools .artmap-hub-icon {
    width: 32px !important;
    height: 32px !important;
    color: #c084fc !important;
    filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.4)) !important;
    flex-shrink: 0 !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-icon {
    color: #38bdf8 !important;
    filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.4)) !important;
}

.discover-hub-row--tools .artmap-hub-title {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.discover-hub-row--tools .artmap-hub-subtitle {
    font-size: 0.86rem !important;
    color: var(--white-a60) !important;
    margin: 4px 0 0 !important;
    line-height: 1.35 !important;
}

/* Grid of 3 action cards */
.discover-hub-row--tools .artmap-hub-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}

/* Each action card button — redesigned from cramped row to generous structured card */
.discover-hub-row--tools .artmap-hub-card {
    display: grid !important;
    grid-template-areas:
        "icon arrow"
        "text text" !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    row-gap: 14px !important;
    column-gap: 10px !important;
    align-items: start !important;
    text-align: left !important;
    padding: 18px 16px 18px !important;
    border-radius: var(--radius-xl) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--white-a08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 148px !important;
    box-sizing: border-box !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(162, 56, 255, 0.16) 0%, transparent 72%) !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
    pointer-events: none !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card::before {
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 72%) !important;
}

.discover-hub-row--tools .artmap-hub-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border-color: rgba(162, 56, 255, 0.4) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px rgba(162, 56, 255, 0.16) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover {
    border-color: rgba(56, 189, 248, 0.42) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px rgba(56, 189, 248, 0.16) !important;
}

.discover-hub-row--tools .artmap-hub-card:hover::before {
    opacity: 1 !important;
}

.discover-hub-row--tools .artmap-hub-card:active {
    transform: translateY(-1px) scale(0.99) !important;
}

/* Icon Squircle */
.discover-hub-row--tools .artmap-hub-card-icon {
    grid-area: icon !important;
    justify-self: start !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-lg) !important;
    background: rgba(162, 56, 255, 0.12) !important;
    border: 1px solid rgba(162, 56, 255, 0.24) !important;
    color: #d8b4fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    color: #7dd3fc !important;
}

.discover-hub-row--tools .artmap-hub-card-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-icon {
    background: rgba(162, 56, 255, 0.24) !important;
    border-color: rgba(162, 56, 255, 0.48) !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 14px rgba(162, 56, 255, 0.35) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover .artmap-hub-card-icon {
    background: rgba(56, 189, 248, 0.24) !important;
    border-color: rgba(56, 189, 248, 0.48) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}

/* Arrow indicator on top-right */
.discover-hub-row--tools .artmap-hub-card-arrow {
    grid-area: arrow !important;
    justify-self: end !important;
    align-self: center !important;
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    transition: all 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-arrow {
    color: #c084fc !important;
    transform: translateX(3px) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover .artmap-hub-card-arrow {
    color: #38bdf8 !important;
}

/* Text block spanning full width below icon */
.discover-hub-row--tools .artmap-hub-card-text {
    grid-area: text !important;
    width: 100% !important;
    min-width: 0 !important;
}

.discover-hub-row--tools .artmap-hub-card-text h3 {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
    transition: color 0.2s ease !important;
}

.discover-hub-row--tools .artmap-hub-card-text p {
    font-size: 0.81rem !important;
    line-height: 1.44 !important;
    color: var(--white-a65) !important;
    margin: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    transition: color 0.2s ease !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-text p {
    color: var(--white-a85) !important;
}

/* ── 11. Responsive Mobile Adjustments (< 768px) ─────────────────────────── */
@media (max-width: 768px) {
    .discover-container {
        padding: 12px 14px 72px !important;
    }

    /* never a fixed height: 290px with overflow hidden clipped the title off
       the top and stacked the actions on the faces the moment a name wrapped */
    .discover-hero {
        height: auto !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    /* on a phone the text sits over the photo, so the scrim darkens top to bottom */
    .discover-hero-overlay {
        background: linear-gradient(180deg, rgba(10, 13, 20, 0.55) 0%, rgba(10, 13, 20, 0.85) 45%, #0a0d14 100%) !important;
    }

    .discover-hero-content,
    .discover-command-hero .discover-hero-content {
        max-width: 100% !important;
        padding: 22px 20px 6px !important;
    }

    .discover-hero-title {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }

    .discover-hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    .discover-hero-button.primary {
        padding: 10px 20px !important;
        font-size: 0.84rem !important;
    }

    .discover-hero-button.secondary {
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
    }

    /* mobile.css stacks these headers into a column; flex-end in a column
       means "hug the right edge", which is where their titles ended up */
    .discovery-zone-head,
    .discover-section-header {
        align-items: flex-start !important;
    }

    .discover-hero-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 20px 16px !important;
    }

    .discover-hero-indicators {
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .hero-indicator-face {
        width: 30px;
        height: 30px;
    }

    .discover-hero-bottom-actions {
        margin-left: -12px !important;
    }

    .discover-hero-nav {
        display: none !important;
    }

    .discover-mix-card {
        flex: 0 0 152px !important;
        width: 152px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    /* On mobile touch devices, keep Play button accessible */
    .mix-card-play {
        opacity: 0.92 !important;
        transform: none !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    .discover-grid > .ya-card,
    .discover-carousel > .ya-card,
    .ya-card.discover-album-card,
    .ya-card.recommended-artist-card,
    [id="your-artists-carousel"] .ya-card {
        flex: 0 0 148px !important;
        width: 148px !important;
        max-width: 148px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    [id="deezer-editorial"] {
        padding: 18px 16px !important;
    }

    .dz-ed-search {
        max-width: 100% !important;
    }

    .discover-hub-row--tools {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .discover-hub-row--tools .artmap-hub-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .discover-hub-row--tools .artmap-hub-card {
        grid-template-areas: "icon text arrow" !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
        align-items: center !important;
        min-height: auto !important;
        padding: 14px 16px !important;
    }
}

/* ── Discovery feedback ⋯ (more / less like this, not now, block) ──────────
   The same chip as the watchlist eye, in the opposite corner: hidden until the
   card is hovered or focused, always shown where there is no hover. */
.discover-feedback-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--white-a12);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--white-a80);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease, color 180ms ease;
}

.discover-feedback-trigger:hover:not(:disabled),
.discover-feedback-trigger[aria-expanded="true"] {
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
}

.discover-feedback-trigger:focus-visible {
    outline: 2px solid rgb(var(--accent-rgb));
    outline-offset: 2px;
}

.discover-feedback-trigger:disabled {
    opacity: 0.5;
    cursor: default;
}

.ya-card-feedback-btn,
.recommended-card-feedback-btn,
.discover-station-feedback-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    opacity: 0;
}

.ya-card:hover .ya-card-feedback-btn,
.ya-card:focus-within .ya-card-feedback-btn,
.recommended-artist-card:hover .recommended-card-feedback-btn,
.recommended-artist-card:focus-within .recommended-card-feedback-btn,
.discover-station-card:hover .discover-station-feedback-btn,
.discover-station-card:focus-within .discover-station-feedback-btn,
.discover-feedback-trigger[aria-expanded="true"] {
    opacity: 1;
}

.bylt-track-feedback-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border-color: var(--white-a15);
}

.discover-feedback-menu {
    min-width: 190px;
}

@media (hover: none) {
    .ya-card-feedback-btn,
    .recommended-card-feedback-btn,
    .discover-station-feedback-btn {
        opacity: 1;
    }
}

/* reset taste, beside Close in the blocked artists modal: left, quiet until armed */
.discover-reset-taste-btn {
    margin-right: auto;
    background: transparent;
    border: 1px solid var(--white-a15);
    color: var(--white-a75);
}

.discover-reset-taste-btn.armed {
    border-color: rgba(255, 107, 107, 0.6);
    color: #ff9a9a;
}

/* the hero's ⋯ sits in its action row, sized to the pills beside it */
.discover-hero-feedback-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    font-size: 20px;
    align-self: center;
}

/* ── Discovery inbox (releases, what's coming, saved, concerts) ──────────── */
.discover-inbox {
    margin: 0 0 36px;
    padding: 16px 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--white-a07);
    background: rgba(255, 255, 255, 0.025);
}

.discover-inbox-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.discover-inbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.discover-inbox-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgb(var(--accent-rgb));
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.discover-inbox-tabs {
    display: flex;
    gap: 4px;
}

.discover-inbox-tab {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--white-a12);
    background: transparent;
    color: var(--white-a70);
    font-size: 0.8rem;
    cursor: pointer;
}

.discover-inbox-tab.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
}

.discover-inbox-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--white-a55);
    font-size: 0.8rem;
    cursor: pointer;
}

.discover-inbox-clear:hover {
    color: #fff;
}

.discover-inbox-note,
.discover-inbox-empty {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--white-a55);
}

.discover-inbox-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 8px;
}

.discover-inbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    background: var(--white-a03);
    min-width: 0;
}

.discover-inbox-art {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-a06);
    font-size: 22px;
}

.discover-inbox-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discover-inbox-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
}

.discover-inbox-kind {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-rgb));
}

.discover-inbox-name,
.discover-inbox-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-inbox-name {
    font-weight: 600;
}

.discover-inbox-sub {
    font-size: 0.8rem;
    color: var(--white-a60);
}

.discover-inbox-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.discover-inbox-actions a.btn {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
}

/* save and dismiss: quiet icons, brighter when the row is hovered */
.discover-inbox-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--white-a40);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

.discover-inbox-item:hover .discover-inbox-icon {
    color: var(--white-a70);
}

.discover-inbox-icon:hover {
    color: #fff !important;
    background: var(--white-a08);
}

.discover-inbox-icon:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 1px;
}

/* a concert's art is its date */
.discover-inbox-date {
    flex-direction: column;
    gap: 0;
    background: var(--white-a08);
    line-height: 1;
}

.discover-inbox-date-month {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb));
}

.discover-inbox-date-day {
    margin-top: 3px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.discover-inbox-more {
    margin-top: 10px;
    background: none;
    border: none;
    color: rgb(var(--accent-rgb));
    font-size: 0.85rem;
    cursor: pointer;
}

@media (max-width: 600px) {
    .discover-inbox {
        padding: 12px;
    }

    .discover-inbox-list {
        grid-template-columns: 1fr;
    }

    /* art | text on the first row, the actions under the text */
    .discover-inbox-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
    }

    .discover-inbox-actions {
        grid-column: 2;
    }
}

/* ── Renewable mixes: the Build a mix button and the recipe editor ───────── */
.discover-build-mix-btn {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.12);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.discover-build-mix-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
}

.recipe-modal {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    background: #141414;
    border: 1px solid var(--white-a08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.recipe-modal-header {
    padding: 20px 56px 8px 24px;
}

.recipe-modal-header h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.recipe-modal-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--white-a60);
}

.recipe-modal-header .watch-all-close {
    position: absolute;
    top: 14px;
    right: 16px;
}

.recipe-modal-body {
    padding: 12px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.recipe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--white-a80);
}

.recipe-field input,
.recipe-field select {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--white-a15);
    background: var(--white-a05);
    color: #fff;
    font-size: 0.9rem;
}

.recipe-row {
    display: flex;
    gap: 12px;
}

.recipe-shares {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--white-a08);
}

.recipe-shares legend {
    padding: 0 6px;
    font-size: 0.8rem;
    color: var(--white-a70);
}

.recipe-share {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
}

.recipe-share input[type="range"] {
    width: 100%;
    accent-color: rgb(var(--accent-rgb));
}

.recipe-share-label {
    display: flex;
    justify-content: space-between;
}

.recipe-share-value {
    color: rgb(var(--accent-rgb));
    font-variant-numeric: tabular-nums;
}

.recipe-hint {
    font-size: 0.75rem;
    color: var(--white-a50);
}

.recipe-error {
    margin: 0;
    color: #ff9a9a;
    font-size: 0.85rem;
}

.recipe-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 24px 20px;
}

.recipe-delete {
    margin-right: auto;
    background: transparent;
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff9a9a;
}

.recipe-delete.armed {
    background: rgba(255, 107, 107, 0.15);
}

@media (max-width: 600px) {
    .recipe-modal-header {
        padding-left: 16px;
    }

    .recipe-modal-body,
    .recipe-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .recipe-row {
        flex-direction: column;
    }
}

/* ── 12. Pulse banners: your week, your taste gap, the spotlight ─────────── */
.dsc-pulse-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin: 0 0 12px;
}

.dsc-pulse-row--single {
    grid-template-columns: minmax(0, 1fr);
}

.dsc-pulse {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--white-a08);
    background: linear-gradient(145deg, rgba(24, 29, 40, 0.9), rgba(13, 16, 23, 0.95));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    padding: 22px 24px;
    min-width: 0;
}

.dsc-pulse-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-a55);
}

.dsc-pulse-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.dsc-pulse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--white-a14);
    background: var(--white-a06);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.dsc-pulse-btn:hover:not(:disabled) {
    background: var(--white-a12);
}

.dsc-pulse-btn.primary {
    border-color: transparent;
    background: #fff;
    color: #0a0b0d;
}

.dsc-pulse-btn.primary:hover:not(:disabled) {
    background: #fff;
    transform: scale(1.03);
}

.dsc-pulse-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.dsc-pulse-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 2px;
}

/* your week: figure | the week's shape | who was on repeat */
.dsc-week {
    display: grid;
    grid-template-columns: minmax(290px, 1.5fr) minmax(140px, 1fr) auto;
    align-items: center;
    gap: 28px;
}

.dsc-week-wash {
    position: absolute;
    inset: -30%;
    left: 40%;
    background-size: cover;
    background-position: center;
    filter: blur(60px) saturate(1.3);
    opacity: 0.22;
    pointer-events: none;
}

.dsc-week-main,
.dsc-week-chart,
.dsc-week-top {
    position: relative;
}

.dsc-week-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dsc-week-figure strong {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.dsc-week-figure > span:not(.dsc-week-change) {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white-a60);
}

.dsc-week-change {
    align-self: center;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--white-a08);
    color: var(--white-a75);
}

.dsc-week-change.up {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.14);
}

.dsc-week-sub {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--white-a60);
}

.dsc-week-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    height: 110px;
}

.dsc-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dsc-week-bar-slot {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dsc-week-bar {
    width: min(100%, 18px);
    border-radius: 4px 4px 1px 1px;
    background: var(--accent);
    opacity: 0.85;
    transition: opacity 160ms ease;
}

.dsc-week-day:hover .dsc-week-bar {
    opacity: 1;
}

.dsc-week-day-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--white-a45);
}

.dsc-week-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    width: 128px;
}

.dsc-week-top-img {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.dsc-week-top-img--blank {
    display: grid;
    place-items: center;
    background: var(--white-a10);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.dsc-week-top-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-a50);
}

.dsc-week-top-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.dsc-week-top-plays {
    font-size: 0.78rem;
    color: var(--white-a55);
}

/* the inbox, now the first thing in New & Missing */
.discovery-zone-section--inbox {
    margin-bottom: 28px;
}

/* the taste gap */
.dsc-gap {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
        linear-gradient(145deg, rgba(24, 29, 40, 0.9), rgba(13, 16, 23, 0.95));
}

.dsc-gap-genre {
    margin: 8px 0 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.dsc-gap-line {
    margin: 4px 0 16px;
    font-size: 0.88rem;
    color: var(--white-a65);
}

.dsc-gap-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dsc-gap-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--white-a60);
}

.dsc-gap-row b {
    text-align: right;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dsc-gap-track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--white-a06);
    overflow: hidden;
}

.dsc-gap-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--white-a35);
}

.dsc-gap-fill.played {
    background: var(--accent);
}

.dsc-gap .dsc-pulse-actions {
    margin-top: auto;
    padding-top: 16px;
}

/* the spotlight: one release, full width, between For You and New & Missing */











@media (max-width: 1100px) {
    .dsc-pulse-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .dsc-week {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
    }
    .dsc-week-chart {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 80px;
    }
    .dsc-week-top {
        width: 96px;
    }
    .dsc-week-top-img {
        width: 56px;
        height: 56px;
    }
    .dsc-week-figure strong {
        font-size: 2.1rem;
    }
    .dsc-pulse {
        padding: 18px;
    }


}

/* ── 13. Not-connected and unreachable states stay one line tall ─────────── */
/* a feature you haven't set up is an invitation, not a 300px dashed box */
.discovery-zone .lb-empty-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title button"
        "icon copy button"
        "icon help button";
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 16px 20px;
    border: 1px solid var(--white-a08);
    border-radius: var(--radius-xl);
    background: var(--white-a03);
}

.discovery-zone .lb-empty-state .lb-empty-icon {
    grid-area: icon;
    margin: 0;
    font-size: 28px;
}

.discovery-zone .lb-empty-state h3 {
    grid-area: title;
    margin: 0;
    font-size: 0.95rem;
}

.discovery-zone .lb-empty-state p {
    grid-area: copy;
    margin: 0;
    max-width: none;
    font-size: 0.84rem;
}

.discovery-zone .lb-empty-state .lb-empty-help {
    grid-area: help;
    font-size: 0.76rem;
}

.discovery-zone .lb-empty-state .lb-connect-btn {
    grid-area: button;
    margin: 0;
    white-space: nowrap;
}

/* deezer unreachable / loading / no match: a line, not a panel */
[id="deezer-editorial"] .discover-empty {
    padding: 14px 0 4px;
    min-height: 0;
    text-align: left;
}

[id="deezer-editorial"] .discover-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--white-a55);
}

@media (max-width: 640px) {
    .discovery-zone .lb-empty-state {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon copy"
            "icon help"
            "button button";
        row-gap: 6px;
    }
}

/* a phone: the week reads top to bottom, and who was on repeat is one line */
@media (max-width: 520px) {
    .dsc-week {
        grid-template-columns: minmax(0, 1fr);
    }
    .dsc-week-chart {
        grid-row: auto;
    }
    .dsc-week-top {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas: "img label" "img name" "img plays";
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        width: auto;
        text-align: left;
    }
    .dsc-week-top-img {
        grid-area: img;
        width: 48px;
        height: 48px;
        margin: 0;
    }
    .dsc-week-top-label { grid-area: label; }
    .dsc-week-top-name { grid-area: name; }
    .dsc-week-top-plays { grid-area: plays; }
}

/* ── 14. Moods: the album mosaic under the mood's own colour ─────────────── */
.discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: normal;
}

/* the quick grid's mood tile wears the same colour */
.dsc-quick-tile[data-mix-key^="mood_"] .dsc-quick-art {
    position: relative;
}

.dsc-quick-tile[data-mix-key^="mood_"] .dsc-quick-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(var(--mood-rgb), 0.85), rgba(var(--mood-rgb), 0.35));
}

.discover-mix-card[data-mix-key^="mood_"] .mix-card-play {
    z-index: 5 !important;
}

[data-mix-key="mood_chill"] { --mood-rgb: 45, 170, 220; }
[data-mix-key="mood_focus"] { --mood-rgb: 99, 102, 241; }
[data-mix-key="mood_energy"] { --mood-rgb: 244, 96, 32; }
[data-mix-key="mood_feel_good"] { --mood-rgb: 234, 179, 8; }
[data-mix-key="mood_late_night"] { --mood-rgb: 124, 58, 237; }

/* ── 15. Greeting and the quick grid (spotify's home, with deezer's flow) ── */
.dsc-greeting {
    margin: 4px 0 24px;
}

.dsc-greeting-title {
    margin: 0 0 16px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}

.dsc-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dsc-quick-tile {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--white-a07);
    transition: background 160ms ease;
}

.dsc-quick-tile:hover,
.dsc-quick-tile:focus-within {
    background: rgba(255, 255, 255, 0.13);
}

.dsc-quick-open {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 52px 0 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dsc-quick-art {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-position: center;
    background-color: var(--white-a06);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

.dsc-quick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.dsc-quick-play {
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--accent);
    color: #05130a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 160ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dsc-quick-tile:hover .dsc-quick-play,
.dsc-quick-tile:focus-within .dsc-quick-play,
.dsc-quick-play[aria-busy='true'] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.dsc-quick-open:focus-visible,
.dsc-quick-play:focus-visible,
.dsc-quick-tile--flow:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 2px;
}

/* flow: the one-tap button, two cells wide, alive */
.dsc-quick-tile--flow {
    grid-column: span 2;
    gap: 14px;
    padding: 0 60px 0 14px;
    border: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(120deg, #0d5c32 0%, #1e3a8a 50%, #5b21b6 100%);
    background-size: 200% 200%;
    animation: dsc-flow-shift 14s ease-in-out infinite;
}

.dsc-quick-tile--flow:hover {
    background: linear-gradient(120deg, #0f7a42 0%, #1d4ed8 50%, #6d28d9 100%);
    background-size: 200% 200%;
}

.dsc-quick-tile--flow .dsc-quick-play {
    opacity: 1;
    transform: translateY(-50%);
    background: #fff;
    color: #0a0b0d;
}

.dsc-quick-tile--flow:disabled {
    cursor: progress;
}

.dsc-flow-orb {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-circle);
    background: radial-gradient(circle at 35% 30%, #fff 0%, var(--white-a55) 35%, rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 22px var(--white-a45);
    animation: dsc-flow-breathe 3.2s ease-in-out infinite;
}

.dsc-quick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dsc-quick-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--white-a75);
}

@keyframes dsc-flow-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes dsc-flow-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-quick-tile--flow,
    .dsc-flow-orb {
        animation: none;
    }
}

@media (hover: none) {
    .dsc-quick-play {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@media (max-width: 1100px) {
    .dsc-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .dsc-greeting-title {
        font-size: 1.5rem;
    }
    .dsc-quick-tile {
        height: 56px;
    }
    .dsc-quick-art {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    .dsc-quick-name {
        font-size: 0.82rem;
    }
    /* a phone tile is a tap target: tap opens it. the play button just
       squeezed every name down to three letters */
    .dsc-quick-tile:not(.dsc-quick-tile--flow) .dsc-quick-play {
        display: none;
    }
    .dsc-quick-open {
        padding-right: 8px;
        gap: 10px;
    }
}

/* ── 16. Living banners: one music video at a time, colour-matched glow ─── */
/* the video sits between the photo and the scrim. it's sized like
   background-size: cover against its own box (cq units), and zoomed a touch
   so youtube's letterboxing and corner branding fall outside the frame */
.dsc-backdrop-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.dsc-backdrop-video.ready {
    opacity: 0.9;
}

.dsc-backdrop-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%) scale(1.18);
    pointer-events: none;
}

/* the hero glows the colour of the artist on it */
.discover-hero[style*="--hero-rgb"] {
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 120px -30px rgba(var(--hero-rgb), 0.55),
        inset 0 1px 0 var(--white-a15) !important;
    border-color: rgba(var(--hero-rgb), 0.28) !important;
    transition: box-shadow 1.2s ease, border-color 1.2s ease;
}

.discover-hero[style*="--hero-rgb"] .discover-hero-label-dot {
    background: rgb(var(--hero-rgb));
    box-shadow: 0 0 10px rgba(var(--hero-rgb), 0.9);
}

.discover-hero[style*="--hero-rgb"] .hero-indicator--face.active .hero-indicator-face {
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9), 0 0 0 4px rgb(var(--hero-rgb));
}



/* the video switch, beside the block and help buttons */





/* the week's bars grow in, one after another, the first time you see them */
.dsc-week:not(.in-view) .dsc-week-bar {
    transform: scaleY(0);
}

.dsc-week.in-view .dsc-week-bar {
    transform-origin: bottom;
    animation: dsc-bar-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--bar-delay, 0ms) both;
}

@keyframes dsc-bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* mood cards drift through their colour */
.discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after {
    background:
        linear-gradient(160deg, rgba(var(--mood-rgb), 0.8) 0%, rgba(var(--mood-rgb), 0.3) 50%, rgba(var(--mood-rgb), 0.75) 100%);
    background-size: 100% 220%;
    animation: dsc-mood-drift 9s ease-in-out infinite alternate;
}

@keyframes dsc-mood-drift {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

/* now playing */
.dsc-now {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -6px 0 24px;
    padding: 12px 18px 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--white-a08);
    background: rgba(18, 22, 31, 0.9);
}

.dsc-now-wash {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.4);
    opacity: 0.35;
    pointer-events: none;
}

.dsc-now-art {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: var(--white-a08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.dsc-now-text {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.dsc-now-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb));
}

.dsc-now-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.dsc-now-artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--white-a65);
    text-decoration: none;
}

a.dsc-now-artist:hover {
    color: #fff;
    text-decoration: underline;
}

.dsc-now .dsc-pulse-btn {
    position: relative;
    flex: 0 0 auto;
}

.dsc-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.dsc-eq > span {
    width: 3px;
    height: 30%;
    border-radius: 1px;
    background: currentColor;
}

.dsc-now.playing .dsc-eq > span {
    animation: dsc-eq-bounce 900ms ease-in-out infinite;
}

.dsc-now.playing .dsc-eq > span:nth-child(2) { animation-delay: -300ms; }
.dsc-now.playing .dsc-eq > span:nth-child(3) { animation-delay: -600ms; }
.dsc-now.playing .dsc-eq > span:nth-child(4) { animation-delay: -150ms; }

@keyframes dsc-eq-bounce {
    0%, 100% { height: 25%; }
    50% { height: 100%; }
}

.dsc-now:not(.playing) .dsc-now-eyebrow {
    color: var(--white-a55);
}

@media (prefers-reduced-motion: reduce) {
    .dsc-backdrop-video {
        display: none;
    }
    .dsc-week .dsc-week-bar,
    .dsc-week:not(.in-view) .dsc-week-bar {
        animation: none;
        transform: none;
    }
    .discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after,
    .dsc-now.playing .dsc-eq > span {
        animation: none;
    }
}

@media (max-width: 640px) {

    .dsc-now {
        gap: 12px;
    }
    .dsc-now .dsc-pulse-btn {
        padding: 0 12px;
    }
}

/* ── 17. Promo banners: one thing advertised, big, over a moving background ─ */
.dsc-promo {
    --promo-rgb: var(--accent-rgb);
    position: relative;
    overflow: hidden;
    height: clamp(280px, 26vw, 360px);
    margin: -20px 0 56px;
    border-radius: 24px;
    border: 1px solid rgba(var(--promo-rgb), 0.28);
    background: #0b0d12;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 140px -40px rgba(var(--promo-rgb), 0.7);
    isolation: isolate;
}

.dsc-promo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* the artwork drifts: a slow ken burns pan and zoom, forever */
.dsc-promo-drift {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: saturate(1.25) brightness(0.8);
    animation: dsc-kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}

.dsc-promo--artist .dsc-promo-drift {
    background-position: 50% 25%;
}

@keyframes dsc-kenburns {
    0% { transform: scale(1.02) translate3d(-2%, 1%, 0); }
    50% { transform: scale(1.14) translate3d(2%, -2%, 0); }
    100% { transform: scale(1.08) translate3d(-1%, 2%, 0); }
}

/* a sheen in the artwork's own colour, moving across it */
.dsc-promo-sheen {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 20% 30%, rgba(var(--promo-rgb), 0.55), transparent 70%),
        radial-gradient(50% 70% at 85% 75%, rgba(var(--promo-rgb), 0.4), transparent 70%);
    background-size: 160% 160%;
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: dsc-sheen 14s ease-in-out infinite alternate;
}

@keyframes dsc-sheen {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

.dsc-promo .dsc-backdrop-video.ready {
    opacity: 1;
}

/* dark where the words are, clear where the picture is */
.dsc-promo-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 9, 12, 0.94) 0%, rgba(8, 9, 12, 0.72) 36%, rgba(8, 9, 12, 0.18) 68%, rgba(8, 9, 12, 0) 100%),
        linear-gradient(0deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 45%);
}

.dsc-promo-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
    padding: 0 48px;
}

.dsc-promo-cover {
    flex: 0 0 auto;
    width: clamp(150px, 15vw, 210px);
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
    background-color: var(--white-a06);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--white-a08);
}

.dsc-promo-cover.round {
    border-radius: var(--radius-circle);
}

.dsc-promo-copy {
    min-width: 0;
    max-width: 640px;
}

.dsc-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.dsc-promo-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: rgb(var(--promo-rgb));
    box-shadow: 0 0 12px rgba(var(--promo-rgb), 0.9);
}

.dsc-promo-title {
    margin: 10px 0 0;
    font-size: clamp(2.2rem, 4.4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-promo-sub {
    margin: 12px 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
}

.dsc-promo-sub strong {
    color: #fff;
}

.dsc-promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.dsc-promo-video-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    border: 1px solid var(--white-a16);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    color: var(--white-a55);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.dsc-promo-video-toggle.on,
.dsc-promo-video-toggle:hover {
    color: #fff;
}

.dsc-promo-video-toggle:hover {
    background: var(--white-a20);
}

.dsc-promo-video-toggle:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.9);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .dsc-promo {
        height: auto;
    }
    .dsc-promo-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 28px 22px 26px;
    }
    .dsc-promo-cover {
        width: 120px;
    }
    .dsc-promo-scrim {
        background: linear-gradient(0deg, rgba(8, 9, 12, 0.95) 0%, rgba(8, 9, 12, 0.6) 60%, rgba(8, 9, 12, 0.3) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-promo-drift,
    .dsc-promo-sheen {
        animation: none;
    }
}

/* ── 18. Bento spotlight and the watch rail: banners in columns ────────── */
/* one big feature tile, two stacked beside it */
.dsc-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(215px, 1fr));
    gap: 18px;
    margin: -20px 0 56px;
}

.dsc-bento > .dsc-promo {
    height: auto;
    margin: 0;
}

.dsc-bento > .dsc-promo--feature {
    grid-row: 1 / span 2;
}

/* a bento with only some of its tiles still fills the width */
.dsc-bento > .dsc-promo:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
}

.dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2),
.dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2) ~ .dsc-promo--tile {
    grid-row: 1 / span 2;
}

.dsc-promo--feature .dsc-promo-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 22px;
    padding: 34px 38px;
}

.dsc-promo--feature .dsc-promo-cover {
    width: clamp(130px, 12vw, 180px);
}

.dsc-promo--feature .dsc-promo-scrim {
    background:
        linear-gradient(0deg, rgba(8, 9, 12, 0.95) 0%, rgba(8, 9, 12, 0.55) 45%, rgba(8, 9, 12, 0.1) 80%),
        linear-gradient(90deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 60%);
}

.dsc-promo--tile .dsc-promo-body {
    gap: 20px;
    padding: 0 26px;
}

.dsc-promo--tile .dsc-promo-cover {
    width: clamp(92px, 8vw, 118px);
}

.dsc-promo--tile .dsc-promo-title {
    margin-top: 6px;
}

.dsc-promo--tile .dsc-promo-sub {
    margin-top: 6px;
    font-size: 0.86rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-promo--tile .dsc-promo-actions {
    margin-top: 14px;
}

.dsc-promo--tile .dsc-promo-eyebrow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}

.dsc-promo--tile .dsc-promo-eyebrow::before {
    display: inline-block;
    margin-right: 8px;
    vertical-align: 1px;
}

/* a tile is ~215px tall: two short lines of title, one of reason, one row
   of buttons, and room on the right for the video switch */
.dsc-promo--tile .dsc-promo-body {
    padding-right: 60px;
}

.dsc-promo--tile .dsc-promo-title {
    -webkit-line-clamp: 2;
    font-size: clamp(1.3rem, 1.7vw, 1.75rem) !important;
    line-height: 1.05;
}

.dsc-promo--tile .dsc-promo-sub {
    -webkit-line-clamp: 1 !important;
}

.dsc-promo--tile .dsc-promo-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.dsc-promo--tile .dsc-pulse-btn {
    height: 32px;
    padding: 0 13px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* the watch rail */
.dsc-video-rail {
    margin: -12px 0 56px;
}

.dsc-section-head {
    margin: 0 0 14px;
}

.dsc-section-head h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.dsc-section-head p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--white-a55);
}

.dsc-video-rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 214px;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 2px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

/* a tall 9:16 card: the art is the card, the words sit at the bottom */
.dsc-promo--portrait {
    height: auto;
    aspect-ratio: 9 / 16;
    margin: 0;
    border-radius: 18px;
    scroll-snap-align: start;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}

.dsc-promo--portrait:hover,
.dsc-promo--portrait:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 90px -20px rgba(var(--promo-rgb), 0.8);
}

.dsc-promo--portrait .dsc-promo-drift {
    inset: -8%;
    background-position: center 25%;
}

.dsc-promo--portrait .dsc-promo-scrim {
    background: linear-gradient(0deg, rgba(8, 9, 12, 0.96) 0%, rgba(8, 9, 12, 0.55) 40%, rgba(8, 9, 12, 0) 72%);
}

.dsc-promo--portrait .dsc-promo-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    padding: 18px;
}

.dsc-promo--portrait .dsc-promo-eyebrow {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.82);
}

.dsc-promo--portrait .dsc-promo-eyebrow::before {
    display: none;
}

.dsc-promo--portrait .dsc-promo-title {
    margin-top: 6px;
    font-size: 1.45rem;
}

.dsc-promo--portrait .dsc-promo-actions {
    margin-top: 12px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.dsc-promo--portrait:hover .dsc-promo-actions,
.dsc-promo--portrait:focus-within .dsc-promo-actions {
    opacity: 1;
    transform: none;
}

/* a card showing its video says so with a small live mark */
.dsc-promo.is-live::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: #ff4d4d;
    box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.25);
    animation: dsc-live 1.6s ease-in-out infinite;
}

@keyframes dsc-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (hover: none) {
    .dsc-promo--portrait .dsc-promo-actions {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1000px) {
    .dsc-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    .dsc-bento > .dsc-promo--feature,
    .dsc-bento > .dsc-promo:only-child,
    .dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2),
    .dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2) ~ .dsc-promo--tile {
        grid-row: auto;
    }
    .dsc-bento > .dsc-promo--feature {
        min-height: 380px;
    }
    .dsc-bento > .dsc-promo--tile {
        min-height: 200px;
    }
}

@media (max-width: 520px) {
    .dsc-video-rail-track {
        grid-auto-columns: 170px;
    }
    .dsc-promo--tile .dsc-promo-body {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-promo--portrait,
    .dsc-promo.is-live::after {
        transition: none;
        animation: none;
    }
}

/* ── 19. Banners you can touch: tilt, glare, sound, the entrance ───────── */
/* under a mouse a banner leans toward the pointer. --px/--py are -1..1 from
   its centre, set by the banner as the pointer moves */
.dsc-promo--feature { --tilt: 2.2deg; }
.dsc-promo--tile { --tilt: 3.5deg; }
.dsc-promo--portrait { --tilt: 7deg; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .dsc-promo--feature,
    .dsc-promo--tile,
    .dsc-promo--portrait {
        transform: perspective(1100px) rotateX(calc(var(--py, 0) * -1 * var(--tilt)))
            rotateY(calc(var(--px, 0) * var(--tilt)));
        transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
    }
    .dsc-promo--feature:hover,
    .dsc-promo--tile:hover {
        transition: transform 120ms linear, box-shadow 240ms ease;
    }
    .dsc-promo--portrait:hover,
    .dsc-promo--portrait:focus-within {
        transform: perspective(900px) translateY(-6px) rotateX(calc(var(--py, 0) * -1 * var(--tilt)))
            rotateY(calc(var(--px, 0) * var(--tilt)));
        transition: transform 120ms linear, box-shadow 240ms ease;
    }
}

/* a soft light that follows the pointer across the art */
.dsc-promo-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        55% 45% at calc(50% + var(--px, 0) * 50%) calc(50% + var(--py, 0) * 50%),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.dsc-promo:hover .dsc-promo-glare {
    opacity: 1;
}

/* tap for sound: only on a banner whose video is live */
.dsc-promo-sound {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--white-a18);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    animation: dsc-sound-in 500ms 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    transition: background 160ms ease, border-color 160ms ease;
}

.dsc-promo-sound:hover {
    background: var(--white-a20);
}

.dsc-promo-sound.on {
    background: rgb(var(--promo-rgb));
    border-color: transparent;
    color: #0b0d12;
}

.dsc-promo-sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* a portrait card's is just the icon, top right */
.dsc-promo--portrait .dsc-promo-sound {
    top: 12px;
    right: 12px;
    bottom: auto;
    width: 34px;
    padding: 0;
    justify-content: center;
}

/* a tile's sits top right, out of the way of its buttons */
.dsc-promo--tile .dsc-promo-sound {
    top: 64px;
    bottom: auto;
    right: 18px;
    width: 36px;
    padding: 0;
    justify-content: center;
}

.dsc-promo--tile .dsc-promo-sound span {
    display: none;
}

@keyframes dsc-sound-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* sections rise in, one tile after another, the first time you reach them */
.dsc-reveal:not(.is-in) > * {
    opacity: 0;
}

.dsc-reveal.is-in > * {
    animation: dsc-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.dsc-reveal.is-in > :nth-child(2) { animation-delay: 90ms; }
.dsc-reveal.is-in > :nth-child(3) { animation-delay: 180ms; }
.dsc-reveal.is-in > :nth-child(4) { animation-delay: 270ms; }
.dsc-reveal.is-in > :nth-child(5) { animation-delay: 360ms; }
.dsc-reveal.is-in > :nth-child(n + 6) { animation-delay: 450ms; }

@keyframes dsc-rise {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-reveal:not(.is-in) > * {
        opacity: 1;
    }
    .dsc-reveal.is-in > *,
    .dsc-promo-sound {
        animation: none;
    }
}

/* ── 20. Posters: loud flat colour, a gig, a record, your number one ─────── */
.dsc-posters {
    margin: -12px 0 56px;
}

.dsc-posters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dsc-posters-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dsc-posters-grid--1 {
    grid-template-columns: minmax(0, 1fr);
}

.dsc-poster {
    --ink: 255, 255, 255;
    position: relative;
    overflow: hidden;
    height: 480px;
    border-radius: 24px;
    background: rgb(var(--poster-rgb));
    color: rgb(var(--ink));
    isolation: isolate;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease;
}

.dsc-poster.ink-dark {
    --ink: 12, 12, 14;
}

.dsc-poster:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.5), 0 0 80px -20px rgba(var(--poster-rgb), 0.9);
}

.dsc-poster-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.dsc-poster-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
}

.dsc-poster-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1.5px solid rgba(var(--ink), 0.85);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dsc-poster-title {
    margin: 12px 0 0;
    max-width: 100%;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: inherit;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-poster-sub {
    margin: 8px 0 0;
    max-width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsc-poster-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.dsc-poster-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(var(--ink));
    color: rgb(var(--poster-rgb));
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease;
}

.dsc-poster-btn:hover {
    transform: scale(1.05);
    color: rgb(var(--poster-rgb));
}

.dsc-poster-btn:focus-visible {
    outline: 2px solid rgb(var(--ink));
    outline-offset: 3px;
}

.dsc-poster-more {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.75;
}

/* a marquee line: two copies side by side, each sliding one width left */
.dsc-poster-marquee,
.dsc-poster-type-row {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

.dsc-poster-marquee > span,
.dsc-poster-type-row > span {
    flex: 0 0 auto;
    padding-right: 0.4em;
    animation: dsc-marquee 24s linear infinite;
}

@keyframes dsc-marquee {
    to { transform: translateX(-100%); }
}

/* the gig poster: a ticker along the top, halftone, stage lights sweeping */
.dsc-poster-marquee {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 30px;
    align-items: center;
    background: rgb(var(--ink));
    color: rgb(var(--poster-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.dsc-poster-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--ink), 0.2) 1.3px, transparent 1.7px);
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
}

.dsc-poster-photo {
    position: absolute;
    top: 30px;
    right: 0;
    width: 78%;
    height: 58%;
    background-size: cover;
    background-position: center 25%;
    filter: grayscale(1) contrast(1.3) brightness(1.05);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 40%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 40%);
    mask-composite: intersect;
}

.dsc-poster-beam {
    position: absolute;
    bottom: -8%;
    width: 46%;
    height: 130%;
    background: linear-gradient(0deg, var(--white-a70), rgba(255, 255, 255, 0) 85%);
    clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
    transform-origin: 50% 100%;
    mix-blend-mode: soft-light;
    animation: dsc-beam 7s ease-in-out infinite alternate;
}

.dsc-poster-beam--a {
    left: -6%;
}

.dsc-poster-beam--b {
    right: -6%;
    animation-duration: 9s;
    animation-direction: alternate-reverse;
}

@keyframes dsc-beam {
    from { transform: rotate(-22deg); }
    to { transform: rotate(22deg); }
}

.dsc-poster-date {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    line-height: 1;
}

.dsc-poster-month {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.dsc-poster-day {
    margin-top: -4px;
    font-size: 5.4rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.dsc-poster--concert .dsc-poster-title {
    margin-top: 6px;
    text-transform: uppercase;
}

/* the record poster: the sleeve with its record sliding out, spinning */
.dsc-poster-blob {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    filter: blur(40px);
    animation: dsc-blob 14s ease-in-out infinite alternate;
}

.dsc-poster-blob--a {
    top: -20%;
    right: -25%;
    background: var(--white-a40);
}

.dsc-poster-blob--b {
    bottom: -25%;
    left: -20%;
    background: rgba(0, 0, 0, 0.22);
    animation-duration: 18s;
}

@keyframes dsc-blob {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-12%, 10%, 0) scale(1.15); }
}

.dsc-poster-record {
    position: absolute;
    top: 30px;
    left: 26px;
    z-index: 1;
    width: 52%;
    aspect-ratio: 1;
    transform: rotate(-4deg);
}

.dsc-poster-vinyl,
.dsc-poster-record::before {
    position: absolute;
    top: 3%;
    left: 34%;
    width: 94%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    transition: left 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dsc-poster-vinyl {
    background: repeating-radial-gradient(circle at center, #0b0b0c 0 1.6px, #1a1a1c 1.6px 3.2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    animation: dsc-spin 4.5s linear infinite;
}

/* the light on the grooves stays put while the record turns under it */
.dsc-poster-record::before {
    content: '';
    z-index: 1;
    background: conic-gradient(from 20deg, var(--white-a16), transparent 12%, transparent 45%, var(--white-a12) 52%, transparent 64%);
    pointer-events: none;
}

.dsc-poster-vinyl-label {
    position: absolute;
    inset: 33%;
    border-radius: var(--radius-circle);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 3px #0b0b0c;
}

.dsc-poster-vinyl-label::after {
    content: '';
    position: absolute;
    inset: 44%;
    border-radius: var(--radius-circle);
    background: #0b0b0c;
}

@keyframes dsc-spin {
    to { transform: rotate(360deg); }
}

.dsc-poster-sleeve {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--white-a12);
}

.dsc-poster--album:hover .dsc-poster-vinyl,
.dsc-poster--album:hover .dsc-poster-record::before {
    left: 50%;
}

/* your number one: their name in giant type, scrolling, behind their face */
.dsc-poster-type {
    position: absolute;
    inset: -10% -20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transform: rotate(-8deg);
}

.dsc-poster-type-row {
    font-size: 4.6rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ink), 0.3);
}

.dsc-poster-type-row:nth-child(even) {
    color: rgba(var(--ink), 0.1);
    -webkit-text-stroke: 0;
}

.dsc-poster-type-row:nth-child(even) > span {
    animation-direction: reverse;
    animation-duration: 30s;
}

.dsc-poster-face {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 1;
    width: 44%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    background-color: rgba(var(--ink), 0.15);
    background-size: cover;
    background-position: center 25%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 6px rgb(var(--poster-rgb)), 0 28px 60px rgba(0, 0, 0, 0.35);
}

.dsc-poster-ring {
    position: absolute;
    inset: -6px;
    border-radius: var(--radius-circle);
    border: 2px solid rgba(var(--ink), 0.55);
    animation: dsc-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.dsc-poster-ring--late {
    animation-delay: 1.3s;
}

@keyframes dsc-ring {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.45); opacity: 0; }
}

.dsc-poster-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    line-height: 1;
}

.dsc-poster-figure strong {
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.dsc-poster-figure span {
    font-size: 0.95rem;
    font-weight: 800;
    opacity: 0.8;
}

.dsc-poster--artist .dsc-poster-title {
    margin-top: 6px;
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    text-transform: uppercase;
}

/* off screen, nothing moves */
.dsc-posters.is-paused *,
.dsc-posters.is-paused *::before,
.dsc-posters.is-paused *::after {
    animation-play-state: paused !important;
}

@media (max-width: 1000px) {
    .dsc-posters-grid,
    .dsc-posters-grid--2 {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(280px, 78vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
    }
    .dsc-poster {
        scroll-snap-align: start;
        height: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-poster,
    .dsc-poster-marquee > span,
    .dsc-poster-type-row > span,
    .dsc-poster-beam,
    .dsc-poster-blob,
    .dsc-poster-vinyl,
    .dsc-poster-ring {
        animation: none;
        transition: none;
    }
    .dsc-poster-ring {
        display: none;
    }
}

/* a show with no photo: the date is the picture */
.dsc-poster--typeset .dsc-poster-day {
    font-size: 9rem;
    letter-spacing: -0.07em;
}

.dsc-poster--typeset .dsc-poster-month {
    font-size: 1.2rem;
}