/* =========================================================
   OSBEATS STEP 3 — GLOBAL MOBILE / RESPONSIVE PASS
   Desktop layout is untouched. These rules activate only
   on tablet/mobile widths.
   ========================================================= */

/* ---------- TABLET ---------- */
@media (max-width: 900px){

  html, body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  img{
    max-width:100% !important;
  }

  /* ----- GLOBAL HEADER ----- */
  .site-header,
  .chart-header,
  .os-topbar{
    height:auto !important;
    min-height:64px !important;
    max-height:none !important;
  }

  .site-header .header-inner,
  .chart-header .chart-header-inner,
  .os-topbar .brand-row{
    height:auto !important;
    min-height:64px !important;
    max-height:none !important;
    padding:0 14px !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .site-header .logo,
  .chart-header .chart-logo,
  .os-topbar .brand,
  .site-header > .brand{
    height:64px !important;
    min-height:64px !important;
  }

  .site-header nav,
  .chart-header nav,
  .os-topbar nav{
    width:100% !important;
    height:auto !important;
    min-height:44px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    scrollbar-width:none !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
  }

  .site-header nav::-webkit-scrollbar,
  .chart-header nav::-webkit-scrollbar,
  .os-topbar nav::-webkit-scrollbar{
    display:none !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    height:44px !important;
    min-height:44px !important;
    flex:0 0 auto !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    width:100% !important;
    height:auto !important;
    min-height:44px !important;
    max-height:none !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:7px !important;
    padding:7px 0 !important;
  }

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    display:flex !important;
    width:min(100%, 330px) !important;
    min-width:0 !important;
    max-width:330px !important;
    flex:1 1 250px !important;
  }

  /* ----- HERO / BANNER AREAS ----- */
  .hero,
  .charts-hero,
  .search-hero,
  .artists-hero,
  .producers-hero,
  .profile-banner,
  .store-banner,
  .page-hero{
    min-height:0 !important;
    height:auto !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  /* ----- TOOLBARS / FILTER ROWS ----- */
  .filter-row,
  .producer-toolbar,
  .search-toolbar,
  .chart-toolbar,
  .search-toolbar-center,
  .toolbar{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .filter-row > *,
  .producer-toolbar > *,
  .search-toolbar > *,
  .chart-toolbar > *,
  .toolbar > *{
    min-width:0 !important;
    width:100% !important;
  }

  /* ----- DIRECTORY PAGES ----- */
  .directory-grid,
  .producer-layout{
    grid-template-columns:1fr !important;
  }

  .artist-sidebar,
  .producer-sidebar{
    width:100% !important;
    order:2 !important;
  }

  .artist-main,
  .producer-main{
    width:100% !important;
    order:1 !important;
  }

  #featuredArtists,
  #featuredGrid,
  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* ----- BEATS / SEARCH CARDS ----- */
  .results-grid.grid-view,
  .search-results.grid-view,
  .track-grid,
  .music-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .results-grid.list-view .music-card,
  .search-results.list-view .search-card{
    grid-template-columns:130px minmax(0,1fr) !important;
  }

  /* ----- CHARTS ----- */
  .charts-layout,
  .chart-layout{
    grid-template-columns:1fr !important;
  }

  .chart-filter-panel,
  .charts-filters{
    width:100% !important;
  }

  .chart-table-wrap,
  .artist-table-wrap,
  .producer-table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* ----- DASHBOARD / LIBRARY ----- */
  .dashboard-shell,
  .dashboard-layout,
  .library-shell,
  .library-layout{
    grid-template-columns:1fr !important;
  }

  .creator-sidebar,
  .dashboard-sidebar{
    position:relative !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
  }

  .creator-sidebar nav,
  .dashboard-sidebar nav{
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
  }

  .creator-sidebar .side-link,
  .dashboard-sidebar .side-link{
    flex:0 0 auto !important;
    min-width:145px !important;
  }

  /* ----- ARTIST PROFILE ----- */
  .store-profile-main,
  .profile-main,
  .profile-identity{
    grid-template-columns:1fr !important;
  }

  .store-profile-photo,
  .profile-photo{
    width:150px !important;
    height:150px !important;
  }

  .store-profile-actions,
  .profile-actions{
    justify-content:flex-start !important;
    width:100% !important;
  }

  .store-stats,
  .profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .store-tabs,
  .profile-tabs{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
  }

  .store-tabs > *,
  .profile-tabs > *{
    flex:0 0 180px !important;
  }

  /* ----- CART DRAWER ----- */
  .store-cart-drawer{
    width:min(420px, 100vw) !important;
    max-width:100vw !important;
  }

  /* ----- COMMON TABLES ----- */
  table{
    min-width:760px;
  }

  .table-wrap,
  .table-responsive{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 700px){

  /* Brand stays recognizable but smaller */
  :root{
    --os-nav-height:60px;
    --os-logo-box:44px;
  }

  .site-header .logo .logo-text,
  .chart-header .chart-logo > span:not(.chart-logo-mark),
  .os-topbar .brand > strong,
  .site-header > .brand > strong{
    font-size:22px !important;
  }

  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    gap:5px !important;
  }

  .site-header .header-actions > a,
  .site-header .header-actions > button,
  .chart-header .header-actions > a,
  .chart-header .header-actions > button,
  .os-topbar .top-actions > a,
  .os-topbar .top-actions > button{
    height:34px !important;
    min-height:34px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }

  /* Single-column filters */
  .filter-row,
  .producer-toolbar,
  .search-toolbar,
  .chart-toolbar,
  .search-toolbar-center,
  .toolbar{
    grid-template-columns:1fr !important;
  }

  /* One card per row */
  #featuredArtists,
  #featuredGrid,
  .featured-grid,
  .results-grid.grid-view,
  .search-results.grid-view,
  .track-grid,
  .music-grid{
    grid-template-columns:1fr !important;
  }

  .results-grid.list-view .music-card,
  .search-results.list-view .search-card{
    grid-template-columns:100px minmax(0,1fr) !important;
  }

  /* Stats stack better */
  .store-stats,
  .profile-stats{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  /* Artist profile identity */
  .store-profile-main,
  .profile-main,
  .profile-identity{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .store-profile-photo,
  .profile-photo{
    width:125px !important;
    height:125px !important;
  }

  /* Keep wide playlist / purchase sections usable */
  .playlist-content,
  .purchase-list,
  .library-content{
    overflow-x:auto !important;
  }

  /* Buttons should be comfortably tappable */
  button,
  .btn,
  .view-btn,
  .view-profile,
  .join-btn,
  .store-cart-button{
    min-height:36px;
  }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width: 520px){

  body{
    font-size:14px;
  }

  .site-header .header-inner,
  .chart-header .chart-header-inner,
  .os-topbar .brand-row{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding:0 10px !important;
    font-size:11px !important;
  }

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    width:100% !important;
    max-width:none !important;
    flex-basis:100% !important;
  }

  .store-stats,
  .profile-stats{
    grid-template-columns:1fr !important;
  }

  .results-grid.list-view .music-card,
  .search-results.list-view .search-card{
    grid-template-columns:1fr !important;
  }

  .results-grid.list-view .music-card img,
  .search-results.list-view .search-card img{
    width:100% !important;
    max-width:none !important;
  }

  .store-cart-drawer{
    width:100vw !important;
  }
}


/* =========================================================
   STEP 3 MOBILE FIX — FEATURED PRODUCER CARD SIZE
   Keeps producer cards compact on phone screens.
   ========================================================= */
@media (max-width:700px){

  #featuredGrid,
  .featured-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .producer-card{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    min-height:112px !important;
    overflow:hidden !important;
  }

  .producer-card > a{
    display:block !important;
    width:112px !important;
    min-width:112px !important;
    height:112px !important;
  }

  .producer-card .producer-image{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  .producer-card .producer-card-body{
    min-width:0 !important;
    padding:12px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .producer-card .producer-card-body h3{
    margin:0 0 5px !important;
    font-size:16px !important;
    line-height:1.15 !important;
  }

  .producer-card .producer-card-body p{
    margin:2px 0 !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .producer-card .producer-stats{
    margin-top:7px !important;
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    font-size:11px !important;
  }

  .producer-card .play-badge{
    width:34px !important;
    height:34px !important;
    right:8px !important;
    bottom:8px !important;
  }
}

@media (max-width:420px){
  .producer-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    min-height:96px !important;
  }

  .producer-card > a,
  .producer-card .producer-image{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }

  .producer-card .producer-card-body{
    padding:10px !important;
  }

  .producer-card .producer-card-body h3{
    font-size:15px !important;
  }

  .producer-card .producer-card-body p{
    font-size:11px !important;
  }
}


/* =========================================================
   STEP 3 MOBILE FIX — ALL PRODUCERS COMPACT ROWS
   Tightens the All Producers section on phone screens.
   Desktop/tablet layout remains unchanged.
   ========================================================= */
@media (max-width:700px){

  .producer-table{
    display:block !important;
    width:100% !important;
    border:1px solid #2d3139 !important;
  }

  .producer-table .table-head{
    display:none !important;
  }

  .producer-table .producer-row{
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) auto !important;
    grid-template-areas:
      "person person action"
      "genre location action"
      "plays downloads action";
    align-items:center !important;
    gap:6px 10px !important;
    min-height:0 !important;
    padding:10px 12px !important;
    border-bottom:1px solid #2d3139 !important;
    box-sizing:border-box !important;
  }

  .producer-table .producer-row:last-child{
    border-bottom:0 !important;
  }

  .producer-table .producer-person{
    grid-area:person !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
  }

  .producer-table .producer-avatar{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  .producer-table .producer-name{
    font-size:15px !important;
    line-height:1.15 !important;
    margin:0 !important;
  }

  .producer-table .producer-meta{
    font-size:10px !important;
    line-height:1.15 !important;
    margin-top:2px !important;
  }

  .producer-table .producer-row > .table-cell:nth-of-type(1){
    grid-area:genre !important;
  }

  .producer-table .producer-row > .table-cell:nth-of-type(2){
    grid-area:location !important;
  }

  .producer-table .producer-row > .table-cell:nth-of-type(3){
    grid-area:plays !important;
  }

  .producer-table .producer-row > .table-cell:nth-of-type(4){
    grid-area:downloads !important;
  }

  .producer-table .table-cell{
    font-size:11px !important;
    line-height:1.2 !important;
    min-width:0 !important;
    padding:0 !important;
  }

  .producer-table .producer-row > div:last-child{
    grid-area:action !important;
    align-self:center !important;
  }

  .producer-table .view-profile{
    min-height:32px !important;
    height:32px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  /* Tighten the All Producers header / search controls too. */
  .all-title,
  .producer-all-header{
    margin-bottom:8px !important;
  }

  .producer-list-controls,
  .all-producers-controls{
    gap:8px !important;
  }
}

@media (max-width:420px){

  .producer-table .producer-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "person action"
      "genre action"
      "location action"
      "plays downloads";
    padding:9px 10px !important;
    gap:5px 8px !important;
  }

  .producer-table .producer-person{
    grid-template-columns:46px minmax(0,1fr) !important;
    gap:8px !important;
  }

  .producer-table .producer-avatar{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }

  .producer-table .producer-name{
    font-size:14px !important;
  }

  .producer-table .table-cell{
    font-size:10px !important;
  }

  .producer-table .view-profile{
    height:30px !important;
    min-height:30px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }
}


/* =========================================================
   MOBILE FIX — FEATURED ARTISTS COMPACT CARDS
   Prevents Featured Artist cards/artwork from becoming
   oversized on phone screens. Desktop remains unchanged.
   ========================================================= */
@media (max-width:700px){

  /* Featured Artists: compact stacked cards instead of giant artwork. */
  .featured-artists-grid,
  .featured-artists,
  #featuredArtists{
    gap:10px !important;
  }

  .featured-artists-grid .artist-card,
  .featured-artists .artist-card,
  #featuredArtists .artist-card{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .featured-artists-grid .artist-card .artist-image,
  .featured-artists-grid .artist-card .artist-cover,
  .featured-artists-grid .artist-card .artist-card-image,
  .featured-artists .artist-card .artist-image,
  .featured-artists .artist-card .artist-cover,
  .featured-artists .artist-card .artist-card-image,
  #featuredArtists .artist-card .artist-image,
  #featuredArtists .artist-card .artist-cover,
  #featuredArtists .artist-card .artist-card-image{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    background-size:cover !important;
    background-position:center !important;
  }

  .featured-artists-grid .artist-card img,
  .featured-artists .artist-card img,
  #featuredArtists .artist-card img{
    max-height:112px !important;
    object-fit:cover !important;
  }

  .featured-artists-grid .artist-card .artist-info,
  .featured-artists-grid .artist-card .artist-card-info,
  .featured-artists .artist-card .artist-info,
  .featured-artists .artist-card .artist-card-info,
  #featuredArtists .artist-card .artist-info,
  #featuredArtists .artist-card .artist-card-info{
    padding:10px 12px !important;
    min-height:0 !important;
  }

  .featured-artists-grid .artist-card h3,
  .featured-artists .artist-card h3,
  #featuredArtists .artist-card h3{
    margin:0 0 3px !important;
    font-size:15px !important;
    line-height:1.15 !important;
  }

  .featured-artists-grid .artist-card p,
  .featured-artists .artist-card p,
  #featuredArtists .artist-card p{
    margin:2px 0 !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  .featured-artists-grid .artist-card .play-button,
  .featured-artists-grid .artist-card .play-btn,
  .featured-artists .artist-card .play-button,
  .featured-artists .artist-card .play-btn,
  #featuredArtists .artist-card .play-button,
  #featuredArtists .artist-card .play-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
}

@media (max-width:430px){
  .featured-artists-grid .artist-card,
  .featured-artists .artist-card,
  #featuredArtists .artist-card{
    grid-template-columns:96px minmax(0,1fr) !important;
  }

  .featured-artists-grid .artist-card .artist-image,
  .featured-artists-grid .artist-card .artist-cover,
  .featured-artists-grid .artist-card .artist-card-image,
  .featured-artists .artist-card .artist-image,
  .featured-artists .artist-card .artist-cover,
  .featured-artists .artist-card .artist-card-image,
  #featuredArtists .artist-card .artist-image,
  #featuredArtists .artist-card .artist-cover,
  #featuredArtists .artist-card .artist-card-image{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }

  .featured-artists-grid .artist-card img,
  .featured-artists .artist-card img,
  #featuredArtists .artist-card img{
    max-height:96px !important;
  }
}


/* =========================================================
   MOBILE FIX — ALL ARTISTS FULLY VISIBLE
   Reflows the desktop artist table into compact mobile cards
   so Genre / Location / Plays / Followers / Actions are not
   clipped off the right side.
   ========================================================= */
@media (max-width:700px){

  /* Remove desktop table minimum width only for the Artists directory. */
  .artist-table-wrap,
  .artist-table,
  #artistRows{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .artist-table table{
    min-width:0 !important;
    width:100% !important;
  }

  /* Hide the desktop column header row on phones. */
  .artist-table thead,
  .artist-table .table-head{
    display:none !important;
  }

  /* Each artist becomes a self-contained mobile card. */
  .artist-table tbody,
  #artistRows{
    display:block !important;
    width:100% !important;
  }

  .artist-table tr,
  #artistRows tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "artist action"
      "genre action"
      "location action"
      "plays followers";
    gap:5px 10px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    padding:10px 12px !important;
    border:1px solid #d7d7d7 !important;
    border-top:0 !important;
    box-sizing:border-box !important;
    background:#fff !important;
  }

  .artist-table tr:first-child,
  #artistRows tr:first-child{
    border-top:1px solid #d7d7d7 !important;
  }

  .artist-table td,
  #artistRows td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding:0 !important;
    border:0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
    box-sizing:border-box !important;
  }

  .artist-table td:nth-child(1),
  #artistRows td:nth-child(1){
    grid-area:artist !important;
  }

  .artist-table td:nth-child(2),
  #artistRows td:nth-child(2){
    grid-area:genre !important;
  }

  .artist-table td:nth-child(3),
  #artistRows td:nth-child(3){
    grid-area:location !important;
  }

  .artist-table td:nth-child(4),
  #artistRows td:nth-child(4){
    grid-area:plays !important;
  }

  .artist-table td:nth-child(5),
  #artistRows td:nth-child(5){
    grid-area:followers !important;
  }

  .artist-table td:nth-child(6),
  #artistRows td:nth-child(6){
    grid-area:action !important;
    align-self:center !important;
  }

  .artist-table .artist-cell,
  #artistRows .artist-cell{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
    min-width:0 !important;
  }

  .artist-table .avatar,
  #artistRows .avatar{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  .artist-table .view-btn,
  #artistRows .view-btn{
    min-height:30px !important;
    height:30px !important;
    padding:0 9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    font-size:10px !important;
  }

  /* Make the All Artists title/search/sort controls use the full mobile width. */
  .artist-main .section-head,
  .artist-main .table-tools,
  .artist-main .artist-table-tools{
    width:100% !important;
    max-width:100% !important;
  }

  .artist-main .table-tools,
  .artist-main .artist-table-tools{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .artist-main .table-tools > *,
  .artist-main .artist-table-tools > *{
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width:430px){
  .artist-table tr,
  #artistRows tr{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "artist"
      "genre"
      "location"
      "plays"
      "followers"
      "action";
    padding:9px 10px !important;
    gap:4px !important;
  }

  .artist-table .view-btn,
  #artistRows .view-btn{
    width:max-content !important;
    margin-top:4px !important;
  }
}


/* =========================================================
   MOBILE FIX — RESPONSIVE HAMBURGER MAIN MENU
   Replaces the clipped horizontal desktop nav on phones with
   a proper open/close mobile menu. Desktop remains unchanged.
   ========================================================= */

.os-mobile-menu-toggle{
  display:none;
}

@media (max-width:1100px){

  .site-header .header-inner,
  .chart-header .chart-header-inner,
  .os-topbar .brand-row{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
  }

  /* Mobile menu button */
  .os-mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    margin-left:auto !important;
    padding:0 !important;
    background:#101116 !important;
    border:1px solid #343944 !important;
    color:#fff !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:10020 !important;
    flex:0 0 42px !important;
  }

  .os-mobile-menu-toggle:hover,
  .os-mobile-menu-toggle[aria-expanded="true"]{
    background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
    border-color:#73070B !important;
  }

  .os-mobile-menu-icon,
  .os-mobile-menu-icon::before,
  .os-mobile-menu-icon::after{
    content:"" !important;
    display:block !important;
    width:20px !important;
    height:2px !important;
    background:#fff !important;
    position:absolute !important;
    transition:transform .18s ease, top .18s ease, opacity .18s ease !important;
  }

  .os-mobile-menu-icon{
    position:relative !important;
  }

  .os-mobile-menu-icon::before{
    top:-6px !important;
    left:0 !important;
  }

  .os-mobile-menu-icon::after{
    top:6px !important;
    left:0 !important;
  }

  .os-mobile-menu-toggle[aria-expanded="true"] .os-mobile-menu-icon{
    background:transparent !important;
  }

  .os-mobile-menu-toggle[aria-expanded="true"] .os-mobile-menu-icon::before{
    top:0 !important;
    transform:rotate(45deg) !important;
  }

  .os-mobile-menu-toggle[aria-expanded="true"] .os-mobile-menu-icon::after{
    top:0 !important;
    transform:rotate(-45deg) !important;
  }

  /* Main nav is CLOSED by default on mobile. */
  .site-header nav,
  .chart-header nav,
  .os-topbar nav{
    display:none !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:#08090c !important;
    border-top:1px solid #272b32 !important;
    border-bottom:1px solid #73070B !important;
    padding:6px 0 !important;
    order:20 !important;
  }

  /* JS adds this class when hamburger is open. */
  .site-header nav.os-mobile-menu-open,
  .chart-header nav.os-mobile-menu-open,
  .os-topbar nav.os-mobile-menu-open{
    display:flex !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 18px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    font-size:13px !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }

  .site-header nav a:last-child,
  .chart-header nav a:last-child,
  .os-topbar nav a:last-child{
    border-bottom:0 !important;
  }

  .site-header nav a.os-current-page,
  .chart-header nav a.os-current-page,
  .os-topbar nav a.os-current-page{
    background:linear-gradient(90deg,#73070B 0%,#3d0508 58%,#101116 100%) !important;
    box-shadow:inset 3px 0 0 #a60b12 !important;
  }

  /* Right-side header actions sit BELOW the opened main menu and do not clip. */
  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    width:100% !important;
    order:30 !important;
    display:none !important;
    flex-wrap:wrap !important;
    padding:8px 12px !important;
    background:#08090c !important;
    border-bottom:1px solid #73070B !important;
  }

  body.os-mobile-menu-active .site-header .header-actions,
  body.os-mobile-menu-active .chart-header .header-actions,
  body.os-mobile-menu-active .os-topbar .top-actions{
    display:flex !important;
  }

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    width:100% !important;
    max-width:none !important;
    flex:1 1 100% !important;
    margin-bottom:6px !important;
  }

  .site-header .header-actions > a,
  .site-header .header-actions > button,
  .chart-header .header-actions > a,
  .chart-header .header-actions > button,
  .os-topbar .top-actions > a,
  .os-topbar .top-actions > button{
    flex:1 1 calc(50% - 5px) !important;
    min-width:120px !important;
  }
}

@media (max-width:430px){
  .site-header .header-actions > a,
  .site-header .header-actions > button,
  .chart-header .header-actions > a,
  .chart-header .header-actions > button,
  .os-topbar .top-actions > a,
  .os-topbar .top-actions > button{
    flex:1 1 100% !important;
    width:100% !important;
  }
}


/* =========================================================
   STEP 3 TABLET FIX — ARTISTS PAGE / iPAD MINI
   Targets 701–820px widths so the Artists directory does not
   use oversized desktop cards or clip section controls.
   ========================================================= */
@media (min-width:701px) and (max-width:820px){

  /* Keep the Artists page content safely inside the viewport. */
  .artist-directory,
  .artist-main,
  .artist-layout,
  .directory-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Top search/filter row stays 2 x 2 and fills the tablet cleanly. */
  .filter-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .filter-row > *{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Featured section header: prevent "View All" from being clipped. */
  .artist-main .section-head,
  .artist-main .featured-head,
  .featured-artists-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .artist-main .section-head h2,
  .artist-main .featured-head h2,
  .featured-artists-head h2{
    min-width:0 !important;
    margin:0 !important;
  }

  .artist-main .section-head .text-btn,
  .artist-main .featured-head .text-btn,
  .featured-artists-head .text-btn,
  #viewAllBtn{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin-left:auto !important;
    position:static !important;
  }

  /* Featured Artists become compact horizontal tablet cards. */
  #featuredArtists,
  .featured-artists,
  .featured-artists-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  #featuredArtists .artist-card,
  .featured-artists .artist-card,
  .featured-artists-grid .artist-card{
    width:100% !important;
    max-width:100% !important;
    min-height:138px !important;
    display:grid !important;
    grid-template-columns:138px minmax(0,1fr) !important;
    align-items:stretch !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  #featuredArtists .artist-photo,
  #featuredArtists .artist-image,
  #featuredArtists .artist-cover,
  #featuredArtists .artist-card-image,
  .featured-artists .artist-photo,
  .featured-artists .artist-image,
  .featured-artists .artist-cover,
  .featured-artists .artist-card-image,
  .featured-artists-grid .artist-photo,
  .featured-artists-grid .artist-image,
  .featured-artists-grid .artist-cover,
  .featured-artists-grid .artist-card-image{
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;
    background-size:cover !important;
    background-position:center !important;
    object-fit:cover !important;
  }

  #featuredArtists .artist-info,
  #featuredArtists .artist-card-info,
  .featured-artists .artist-info,
  .featured-artists .artist-card-info,
  .featured-artists-grid .artist-info,
  .featured-artists-grid .artist-card-info{
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  #featuredArtists .artist-name,
  .featured-artists .artist-name,
  .featured-artists-grid .artist-name{
    font-size:17px !important;
    line-height:1.2 !important;
  }

  #featuredArtists .artist-meta,
  #featuredArtists .artist-stats,
  .featured-artists .artist-meta,
  .featured-artists .artist-stats,
  .featured-artists-grid .artist-meta,
  .featured-artists-grid .artist-stats{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  /* Benefits/info cards: 2 across instead of oversized desktop spacing. */
  .artist-benefits,
  .artist-info-grid,
  .directory-benefits{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .artist-benefits > *,
  .artist-info-grid > *,
  .directory-benefits > *{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* All Artists + sidebar: stack vertically on iPad Mini.
     This gives the table full width and prevents the right side from clipping. */
  .directory-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .artist-main{
    order:1 !important;
  }

  .artist-sidebar{
    order:2 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  .artist-sidebar .side-panel{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Full-width artist table on tablet with horizontal safety only if needed. */
  .artist-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .artist-table{
    width:100% !important;
    min-width:680px !important;
  }
}


/* =========================================================
   TABLET NAV FIX — iPAD MINI HAMBURGER MENU
   Uses the same responsive menu through 820px so the main
   navigation never clips on 768px tablets.
   ========================================================= */
@media (min-width:701px) and (max-width:820px){

  .site-header .header-inner,
  .chart-header .chart-header-inner,
  .os-topbar .brand-row{
    min-height:68px !important;
    padding:0 16px !important;
  }

  .os-mobile-menu-toggle{
    display:inline-flex !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
  }

  .site-header nav,
  .chart-header nav,
  .os-topbar nav{
    width:100% !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    height:46px !important;
    min-height:46px !important;
    padding:0 20px !important;
    font-size:13px !important;
  }

  body.os-mobile-menu-active .site-header .header-actions,
  body.os-mobile-menu-active .chart-header .header-actions,
  body.os-mobile-menu-active .os-topbar .top-actions{
    display:flex !important;
  }
}


/* =========================================================
   TABLET NAV FIX — iPAD PRO / LARGE TABLET HAMBURGER MENU
   Keeps the full primary navigation from being squeezed at
   834–1024px tablet widths.
   ========================================================= */
@media (min-width:821px) and (max-width:1100px){

  .site-header,
  .chart-header,
  .os-topbar{
    height:auto !important;
    min-height:68px !important;
    max-height:none !important;
  }

  .site-header .header-inner,
  .chart-header .chart-header-inner,
  .os-topbar .brand-row{
    min-height:68px !important;
    height:auto !important;
    max-height:none !important;
    padding:0 16px !important;
    flex-wrap:wrap !important;
  }

  .os-mobile-menu-toggle{
    display:inline-flex !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    margin-left:auto !important;
  }

  /* Desktop nav becomes the same full-width dropdown used on smaller tablets. */
  .site-header nav,
  .chart-header nav,
  .os-topbar nav{
    display:none !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    overflow:visible !important;
    background:#08090c !important;
    border-top:1px solid #272b32 !important;
    border-bottom:1px solid #73070B !important;
    padding:6px 0 !important;
    order:20 !important;
  }

  .site-header nav.os-mobile-menu-open,
  .chart-header nav.os-mobile-menu-open,
  .os-topbar nav.os-mobile-menu-open{
    display:flex !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 20px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    box-shadow:none !important;
  }

  .site-header nav a.os-current-page,
  .chart-header nav a.os-current-page,
  .os-topbar nav a.os-current-page{
    background:linear-gradient(90deg,#73070B 0%,#3d0508 58%,#101116 100%) !important;
    box-shadow:inset 3px 0 0 #a60b12 !important;
  }

  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    width:100% !important;
    order:30 !important;
    display:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex-wrap:wrap !important;
    padding:8px 12px !important;
    background:#08090c !important;
    border-bottom:1px solid #73070B !important;
  }

  body.os-mobile-menu-active .site-header .header-actions,
  body.os-mobile-menu-active .chart-header .header-actions,
  body.os-mobile-menu-active .os-topbar .top-actions{
    display:flex !important;
  }

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    width:100% !important;
    max-width:none !important;
    flex:1 1 100% !important;
    margin-bottom:6px !important;
  }
}