/* ==========================================================
   AIOS MUSIC STORE — POLISH V1
   Desktop + Mobile responsive corrections
   ========================================================== */

/* ----------------------------------------------------------
   ALBUM GRID
   Full catalog should behave as a grid, never a slider.
   ---------------------------------------------------------- */

.album-grid,
.albums-grid,
#albumGrid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px !important;

  width:100% !important;
  max-width:none !important;

  overflow:visible !important;
  overflow-x:visible !important;

  scroll-snap-type:none !important;
}

.album-grid > *,
.albums-grid > *,
#albumGrid > * {
  min-width:0 !important;
  width:auto !important;

  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}


/* ----------------------------------------------------------
   ALBUM CARD SPACING
   Remove excessive empty space from New Albums / album boxes.
   ---------------------------------------------------------- */

.album-card,
.new-album-card,
.latest-album-card,
.recent-album-card {
  display:flex;
  flex-direction:column;

  height:auto !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  overflow:hidden;
}

.album-card__art,
.album-card__image,
.album-card__cover,
.new-album-card__art,
.latest-album-card__art {
  margin:0 !important;
  padding:0 !important;

  width:100%;
}

.album-card__body,
.album-card__content,
.album-card__meta,
.new-album-card__body,
.latest-album-card__body {
  padding:12px 14px 14px !important;
  margin:0 !important;
}

.album-card h2,
.album-card h3,
.album-card h4,
.album-card__title {
  margin-top:0 !important;
  margin-bottom:6px !important;
}

.album-card p,
.album-card__meta p {
  margin-top:3px !important;
  margin-bottom:3px !important;
}


/* ----------------------------------------------------------
   COLLECTION ARTWORK
   Fix banner/art alignment inside saved + recent collections.
   ---------------------------------------------------------- */

#collectionExperience .saved-collection-card,
#collectionExperience .recent-collection-card {
  overflow:hidden !important;
  align-items:stretch !important;
}

#collectionExperience .saved-collection-card__art,
#collectionExperience .recent-collection-card__art {
  position:relative !important;

  width:100% !important;
  min-width:0 !important;

  aspect-ratio:16 / 7 !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#collectionExperience .saved-collection-card__art img,
#collectionExperience .recent-collection-card__art img {
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center center !important;
}

#collectionExperience .saved-collection-card__body,
#collectionExperience .recent-collection-card__body {
  padding:14px 16px !important;
}

#collectionExperience .saved-collection-card__actions {
  padding:0 16px 16px !important;
}


/* ----------------------------------------------------------
   PLAYLIST CONTROLS — DESKTOP / MAC
   Stop action buttons bunching together on wide screens.
   ---------------------------------------------------------- */

@media (min-width:861px) {

  .playlist-actions,
  .playlist-controls,
  .playlist__actions,
  .playlist__controls,
  .track-list-actions,
  .track-actions-toolbar,
  .album-view__actions {
    display:grid !important;

    grid-template-columns:
      repeat(auto-fit,minmax(130px,1fr)) !important;

    gap:10px !important;

    width:100% !important;
    max-width:none !important;

    align-items:stretch !important;
  }

  .playlist-actions button,
  .playlist-actions a,
  .playlist-controls button,
  .playlist-controls a,
  .playlist__actions button,
  .playlist__actions a,
  .playlist__controls button,
  .playlist__controls a,
  .track-list-actions button,
  .track-list-actions a,
  .album-view__actions button,
  .album-view__actions a {
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    white-space:normal !important;
  }
}


/* ----------------------------------------------------------
   RECENTLY PLAYED — MOBILE
   Do not suppress the feature on phones.
   ---------------------------------------------------------- */

@media (max-width:860px) {

  #recentlyPlayed,
  .recently-played,
  .recentlyPlayed,
  .recently-played-section,
  [data-section="recently-played"] {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    height:auto !important;
    max-height:none !important;
  }
}


/* ----------------------------------------------------------
   RESPONSIVE ALBUM GRID
   ---------------------------------------------------------- */

@media (max-width:1100px) {

  .album-grid,
  .albums-grid,
  #albumGrid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:860px) {

  .album-grid,
  .albums-grid,
  #albumGrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px !important;
  }
}

@media (max-width:420px) {

  .album-grid,
  .albums-grid,
  #albumGrid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
}


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

.aios-album-pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  width:100%;

  padding:26px 0 12px;
}

.aios-album-pagination button {
  min-width:42px;
  min-height:42px;

  padding:8px 12px;

  border-radius:10px;

  cursor:pointer;
}

.aios-album-pagination button[aria-current="page"] {
  font-weight:800;
  transform:translateY(-1px);
}

.aios-album-pagination button:disabled {
  opacity:.45;
  cursor:default;
}


/* ----------------------------------------------------------
   PREVENT CARD TEXT FROM FORCING LAYOUT WIDTH
   ---------------------------------------------------------- */

.album-card *,
.saved-collection-card *,
.recent-collection-card * {
  min-width:0;
}

.album-card__title,
.saved-collection-card__body,
.recent-collection-card__body {
  overflow-wrap:anywhere;
}

/* ==========================================================
   AIOS MUSIC — ALBUM SAVED COLLECTION CONTROL
   ========================================================== */

.album-card__collection-actions {
  display:flex;
  width:100%;
  margin-top:10px;
}

.album-card__collection-actions .album-save-collection {
  width:100%;
  min-height:38px;
  margin:0;
  white-space:normal;
}

.album-card__collection-actions .album-save-collection.is-saved {
  font-weight:800;
}

@media (max-width:640px) {
  .album-card__collection-actions {
    margin-top:8px;
  }

  .album-card__collection-actions .album-save-collection {
    min-height:36px;
    padding:7px 8px;
    font-size:.82rem;
  }
}

/* ==========================================================
   AIOS MUSIC — PUBLISHED COLLECTION BOX FINAL ALIGNMENT
   Scope: .collection-card ONLY
   Does not touch Saved Collections / Recent Collections
   ========================================================== */

#collectionExperience .collection-card {
  display:grid !important;
  grid-template-columns:minmax(280px, 38%) minmax(0, 1fr) !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  align-items:start !important;
  align-content:start !important;

  margin:0 !important;

  overflow:hidden !important;
}


/* ----------------------------------------------------------
   ARTWORK SIDE

   Handles whichever published-card wrapper currently contains
   the image without changing saved/recent collection cards.
   ---------------------------------------------------------- */

#collectionExperience .collection-card__art,
#collectionExperience .collection-card__cover,
#collectionExperience .collection-card__image,
#collectionExperience .collection-card > a:first-child,
#collectionExperience .collection-card > button:first-child {
  display:block !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  aspect-ratio:16 / 9 !important;

  align-self:start !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/* Kill the tall empty artwork column */

#collectionExperience .collection-card img {
  display:block !important;

  width:100% !important;
  height:100% !important;

  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center center !important;
}


/* ----------------------------------------------------------
   CONTENT SIDE
   ---------------------------------------------------------- */

#collectionExperience .collection-card__body {
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;

  min-width:0 !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:20px 24px 22px !important;

  overflow:visible !important;

  align-self:start !important;
}


/* Title must begin inside the card — never above it */

#collectionExperience .collection-card h3,
#collectionExperience .collection-card__title {
  position:static !important;

  display:block !important;

  margin:0 0 8px !important;
  padding:0 !important;

  transform:none !important;

  line-height:1.08 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  overflow:visible !important;
}


/* Natural text height */

#collectionExperience .collection-card p,
#collectionExperience .collection-card__description,
#collectionExperience .collection-card__meta,
#collectionExperience .collection-card__artist-state {
  position:static !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin-top:0 !important;

  overflow:visible !important;

  transform:none !important;
}


/* Don't let metadata/actions force card height */

#collectionExperience .collection-card__actions {
  display:flex !important;
  flex-wrap:wrap !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  gap:10px !important;

  margin-top:14px !important;
}


/* ----------------------------------------------------------
   MOBILE
   Artwork becomes full-width above content.
   ---------------------------------------------------------- */

@media (max-width:860px) {

  #collectionExperience .collection-card {
    grid-template-columns:1fr !important;

    height:auto !important;
    max-height:none !important;
  }

  #collectionExperience .collection-card__art,
  #collectionExperience .collection-card__cover,
  #collectionExperience .collection-card__image,
  #collectionExperience .collection-card > a:first-child,
  #collectionExperience .collection-card > button:first-child {
    width:100% !important;

    aspect-ratio:16 / 9 !important;
  }

  #collectionExperience .collection-card__body {
    padding:16px 18px 20px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — PUBLISHED COLLECTION LANDSCAPE CARD V2
   One clean card:
      LANDSCAPE ARTWORK
      ↓
      COLLECTION INFORMATION
   ========================================================== */

#collectionExperience .collection-card {
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/* ARTWORK — FULL CARD WIDTH */

#collectionExperience .collection-card__art,
#collectionExperience .collection-card__cover,
#collectionExperience .collection-card__image {
  display:block !important;

  width:100% !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  aspect-ratio:16 / 9 !important;

  overflow:hidden !important;
}


/*
 * Catch the real artwork wrapper even when the original
 * template does not use an __art class.
 */

#collectionExperience .collection-card > img,
#collectionExperience .collection-card > a:has(img),
#collectionExperience .collection-card > button:has(img) {
  display:block !important;

  width:100% !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  aspect-ratio:16 / 9 !important;

  overflow:hidden !important;
}


#collectionExperience .collection-card img {
  display:block !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center !important;
}


/* INFORMATION BELOW ARTWORK */

#collectionExperience .collection-card__body {
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  padding:22px 24px 24px !important;
  margin:0 !important;

  overflow:visible !important;
}


/* TITLE */

#collectionExperience .collection-card h3,
#collectionExperience .collection-card__title {
  position:static !important;

  width:auto !important;
  height:auto !important;

  margin:0 0 10px !important;
  padding:0 !important;

  transform:none !important;

  line-height:1.08 !important;

  overflow:visible !important;
}


/* ALL COPY */

#collectionExperience .collection-card p,
#collectionExperience .collection-card__meta,
#collectionExperience .collection-card__description,
#collectionExperience .collection-card__artist-state {
  position:static !important;

  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  transform:none !important;

  overflow:visible !important;
}


/* ACTIONS */

#collectionExperience .collection-card__actions {
  display:flex !important;
  flex-wrap:wrap !important;

  width:100% !important;
  height:auto !important;

  gap:10px !important;

  margin-top:16px !important;
}


/* PHONE */

@media (max-width:640px) {

  #collectionExperience .collection-card__body {
    padding:16px 16px 20px !important;
  }

  #collectionExperience .collection-card__actions {
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #collectionExperience .collection-card__actions > * {
    width:100% !important;
  }
}

/* ==========================================================
   AIOS MUSIC — PUBLISHED COLLECTION CARD FINAL
   Exact markup:
   article.collection-card
   button.collection-card__art
   div.collection-card__body
   ========================================================== */

#collectionExperience .collection-card {
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/* Exact artwork button */

#collectionExperience .collection-card > .collection-card__art {
  display:block !important;

  order:1 !important;

  width:100% !important;
  height:auto !important;

  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;

  aspect-ratio:16 / 9 !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  overflow:hidden !important;

  flex:none !important;
}


/* Exact artwork image */

#collectionExperience .collection-card > .collection-card__art > img {
  display:block !important;

  width:100% !important;
  height:100% !important;

  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:cover !important;
  object-position:center center !important;
}


/* Exact body */

#collectionExperience .collection-card > .collection-card__body {
  order:2 !important;

  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:20px 24px 24px !important;

  overflow:visible !important;

  flex:none !important;
}


/* Body content */

#collectionExperience .collection-card__eyebrow {
  margin:0 0 8px !important;
}

#collectionExperience .collection-card__title {
  position:static !important;

  display:block !important;

  width:auto !important;
  height:auto !important;

  margin:0 0 10px !important;
  padding:0 !important;

  transform:none !important;

  line-height:1.08 !important;

  overflow:visible !important;
}

#collectionExperience .collection-card__title button {
  display:block !important;

  width:auto !important;

  margin:0 !important;
  padding:0 !important;

  text-align:left !important;

  white-space:normal !important;
}

#collectionExperience .collection-card__theme {
  margin:0 0 8px !important;
}

#collectionExperience .collection-card__meta {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:8px 14px !important;

  margin:0 0 14px !important;
}

#collectionExperience .collection-card__actions {
  display:flex !important;
  flex-wrap:wrap !important;

  gap:10px !important;

  width:100% !important;

  margin:0 0 14px !important;
}

#collectionExperience .collection-card__artist-state {
  margin:0 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  overflow:visible !important;
}


/* Mobile */

@media (max-width:640px) {

  #collectionExperience .collection-card > .collection-card__body {
    padding:16px 16px 20px !important;
  }

  #collectionExperience .collection-card__actions {
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #collectionExperience .collection-card__actions > * {
    width:100% !important;
  }
}

/* ==========================================================
   AIOS MUSIC — COLLECTION LANDSCAPE GEOMETRY
   Fix card shape to match landscape artwork
   ========================================================== */

#collectionExperience .collection-card {
  display:block !important;

  width:100% !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  padding:0 !important;
  margin:0 !important;

  overflow:hidden !important;
}

/* artwork becomes the card's dominant landscape surface */
#collectionExperience .collection-card > .collection-card__art {
  display:block !important;

  width:100% !important;
  height:auto !important;

  aspect-ratio:16 / 9 !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}

#collectionExperience .collection-card > .collection-card__art > img {
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center !important;

  margin:0 !important;
  padding:0 !important;
}

/* compact information strip below landscape artwork */
#collectionExperience .collection-card > .collection-card__body {
  display:block !important;

  width:100% !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  padding:16px 20px 18px !important;
  margin:0 !important;

  overflow:visible !important;
}

#collectionExperience .collection-card__title {
  margin:0 0 6px !important;
  line-height:1.05 !important;
}

#collectionExperience .collection-card__theme {
  margin:0 0 6px !important;
}

#collectionExperience .collection-card__meta {
  margin:0 0 10px !important;
}

#collectionExperience .collection-card__actions {
  margin:10px 0 10px !important;
}

/* remove any inherited tall / two-column geometry */
#collectionExperience .collection-card,
#collectionExperience .collection-card > .collection-card__art,
#collectionExperience .collection-card > .collection-card__body {
  grid-template-columns:none !important;
  grid-column:auto !important;
  grid-row:auto !important;

  flex-basis:auto !important;
  align-self:auto !important;

  transform:none !important;
}

/* phone stays landscape-first */
@media (max-width:640px) {
  #collectionExperience .collection-card > .collection-card__body {
    padding:14px 16px 16px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE COLLECTION LANDSCAPE FIX
   Phone/tablet only.
   Desktop remains unchanged.
   ========================================================== */

@media (max-width:860px) {

  #collectionExperience .collection-card {
    display:flex !important;
    flex-direction:column !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-template-areas:none !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;
  }

  #collectionExperience .collection-card > .collection-card__art {
    display:block !important;

    order:1 !important;

    width:100% !important;
    height:auto !important;

    min-width:100% !important;
    max-width:100% !important;

    aspect-ratio:16 / 9 !important;

    grid-column:auto !important;
    grid-row:auto !important;

    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  #collectionExperience .collection-card > .collection-card__art > img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;
  }

  #collectionExperience .collection-card > .collection-card__body {
    display:flex !important;
    flex-direction:column !important;

    order:2 !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    grid-column:auto !important;
    grid-row:auto !important;

    flex:0 0 auto !important;

    margin:0 !important;
    padding:16px 18px 20px !important;

    overflow:visible !important;
  }

  #collectionExperience .collection-card__title,
  #collectionExperience .collection-card__theme,
  #collectionExperience .collection-card__meta,
  #collectionExperience .collection-card__actions,
  #collectionExperience .collection-card__artist-state {
    width:100% !important;
    max-width:none !important;

    height:auto !important;
    max-height:none !important;

    grid-column:auto !important;
    grid-row:auto !important;

    overflow:visible !important;
  }

  #collectionExperience .collection-card__actions {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #collectionExperience .collection-card__actions > * {
    width:100% !important;
  }
}

/* ==========================================================
   AIOS MUSIC — CANONICAL HOME RECENTLY PLAYED
   ========================================================== */

#recentlyPlayed {
  margin-bottom:28px;
}

#recentlyPlayed[hidden] {
  display:none !important;
}

.recently-played-grid {
  display:grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap:14px;
}

.recently-played-card {
  overflow:hidden;
  border-radius:14px;
}

.recently-played-card__art {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  padding:0;
  margin:0;
  border:0;
  overflow:hidden;
  cursor:pointer;
}

.recently-played-card__art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.recently-played-card__body {
  padding:10px 12px 12px;
}

.recently-played-card__eyebrow {
  margin-bottom:4px;
}

.recently-played-card__title {
  margin:0 0 4px;
  line-height:1.15;
}

.recently-played-card__album {
  opacity:.78;
  font-size:.9rem;
}

@media (max-width:860px) {
  .recently-played-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

@media (max-width:420px) {
  .recently-played-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .recently-played-card__body {
    padding:8px 9px 10px;
  }
}

/* ==========================================================
   AIOS MUSIC — FEATURED ALBUM MOBILE POLISH
   Scope: phone/tablet Featured Album only
   ========================================================== */

@media (max-width:860px) {

  .featured {
    display:flex !important;
    flex-direction:column !important;

    grid-template-columns:none !important;

    width:100% !important;

    gap:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:hidden !important;
  }

  /* Full-width landscape album artwork */

  .featured__art {
    display:block !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    aspect-ratio:16 / 9 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  .featured__art img,
  #featuredArt {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;
  }

  /* Compact information beneath artwork */

  .featured__body,
  .featured__content,
  .featured__copy {
    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:16px 18px 18px !important;
    margin:0 !important;

    overflow:visible !important;
  }

  .featured__title {
    margin:0 0 8px !important;

    text-align:left !important;
    line-height:1.08 !important;
  }

  .featured__desc {
    margin:0 0 10px !important;

    text-align:left !important;

    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
  }

  .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    justify-content:flex-start !important;

    gap:6px 12px !important;

    margin:0 0 12px !important;

    text-align:left !important;
  }

  .featured__actions {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    width:100% !important;

    gap:10px !important;

    margin-top:10px !important;
  }

  .featured__actions > *,
  .featured__actions .btn {
    width:100% !important;
    min-width:0 !important;

    justify-content:center !important;

    margin:0 !important;
  }
}


/* Narrow phone */

@media (max-width:420px) {

  .featured__body,
  .featured__content,
  .featured__copy {
    padding:14px 14px 16px !important;
  }

  .featured__title {
    font-size:var(--step-2) !important;
  }

  .featured__actions {
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================
   AIOS MUSIC — FEATURED PHONE / DESKTOP ENGINE PARITY
   Existing FeaturedAlbumEngine remains the ONLY album authority.

   The engine already writes:
     --aios-featured-art
     data-featured-artwork

   Mobile uses that same changing artwork as the feature
   background instead of rendering a second foreground cover.
   ========================================================== */

@media (max-width:860px) {

  /*
   * The actual featured element receives data-featured-artwork
   * from FeaturedAlbumEngine.render().
   */
  .featured[data-featured-artwork] {
    position:relative !important;

    display:block !important;

    width:100% !important;

    min-height:420px !important;
    height:auto !important;
    max-height:none !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    border-radius:var(--radius-lg) !important;

    background-image:
      linear-gradient(
        to bottom,
        rgba(5,10,20,.10) 0%,
        rgba(5,10,20,.40) 34%,
        rgba(5,10,20,.88) 72%,
        rgba(5,10,20,.98) 100%
      ),
      var(--aios-featured-art) !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }


  /*
   * Keep the existing artwork wrapper because the Featured
   * theme badge lives inside it, but remove the redundant cover.
   */
  .featured[data-featured-artwork] .featured__art {
    position:static !important;

    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:0 !important;
    max-height:0 !important;

    aspect-ratio:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  .featured[data-featured-artwork] .featured__art > img,
  .featured[data-featured-artwork] #featuredArt {
    display:none !important;
  }


  /*
   * Theme badge remains attached to the same live Featured
   * authority even though the foreground artwork is hidden.
   */
  .featured[data-featured-artwork] .featured__theme {
    position:absolute !important;

    top:14px !important;
    left:14px !important;

    z-index:3 !important;

    margin:0 !important;
  }


  /*
   * Existing textual Featured information becomes the overlay
   * at the bottom of the changing album artwork.
   */
  .featured[data-featured-artwork] > div:last-child {
    position:relative !important;

    z-index:2 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;

    width:100% !important;

    min-height:420px !important;
    height:auto !important;

    padding:150px 18px 20px !important;
    margin:0 !important;
  }


  .featured[data-featured-artwork] .eyebrow {
    margin:0 0 6px !important;
  }


  .featured[data-featured-artwork] .featured__title {
    margin:0 0 8px !important;

    text-align:left !important;

    line-height:1.05 !important;

    text-shadow:0 2px 14px rgba(0,0,0,.72);
  }


  .featured[data-featured-artwork] .featured__desc {
    margin:0 0 10px !important;

    max-width:none !important;

    text-align:left !important;

    text-shadow:0 2px 10px rgba(0,0,0,.72);
  }


  .featured[data-featured-artwork] .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    justify-content:flex-start !important;

    gap:6px 14px !important;

    margin:0 0 12px !important;

    text-align:left !important;
  }


  .featured[data-featured-artwork] .featured__actions {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    width:100% !important;

    gap:10px !important;

    margin:6px 0 0 !important;
  }


  .featured[data-featured-artwork] .featured__actions > * {
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    justify-content:center !important;
  }
}


@media (max-width:420px) {

  .featured[data-featured-artwork] {
    min-height:390px !important;
  }

  .featured[data-featured-artwork] > div:last-child {
    min-height:390px !important;

    padding:
      135px
      14px
      16px !important;
  }

  /*
   * Keep both primary Featured controls accessible without
   * creating a tall button stack.
   */
  .featured[data-featured-artwork] .featured__actions {
    grid-template-columns:
      1fr 1fr !important;
  }
}

/* ==========================================================
   AIOS MUSIC — FEATURED COVER OVERLAY REMOVAL
   FeaturedAlbumEngine artwork remains the visual authority.
   ========================================================== */

@media (max-width:860px) {

  #homeView .featured__art > #featuredArt,
  #homeView #featuredArt {
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Keep wrapper only for the live theme badge. */
  #homeView .featured__art {
    position:static !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #homeView .featured__theme {
    position:absolute !important;
    top:14px !important;
    left:14px !important;
    z-index:4 !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE QUEUE SHELL AUTHORITY
   Presentation only.
   QueueUpNext remains sole queue/data/playback authority.
   ========================================================== */

@media (max-width:860px) {

  /* Queue must sit above header, search and floating controls. */
  .queue-drawer {
    z-index:12000 !important;
  }

  .queue-drawer__scrim {
    position:fixed !important;
    inset:0 !important;

    background:rgba(2,7,16,.78) !important;
    backdrop-filter:blur(3px) !important;
  }

  .queue-drawer__panel {
    position:fixed !important;

    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    max-height:min(
      82dvh,
      calc(
        100dvh -
        env(safe-area-inset-top, 0px) -
        18px
      )
    ) !important;

    border-radius:22px 22px 0 0 !important;

    overflow:hidden !important;

    box-shadow:
      0 -24px 70px
      rgba(0,0,0,.62) !important;
  }

  .queue-drawer__header {
    position:sticky !important;
    top:0 !important;

    z-index:4 !important;

    padding:16px 16px 12px !important;

    background:
      rgba(9,16,30,.97) !important;
    backdrop-filter:blur(12px) !important;
  }

  .queue-drawer__header h2 {
    margin:2px 0 0 !important;
    line-height:1.05 !important;
  }

  .queue-drawer__close {
    min-width:44px !important;
    min-height:44px !important;

    flex:0 0 44px !important;
  }

  .queue-drawer__toolbar {
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    padding:
      10px 14px 12px !important;
  }

  .queue-drawer__toolbar .btn,
  .queue-drawer__toolbar button {
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;

    white-space:normal !important;
  }

  .queue-drawer__list {
    overflow-y:auto !important;
    overscroll-behavior:contain !important;

    padding:
      8px 12px
      max(
        18px,
        env(safe-area-inset-bottom)
      ) !important;
  }

  /*
   * Nothing from the normal shell should visually sit
   * above an intentionally opened Queue drawer.
   */
  body.queue-is-open .site-header,
  body.queue-is-open .mobile-nav {
    z-index:1 !important;
    pointer-events:none !important;
  }

  /*
   * If Search happened to be open first, Queue wins visually.
   * We do not alter Search persistence or listeners here.
   */
  body.queue-is-open .search-overlay {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /*
   * Jahcore should not cover Queue controls while the
   * Queue drawer is being used.
   */
  body.queue-is-open [class*="jahcore"][style*="position: fixed"],
  body.queue-is-open .jahcore-music-voice,
  body.queue-is-open .jahcore-music-voice-control {
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .queue-item {
    border-radius:12px !important;
  }

  .queue-item__main {
    min-width:0 !important;
  }
}


/* Narrow phone */
@media (max-width:420px) {

  .queue-drawer__panel {
    max-height:86dvh !important;
  }

  .queue-drawer__toolbar {
    grid-template-columns:1fr !important;
  }

  .queue-drawer__header {
    padding:
      14px 14px 10px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE SEARCH FOREGROUND AUTHORITY
   Search engine unchanged.
   Presentation / shell coordination only.
   ========================================================== */

@media (max-width:860px) {

  .search-overlay {
    z-index:13000 !important;

    position:fixed !important;
    inset:0 !important;

    padding:
      max(
        10px,
        env(safe-area-inset-top)
      )
      10px
      max(
        10px,
        env(safe-area-inset-bottom)
      ) !important;

    background:rgba(2,7,16,.88) !important;
    backdrop-filter:blur(5px) !important;
  }


  .search-overlay.is-open {
    display:flex !important;

    align-items:flex-start !important;

    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;
  }


  .search-panel {
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    max-height:
      calc(
        100dvh -
        env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px) -
        20px
      ) !important;

    margin:0 !important;

    overflow:auto !important;

    border-radius:18px !important;

    z-index:1 !important;
  }


  /*
   * Search is the intentional foreground.
   * Normal header/menu cannot cover its controls.
   */
  body.search-is-open .site-header,
  body.search-is-open .mobile-nav {
    z-index:1 !important;
    pointer-events:none !important;
  }


  /*
   * Search input must remain accessible to touch.
   */
  body.search-is-open .search-panel,
  body.search-is-open .search-panel * {
    pointer-events:auto !important;
  }


  /*
   * Jahcore should not cover Search controls.
   */
  body.search-is-open .jahcore-music-voice,
  body.search-is-open .jahcore-music-voice-control {
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* ==========================================================
   AIOS MUSIC — NOW PLAYING DROPDOWN MOBILE AUTHORITY
   Keeps the existing dropdown inside the viewport.
   ========================================================== */

@media (max-width:860px) {

  .now-playing-dropdown,
  .now-playing-popover,
  .now-playing-menu,
  [data-now-playing-dropdown] {
    position:fixed !important;

    top:calc(
      var(--header-h, 72px) +
      env(safe-area-inset-top, 0px) +
      8px
    ) !important;

    left:12px !important;
    right:12px !important;

    width:auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;

    max-height:calc(
      100dvh -
      var(--header-h, 72px) -
      env(safe-area-inset-top, 0px) -
      env(safe-area-inset-bottom, 0px) -
      28px
    ) !important;

    margin:0 !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    border-radius:20px !important;

    z-index:12500 !important;

    transform:none !important;

    box-sizing:border-box !important;
    overscroll-behavior:contain !important;
  }

  .now-playing-dropdown *,
  .now-playing-popover *,
  .now-playing-menu *,
  [data-now-playing-dropdown] * {
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  /* Keep artwork/text rows compact. */
  .now-playing-dropdown img,
  .now-playing-popover img,
  .now-playing-menu img,
  [data-now-playing-dropdown] img {
    flex:0 0 auto !important;
    object-fit:cover !important;
  }

  /* Long titles must never force the panel wider. */
  .now-playing-dropdown strong,
  .now-playing-dropdown span,
  .now-playing-popover strong,
  .now-playing-popover span,
  .now-playing-menu strong,
  .now-playing-menu span,
  [data-now-playing-dropdown] strong,
  [data-now-playing-dropdown] span {
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
}


/* Narrow iPhone */
@media (max-width:420px) {

  .now-playing-dropdown,
  .now-playing-popover,
  .now-playing-menu,
  [data-now-playing-dropdown] {
    left:8px !important;
    right:8px !important;

    max-width:calc(100vw - 16px) !important;

    border-radius:16px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE EXPANDED PLAYER VIEWPORT AUTHORITY

   True mobile trigger:
     #nowPlayingChip
       -> .player-bar.is-expanded

   Presentation only.
   Existing Player playback authority remains unchanged.
   ========================================================== */

@media (max-width:860px) {

  .player-bar.is-expanded {
    position:fixed !important;

    left:
      max(
        8px,
        env(safe-area-inset-left, 0px)
      ) !important;

    right:
      max(
        8px,
        env(safe-area-inset-right, 0px)
      ) !important;

    bottom:
      max(
        8px,
        env(safe-area-inset-bottom, 0px)
      ) !important;

    top:auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    max-height:
      calc(
        100dvh -
        env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px) -
        24px
      ) !important;

    margin:0 !important;

    transform:none !important;

    box-sizing:border-box !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;

    border-radius:20px !important;

    z-index:12500 !important;
  }


  /* Nothing inside the expanded player can force it wider. */

  .player-bar.is-expanded,
  .player-bar.is-expanded *,
  .player-bar.is-expanded *::before,
  .player-bar.is-expanded *::after {
    box-sizing:border-box !important;

    min-width:0 !important;
    max-width:100% !important;
  }


  .player-bar.is-expanded .player__inner {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 !important;

    overflow-x:hidden !important;
  }


  /* Long track/album titles wrap instead of widening player. */

  .player-bar.is-expanded .player__track-title,
  .player-bar.is-expanded .player__track-meta {
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;

    overflow:hidden !important;
    overflow-wrap:anywhere !important;
    text-overflow:ellipsis !important;
  }


  /* Inputs must remain inside phone width. */

  .player-bar.is-expanded input,
  .player-bar.is-expanded button,
  .player-bar.is-expanded select {
    max-width:100% !important;
  }


  /*
   * Keep normal page/header layers underneath the intentionally
   * expanded player.
   */

  body:has(.player-bar.is-expanded)
    .site-header,

  body:has(.player-bar.is-expanded)
    .mobile-nav {
    z-index:1 !important;
  }
}


/* Narrow phones */

@media (max-width:420px) {

  .player-bar.is-expanded {
    left:
      max(
        6px,
        env(safe-area-inset-left, 0px)
      ) !important;

    right:
      max(
        6px,
        env(safe-area-inset-right, 0px)
      ) !important;

    bottom:
      max(
        6px,
        env(safe-area-inset-bottom, 0px)
      ) !important;

    border-radius:16px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE EXPANDED PLAYER CLOSE AUTHORITY

   Existing close control:
     #playerCollapse
       -> removes .is-expanded from .player-bar

   Visibility/presentation only.
   ========================================================== */

@media (max-width:860px) {

  .player-bar.is-expanded {
    position:fixed !important;
  }

  .player-bar.is-expanded #playerCollapse {
    display:flex !important;

    position:sticky !important;

    top:
      max(
        10px,
        env(safe-area-inset-top, 0px)
      ) !important;

    margin:
      10px
      10px
      -54px
      auto !important;

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    max-width:48px !important;
    max-height:48px !important;

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

    flex:0 0 48px !important;

    border-radius:999px !important;

    background:
      rgba(20,35,67,.96) !important;

    box-shadow:
      0 8px 24px
      rgba(0,0,0,.42) !important;

    z-index:13050 !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;

    touch-action:manipulation !important;
  }

  .player-bar.is-expanded #playerCollapse svg {
    width:22px !important;
    height:22px !important;
  }
}


/* Narrow phones */

@media (max-width:420px) {

  .player-bar.is-expanded #playerCollapse {
    width:46px !important;
    height:46px !important;

    min-width:46px !important;
    min-height:46px !important;

    max-width:46px !important;
    max-height:46px !important;

    margin:
      8px
      8px
      -52px
      auto !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE DENSITY POLISH
   Reduce vertical bulk without changing functionality.
   ========================================================== */

@media (max-width:860px) {

  /* Overall mobile rhythm */
  :root {
    --header-h: 58px !important;
  }

  .rail {
    padding-left:12px !important;
    padding-right:12px !important;
  }

  section.pad {
    padding-top:22px !important;
    padding-bottom:22px !important;
  }

  .section-head {
    margin-bottom:10px !important;
  }

  .section-head__title {
    line-height:1.08 !important;
  }


  /* Header */
  .site-header__inner {
    height:58px !important;
    min-height:58px !important;
  }

  .brand__name {
    font-size:.95rem !important;
  }

  .header-actions {
    gap:6px !important;
  }

  .icon-btn,
  .mobile-menu-btn {
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .now-playing-chip {
    max-width:145px !important;
    min-height:38px !important;
    padding:5px 8px !important;
  }

  .now-playing-chip img {
    width:24px !important;
    height:24px !important;
  }


  /* Publishing hero/banner */
  .aios-music-publishing-hero {
    margin-top:8px !important;
    margin-bottom:12px !important;
  }

  .aios-music-publishing-hero__image {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:170px !important;
    object-fit:cover !important;
  }


  /* Featured Album */
  #homeView .featured[data-featured-artwork] {
    min-height:340px !important;
  }

  #homeView .featured[data-featured-artwork] > div:last-child {
    min-height:340px !important;
    padding:110px 14px 14px !important;
  }

  #homeView .featured__title {
    font-size:1.45rem !important;
    margin-bottom:6px !important;
  }

  #homeView .featured__desc {
    font-size:.92rem !important;
    line-height:1.35 !important;
    margin-bottom:8px !important;
  }

  #homeView .featured__stats {
    margin-bottom:8px !important;
    gap:5px 10px !important;
  }

  #homeView .featured__actions {
    gap:8px !important;
  }

  #homeView .featured__actions .btn {
    min-height:40px !important;
    padding:8px 10px !important;
  }


  /* Continue Listening */
  .aios-continue-listening {
    margin-top:10px !important;
    margin-bottom:10px !important;
  }

  .aios-continue-listening__head {
    margin-bottom:6px !important;
  }

  .aios-continue-card {
    flex-basis:min(82vw,390px) !important;
  }

  .aios-continue-card__body {
    padding:9px 10px !important;
    gap:4px !important;
  }


  /* Collections */
  #collectionExperience {
    margin-top:8px !important;
  }

  #collectionExperience .featured-catalog {
    margin-bottom:12px !important;
  }

  #collectionExperience .collection-card__body {
    padding:12px 14px 14px !important;
  }


  /* Recently Played */
  #recentlyPlayed {
    margin-bottom:18px !important;
  }

  .recently-played-grid {
    gap:8px !important;
  }

  .recently-played-card__body {
    padding:7px 8px 9px !important;
  }


  /* Album Library */
  .album-grid {
    gap:10px !important;
  }

  .album-card__body {
    padding:10px !important;
  }

  .album-card__title {
    line-height:1.15 !important;
  }


  /* Buttons platform-wide on phone */
  .btn {
    min-height:40px !important;
    padding:8px 12px !important;
  }


  /* Player — reduce expanded footprint */
  .player-bar.is-expanded {
    max-height:78dvh !important;
  }

  .player-bar.is-expanded .player__inner {
    padding:10px 12px !important;
  }

  .player-bar.is-expanded #playerCollapse {
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }
}


@media (max-width:420px) {

  .rail {
    padding-left:10px !important;
    padding-right:10px !important;
  }

  section.pad {
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  #homeView .featured[data-featured-artwork] {
    min-height:315px !important;
  }

  #homeView .featured[data-featured-artwork] > div:last-child {
    min-height:315px !important;
    padding:100px 12px 12px !important;
  }

  .aios-music-publishing-hero__image {
    max-height:150px !important;
  }

  .now-playing-chip {
    max-width:125px !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE EXPANDED PLAYER CLOSE AUTHORITY

   Existing close control:
     #playerCollapse
       -> removes .is-expanded from .player-bar

   Visibility/presentation only.
   ========================================================== */

@media (max-width:860px) {

  .player-bar.is-expanded {
    position:fixed !important;
  }

  .player-bar.is-expanded #playerCollapse {
    display:flex !important;

    position:sticky !important;

    top:
      max(
        10px,
        env(safe-area-inset-top, 0px)
      ) !important;

    margin:
      10px
      10px
      -54px
      auto !important;

    width:48px !important;
    height:48px !important;

    min-width:48px !important;
    min-height:48px !important;

    max-width:48px !important;
    max-height:48px !important;

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

    flex:0 0 48px !important;

    border-radius:999px !important;

    background:
      rgba(20,35,67,.96) !important;

    box-shadow:
      0 8px 24px
      rgba(0,0,0,.42) !important;

    z-index:13050 !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;

    touch-action:manipulation !important;
  }

  .player-bar.is-expanded #playerCollapse svg {
    width:22px !important;
    height:22px !important;
  }
}


/* Narrow phones */

@media (max-width:420px) {

  .player-bar.is-expanded #playerCollapse {
    width:46px !important;
    height:46px !important;

    min-width:46px !important;
    min-height:46px !important;

    max-width:46px !important;
    max-height:46px !important;

    margin:
      8px
      8px
      -52px
      auto !important;
  }
}

/* ==========================================================
   AIOS MUSIC — MOBILE MENU VIEWPORT AUTHORITY

   Fix hamburger menu opening partly outside phone viewport.
   Navigation behavior remains owned by app.js.
   ========================================================== */

@media (max-width:860px) {

  .mobile-nav {
    position:fixed !important;

    top:var(--header-h, 58px) !important;

    left:
      max(
        8px,
        env(safe-area-inset-left, 0px)
      ) !important;

    right:
      max(
        8px,
        env(safe-area-inset-right, 0px)
      ) !important;

    bottom:auto !important;

    inset-inline:auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    max-height:
      calc(
        100dvh -
        var(--header-h, 58px) -
        env(safe-area-inset-bottom, 0px) -
        16px
      ) !important;

    margin:0 !important;

    padding:10px 14px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    box-sizing:border-box !important;

    border:
      1px solid
      rgba(255,255,255,.12) !important;

    border-radius:
      0 0 18px 18px !important;

    background:
      rgba(9,16,30,.98) !important;

    box-shadow:
      0 18px 48px
      rgba(0,0,0,.48) !important;

    transform:none !important;

    z-index:11500 !important;
  }


  /* Closed state */

  .mobile-nav:not(.is-open) {
    display:none !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
  }


  /* Open state */

  .mobile-nav.is-open {
    display:block !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;
  }


  /* Every option remains fully inside the panel */

  .mobile-nav__link {
    display:flex !important;

    align-items:center !important;

    width:100% !important;
    max-width:100% !important;

    min-height:48px !important;

    margin:0 !important;

    padding:
      11px 8px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;

    text-align:left !important;

    touch-action:manipulation !important;
  }


  .mobile-nav__link + .mobile-nav__link {
    border-top:
      1px solid
      rgba(255,255,255,.08) !important;
  }


  /*
   * Menu is intentional foreground.
   * Player chip/search icon must not cover menu links.
   */

  .mobile-nav.is-open {
    isolation:isolate !important;
  }
}


@media (max-width:420px) {

  .mobile-nav {
    left:
      max(
        6px,
        env(safe-area-inset-left, 0px)
      ) !important;

    right:
      max(
        6px,
        env(safe-area-inset-right, 0px)
      ) !important;

    padding:8px 12px !important;

    border-radius:
      0 0 15px 15px !important;
  }
}

/* ==========================================================================
   AIOS MUSIC — FEATURED ALBUM LANDSCAPE POLISH
   PRESENTATION ONLY

   PRESERVED:
   - FeaturedAlbumEngine
   - --aios-featured-art authority
   - automatic Featured rotation
   - title / description / stats
   - Play Album
   - Open Album
   - theme badge

   NO foreground cover.
   ========================================================================== */

#homeView .featured {
  position:relative !important;
  isolation:isolate !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;

  width:100% !important;
  min-height:360px !important;

  padding:clamp(24px,4vw,54px) !important;

  overflow:hidden !important;

  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:24px !important;

  background:
    linear-gradient(
      90deg,
      rgba(5,10,20,.96) 0%,
      rgba(5,10,20,.82) 38%,
      rgba(5,10,20,.28) 72%,
      rgba(5,10,20,.12) 100%
    ),
    var(--aios-featured-art)
    center center / cover
    no-repeat !important;

  box-shadow:
    0 24px 60px rgba(0,0,0,.28) !important;
}


/* Subtle bottom readability gradient */

#homeView .featured::after {
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:-1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      to top,
      rgba(5,10,20,.78) 0%,
      transparent 48%
    ) !important;
}


/* Existing artwork node remains non-visual.
   FeaturedAlbumEngine still owns artwork data. */

#homeView .featured__art {
  position:static !important;

  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;
}

#homeView #featuredArt,
#homeView .featured__art img {
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  opacity:0 !important;
  pointer-events:none !important;
}


/* Theme badge */

#homeView .featured__theme {
  position:absolute !important;

  top:20px !important;
  left:22px !important;

  z-index:4 !important;

  max-width:calc(100% - 44px) !important;

  padding:7px 14px !important;

  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:999px !important;

  background:rgba(5,10,20,.72) !important;

  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;

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


/* Content owns left/readable portion of landscape artwork */

#homeView .featured > div:not(.featured__art),
#homeView .featured__body,
#homeView .featured__content,
#homeView .featured__copy {
  position:relative !important;
  z-index:2 !important;

  width:min(100%,680px) !important;
  max-width:680px !important;

  margin:0 !important;
  padding:44px 0 0 !important;
}


/* Featured eyebrow */

#homeView .featured .eyebrow {
  margin:0 0 4px !important;

  font-size:.78rem !important;
  font-weight:800 !important;

  letter-spacing:.14em !important;
  text-transform:uppercase !important;

  color:var(--coral) !important;
}


/* Album title */

#homeView .featured__title {
  margin:4px 0 0 !important;

  max-width:15ch !important;

  font-size:clamp(2.15rem,5vw,4.6rem) !important;
  line-height:.96 !important;
  letter-spacing:-.025em !important;

  text-wrap:balance !important;

  text-shadow:
    0 2px 22px rgba(0,0,0,.55) !important;
}


/* Description */

#homeView .featured__desc {
  max-width:54ch !important;

  margin:16px 0 0 !important;

  font-size:clamp(.98rem,1.5vw,1.15rem) !important;
  line-height:1.48 !important;

  color:rgba(245,247,252,.84) !important;

  text-shadow:
    0 2px 14px rgba(0,0,0,.55) !important;
}


/* Metadata */

#homeView .featured__stats {
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;

  gap:8px 18px !important;

  margin:18px 0 0 !important;

  font-size:.86rem !important;
  letter-spacing:.035em !important;

  color:rgba(245,247,252,.72) !important;
}


/* Buttons */

#homeView .featured__actions {
  display:grid !important;

  grid-template-columns:
    minmax(180px,1fr)
    minmax(180px,1fr) !important;

  width:min(100%,620px) !important;

  gap:12px !important;

  margin:22px 0 0 !important;
}

#homeView .featured__actions > *,
#homeView .featured__actions .btn {
  width:100% !important;
  min-width:0 !important;

  min-height:50px !important;

  margin:0 !important;

  justify-content:center !important;

  border-radius:14px !important;

  font-weight:750 !important;
}


/* --------------------------------------------------------------------------
   PHONE — compact landscape card, not portrait
   -------------------------------------------------------------------------- */

@media (max-width:650px) {

  #homeView .featured {
    min-height:0 !important;

    aspect-ratio:auto !important;

    padding:
      78px
      18px
      18px !important;

    border-radius:20px !important;

    background:
      linear-gradient(
        to top,
        rgba(5,10,20,.98) 0%,
        rgba(5,10,20,.88) 35%,
        rgba(5,10,20,.35) 72%,
        rgba(5,10,20,.14) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  #homeView .featured::before {
    content:"" !important;

    display:block !important;

    padding-top:30% !important;

    pointer-events:none !important;
  }


  #homeView .featured__theme {
    top:14px !important;
    left:16px !important;

    max-width:calc(100% - 32px) !important;

    padding:6px 12px !important;

    font-size:.72rem !important;
  }


  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    width:100% !important;
    max-width:none !important;

    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin-bottom:3px !important;

    font-size:.72rem !important;
  }


  #homeView .featured__title {
    max-width:100% !important;

    font-size:clamp(1.85rem,8vw,2.65rem) !important;
    line-height:1 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;

    overflow:hidden !important;

    margin-top:10px !important;

    font-size:.94rem !important;
    line-height:1.4 !important;
  }


  #homeView .featured__stats {
    gap:6px 12px !important;

    margin-top:12px !important;

    font-size:.76rem !important;
  }


  #homeView .featured__actions {
    grid-template-columns:1fr 1fr !important;

    width:100% !important;

    gap:9px !important;

    margin-top:14px !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:44px !important;

    padding:9px 10px !important;

    border-radius:12px !important;

    font-size:.88rem !important;
  }
}


/* Narrow phones */

@media (max-width:420px) {

  #homeView .featured {
    padding:
      70px
      14px
      14px !important;
  }

  #homeView .featured::before {
    padding-top:26% !important;
  }

  #homeView .featured__title {
    font-size:1.8rem !important;
  }

  #homeView .featured__desc {
    -webkit-line-clamp:2 !important;
  }

  #homeView .featured__actions {
    grid-template-columns:1fr 1fr !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED MOBILE FINAL DENSITY
   Presentation only.

   GOAL:
   - preserve landscape artwork
   - reduce excessive artwork-only vertical space
   - move Featured information higher
   - preserve two-button layout
   - preserve FeaturedAlbumEngine authority
   ========================================================================== */

@media (max-width:650px) {

  /*
   * Final compact landscape geometry.
   * Existing artwork remains the full card background.
   */
  #homeView .featured {
    min-height:0 !important;
    height:auto !important;

    padding:
      54px
      16px
      16px !important;

    border-radius:18px !important;

    background:
      linear-gradient(
        to top,
        rgba(5,10,20,.98) 0%,
        rgba(5,10,20,.90) 38%,
        rgba(5,10,20,.42) 68%,
        rgba(5,10,20,.16) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /*
   * This controls the artwork-only breathing room
   * above the album information.
   *
   * Previous authority used roughly 30%.
   * Reduce it substantially without turning the
   * card into a cramped text panel.
   */
  #homeView .featured::before {
    content:"" !important;

    display:block !important;

    width:100% !important;
    padding-top:18% !important;

    pointer-events:none !important;
  }


  /* Theme pill remains inside card near top. */
  #homeView .featured__theme {
    top:12px !important;
    left:16px !important;

    max-width:calc(100% - 32px) !important;

    padding:5px 11px !important;

    font-size:.68rem !important;
    line-height:1.2 !important;
  }


  /*
   * Ensure no legacy body/content padding recreates
   * the vertical gap we are removing.
   */
  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin:0 0 3px !important;

    font-size:.68rem !important;
    line-height:1.15 !important;
  }


  #homeView .featured__title {
    max-width:100% !important;

    margin:0 !important;

    font-size:clamp(
      1.72rem,
      7.2vw,
      2.35rem
    ) !important;

    line-height:1 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    max-width:100% !important;

    margin:9px 0 0 !important;

    font-size:.88rem !important;
    line-height:1.34 !important;
  }


  #homeView .featured__stats {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;

    gap:5px 11px !important;

    margin:10px 0 0 !important;

    font-size:.72rem !important;
    line-height:1.2 !important;
  }


  /*
   * Preserve the clean two-button layout.
   */
  #homeView .featured__actions {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;

    gap:8px !important;

    margin:12px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    width:100% !important;

    min-width:0 !important;
    min-height:42px !important;

    margin:0 !important;
    padding:8px 8px !important;

    justify-content:center !important;

    border-radius:11px !important;

    font-size:.84rem !important;
    line-height:1.15 !important;
  }
}


/* Narrow-phone refinement */

@media (max-width:420px) {

  #homeView .featured {
    padding:
      50px
      13px
      13px !important;

    border-radius:16px !important;
  }


  #homeView .featured::before {
    padding-top:15% !important;
  }


  #homeView .featured__theme {
    top:10px !important;
    left:13px !important;

    max-width:calc(100% - 26px) !important;
  }


  #homeView .featured__title {
    font-size:1.68rem !important;
  }


  #homeView .featured__desc {
    font-size:.84rem !important;
  }


  #homeView .featured__actions {
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:7px !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:40px !important;

    padding:7px 6px !important;

    font-size:.80rem !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED AUDIO COMPACT MOBILE POLISH
   Presentation only.
   ========================================================== */

@media (max-width:650px) {

  #homeView .featured {
    padding:
      42px
      14px
      13px !important;

    border-radius:16px !important;
  }

  #homeView .featured::before {
    padding-top:11% !important;
  }

  #homeView .featured__theme {
    top:9px !important;
    left:13px !important;

    padding:4px 9px !important;

    font-size:.64rem !important;
  }

  #homeView .featured__title {
    font-size:1.55rem !important;
    line-height:1 !important;
  }

  #homeView .featured__desc {
    margin-top:7px !important;

    font-size:.81rem !important;
    line-height:1.30 !important;

    -webkit-line-clamp:2 !important;
  }

  #homeView .featured__stats {
    margin-top:8px !important;

    gap:4px 9px !important;

    font-size:.68rem !important;
  }

  #homeView .featured__actions {
    margin-top:10px !important;

    gap:7px !important;
  }

  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:38px !important;

    padding:6px 7px !important;

    font-size:.76rem !important;

    border-radius:10px !important;
  }
}

@media (max-width:420px) {

  #homeView .featured {
    padding:
      38px
      12px
      12px !important;
  }

  #homeView .featured::before {
    padding-top:9% !important;
  }

  #homeView .featured__title {
    font-size:1.48rem !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED CELL PHONE ONLY FINAL POLISH

   <= 480px ONLY

   Desktop/laptop/tablet presentation remains unchanged.
   FeaturedAlbumEngine remains sole Featured authority.
   ========================================================================== */

@media (max-width:480px) {

  #homeView .featured {
    position:relative !important;

    width:100% !important;

    min-height:0 !important;
    height:auto !important;
    max-height:none !important;

    padding:
      34px
      11px
      11px !important;

    margin:0 !important;

    border-radius:15px !important;

    overflow:hidden !important;

    background:
      linear-gradient(
        to top,
        rgba(5,10,20,.98) 0%,
        rgba(5,10,20,.89) 38%,
        rgba(5,10,20,.34) 67%,
        rgba(5,10,20,.10) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /* Smaller artwork-only area */

  #homeView .featured::before {
    content:"" !important;

    display:block !important;

    width:100% !important;
    padding-top:7% !important;

    pointer-events:none !important;
  }


  /* Theme pill */

  #homeView .featured__theme {
    top:8px !important;
    left:11px !important;

    max-width:calc(100% - 22px) !important;

    padding:4px 8px !important;

    font-size:.60rem !important;
    line-height:1.15 !important;

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


  /* Remove inherited content bulk */

  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    width:100% !important;
    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin:0 0 2px !important;

    font-size:.62rem !important;
    line-height:1.1 !important;
  }


  /* Current Featured album title */

  #homeView .featured__title {
    max-width:100% !important;

    margin:0 !important;

    font-size:1.38rem !important;
    line-height:1 !important;

    letter-spacing:-.015em !important;
  }


  /* Keep description useful, but compact */

  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    margin:6px 0 0 !important;

    max-width:100% !important;

    font-size:.78rem !important;
    line-height:1.28 !important;
  }


  /* Track count / year */

  #homeView .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:4px 8px !important;

    margin:7px 0 0 !important;

    font-size:.64rem !important;
    line-height:1.15 !important;
  }


  /* Keep Play + Open side by side */

  #homeView .featured__actions {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;

    gap:6px !important;

    margin:9px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    width:100% !important;

    min-width:0 !important;
    min-height:36px !important;

    margin:0 !important;
    padding:6px 5px !important;

    justify-content:center !important;

    border-radius:9px !important;

    font-size:.72rem !important;
    line-height:1.1 !important;
  }
}


/* Extra-small phones */

@media (max-width:380px) {

  #homeView .featured {
    padding:
      32px
      9px
      9px !important;
  }

  #homeView .featured::before {
    padding-top:5% !important;
  }

  #homeView .featured__title {
    font-size:1.28rem !important;
  }

  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    font-size:.68rem !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED AUDIO COMPACT MOBILE POLISH
   Presentation only.
   ========================================================== */

@media (max-width:650px) {

  #homeView .featured {
    padding:
      42px
      14px
      13px !important;

    border-radius:16px !important;
  }

  #homeView .featured::before {
    padding-top:11% !important;
  }

  #homeView .featured__theme {
    top:9px !important;
    left:13px !important;

    padding:4px 9px !important;

    font-size:.64rem !important;
  }

  #homeView .featured__title {
    font-size:1.55rem !important;
    line-height:1 !important;
  }

  #homeView .featured__desc {
    margin-top:7px !important;

    font-size:.81rem !important;
    line-height:1.30 !important;

    -webkit-line-clamp:2 !important;
  }

  #homeView .featured__stats {
    margin-top:8px !important;

    gap:4px 9px !important;

    font-size:.68rem !important;
  }

  #homeView .featured__actions {
    margin-top:10px !important;

    gap:7px !important;
  }

  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:38px !important;

    padding:6px 7px !important;

    font-size:.76rem !important;

    border-radius:10px !important;
  }
}

@media (max-width:420px) {

  #homeView .featured {
    padding:
      38px
      12px
      12px !important;
  }

  #homeView .featured::before {
    padding-top:9% !important;
  }

  #homeView .featured__title {
    font-size:1.48rem !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED PHONE ART WINDOW TRIM
   PHONE ONLY
   ========================================================== */

@media (max-width:480px) {

  /* Reduce the artwork-only space above album information */
  #homeView .featured {
    padding-top:26px !important;
  }

  #homeView .featured::before {
    padding-top:2% !important;
  }

  /* Keep theme pill near top edge */
  #homeView .featured__theme {
    top:7px !important;
  }

  /* Prevent older Featured rules from recreating the gap */
  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    margin-top:0 !important;
    padding-top:0 !important;
  }
}

@media (max-width:380px) {

  #homeView .featured {
    padding-top:24px !important;
  }

  #homeView .featured::before {
    padding-top:0 !important;
  }

  #homeView .featured__theme {
    top:6px !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED PHONE ART WINDOW TRIM
   Phone only. Presentation only.

   Goal:
   - reduce upper artwork-heavy zone
   - move Featured information upward
   - preserve title sizing
   - preserve description sizing
   - preserve metadata
   - preserve two-button row
   ========================================================== */

@media (max-width:480px) {

  #homeView .featured {
    padding-top:26px !important;
  }

  #homeView .featured::before {
    padding-top:2% !important;
  }

  #homeView .featured__theme {
    top:7px !important;
  }

  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    margin-top:0 !important;
    padding-top:0 !important;
  }
}


/* Extra-small phones */

@media (max-width:380px) {

  #homeView .featured {
    padding-top:24px !important;
  }

  #homeView .featured::before {
    padding-top:0 !important;
  }

  #homeView .featured__theme {
    top:6px !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED PHONE GEOMETRY FINAL

   PHONE ONLY.
   One compact landscape authority.

   PRESERVED:
   - FeaturedAlbumEngine
   - rotating artwork
   - title / description / stats
   - Play Album
   - Open Album
   - desktop
   - Jahcore
   ========================================================================== */

@media (max-width:480px) {

  #homeView .featured {
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;

    width:100% !important;

    min-height:270px !important;
    height:auto !important;
    max-height:none !important;

    padding:
      46px
      12px
      12px !important;

    margin:0 !important;

    overflow:hidden !important;

    border-radius:16px !important;

    background:
      linear-gradient(
        to top,
        rgba(5,10,20,.98) 0%,
        rgba(5,10,20,.90) 42%,
        rgba(5,10,20,.32) 72%,
        rgba(5,10,20,.08) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /*
   * Kill every previous artificial artwork spacer.
   * The card itself now owns the landscape geometry.
   */

  #homeView .featured::before {
    content:none !important;

    display:none !important;

    width:0 !important;
    height:0 !important;

    padding:0 !important;
    margin:0 !important;
  }


  /*
   * Keep artwork engine DOM present but non-layout.
   */

  #homeView .featured__art {
    position:absolute !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  #homeView #featuredArt,
  #homeView .featured__art img {
    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
  }


  /* Theme stays at top of card */

  #homeView .featured__theme {
    position:absolute !important;

    top:9px !important;
    left:12px !important;

    max-width:calc(100% - 24px) !important;

    margin:0 !important;

    padding:4px 9px !important;

    font-size:.62rem !important;

    z-index:4 !important;
  }


  /* Real album information owns bottom portion */

  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin:0 0 2px !important;

    font-size:.62rem !important;
  }


  #homeView .featured__title {
    margin:0 !important;

    max-width:100% !important;

    font-size:1.42rem !important;
    line-height:1 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    margin:6px 0 0 !important;

    font-size:.78rem !important;
    line-height:1.28 !important;
  }


  #homeView .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:4px 9px !important;

    margin:7px 0 0 !important;

    font-size:.65rem !important;
  }


  #homeView .featured__actions {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;

    gap:7px !important;

    margin:9px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    width:100% !important;

    min-width:0 !important;
    min-height:37px !important;

    margin:0 !important;
    padding:6px 7px !important;

    justify-content:center !important;

    border-radius:9px !important;

    font-size:.73rem !important;
  }
}


/* Smaller phones */

@media (max-width:380px) {

  #homeView .featured {
    min-height:250px !important;

    padding:
      42px
      10px
      10px !important;
  }

  #homeView .featured__theme {
    top:8px !important;
    left:10px !important;
  }

  #homeView .featured__title {
    font-size:1.34rem !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED PHONE GEOMETRY FINAL

   PHONE ONLY.
   One compact landscape authority.

   PRESERVED:
   - FeaturedAlbumEngine
   - rotating artwork
   - title / description / stats
   - Play Album
   - Open Album
   - desktop
   - Jahcore
   ========================================================================== */

@media (max-width:480px) {

  #homeView .featured {
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;

    width:100% !important;

    min-height:270px !important;
    height:auto !important;
    max-height:none !important;

    padding:
      46px
      12px
      12px !important;

    margin:0 !important;

    overflow:hidden !important;

    border-radius:16px !important;

    background:
      linear-gradient(
        to top,
        rgba(5,10,20,.98) 0%,
        rgba(5,10,20,.90) 42%,
        rgba(5,10,20,.32) 72%,
        rgba(5,10,20,.08) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /*
   * Kill every previous artificial artwork spacer.
   * The card itself now owns the landscape geometry.
   */

  #homeView .featured::before {
    content:none !important;

    display:none !important;

    width:0 !important;
    height:0 !important;

    padding:0 !important;
    margin:0 !important;
  }


  /*
   * Keep artwork engine DOM present but non-layout.
   */

  #homeView .featured__art {
    position:absolute !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  #homeView #featuredArt,
  #homeView .featured__art img {
    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
  }


  /* Theme stays at top of card */

  #homeView .featured__theme {
    position:absolute !important;

    top:9px !important;
    left:12px !important;

    max-width:calc(100% - 24px) !important;

    margin:0 !important;

    padding:4px 9px !important;

    font-size:.62rem !important;

    z-index:4 !important;
  }


  /* Real album information owns bottom portion */

  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin:0 0 2px !important;

    font-size:.62rem !important;
  }


  #homeView .featured__title {
    margin:0 !important;

    max-width:100% !important;

    font-size:1.42rem !important;
    line-height:1 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    margin:6px 0 0 !important;

    font-size:.78rem !important;
    line-height:1.28 !important;
  }


  #homeView .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:4px 9px !important;

    margin:7px 0 0 !important;

    font-size:.65rem !important;
  }


  #homeView .featured__actions {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;

    gap:7px !important;

    margin:9px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    width:100% !important;

    min-width:0 !important;
    min-height:37px !important;

    margin:0 !important;
    padding:6px 7px !important;

    justify-content:center !important;

    border-radius:9px !important;

    font-size:.73rem !important;
  }
}


/* Smaller phones */

@media (max-width:380px) {

  #homeView .featured {
    min-height:250px !important;

    padding:
      42px
      10px
      10px !important;
  }

  #homeView .featured__theme {
    top:8px !important;
    left:10px !important;
  }

  #homeView .featured__title {
    font-size:1.34rem !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED PHONE TRUE LANDSCAPE
   PHONE ONLY — 4:3 FINAL GEOMETRY

   PRESERVED:
   - FeaturedAlbumEngine
   - autonomous rotation
   - canonical artwork
   - title / description / stats
   - Play Album
   - Open Album
   - desktop
   - Jahcore
   ========================================================================== */

@media (max-width:480px) {

  #homeView .featured {
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;

    width:100% !important;

    aspect-ratio:4 / 3 !important;

    min-height:0 !important;
    height:auto !important;
    max-height:none !important;

    margin:0 !important;

    padding:
      38px
      11px
      11px !important;

    overflow:hidden !important;

    border-radius:16px !important;

    background:
      linear-gradient(
        to top,
        rgba(4,9,18,.99) 0%,
        rgba(4,9,18,.91) 40%,
        rgba(4,9,18,.36) 68%,
        rgba(4,9,18,.06) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /* REMOVE ALL OLD ARTWORK SPACERS */

  #homeView .featured::before {
    content:none !important;
    display:none !important;

    width:0 !important;
    height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* ENGINE ART NODE STAYS PRESENT BUT OWNS NO LAYOUT */

  #homeView .featured__art {
    position:absolute !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  #homeView #featuredArt,
  #homeView .featured__art img {
    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
  }


  /* FEATURED BADGE */

  #homeView .featured__theme {
    position:absolute !important;

    top:8px !important;
    left:11px !important;

    max-width:calc(100% - 22px) !important;

    margin:0 !important;

    padding:4px 8px !important;

    font-size:.59rem !important;
    line-height:1.1 !important;

    z-index:4 !important;
  }


  /* CONTENT */

  #homeView .featured > div:not(.featured__art),
  #homeView .featured__body,
  #homeView .featured__content,
  #homeView .featured__copy {
    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #homeView .featured .eyebrow {
    margin:0 0 2px !important;

    font-size:.58rem !important;
    line-height:1.05 !important;
  }


  #homeView .featured__title {
    margin:0 !important;

    max-width:100% !important;

    font-size:1.28rem !important;
    line-height:.98 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;

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

    overflow:hidden !important;

    margin:5px 0 0 !important;

    max-width:100% !important;

    font-size:.72rem !important;
    line-height:1.22 !important;
  }


  #homeView .featured__stats {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:3px 8px !important;

    margin:6px 0 0 !important;

    font-size:.60rem !important;
    line-height:1.1 !important;
  }


  /* ACTIONS */

  #homeView .featured__actions {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    width:100% !important;

    gap:6px !important;

    margin:7px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    width:100% !important;

    min-width:0 !important;
    min-height:34px !important;

    margin:0 !important;

    padding:5px 6px !important;

    justify-content:center !important;

    border-radius:9px !important;

    font-size:.68rem !important;
    line-height:1.05 !important;
  }
}


/* EXTRA-SMALL PHONE */

@media (max-width:380px) {

  #homeView .featured {
    aspect-ratio:1.28 / 1 !important;

    padding:
      34px
      9px
      9px !important;
  }

  #homeView .featured__title {
    font-size:1.20rem !important;
  }

  #homeView .featured__desc {
    font-size:.68rem !important;
  }

  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:32px !important;
    font-size:.65rem !important;
  }
}


/* ==========================================================================
   AIOS MUSIC — FEATURED PHONE 3:2 FINAL POLISH

   Final phone proportion refinement.
   Engine / rotation / desktop untouched.
   ========================================================================== */

@media (max-width:480px) {

  #homeView .featured {
    aspect-ratio:3 / 2 !important;

    min-height:0 !important;
    height:auto !important;

    padding:
      32px
      10px
      10px !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        to top,
        rgba(4,9,18,.99) 0%,
        rgba(4,9,18,.92) 43%,
        rgba(4,9,18,.34) 70%,
        rgba(4,9,18,.04) 100%
      ),
      var(--aios-featured-art)
      center center / cover
      no-repeat !important;
  }


  /* No spacer from earlier iterations */

  #homeView .featured::before {
    content:none !important;
    display:none !important;
    padding:0 !important;
    margin:0 !important;
  }


  /* Badge */

  #homeView .featured__theme {
    top:7px !important;
    left:10px !important;

    padding:3px 8px !important;

    font-size:.57rem !important;
  }


  /* Album copy */

  #homeView .featured .eyebrow {
    margin:0 0 2px !important;

    font-size:.56rem !important;
  }


  #homeView .featured__title {
    margin:0 !important;

    font-size:1.22rem !important;
    line-height:.98 !important;
  }


  #homeView .featured__desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;

    overflow:hidden !important;

    margin:4px 0 0 !important;

    font-size:.69rem !important;
    line-height:1.20 !important;
  }


  #homeView .featured__stats {
    gap:3px 7px !important;

    margin:5px 0 0 !important;

    font-size:.58rem !important;
  }


  /* Buttons remain equal and visible */

  #homeView .featured__actions {
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:6px !important;

    margin:6px 0 0 !important;
  }


  #homeView .featured__actions > *,
  #homeView .featured__actions .btn {
    min-height:32px !important;

    padding:5px 5px !important;

    border-radius:8px !important;

    font-size:.66rem !important;
  }


  /* Keep share control from increasing card height */

  #homeView .featured [data-action="share"],
  #homeView .featured__share {
    position:absolute !important;

    left:10px !important;
    bottom:8px !important;

    margin:0 !important;

    z-index:4 !important;
  }
}


/* Very narrow phones */

@media (max-width:380px) {

  #homeView .featured {
    aspect-ratio:1.42 / 1 !important;

    padding:
      30px
      8px
      8px !important;
  }

  #homeView .featured__title {
    font-size:1.15rem !important;
  }

  #homeView .featured__desc {
    font-size:.66rem !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED PHONE ART SHIFT LEFT
   Shift artwork framing left to reveal more title lettering.
   ========================================================== */

@media (max-width:480px) {

  #homeView .featured {
    background:
      linear-gradient(
        to top,
        rgba(4,9,18,.99) 0%,
        rgba(4,9,18,.92) 43%,
        rgba(4,9,18,.34) 70%,
        rgba(4,9,18,.04) 100%
      ),
      var(--aios-featured-art)
      42% center / cover
      no-repeat !important;
  }
}

@media (max-width:380px) {

  #homeView .featured {
    background-position:
      center,
      40% center !important;
  }
}


/* ==========================================================
   AIOS MUSIC — FEATURED PHONE ART CORRECT LEFT SHIFT

   Higher horizontal background-position pushes the oversized
   cover artwork LEFT inside the fixed Featured viewport.
   ========================================================== */

@media (max-width:480px) {

  #homeView .featured {
    background:
      linear-gradient(
        to top,
        rgba(4,9,18,.99) 0%,
        rgba(4,9,18,.92) 43%,
        rgba(4,9,18,.34) 70%,
        rgba(4,9,18,.04) 100%
      ),
      var(--aios-featured-art)
      58% center / cover
      no-repeat !important;
  }
}


@media (max-width:380px) {

  #homeView .featured {
    background:
      linear-gradient(
        to top,
        rgba(4,9,18,.99) 0%,
        rgba(4,9,18,.92) 43%,
        rgba(4,9,18,.34) 70%,
        rgba(4,9,18,.04) 100%
      ),
      var(--aios-featured-art)
      60% center / cover
      no-repeat !important;
  }
}