/* 滚动公告：默认在文档流中（顶栏下、主内容上）；首页叠在 hero 幻灯片顶部 */

.site-announcement-bar,

.site-announcement-bar__viewport,

.site-announcement-bar__track,

.site-announcement-bar__group {

  background: transparent !important;

}



.site-announcement-bar {

  position: relative;

  display: block;

  width: 100%;

  margin: 0;

  margin-top: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0px));

  flex-shrink: 0;

  min-height: var(--announcement-bar-height, 36px);

  height: var(--announcement-bar-height, 36px);

  z-index: 999;

  box-sizing: border-box;

  background: transparent !important;

  overflow: hidden;

  border-bottom: none;

}



.site-announcement-bar__viewport,

.site-announcement-bar__track--link {

  pointer-events: auto;

}



body.is-mobile .site-announcement-bar {

  margin-top: calc(56px + env(safe-area-inset-top, 0px));

}



/*

 * 首页：公告叠在 hero 幻灯片最上方，不占文档流高度，避免挤压幻灯片导致底部被裁切。

 */

body.home-page.has-header-announcement {

  position: relative;

}



body.home-page.has-header-announcement .site-announcement-bar {

  position: absolute;

  top: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0px));

  left: 0;

  right: 0;

  margin-top: 0;

  z-index: 10;

  pointer-events: none;

}



body.is-mobile.home-page.has-header-announcement .site-announcement-bar {

  top: calc(56px + env(safe-area-inset-top, 0px));

}



body.home-page.has-header-announcement main.main {

  margin-top: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0px));

}



body.is-mobile.home-page.has-header-announcement main.main {

  margin-top: calc(56px + env(safe-area-inset-top, 0px));

}



body.has-header-announcement .main-content,

body.has-header-announcement main.main {

  padding-top: 0 !important;

}



body.has-header-announcement .home-page .hero-banner {

  margin-top: 0 !important;

}



/* 内页：公告已在文档流占位，勿再 calc(顶栏 + 间距) */

body.has-header-announcement .releases-container,

body.has-header-announcement .preorder-container,

body.has-header-announcement .label-detail-container,

body.has-header-announcement .charts-container,

body.has-header-announcement.labels-page .labels-container,

body.has-header-announcement .labels-page .labels-container,

body.has-header-announcement .artists-page .artists-container,

body.has-header-announcement .artists-page.artists-container {

  padding-top: 20px !important;

}



body.has-header-announcement .releases-container.releases-page {

  padding: 20px var(--container-padding, 24px) 0 !important;

}



body.has-header-announcement .genres-container {

  padding-top: 12px !important;

}



body.has-header-announcement .search-page {

  padding-top: 16px !important;

}



body.has-header-announcement .track-header {

  padding: 12px 0 40px !important;

}



body.has-header-announcement .album-header {

  padding-top: 20px !important;

}



body.has-header-announcement .chart-detail-page .content-header {

  padding: 40px 0 60px !important;

}



body.has-header-announcement .genre-landing-page {

  padding-top: 18px !important;

}



body.has-header-announcement .artist-hero-top,
body.has-header-announcement .label-hero-top {

  padding-top: 8px !important;

}



body.has-header-announcement .artist-hero-content,
body.has-header-announcement .label-hero-content {

  padding-top: 12px !important;

}



body.has-header-announcement .label-detail-landing > .container:first-child {

  padding-top: 8px;

}



body.has-header-announcement .cart-page-modern,

body.has-header-announcement .checkout-page-modern,

body.has-header-announcement .library-page-modern,

body.has-header-announcement .orders-page-modern {

  padding-top: 40px !important;

}



@media (max-width: 1024px) {

  body.has-header-announcement .charts-container {

    padding-top: 18px !important;

  }



  body.has-header-announcement .chart-detail-page .content-header {

    padding: 24px 0 40px !important;

  }

}



@media (max-width: 768px) {

  body.has-header-announcement .charts-container {

    padding-top: 14px !important;

  }

}