/* =========================================================
   OSBEATS GLOBAL MAIN MENU / BRAND STANDARD
   One logo size, one red/black shade, one header height,
   and one navigation scale across all primary OSBeats pages.
   ========================================================= */

:root{
  --os-nav-height:72px;
  --os-logo-box:52px;
  --os-nav-red:#73070B;
  --os-nav-redblack:linear-gradient(135deg,#8b0710 0%,#73070B 42%,#3b0306 76%,#0c0d10 100%);
  --os-nav-bg:#050608;
  --os-nav-border:#73070B;
}

/* ---------- HEADER SHELL ---------- */
.site-header,
.chart-header,
.os-topbar{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  background:var(--os-nav-bg) !important;
  border-bottom:1px solid var(--os-nav-border) !important;
  box-sizing:border-box !important;
}

.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

/* artist-profile has its brand directly inside .site-header */
.site-header > .brand{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
}

/* ---------- BRAND WRAPPER ---------- */
.site-header .logo,
.chart-header .chart-logo,
.os-topbar .brand,
.site-header > .brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  padding:0 !important;
  margin:0 !important;
  color:#fff !important;
  text-decoration:none !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
}

/* ---------- THE "OS" BOX ---------- */
.site-header .logo .logo-mark,
.chart-header .chart-logo .chart-logo-mark,
.os-topbar .brand > span:first-child,
.site-header > .brand > span:first-child{
  width:var(--os-logo-box) !important;
  min-width:var(--os-logo-box) !important;
  max-width:var(--os-logo-box) !important;
  height:var(--os-logo-box) !important;
  min-height:var(--os-logo-box) !important;
  max-height:var(--os-logo-box) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  background:var(--os-nav-redblack) !important;
  background-color:var(--os-nav-red) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:21px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.5px !important;
  box-sizing:border-box !important;
}

/* ---------- "BEATS" WORDMARK ---------- */
.site-header .logo .logo-text,
.chart-header .chart-logo > span:not(.chart-logo-mark),
.os-topbar .brand > strong,
.site-header > .brand > strong{
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:27px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
}

/* ---------- MAIN NAVIGATION ---------- */
.site-header nav,
.chart-header nav,
.os-topbar nav{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

.site-header nav a,
.chart-header nav a,
.os-topbar nav a{
  height:var(--os-nav-height) !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 13px !important;
  margin:0 !important;
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.site-header nav a:hover,
.chart-header nav a:hover,
.os-topbar nav a:hover,
.site-header nav a.active,
.chart-header nav a.active,
.os-topbar nav a.active{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(115,7,11,.28),rgba(115,7,11,.08)) !important;
  box-shadow:inset 0 -2px 0 var(--os-nav-red) !important;
}

/* Keep right-side cart/account controls vertically aligned to the same bar. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
}

/* Do not let page-specific CSS resize the brand on narrower desktop widths. */
@media (min-width:701px){
  .site-header .logo,
  .chart-header .chart-logo,
  .os-topbar .brand,
  .site-header > .brand{
    transform:none !important;
  }
}

/* Small-screen fallback: still consistent, just slightly tighter. */
@media (max-width:700px){
  :root{
    --os-nav-height:64px;
    --os-logo-box:46px;
  }

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

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


/* =========================================================
   GLOBAL MAIN MENU — ACTIVE STATE / CLICK BEHAVIOR
   ========================================================= */

/* Keep the menu above page banners/cards so overlays cannot steal clicks. */
.site-header,
.chart-header,
.os-topbar{
  position:relative !important;
  z-index:10000 !important;
}

.site-header nav,
.chart-header nav,
.os-topbar nav,
.site-header .logo,
.chart-header .chart-logo,
.os-topbar .brand{
  position:relative !important;
  z-index:10002 !important;
  pointer-events:auto !important;
}

.site-header nav a,
.chart-header nav a,
.os-topbar nav a{
  position:relative !important;
  z-index:10003 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  user-select:none !important;
}

/* JS controls the ONE current-page active state. */
.site-header nav a.os-current-page,
.chart-header nav a.os-current-page,
.os-topbar nav a.os-current-page{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(115,7,11,.38),rgba(115,7,11,.10)) !important;
  box-shadow:inset 0 -3px 0 #73070B !important;
}

/* Remove stale hard-coded active styles when JS has identified the real page. */
body.os-nav-ready .site-header nav a.active:not(.os-current-page),
body.os-nav-ready .chart-header nav a.active:not(.os-current-page),
body.os-nav-ready .os-topbar nav a.active:not(.os-current-page){
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
}

/* Do not let decorative banner/hero pseudo-elements sit over the menu. */
.site-header::before,
.site-header::after,
.chart-header::before,
.chart-header::after,
.os-topbar::before,
.os-topbar::after{
  pointer-events:none !important;
}


/* =========================================================
   GLOBAL HEADER — RIGHT SIDE ACTIONS / SEARCH ALIGNMENT FIX
   Prevents Dashboard, My Music, account name and Log out
   from wrapping or collapsing in the main top menu.
   ========================================================= */

/* Give the right-side menu enough room and keep everything on one line. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  margin-left:auto !important;
  min-width:0 !important;
}

/* Search box keeps a consistent desktop width instead of squeezing the nav. */
.site-header .header-actions .search-wrap,
.chart-header .header-actions .search-wrap,
.os-topbar .top-actions .search-wrap{
  display:flex !important;
  align-items:center !important;
  width:260px !important;
  min-width:220px !important;
  max-width:260px !important;
  height:38px !important;
  flex:0 0 260px !important;
}

.site-header .header-actions .search-wrap input,
.chart-header .header-actions .search-wrap input,
.os-topbar .top-actions .search-wrap input{
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 12px !important;
  border:1px solid #333740 !important;
  background:#101116 !important;
  color:#fff !important;
  box-sizing:border-box !important;
  font-size:13px !important;
}

.site-header .header-actions .search-wrap button,
.chart-header .header-actions .search-wrap button,
.os-topbar .top-actions .search-wrap button{
  width:40px !important;
  min-width:40px !important;
  height:38px !important;
  padding:0 !important;
  flex:0 0 40px !important;
}

/* Right-side links/buttons use one consistent single-line size. */
.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{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 10px !important;
  margin:0 !important;
  border-radius:0 !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-sizing:border-box !important;
}

/* Prevent labels like "My Music" and "Log out" from breaking onto 2 lines. */
.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 *{
  white-space:nowrap !important;
}

/* Keep account/avatar block compact. */
.site-header .header-actions .account-menu,
.site-header .header-actions .user-menu,
.chart-header .header-actions .account-menu,
.os-topbar .top-actions .account-menu{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  height:38px !important;
  white-space:nowrap !important;
}

/* Slightly tighter spacing below very wide desktop so all controls fit. */
@media (max-width:1180px) and (min-width:901px){
  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding-left:9px !important;
    padding-right:9px !important;
  }

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

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    width:210px !important;
    min-width:180px !important;
    max-width:210px !important;
    flex-basis:210px !important;
  }
}


/* =========================================================
   GLOBAL HEADER — COLLISION / OVERLAP FIX
   The desktop search box now steps out BEFORE it can collide
   with Producers / Artists / Membership or account actions.
   ========================================================= */

/* Let the center navigation shrink naturally instead of overlapping. */
.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row{
  width:100% !important;
  max-width:none !important;
  padding-left:24px !important;
  padding-right:24px !important;
  gap:12px !important;
}

.site-header .main-nav,
.chart-header nav,
.os-topbar nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  gap:0 !important;
}

.site-header .main-nav a,
.chart-header nav a,
.os-topbar nav a{
  flex:0 0 auto !important;
  padding-left:10px !important;
  padding-right:10px !important;
}

/* Right-side actions must never sit on top of the primary navigation. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:10005 !important;
  background:#050608 !important;
}

/*
  At normal laptop / browser widths there is not enough horizontal room
  for TWO navigation groups plus a 260px search field. Hide only the
  header search field; Search remains available as a normal main-menu tab.
*/
@media (max-width:1450px) and (min-width:1001px){
  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    display:none !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{
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:12px !important;
  }
}

/* Keep the primary menu visible on standard desktop widths. */
@media (max-width:1180px) and (min-width:1001px){
  .site-header .main-nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:12px !important;
  }

  .site-header .logo,
  .chart-header .chart-logo,
  .os-topbar .brand{
    gap:8px !important;
  }

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


/* =========================================================
   GLOBAL HEADER — REMOVE EXTRA BLACK UNDERLAY / DROP PANEL
   Fixes the visible black block extending below the top menu.
   ========================================================= */

/* Lock the header and right-side action row to the same exact height. */
.site-header,
.chart-header,
.os-topbar,
.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row,
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  min-height:var(--os-nav-height) !important;
  max-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  overflow:visible !important;
}

/* Remove any page-specific background/padding that creates a second black strip. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  background:transparent !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:center !important;
}

/* The search / account items themselves must not be taller than the header. */
.site-header .header-actions .search-wrap,
.chart-header .header-actions .search-wrap,
.os-topbar .top-actions .search-wrap,
.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{
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:center !important;
}

/* Remove pseudo-element underlays sometimes used by page-specific header CSS. */
.site-header .header-actions::before,
.site-header .header-actions::after,
.chart-header .header-actions::before,
.chart-header .header-actions::after,
.os-topbar .top-actions::before,
.os-topbar .top-actions::after{
  content:none !important;
  display:none !important;
}

/* Keep the next page section flush immediately under the 1px header border. */
.site-header + *,
.chart-header + *,
.os-topbar + *{
  margin-top:0 !important;
}


/* =========================================================
   STEP 2 — GLOBAL HEADER ACTION CONSISTENCY
   Standardizes Cart / account / logout controls without
   changing the primary-navigation layout.
   ========================================================= */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  max-height:var(--os-nav-height) !important;
  background:transparent !important;
}

/* Standard action-button shell */
.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:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 11px !important;
  margin:0 !important;
  background:#101116 !important;
  border:1px solid #343944 !important;
  color:#fff !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.site-header .header-actions > a:hover,
.site-header .header-actions > button:hover,
.chart-header .header-actions > a:hover,
.chart-header .header-actions > button:hover,
.os-topbar .top-actions > a:hover,
.os-topbar .top-actions > button:hover{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Count badges in the header use one standard size and red/black treatment. */
.site-header .header-actions .count,
.site-header .header-actions .badge,
.site-header .header-actions [id*="Count"],
.chart-header .header-actions .count,
.chart-header .header-actions .badge,
.os-topbar .top-actions .count,
.os-topbar .top-actions .badge{
  min-width:19px !important;
  height:19px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 5px !important;
  background:linear-gradient(105deg,#8b0710 0%,#73070B 45%,#3b0306 100%) !important;
  border:0 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}

/* Header icons always stay centered and white. */
.site-header .header-actions svg,
.chart-header .header-actions svg,
.os-topbar .top-actions svg{
  width:16px !important;
  height:16px !important;
  color:#fff !important;
  fill:none !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}


/* =========================================================
   OSBEATS GLOBAL MEDIA CONTROL STANDARD — 2026-08-28
   ========================================================= */
.osb-global-media-control,
.osb-global-play-label,
.osb-global-external{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-variant-emoji:text !important;
  color:#fff !important;
}

button.osb-global-media-control,
a.osb-global-media-control,
.homepage-track-open.osb-global-media-control,
.play-badge.osb-global-media-control,
.play-btn.osb-global-media-control,
.play-button.osb-global-media-control{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  background:linear-gradient(135deg,#090b0f 0 52%,#8b0710 52% 100%) !important;
  border:1px solid #9d0a12 !important;
  overflow:hidden !important;
  text-decoration:none !important;
  font-size:0 !important;
  line-height:0 !important;
}

.osb-global-play::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  border-top:7px solid transparent !important;
  border-bottom:7px solid transparent !important;
  border-left:11px solid #fff !important;
  transform:translate(-39%,-50%) !important;
}

.osb-global-play.is-playing::before{
  width:13px !important;
  height:14px !important;
  border:0 !important;
  background:linear-gradient(to right,#fff 0 31%,transparent 31% 69%,#fff 69% 100%) !important;
  transform:translate(-50%,-50%) !important;
}

.osb-global-prev::before,.osb-global-prev::after,
.osb-global-next::before,.osb-global-next::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  transform:translateY(-50%) !important;
}

.osb-global-prev::before,.osb-global-prev::after{
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  border-right:9px solid #fff !important;
}
.osb-global-prev::before{left:calc(50% - 8px) !important;}
.osb-global-prev::after{left:calc(50% + 1px) !important;}

.osb-global-next::before,.osb-global-next::after{
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  border-left:9px solid #fff !important;
}
.osb-global-next::before{left:calc(50% - 9px) !important;}
.osb-global-next::after{left:50% !important;}

.osb-global-play-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:30px !important;
  padding:5px 9px !important;
  background:linear-gradient(105deg,#71070b 0%,#4d0508 50%,#0f1014 100%) !important;
  border:1px solid #7d0b12 !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.osb-global-inline-play{
  position:relative !important;
  display:inline-block !important;
  width:9px !important;
  height:12px !important;
  flex:0 0 9px !important;
}
.osb-global-inline-play::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  border-left:8px solid #fff !important;
  transform:translateY(-50%) !important;
}

.osb-global-external{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  background:linear-gradient(135deg,#090b0f 0 52%,#8b0710 52% 100%) !important;
  border:1px solid #9d0a12 !important;
  font-size:0 !important;
  overflow:hidden !important;
}
.osb-global-external::before{
  content:"" !important;
  position:absolute !important;
  width:10px !important;
  height:10px !important;
  left:50% !important;
  top:50% !important;
  border-top:2px solid #fff !important;
  border-right:2px solid #fff !important;
  transform:translate(-24%,-76%) !important;
}
.osb-global-external::after{
  content:"" !important;
  position:absolute !important;
  width:13px !important;
  height:2px !important;
  left:50% !important;
  top:50% !important;
  background:#fff !important;
  transform:translate(-60%,18%) rotate(-45deg) !important;
  transform-origin:center !important;
}

/* Global back-to-top control for long OSBeats pages. */
.osb-back-to-top{
  position:fixed !important;
  right:18px !important;
  bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important;
  z-index:95 !important;
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid #b20d18 !important;
  border-radius:0 !important;
  background:linear-gradient(145deg,#970b14 0%,#5b060b 58%,#0d1015 100%) !important;
  color:#fff !important;
  box-shadow:0 7px 20px rgba(0,0,0,.36) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) !important;
  transition:opacity .18s ease,transform .18s ease,visibility .18s !important;
  cursor:pointer !important;
}
.osb-back-to-top.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
.osb-back-to-top.above-player{
  bottom:calc(94px + env(safe-area-inset-bottom,0px)) !important;
}
.osb-back-to-top span{
  position:relative !important;
  width:14px !important;
  height:14px !important;
  border-top:3px solid #fff !important;
  border-left:3px solid #fff !important;
  transform:translateY(3px) rotate(45deg) !important;
}
.osb-back-to-top:hover,.osb-back-to-top:focus-visible{
  border-color:#fff !important;
  outline:2px solid rgba(255,255,255,.5) !important;
  outline-offset:2px !important;
}
@media(max-width:760px){
  .osb-back-to-top{
    right:14px !important;
    bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important;
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }
  .osb-back-to-top.above-player{
    bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .osb-back-to-top{transition:none !important}
}


/* =========================================================
   OSBEATS GLOBAL AUTHENTICATED LOGOUT
   ========================================================= */

.site-header nav .os-global-logout,
.chart-header nav .os-global-logout,
.os-topbar nav .os-global-logout{
  height:var(--os-nav-height) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 13px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:10003 !important;
}

.site-header nav .os-global-logout:hover,
.chart-header nav .os-global-logout:hover,
.os-topbar nav .os-global-logout:hover{
  background:
    linear-gradient(
      180deg,
      rgba(115,7,11,.38),
      rgba(115,7,11,.10)
    ) !important;
  box-shadow:
    inset 0 -3px 0 #73070B !important;
}

@media(max-width:1100px){

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

  .site-header nav .os-global-logout:hover,
  .chart-header nav .os-global-logout:hover,
  .os-topbar nav .os-global-logout:hover{
    background:
      linear-gradient(
        90deg,
        #73070B 0%,
        #3d0508 58%,
        #101116 100%
      ) !important;

    box-shadow:
      inset 3px 0 0 #a60b12 !important;
  }
}



/* ================================================================
   OSBEATS GLOBAL VERIFIED BADGE V1
   Official verified badge used across the entire marketplace.
   ================================================================ */

.os-verified-badge,
.verified-badge,
.featured-creator-verified,
.sponsor-verified{

  --os-verified-size:16px;

  display:inline-grid !important;

  place-items:center !important;

  width:var(--os-verified-size) !important;
  height:var(--os-verified-size) !important;

  min-width:var(--os-verified-size) !important;
  min-height:var(--os-verified-size) !important;

  margin-left:4px !important;

  padding:0 !important;

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

  background:transparent !important;

  color:transparent !important;

  font-size:0 !important;

  line-height:1 !important;

  vertical-align:middle !important;

  overflow:visible !important;

  flex:0 0 auto !important;
}


.os-verified-badge svg,
.verified-badge svg,
.featured-creator-verified svg,
.sponsor-verified svg{

  display:block !important;

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

  overflow:visible !important;
}


.os-verified-badge svg > path:first-child,
.verified-badge svg > path:first-child,
.featured-creator-verified svg > path:first-child,
.sponsor-verified svg > path:first-child{

  fill:#73070B !important;

  stroke:none !important;
}


.os-verified-badge .verified-check,
.verified-badge .verified-check,
.featured-creator-verified .verified-check,
.sponsor-verified .verified-check{

  fill:none !important;

  stroke:#fff !important;

  stroke-width:2.25 !important;

  stroke-linecap:round !important;

  stroke-linejoin:round !important;
}


/* Full artist profile uses the same badge at a larger size. */

.artist-name-row .verified-badge,
.profile-name-row .verified-badge,
.artist-identity .verified-badge{

  --os-verified-size:22px;

  margin-left:8px !important;
}


/* Compact homepage creator cards. */

.featured-creator-verified{

  --os-verified-size:15px;
}


/* Featured Artist panel. */

.sponsor-verified{

  --os-verified-size:15px;
}


/* OSBEATS GLOBAL IMAGE LOGO V3 */

html body .osbeats-global-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:170px !important;
  min-width:170px !important;
  max-width:170px !important;

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

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

  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  font-size:0 !important;
  line-height:0 !important;
}

html body .osbeats-global-logo .logo-mark,
html body .osbeats-global-logo .logo-text,
html body .osbeats-global-logo .chart-logo-mark,
html body .osbeats-global-logo > span{
  display:none !important;
}

html body .osbeats-global-logo-image{
  display:block !important;

  width:170px !important;
  min-width:170px !important;
  max-width:170px !important;

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

  object-fit:contain !important;
  object-position:left center !important;

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

  border:0 !important;
  background:transparent !important;
}

@media(max-width:640px){

  html body .osbeats-global-logo,
  html body .osbeats-global-logo-image{
    width:145px !important;
    min-width:145px !important;
    max-width:145px !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }

}

/* END OSBEATS GLOBAL IMAGE LOGO V3 */

/* OSBEATS GLOBAL LOGO SIZE + CLARITY V1 */

img[src*="osbeats_beats_for_creators.png"]{
  height:48px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}

a:has(> img[src*="osbeats_beats_for_creators.png"]),
.global-brand a:has(img[src*="osbeats_beats_for_creators.png"]),
.global-logo a:has(img[src*="osbeats_beats_for_creators.png"]),
.navbar-brand:has(img[src*="osbeats_beats_for_creators.png"]){
  display:flex !important;
  align-items:center !important;
  min-width:230px !important;
  width:auto !important;
  max-width:none !important;
  padding-right:10px !important;
}

.global-brand,
.global-logo,
.navbar-brand,
.site-brand{
  min-width:230px !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}

@media (max-width: 900px){
  img[src*="osbeats_beats_for_creators.png"]{
    height:42px !important;
  }
  a:has(> img[src*="osbeats_beats_for_creators.png"]),
  .global-brand a:has(img[src*="osbeats_beats_for_creators.png"]),
  .global-logo a:has(img[src*="osbeats_beats_for_creators.png"]),
  .navbar-brand:has(img[src*="osbeats_beats_for_creators.png"]){
    min-width:200px !important;
  }
}

@media (max-width: 640px){
  img[src*="osbeats_beats_for_creators.png"]{
    height:36px !important;
  }
  a:has(> img[src*="osbeats_beats_for_creators.png"]),
  .global-brand a:has(img[src*="osbeats_beats_for_creators.png"]),
  .global-logo a:has(img[src*="osbeats_beats_for_creators.png"]),
  .navbar-brand:has(img[src*="osbeats_beats_for_creators.png"]){
    min-width:170px !important;
  }
}

/* END OSBEATS GLOBAL LOGO SIZE + CLARITY V1 */


/* OSBEATS GLOBAL LOGO SIZE V2 */

/* Desktop — exact live global logo classes */
html body a.osbeats-global-logo,
html body .osbeats-global-logo{
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;

  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;

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

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

  overflow:visible !important;
}

html body img.osbeats-global-logo-image,
html body .osbeats-global-logo img.osbeats-global-logo-image{
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;

  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;

  display:block !important;

  object-fit:contain !important;
  object-position:left center !important;

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

  transform:none !important;

  image-rendering:auto !important;
}


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

  html body a.osbeats-global-logo,
  html body .osbeats-global-logo{
    width:215px !important;
    min-width:215px !important;
    max-width:215px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

  html body img.osbeats-global-logo-image,
  html body .osbeats-global-logo img.osbeats-global-logo-image{
    width:215px !important;
    min-width:215px !important;
    max-width:215px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

}


/* Mobile */
@media(max-width:640px){

  html body a.osbeats-global-logo,
  html body .osbeats-global-logo{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }

  html body img.osbeats-global-logo-image,
  html body .osbeats-global-logo img.osbeats-global-logo-image{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
  }

}

/* END OSBEATS GLOBAL LOGO SIZE V2 */




/* OSBEATS TEST LOGO OVERRIDE V1 */
html body a.osbeats-global-logo,
html body .osbeats-global-logo{
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}

html body a.osbeats-global-logo img,
html body .osbeats-global-logo img,
html body header img[src*="osbeats_beats_for_creators.png"]{
  width:100% !important;
  max-width:250px !important;
  height:auto !important;
  max-height:60px !important;
  object-fit:contain !important;
  display:block !important;
  filter:none !important;
  box-shadow:none !important;
}

/* footer logo using same asset */
html body footer img[src*="osbeats_beats_for_creators.png"],
html body .global-footer img[src*="osbeats_beats_for_creators.png"],
html body .global-social-footer img[src*="osbeats_beats_for_creators.png"]{
  width:auto !important;
  max-width:240px !important;
  height:auto !important;
  max-height:56px !important;
  object-fit:contain !important;
  display:block !important;
  filter:none !important;
  box-shadow:none !important;
}
/* END OSBEATS TEST LOGO OVERRIDE V1 */


/* =========================================================
   OSBEATS HEADER LOGO SIZE TUNE V1
   Make header logo a little bigger so
   'BEATS FOR CREATORS' is easier to read.
   Header only. Footer untouched.
   ========================================================= */

html body header a.osbeats-global-logo,
html body header .osbeats-global-logo,
html body header .global-brand a,
html body header .navbar-brand{
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}

html body header img.osbeats-global-logo-image,
html body header a.osbeats-global-logo img,
html body header .global-brand a img,
html body header .navbar-brand img{
  width:300px !important;
  max-width:300px !important;
  height:auto !important;
  max-height:72px !important;
  display:block !important;
  object-fit:contain !important;
}

@media (max-width:900px){
  html body header a.osbeats-global-logo,
  html body header .osbeats-global-logo,
  html body header .global-brand a,
  html body header .navbar-brand{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  html body header img.osbeats-global-logo-image,
  html body header a.osbeats-global-logo img,
  html body header .global-brand a img,
  html body header .navbar-brand img{
    width:250px !important;
    max-width:250px !important;
    max-height:64px !important;
  }
}

/* END OSBEATS HEADER LOGO SIZE TUNE V1 */


/* OSBEATS GLOBAL NAV POSITION LOCK V1 */

/*
   Desktop:
   1. Logo always owns the same 300px column.
   2. Main navigation always begins immediately after that column.
   3. Right-side account controls cannot push the primary links around.
*/

@media (min-width:1001px){

  html body .site-header .header-inner,
  html body .chart-header .chart-header-inner{
    display:grid !important;
    grid-template-columns:300px minmax(0,1fr) auto !important;
    align-items:center !important;

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

    padding-left:24px !important;
    padding-right:24px !important;

    column-gap:0 !important;
  }


  /* Exact fixed brand column */
  html body .site-header .osbeats-global-logo,
  html body .chart-header .osbeats-global-logo{
    grid-column:1 !important;

    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;

    justify-self:start !important;
  }


  /* Main navigation always starts in column 2 */
  html body .site-header .header-inner > nav,
  html body .chart-header .chart-header-inner > nav{
    grid-column:2 !important;

    justify-self:start !important;

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

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

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

    gap:0 !important;
  }


  /* Every primary nav link gets the same spacing everywhere */
  html body .site-header .header-inner > nav > a,
  html body .chart-header .chart-header-inner > nav > a{
    flex:0 0 auto !important;

    margin:0 !important;

    padding-left:13px !important;
    padding-right:13px !important;

    font-size:13px !important;
    white-space:nowrap !important;
  }


  /*
     Homepage/right-side controls occupy column 3.
     They no longer influence where Home / Beats / Charts etc. begin.
  */
  html body .site-header .header-actions,
  html body .chart-header .header-actions{
    grid-column:3 !important;

    justify-self:end !important;

    margin-left:0 !important;
  }

}

/* END OSBEATS GLOBAL NAV POSITION LOCK V1 */


/* =========================================================
   OSBEATS NON-HOME HEADER ACTIONS — MATCH HOMEPAGE V1
   Homepage remains untouched.
   ========================================================= */

.os-nonhome-header-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

.os-nonhome-header-actions .search-wrap{
  display:flex !important;
  align-items:center !important;
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:38px !important;
  flex:0 0 260px !important;
  border:1px solid #333740 !important;
  background:#101116 !important;
  overflow:hidden !important;
  border-radius:0 !important;
}

.os-nonhome-header-actions .search-wrap input{
  width:220px !important;
  min-width:0 !important;
  height:38px !important;
  border:0 !important;
  background:#101116 !important;
  color:#fff !important;
  padding:0 12px !important;
  outline:none !important;
  box-sizing:border-box !important;
}

.os-nonhome-header-actions .search-wrap input::placeholder{
  color:#9da1aa !important;
}

.os-nonhome-header-actions .search-wrap button{
  width:40px !important;
  min-width:40px !important;
  height:38px !important;
  padding:0 !important;
  border:0 !important;
  border-left:1px solid #73070B !important;
  background:linear-gradient(
    105deg,
    #69060A 0%,
    #78070B 35%,
    #450408 70%,
    #100F12 100%
  ) !important;
  color:#fff !important;
  cursor:pointer !important;
}

.os-nonhome-header-actions > a,
.os-nonhome-header-actions > button{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

@media (max-width:1450px) and (min-width:1001px){
  .os-nonhome-header-actions .search-wrap{
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    flex-basis:220px !important;
  }

  .os-nonhome-header-actions .search-wrap input{
    width:180px !important;
  }
}

/* END OSBEATS NON-HOME HEADER ACTIONS — MATCH HOMEPAGE V1 */


/* =========================================================
   OSBEATS STATIC HEADER ANCHOR V6
   Final non-home desktop header position lock.

   All non-home headers use the same full-width coordinate
   system so the right-side controls cannot move left/right
   because of page-specific max-width rules.

   Homepage is excluded because index.html does not carry
   .os-static-header-inner / .os-static-right-actions.
   ========================================================= */

@media (min-width:1001px){

  /* =======================================================
     ONE IDENTICAL HEADER CONTAINER ON EVERY NON-HOME PAGE
     ======================================================= */

  html body .os-static-header-inner{
    position:relative !important;

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

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:24px !important;
    padding-right:24px !important;

    box-sizing:border-box !important;
  }


  /*
     The right-side block uses the SAME viewport-relative
     right edge on every non-home page.
  */

  html body .os-static-header-inner
  > .os-static-right-actions{

    position:absolute !important;

    right:24px !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    display:grid !important;

    grid-template-columns:
      260px
      94px
      86px
      78px !important;

    grid-template-rows:38px !important;

    column-gap:12px !important;

    width:554px !important;
    min-width:554px !important;
    max-width:554px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

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

    box-sizing:border-box !important;

    z-index:20 !important;
  }


  /* =======================================================
     SEARCH — FIXED SLOT 1
     ======================================================= */

  .os-static-right-actions .search-wrap{
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;

    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;

    height:38px !important;

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

    background:#101116 !important;

    border:1px solid #333740 !important;
    border-radius:0 !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
  }


  .os-static-right-actions .search-wrap input{
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;

    height:36px !important;

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

    background:#101116 !important;

    color:#ffffff !important;

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

    font:inherit !important;

    box-sizing:border-box !important;
  }


  .os-static-right-actions .search-wrap input::placeholder{
    color:#9da1aa !important;
    opacity:1 !important;
  }


  .os-static-right-actions .search-wrap button{
    width:39px !important;
    min-width:39px !important;
    max-width:39px !important;

    height:36px !important;

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

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

    background:
      linear-gradient(
        105deg,
        #69060A 0%,
        #78070B 38%,
        #450408 72%,
        #100F12 100%
      ) !important;

    color:#ffffff !important;

    border:0 !important;
    border-left:1px solid #73070B !important;

    border-radius:0 !important;

    font:inherit !important;

    cursor:pointer !important;

    box-sizing:border-box !important;
  }


  /* =======================================================
     DASHBOARD — FIXED SLOT 2
     ======================================================= */

  .os-static-right-actions
  > a[href="/dashboard.html"]{

    grid-column:2 !important;
    grid-row:1 !important;

    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;

    height:38px !important;

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

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

    white-space:nowrap !important;

    box-sizing:border-box !important;
  }


  /* =======================================================
     MY MUSIC — FIXED SLOT 3
     ======================================================= */

  .os-static-right-actions
  > a[href="/library.html"]{

    grid-column:3 !important;
    grid-row:1 !important;

    width:86px !important;
    min-width:86px !important;
    max-width:86px !important;

    height:38px !important;

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

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

    white-space:nowrap !important;

    box-sizing:border-box !important;
  }


  /* =======================================================
     LOGIN / LOG OUT — FIXED SLOT 4
     ======================================================= */

  .os-static-right-actions .os-auth-slot{

    grid-column:4 !important;
    grid-row:1 !important;

    position:relative !important;

    display:block !important;

    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

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

    box-sizing:border-box !important;
  }


  .os-static-right-actions
  .os-auth-slot > #accountLink,

  .os-static-right-actions
  .os-auth-slot > #logoutBtn{

    position:absolute !important;

    inset:0 !important;

    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;

    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

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

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

    background:#101116 !important;

    color:#ffffff !important;

    border:1px solid #333740 !important;
    border-radius:0 !important;

    font-family:inherit !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1 !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    cursor:pointer !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    box-sizing:border-box !important;
  }


  .os-static-right-actions
  .os-auth-slot > #accountLink:not([hidden]),

  .os-static-right-actions
  .os-auth-slot > #logoutBtn:not([hidden]){

    display:flex !important;
  }


  .os-static-right-actions
  .os-auth-slot > #accountLink:hover,

  .os-static-right-actions
  .os-auth-slot > #logoutBtn:hover{

    background:#17191f !important;
    color:#ffffff !important;
  }

}


/* OSBEATS STATIC MAIN NAV SLOTS V1 */

/*
   Prevent page-specific nav gaps, wrapping and auto-width
   calculations from shifting menu tabs between pages.

   Every primary link receives a permanent width.
*/

@media (min-width:1001px){

  html body .os-static-header-inner > nav{
    display:flex !important;
    align-items:center !important;

    gap:0 !important;

    flex-wrap:nowrap !important;

    justify-content:flex-start !important;

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

    white-space:nowrap !important;

    box-sizing:border-box !important;
  }


  html body .os-static-header-inner > nav > a{
    height:72px !important;

    margin:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;

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

    flex-grow:0 !important;
    flex-shrink:0 !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;

    line-height:1 !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;
  }


  /* 1 — HOME */
  html body .os-static-header-inner
  > nav > a[href="/"]{

    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;

    flex-basis:64px !important;
  }


  /* 2 — BEATS */
  html body .os-static-header-inner
  > nav > a[href="/discover.html"]{

    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;

    flex-basis:64px !important;
  }


  /* 3 — BEAT REQUESTS */
  html body .os-static-header-inner
  > nav > a[href="/beat-requests.html"]{

    width:126px !important;
    min-width:126px !important;
    max-width:126px !important;

    flex-basis:126px !important;
  }


  /* 4 — CHARTS */
  html body .os-static-header-inner
  > nav > a[href="/charts.html"]{

    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;

    flex-basis:72px !important;
  }


  /* 5 — SEARCH */
  html body .os-static-header-inner
  > nav > a[href="/search.html"]{

    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;

    flex-basis:72px !important;
  }


  /* 6 — PRODUCERS */
  html body .os-static-header-inner
  > nav > a[href="/producers.html"]{

    width:94px !important;
    min-width:94px !important;
    max-width:94px !important;

    flex-basis:94px !important;
  }


  /* 7 — ARTISTS */
  html body .os-static-header-inner
  > nav > a[href="/artists.html"]{

    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;

    flex-basis:74px !important;
  }


  /* 8 — MEMBERSHIP */
  html body .os-static-header-inner
  > nav > a[href="/membership.html"]{

    width:106px !important;
    min-width:106px !important;
    max-width:106px !important;

    flex-basis:106px !important;
  }


  /*
     Active/hover appearance may change background and underline,
     but NEVER width, padding, margin or font metrics.
  */

  html body .os-static-header-inner
  > nav > a:hover,

  html body .os-static-header-inner
  > nav > a.active,

  html body .os-static-header-inner
  > nav > a.os-current-page{

    margin:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;

    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;

    box-sizing:border-box !important;
  }

}

/* END OSBEATS STATIC MAIN NAV SLOTS V1 */


/* END OSBEATS STATIC HEADER ANCHOR V6 */