/*
Theme Name: Sly Anthem Child
Theme URI: https://slyanthem.com

Description: Child theme for Astra - Sly Anthem custom architecture layer
Author: Sly Anthem
Template: astra
Version: 1.8.14
Text Domain: slyanthem-child
*/

:root{
  --accent-primary: #9F8CFF;
  --sly-bg: #222227;

  /* Header tuning */
  --sly-header-bg: rgba(18,18,22,0.62);     /* tinted glass */
  --sly-header-blur: 22px;                  /* applies only where supported */
  --sly-header-pad-x: 40px;
  --sly-header-pad-x-mobile: 18px;
  --sly-header-offset: 92px;
  --sly-header-offset-mobile: 84px;

  --box-shadow: 0 10px 28px rgba(0,0,0,0.32);

  /* Link tuning */
  --link-hover: #C7BEFF;
}

/* =========================================================
GLOBAL FOUNDATION
========================================================= */

body{
  background-color: var(--sly-bg) !important;
  color: #F4F4F6;
}

#page{
  background: var(--sly-bg);
}

/* Subtle Atmospheric Glow */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(159,140,255,0.08), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,179,71,0.06), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Global link policy */
a{
  color: var(--accent-primary);
}
a:hover,
a:focus{
  color: var(--link-hover) !important;
}

/* =========================================================
CORE CARD SYSTEM
========================================================= */

.sly-card{
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #1C1C23;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  will-change: transform;
}

.sly-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18,18,24,0.75) 0%,
    rgba(18,18,24,0.35) 35%,
    rgba(18,18,24,0.0) 60%
  );
  z-index: 1;
  pointer-events: none;
}

.sly-featured .sly-card::before{
  background: linear-gradient(
    to top,
    rgba(18,18,24,0.95) 0%,
    rgba(18,18,24,0.6) 15%,
    rgba(18,18,24,0.0) 45%
  );
}

.sly-card-media{
  position: relative;
}

.sly-card-media img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}

/* =========================================================
PLAY OVERLAY
========================================================= */

.sly-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.sly-play svg{
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: 50%;
  background: rgba(159,140,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(159,140,255,0.35),
    0 8px 25px rgba(0,0,0,0.35);
  fill: #ffffff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (min-width: 901px){

  .sly-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    z-index: 5;
  }

  .sly-card:hover .sly-card-media img{
    transform: scale(1.03);
  }

  .sly-play{
    opacity: 0;
  }

  .sly-card:hover .sly-play{
    opacity: 1;
  }

  .sly-card:hover .sly-play svg{
    transform: scale(1.08);
  }
}

@media (max-width: 900px){
  .sly-play{ opacity: 1; }
  .sly-play svg{ width: 58px; height: 58px; }
}

/* =========================================================
HOMEPAGE LAYOUT
========================================================= */

.sly-home{
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 40px 60px;
}

.sly-featured{
  margin-bottom: 90px;
}

.sly-featured .sly-card{
  box-shadow: 0 50px 100px rgba(0,0,0,0.5);
}

.sly-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.sly-grid article:nth-child(1),
.sly-grid article:nth-child(2),
.sly-grid article:nth-child(3){
  grid-column: span 2;
}

.sly-grid article:nth-child(4){
  grid-column: 2 / span 2;
}

.sly-grid article:nth-child(5){
  grid-column: 4 / span 2;
}

.sly-grid.sly-grid--campaign{
  grid-template-columns: repeat(3, 1fr);
}

.sly-grid.sly-grid--campaign article{
  grid-column: auto / span 1;
}

.sly-card--campaign-hero .sly-campaign-hero-banner{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(18,18,24,0.52);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(244, 244, 246, 0.82);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  pointer-events: none;
}

.sly-home--campaign .sly-featured{
  margin-bottom: 44px;
}

.sly-grid--campaign .sly-card--campaign.is-coming-soon{
  opacity: 0.94;
}

@media (max-width: 1024px){
  .sly-card--campaign-hero{
    overflow: visible;
  }

  .sly-card--campaign-hero .sly-featured-label{
    display: none;
  }

  .sly-home--campaign .sly-featured{
    margin-bottom: 68px;
  }

  .sly-card--campaign-hero .sly-card-media{
    overflow: hidden;
    border-radius: inherit;
  }

  .sly-card--campaign-hero .sly-campaign-hero-banner{
    display: block;
    left: 16px;
    right: 16px;
    bottom: -12px;
    width: auto;
    max-width: none;
    padding: 12px 18px;
    border-radius: 999px;
    margin: 0;
    transform: none;
    font-size: 0.9rem;
    line-height: 1.28;
    background: rgba(18,18,24,0.82);
    white-space: normal;
    box-sizing: border-box;
  }
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-badge{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-badge-label{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18,18,24,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--accent-primary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-badge-date{
  color: rgba(244, 244, 246, 0.8);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-meta{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 4;
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-title{
  display: inline-block;
  color: #F4F4F6;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  text-shadow: 0 3px 14px rgba(0,0,0,0.45);
}

.sly-grid--campaign .sly-card--campaign .sly-campaign-card-title:hover,
.sly-grid--campaign .sly-card--campaign .sly-campaign-card-title:focus{
  color: #ffffff !important;
}

@media (max-width: 900px){

  .sly-home{
    padding: 40px 20px;
  }

  .sly-grid{
    display: flex !important;
    flex-direction: column;
    gap: 30px;
  }

  .sly-grid .sly-card,
  .sly-featured .sly-card{
    width: 100%;
  }

  .sly-grid--campaign .sly-card--campaign .sly-campaign-card-badge{
    top: 14px;
    right: 14px;
  }

  .sly-card--campaign-hero .sly-campaign-hero-banner{
    left: 14px;
    right: 14px;
    bottom: -12px;
    width: auto;
    max-width: none;
    padding: 12px 16px;
    font-size: 0.84rem;
    line-height: 1.25;
    border-radius: 999px;
    transform: none;
    white-space: normal;
    box-sizing: border-box;
  }

  .sly-home--campaign .sly-featured{
    margin-bottom: 60px;
  }

  .sly-grid--campaign .sly-card--campaign .sly-campaign-card-meta{
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .sly-grid--campaign .sly-card--campaign .sly-campaign-card-title{
    font-size: 0.95rem;
  }

  .sly-card-media{
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .sly-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sly-featured{
    margin-bottom: 50px;
  }
}

@media (max-width: 768px){
  .sly-home--campaign .sly-featured{
    margin-bottom: 56px;
  }

  .sly-card--campaign-hero .sly-campaign-hero-banner{
    left: 12px;
    right: 12px;
    bottom: -10px;
    width: auto;
    max-width: none;
    padding: 12px 14px;
    font-size: 0.78rem;
    line-height: 1.25;
    border-radius: 999px;
    margin: 0;
    transform: none;
    white-space: normal;
    box-sizing: border-box;
  }
}

/* =========================================================
FEATURED BADGE
========================================================= */

.sly-featured-label{
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 4;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(18,18,24,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--accent-primary);
}

.sly-featured .sly-card:hover .sly-featured-label{
  background: rgba(18,18,24,0.75);
}

/* =========================================================
COUNTDOWN BLOCK
========================================================= */

.sly-countdown-block{
  margin: 0 auto 80px;
  padding: 36px 60px;
  text-align: center;
  max-width: 900px;
  width: 100%;
  border-radius: 18px;
  background: rgba(24, 24, 34, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.sly-countdown-block .sly-countdown{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 55px;
  flex-wrap: wrap;
}

/* =========================================================
ARCHIVE LAYOUT
========================================================= */

.archive .site-content > .ast-container{
  max-width: 1600px;
  padding-left: 60px;
  padding-right: 60px;
}

.sly-archive{
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 40px 60px;
}

.sly-archive-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 1024px){
  .sly-archive-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){

  .archive .site-content > .ast-container{
    padding-left: 20px;
    padding-right: 20px;
  }

  .sly-archive{
    padding: 40px 20px;
  }

  .sly-archive-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sly-archive .sly-card-media{
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .sly-archive .sly-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Archive Pagination */

.sly-archive-pagination {
  margin-top: 80px;
  text-align: center;
}

.sly-archive-pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(159,140,255,0.12);
  border: 1px solid rgba(159,140,255,0.28);
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.sly-archive-pagination .page-numbers.current {
  background: rgba(159,140,255,0.20);
  border-color: rgba(159,140,255,0.45);
  color: #F4F4F6;
}

.sly-archive-pagination .page-numbers:hover {
  background: rgba(159,140,255,0.18);
  border-color: rgba(159,140,255,0.45);
  color: #F4F4F6;
}

.sly-archive-pagination .page-numbers:focus {
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 4px;
}

/* =========================================================
HOMEPAGE MORE LINK
========================================================= */

.sly-home-more{
  margin-top: 70px;
  text-align: center;
}

.sly-home-more a{
  display: inline-block;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--accent-primary);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid rgba(159,140,255,0.25);
  background: rgba(159,140,255,0.08);
}

.sly-home-more a:hover{
  background: rgba(159,140,255,0.16);
}

.sly-home-more a:focus{
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

/* =========================================================
P5 SINGLE SONG STYLING
========================================================= */

.single-post .entry-title,
.single-post .entry-title a{
  color: #F4F4F6 !important;
}

.single-post .entry-header,
.single-post .entry-content{
  color: rgba(244, 244, 246, 0.92) !important;
}

/* Remove meta and navigation on single posts */
.single-post .entry-meta,
.single-post .entry-meta a,
.single-post .post-meta,
.single-post .ast-single-post-meta,
.single-post .ast-post-meta,
.single-post .post-navigation,
.single-post nav.post-navigation,
.single-post .navigation.post-navigation,
.single-post .ast-single-post-navigation,
.single-post .ast-post-navigation{
  display: none !important;
}

/* Match container background to cinematic base */
.single-post #page,
.single-post .site-content,
.single-post #content,
.single-post #primary,
.single-post .site-main,
.single-post .ast-container{
  background: var(--sly-bg) !important;
}

/* Astra separate container panel */
.single-post.ast-separate-container .ast-article-post,
.single-post.ast-separate-container .ast-article-single{
  background: var(--sly-bg) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

/* Ensure inner areas do not introduce light backgrounds */
.single-post.ast-separate-container .ast-article-post .entry-content,
.single-post.ast-separate-container .ast-article-single .entry-content,
.single-post.ast-separate-container .ast-article-post .entry-header,
.single-post.ast-separate-container .ast-article-single .entry-header{
  background: transparent !important;
}

/* Typography */
.single-post .entry-content h2{
  color: #F4F4F6;
  letter-spacing: 0.5px;
  margin: 34px 0 16px;
}

.single-post .entry-content p,
.single-post .entry-content li{
  line-height: 1.8;
  font-size: 1.05rem;
}

.single-post .entry-content strong{
  color: #F4F4F6;
}

.single-post .entry-content ul{
  padding-left: 1.2em;
}

.single-post .entry-content li{
  margin: 8px 0;
}

/* Video */
.single-post .entry-content iframe{
  display: block;
  width: 100%;
  border-radius: 14px;
  margin: 22px 0 34px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(24, 24, 34, 0.38);
}

/* Accordions */
.single-post .entry-content details{
  margin: 18px 0;
  border-radius: 14px;
  background: rgba(24, 24, 34, 0.38) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 1px solid rgba(159,140,255,0.32) !important;
  padding: 14px 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.22);
  color: rgba(244, 244, 246, 0.92) !important;
}

.single-post .entry-content details[open]{
  background: rgba(24, 24, 34, 0.46) !important;
}

.single-post .entry-content summary{
  cursor: pointer;
  list-style: none;
  color: #F4F4F6 !important;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 8px 6px;
  outline: none;
  background: transparent !important;
}

.single-post .entry-content summary::-webkit-details-marker{
  display: none;
}

.single-post .entry-content summary:focus{
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 4px;
  border-radius: 10px;
}

.single-post .entry-content details > *:not(summary){
  margin-top: 12px;
}

.single-post .entry-content details p,
.single-post .entry-content details li,
.single-post .entry-content details strong,
.single-post .entry-content details em,
.single-post .entry-content details span,
.single-post .entry-content details pre,
.single-post .entry-content details code,
.single-post .entry-content details blockquote{
  color: rgba(244, 244, 246, 0.92) !important;
}

.single-post .entry-content details a{
  color: var(--accent-primary) !important;
}

.single-post .entry-content details a:hover,
.single-post .entry-content details a:focus{
  color: #F4F4F6 !important;
  text-decoration: underline;
}

/* =========================================================
ASTRA SOCIAL + MENU
========================================================= */

/* Social icons (force consistent monochrome) */
.ast-header-social-1-wrap .header-social-inner-wrap{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
}

.ast-header-social-1-wrap .header-social-item{
  color: rgba(255,255,255,0.75) !important;
}

.ast-header-social-1-wrap .header-social-item svg,
.ast-header-social-1-wrap .header-social-item svg path{
  fill: currentColor !important;
}

.ast-header-social-1-wrap .header-social-item:hover{
  color: #ffffff !important;
  transform: translateY(-1px);
}

.custom-logo{
  opacity: 0.92;
}

/* Dropdown menu (desktop) */
.ast-desktop .main-header-menu .sub-menu{
  margin-top: 0 !important;
  padding-top: 1px !important;
  background: rgba(22,22,28,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.main-header-menu .sub-menu li a{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.ast-desktop .main-header-menu .sub-menu a{
  color: #EAEAF0 !important;
}

.ast-desktop .main-header-menu .sub-menu a:hover{
  color: var(--accent-primary) !important;
}

/* Mobile menu (keep it dark, kill white panels) */
.ast-header-break-point .ast-mobile-popup-drawer,
.ast-header-break-point .ast-mobile-popup-inner,
.ast-header-break-point .ast-mobile-popup-content,
.ast-header-break-point .ast-mobile-popup-drawer.active,
.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-header-break-point .main-header-bar-navigation,
.ast-builder-menu-mobile .main-header-menu,
.ast-mobile-popup-drawer .main-navigation,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer *{
  background: rgba(20, 20, 28, 0.94) !important;
  background-color: rgba(20, 20, 28, 0.94) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu ul,
.ast-header-break-point .main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu li,
.ast-mobile-popup-drawer li,
.ast-mobile-popup-drawer .menu-item,
.ast-builder-menu-mobile .main-header-menu li{
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.ast-header-break-point .main-header-menu .menu-link,
.ast-builder-menu-mobile .menu-link{
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500;
}

.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link{
  color: var(--accent-primary) !important;
}

@media (max-width: 921px){
  .ast-header-break-point .main-header-menu .sub-menu,
  .ast-mobile-popup-drawer .sub-menu{
    background: rgba(20, 20, 28, 0.94) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
  }

  .ast-header-break-point .main-header-menu .sub-menu .menu-link{
    color: rgba(255,255,255,0.88) !important;
  }

  .ast-header-break-point .main-header-menu .sub-menu .menu-link:hover{
    color: var(--accent-primary) !important;
  }

  .ast-mobile-popup-drawer .sub-menu li{
    background: transparent !important;
  }
}

.ast-header-break-point .main-header-menu .menu-item{
  padding-top: 6px;
  padding-bottom: 6px;
}

.ast-mobile-menu-trigger-minimal:focus{
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 4px;
}

/* =========================================================
FOOTER NAV
========================================================= */

.site-footer,
.site-footer .site-primary-footer-wrap,
.site-footer .footer-bar,
.site-footer .ast-footer-bar-section{
  background: rgba(18, 18, 22, 0.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.25) !important;
}

.site-footer .widget,
.site-footer .widget-title,
.site-footer .widget_nav_menu{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.site-footer .menu{
  list-style: none;
  margin: 0 !important;
  padding: 28px 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.site-footer .menu > li{
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer a{
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.site-footer a:hover,
.site-footer a:focus{
  color: var(--accent-primary) !important;
  text-decoration: underline !important;
}

@media (max-width: 600px){
  .site-footer .menu{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* =========================================================
HEADER: FROSTED GLASS + FULL-WIDTH WRAP (SINGLE SOURCE OF TRUTH)
========================================================= */

.ast-primary-header-bar{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;

  background: var(--sly-header-bg) !important;
  background-color: var(--sly-header-bg) !important;
  background-image: none !important;

  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Kill Astra paint layers that can override the bar */
.ast-primary-header-bar .main-header-bar,
.ast-primary-header-bar .main-header-bar-wrap,
.ast-primary-header-bar .main-header-bar-navigation,
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-container{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Frost sheen + subtle texture so it still reads like glass even without blur */
.ast-primary-header-bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04) 40%,
      rgba(0,0,0,0.10)
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 2px,
      rgba(0,0,0,0.018) 2px,
      rgba(0,0,0,0.018) 4px
    );
}

/* Keep header content above overlay */
.ast-primary-header-bar > *{
  position: relative;
  z-index: 1;
}

/* If blur is supported, use it */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .ast-primary-header-bar{
    -webkit-backdrop-filter: blur(var(--sly-header-blur)) saturate(140%);
    backdrop-filter: blur(var(--sly-header-blur)) saturate(140%);
  }
}

/* Force inner header wrap full width so no container gutters */
.ast-primary-header-bar .site-primary-header-wrap.ast-container,
.ast-primary-header-bar .ast-container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: var(--sly-header-pad-x) !important;
  padding-right: var(--sly-header-pad-x) !important;
}

@media (max-width: 921px){
  .ast-primary-header-bar .site-primary-header-wrap.ast-container,
  .ast-primary-header-bar .ast-container{
    padding-left: var(--sly-header-pad-x-mobile) !important;
    padding-right: var(--sly-header-pad-x-mobile) !important;
  }
}

/* Admin bar offset */
.admin-bar .ast-primary-header-bar{ top: 32px !important; }
@media (max-width: 782px){
  .admin-bar .ast-primary-header-bar{ top: 46px !important; }
}

/* Reserve space for fixed header */
body:not(.admin-bar) #content{
  padding-top: var(--sly-header-offset) !important;
}
.admin-bar #content{
  padding-top: var(--sly-header-offset) !important;
}
@media (max-width: 921px){
  body:not(.admin-bar) #content,
  .admin-bar #content{
    padding-top: var(--sly-header-offset-mobile) !important;
  }
}

/* =========================================================
PAGES (About, Privacy, etc.) – PREMIUM LAYOUT
========================================================= */

/* Glass content panel */
.page.ast-separate-container .ast-article-post,
.page.ast-separate-container .ast-article-single,
.page:not(.ast-separate-container) .site-main > article{
  background: rgba(24, 24, 34, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 34px 34px;
}
/* About page — force true background match */
.page-id-834.page.ast-separate-container .ast-article-single {
  background: var(--sly-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Page typography */
.page .entry-content p,
.page .entry-content li{
  color: rgba(244, 244, 246, 0.92) !important;
  font-size: 1.05rem;
  line-height: 1.85;
}

.page .entry-content h2{
  margin-top: 34px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  letter-spacing: 0.3px;
  color: #F4F4F6 !important;
}

.page .entry-content h3{
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 1.15rem;
  color: rgba(244, 244, 246, 0.92) !important;
}

.page .entry-content ul,
.page .entry-content ol{
  padding-left: 1.25em;
}

.page .entry-content li{
  margin: 10px 0;
}

/* Page links */
.page .entry-content a{
  color: var(--accent-primary) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(159,140,255,0.35);
}

.page .entry-content a:hover,
.page .entry-content a:focus{
  color: var(--link-hover) !important;
  border-bottom-color: rgba(159,140,255,0.75);
}

/* Mobile */
@media (max-width: 768px){
  .page.ast-separate-container .ast-article-post,
  .page.ast-separate-container .ast-article-single,
  .page:not(.ast-separate-container) .site-main > article{
    padding: 22px 18px;
    border-radius: 16px;
  }
}

/* About page container — match global background */
.page-id-834 .ast-article-single {
  background: var(--sly-bg) !important;
  border-radius: 22px;
  padding: 60px 70px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Remove Gutenberg padding chaos */
.page-id-834 .entry-content > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Main title */
.page-id-834 h1{
  font-size: 2.4rem;
  margin-bottom: 30px;
}

/* Section headings */
.page-id-834 h2{
  font-size: 1.6rem;
  margin-top: 60px;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

/* Body text */
.page-id-834 p,
.page-id-834 h3{
  font-size: 1.08rem;
  line-height: 1.9;
  color: rgba(244,244,246,0.92);
}

/* ABOUT PAGE – STABLE IMAGE WRAP */

.page-id-834 .wp-block-image.alignleft {
  float: left;
  margin: 0 64px 28px 0;
}

/* Force text to respect wrap spacing */
.page-id-834 .entry-content p {
  margin-top: 0;
}

/* Add controlled breathing room beside image */
.page-id-834 .entry-content p:first-of-type {
  margin-top: 10px;
}

/* Clear float properly after first section */
.page-id-834 .entry-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 921px) {
  .page-id-834 .wp-block-image.alignleft {
    float: none;
    margin: 30px auto;
    text-align: center;
  }
}

/* Clear float after first content block */
.page-id-834 .entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobile */
@media (max-width: 921px) {
  .page-id-834 .wp-block-image {
    float: none;
    margin: 30px auto;
    max-width: 100%;
  }
}
.page-id-834 .wp-block-image img {
  border-radius: 26px;
}

/* Mobile */
@media (max-width: 921px){
  .page-id-834 .ast-article-single{
    padding: 30px 22px;
  }
}
/* === P5.06 Song Page Playlist Block === */

.single-post .sly-song-after-content {
  margin-top: 50px;
}

.single-post .sly-song-after-content h2 {
  margin: 0 0 16px;
  color: #F4F4F6;
  letter-spacing: 0.5px;
}

.single-post .sly-playlist-embed {
  background: rgba(24, 24, 34, 0.38);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 1px solid rgba(159,140,255,0.32);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.22);
}

.single-post .sly-playlist-frame {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.single-post .sly-song-links {
  margin-top: 16px;
}

.single-post .sly-song-link {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(159,140,255,0.12);
  border: 1px solid rgba(159,140,255,0.28);
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.single-post .sly-song-link:hover {
  background: rgba(159,140,255,0.18);
  border-color: rgba(159,140,255,0.45);
  color: #F4F4F6;
}

.single-post .sly-song-link:focus {
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 4px;
}
/* === P5.07 Playlist Sizing and Centered Link === */

/* Keep the "More Music" area visually secondary */
.single-post .sly-song-after-content {
  max-width: 900px;
  margin: 50px auto 0;
}

/* Match your main embed proportions */
.single-post .sly-playlist-embed {
  padding: 14px;
}

/* Force a consistent 16:9 frame and avoid oversized embeds */
.single-post .sly-playlist-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 520px;
}

/* Center the CTA link row */
.single-post .sly-song-links {
  text-align: center;
  margin-top: 18px;
}

/* Center the button itself */
.single-post .sly-song-link {
  margin: 0 auto;
}
/* === P5.08 More Music Panel Polish === */

.single-post .sly-song-after-content {
  max-width: 980px;
  margin: 60px auto 0;
  padding: 26px 26px 22px;
  border-radius: 18px;
  background: rgba(24, 24, 34, 0.34);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.single-post .sly-song-after-content h2 {
  margin: 0 0 18px;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  color: #F4F4F6;
}

.single-post .sly-playlist-embed {
  background: rgba(18, 18, 24, 0.28);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 1px solid rgba(159,140,255,0.28);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}

.single-post .sly-playlist-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  display: block;
}

.single-post .sly-song-links {
  margin-top: 18px;
  text-align: center;
}

.single-post .sly-song-link {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  background: rgba(159,140,255,0.12);
  border: 1px solid rgba(159,140,255,0.30);
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.single-post .sly-song-link:hover {
  background: rgba(159,140,255,0.18);
  border-color: rgba(159,140,255,0.45);
  color: #F4F4F6;
}

.single-post .sly-song-link:focus {
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 4px;
}
/* === P5.11 Song Right Rail + Safe Container Scope === */

/* Stop painting every ast-container on single posts */
.single-post .ast-container{
  background: transparent !important;
}

/* Only paint the CONTENT containers on single posts */
.single-post .site-content .ast-container,
.single-post #content .ast-container,
.single-post #primary .ast-container,
.single-post .site-main .ast-container{
  background: var(--sly-bg) !important;
}

/* Keep header containers transparent even on single posts */
.single-post .ast-primary-header-bar .ast-container,
.single-post .site-header .ast-container{
  background: transparent !important;
}

/* Right rail layout */
.single-post .sly-song-layout{
  max-width: 1180px;
  margin: 0 auto;
}

@media (min-width: 1025px){
  .single-post .sly-song-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: start;
  }
}

.single-post .sly-song-main{
  min-width: 0;
}

.single-post .sly-song-rail{
  min-width: 0;
}

.single-post .sly-rail-panel{
  border-radius: 18px;
  background: rgba(24, 24, 34, 0.34);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
  padding: 18px;
  margin-bottom: 18px;
}

.single-post .sly-rail-title{
  margin: 0 0 14px;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: #F4F4F6;
}

.single-post .sly-rail-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Rail cards: slightly tighter than main cards */
.single-post .sly-card.sly-card--rail{
  border-radius: 14px;
}

.single-post .sly-card.sly-card--rail .sly-play svg{
  width: 54px;
  height: 54px;
  padding: 14px;
}

/* Playlist panel inside rail */
.single-post .sly-rail-playlist .sly-playlist-embed{
  background: rgba(18, 18, 24, 0.28);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 1px solid rgba(159,140,255,0.28);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.16);
}

.single-post .sly-rail-playlist .sly-playlist-frame{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  display: block;
}

.single-post .sly-rail-playlist .sly-song-links{
  text-align: center;
  margin: 16px 0 0;
}
/* === P5.12 Song Rail Proportions + Main Video Fix === */

/* Give the song layout more breathing room */
.single-post .sly-song-layout{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 900px){
  .single-post .sly-song-layout{
    padding: 0 20px;
  }
}

/* Better proportions: main wider, rail slimmer */
@media (min-width: 1025px){
  .single-post .sly-song-layout{
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
  }
}

/* Force the main song video to behave like a premium hero embed */
.single-post .sly-song-main .song-video,
.single-post .sly-song-main .song-video iframe,
.single-post .sly-song-main iframe{
  width: 100% !important;
  max-width: 100% !important;
}

.single-post .sly-song-main .song-video iframe,
.single-post .sly-song-main iframe{
  height: auto !important;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  border-radius: 14px;
  display: block;
}

/* Rail cards should feel secondary */
.single-post .sly-rail-cards{
  gap: 12px;
}

.single-post .sly-card.sly-card--rail{
  box-shadow: 0 10px 25px rgba(0,0,0,0.20);
}

.single-post .sly-card.sly-card--rail .sly-card-media{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.single-post .sly-card.sly-card--rail .sly-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === P5.14 Single Song Container Width Fix === */

/* Expand Astra content container only on single posts */
.single-post .site-content > .ast-container {
  max-width: 1600px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

@media (max-width: 900px) {
  .single-post .site-content > .ast-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Remove any max width cap on the article itself */
.single-post .ast-article-post,
.single-post .ast-article-single {
  max-width: none !important;
}

/* Let our layout use the available space */
.single-post .sly-song-layout {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Better proportions: main wider, rail slimmer */
@media (min-width: 1025px) {
  .single-post .sly-song-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 34px !important;
  }
}
/* === P5.15 Rail Card Density + Playlist Scale === */

/* Rail cards: make them feel like sidebar tiles, not full posters */
.single-post .sly-rail-cards {
  gap: 12px;
}

.single-post .sly-card.sly-card--rail .sly-card-media {
  aspect-ratio: 16 / 8; /* shorter cards */
  overflow: hidden;
}

.single-post .sly-card.sly-card--rail .sly-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reduce play overlay in rail so it doesn't dominate */
.single-post .sly-card.sly-card--rail .sly-play svg {
  width: 44px;
  height: 44px;
  padding: 12px;
}

/* Rail panels spacing consistency */
.single-post .sly-rail-panel {
  padding: 18px;
}

/* Playlist embed: slightly shorter for sidebar */
.single-post .sly-rail-playlist .sly-playlist-frame {
  aspect-ratio: 16 / 10;
}

/* Button: center and tighten */
.single-post .sly-rail-playlist .sly-song-links {
  margin-top: 14px;
  text-align: center;
}
/* === P5.16 Wider Single Song Layout === */

.single-post .site-content > .ast-container{
  max-width: 1760px !important;
}

.single-post .sly-song-layout{
  max-width: 1600px !important;
}
/* === P5.17 Hide Playlist Panel === */

.single-post .sly-rail-playlist{
  display: none !important;
}
/* === P5.21 Song Info Premium Styling === */

.single-post .sly-song-info{
  margin: 18px 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(24, 24, 34, 0.34);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 1px solid rgba(159,140,255,0.28);
}

/* Compact row layout */
.single-post .sly-song-info-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

/* Hide the ugly labels */
.single-post .sly-info-label{
  display: none;
}

/* Turn values into pills */
.single-post .sly-info-value{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(159,140,255,0.10);
  border: 1px solid rgba(159,140,255,0.22);
  color: rgba(244, 244, 246, 0.92);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 0.95rem;
}
/* === P5.22 Remove Song Info Block === */

.single-post .sly-song-info{
  display: none !important;
}
/* === P5.23 Rail Browse Button Centered === */

.single-post .sly-rail-actions {
  text-align: center;
  margin-top: 16px;
}
/* === P6.01 Kit Signup Premium Styling === */

.sly-home-signup {
  margin: 70px auto 0;
  max-width: 900px;
}

.single-post .sly-song-signup {
  max-width: 980px;
  margin: 50px auto 0;
}

.sly-signup {
  border-radius: 18px;
  background: rgba(24, 24, 34, 0.34);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 1px solid rgba(159,140,255,0.28);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.sly-signup-inner {
  padding: 22px 22px 18px;
}

.sly-signup-copy {
  margin-bottom: 14px;
}

.sly-signup-title {
  color: #F4F4F6;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin: 0 0 6px;
}

.sly-signup-subtitle {
  color: rgba(244, 244, 246, 0.75);
  font-size: 0.95rem;
  margin: 0;
}

.sly-signup .formkit-fields {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.sly-signup .formkit-field {
  flex: 1 1 auto;
  margin: 0;
}

.sly-signup .formkit-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(18, 18, 24, 0.28);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(244, 244, 246, 0.92);
}

.sly-signup .formkit-input::placeholder {
  color: rgba(244, 244, 246, 0.55);
}

.sly-signup .formkit-input:focus {
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 3px;
}

.sly-signup .formkit-submit {
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: rgba(159,140,255,0.14);
  border: 1px solid rgba(159,140,255,0.34);
  color: var(--accent-primary);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.sly-signup .formkit-submit > span {
  padding: 12px 18px;
}

.sly-signup .formkit-submit:hover {
  background: rgba(159,140,255,0.20);
  border-color: rgba(159,140,255,0.50);
  color: #F4F4F6;
}

.sly-signup .formkit-submit:focus {
  outline: 2px solid rgba(159,140,255,0.55);
  outline-offset: 3px;
}

.sly-signup-legal {
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(244, 244, 246, 0.65);
}

.sly-signup-legal a {
  color: var(--accent-primary);
  text-decoration: none;
}

.sly-signup-legal a:hover,
.sly-signup-legal a:focus {
  color: #F4F4F6;
  text-decoration: underline;
}

/* Hide Kit branding inside our signup block */
.sly-signup .formkit-powered-by-convertkit-container,
.sly-signup .formkit-powered-by-convertkit {
  display: none !important;
}

@media (max-width: 768px) {
  .sly-signup .formkit-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .sly-signup .formkit-submit {
    width: 100%;
  }
}
/* === P6.02 Footer Tighten + Copyright === */

.site-footer,
.footer-wrap,
.ast-footer-wrap {
  background: transparent;
}

.site-footer .ast-container {
  padding-top: 26px;
  padding-bottom: 26px;
}

/* Tighten footer menu spacing */
.site-footer .footer-nav-wrap,
.site-footer .footer-navigation,
.site-footer .ast-footer-widget-area {
  margin: 0;
  padding: 0;
}

/* Footer links */
.site-footer a {
  color: rgba(244, 244, 246, 0.75);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #F4F4F6;
  text-decoration: underline;
}

/* === P6.03 Footer Copyright Placement Fix === */

.sly-footer-copy{
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(244, 244, 246, 0.55);
  letter-spacing: 0.3px;
  background: transparent !important;
  border: 0 !important;
}

/* Kill any Astra footer banding or separators */
.site-footer,
.ast-footer-wrap,
.ast-small-footer,
.ast-small-footer-wrap{
  background: transparent !important;
  border-top: 0 !important;
}
/* === P6.04 Kill Footer Banding === */

.site-footer,
.ast-footer-wrap,
.ast-small-footer,
.ast-small-footer-wrap,
.site-below-footer-wrap,
.ast-below-footer-wrap,
.ast-footer-overlay,
.ast-footer-overlay-inner,
.ast-small-footer-wrap .ast-container,
.site-below-footer-wrap .ast-container {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
/* === P6.05 Footer Copyright Inline + No Band === */

.sly-footer-copy{
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(244, 244, 246, 0.55);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Astra footer band killers */
#colophon,
#colophon .ast-container,
.site-footer,
.site-below-footer-wrap,
.site-below-footer-wrap .ast-container,
.ast-small-footer,
.ast-small-footer-wrap,
.ast-footer-wrap,
.ast-footer-wrap .ast-container{
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
/* === P6.06 Footer Spacing Tighten === */

.site-below-footer-wrap .ast-container {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.sly-footer-copy {
  margin-top: 6px !important;
  line-height: 1.2;
}
/* === P6.07 Align Explore CTA With Signup === */

.sly-home-more {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* =========================
   Footer Copyright Patch
========================= */

.site-footer .sly-footer-copy {
  margin-top: 18px;
  font-size: 0.9rem;
  opacity: 0.7;
}

.site-footer .sly-footer-copy p {
  margin: 0;
}
/* Music Genre Filter */

.sly-music-filter {
	margin: 4rem auto 3rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 420px;
}

.sly-music-filter-title {
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 1.25rem;
	opacity: 0.85;
}

.sly-music-filter select {
	width: 260px;
	height: 48px;              /* explicit height */
	line-height: 48px;         /* vertically center text */
	padding: 0 1rem;           /* horizontal only */
	border-radius: 12px;
	background: #1e1e23;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.2);
	font-size: 1rem;
	text-align: center;
	box-sizing: border-box;
}
.sly-music-filter {
	position: relative;
}
@media (max-width: 768px) {
	.sly-music-filter select {
		-webkit-appearance: none;
		appearance: none;
		background-color: #1e1e23 !important;
		color: #ffffff !important;
		border-radius: 12px;
	}
}