html, body {
  overscroll-behavior-y: contain;
}
/* Ocultar header del theme / Elementor / etc. */
body header.site-header,
body .site-header,
body .elementor-location-header,
body .elementor-header,
body .page-header{
  display: none !important;
}

/* Asegurar que el contenido no quede con márgenes por un header que ya no está */
body .site-content,
body #content,
body .elementor-location-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

:root{
  --mcs-bg: #FFF;
  --mcs-bg-soft: #F7F7F7;
  --mcs-ink: #000;
  --mcs-ink-2: #161616;
  --mcs-border: #161616;
  --mcs-radius-xl: 40px;
  --mcs-radius-lg: 24px;
  --mcs-radius-md: 16px;
  --mcs-gap-xl: 40px;
  --mcs-gap-lg: 24px;
  --mcs-gap-md: 16px;
  --mcs-gap-sm: 8px;

  /* type scale */
  --mcs-fs-64: 64px;
  --mcs-fs-32: 32px;
  --mcs-fs-24: 24px;
  --mcs-fs-20: 20px;
  --mcs-fs-16: 16px;
  --mcs-fs-14: 14px;
  --mcs-fs-13: 13px;
  --mcs-fs-12: 12px;
  --mcs-shadow-sm: 0 3px 6px rgba(0,0,0,.12);
}

/* MOBILE: apply Bruno's downscaling */
@media (max-width: 768px){
  :root{
    --mcs-radius-xl: 32px;   /* 40 → 32 */
    --mcs-radius-lg: 16px;   /* 24 → 16 */
    --mcs-gap-xl: 24px;      /* 40 → 32 */
    --mcs-gap-lg: 16px;      /* 24 → 16 */
    --mcs-gap-md: 12px;      /* 16 → 12 */
    --mcs-fs-64: 48px;       /* visual balance */
    --mcs-fs-32: 24px;       /* 32 → 24 */
    --mcs-fs-24: 16px;       /* 24 → 16 */
    --mcs-fs-20: 16px;
    --mcs-fs-16: 14px;
  }
}

/* --- Core containers (replaces inline .mcs-div blocks) --- */
.mcs-div{
  padding: var(--mcs-gap-xl) !important;
  background: var(--mcs-bg) !important;
  border-radius: var(--mcs-radius-xl) !important;
}
@media (max-width: 768px){
  .mcs-div{
    padding: var(--mcs-gap-xl) !important;
    border-radius: var(--mcs-radius-xl) !important;
  }
}

/* --- Grid + Cards (albums) --- */
/* Desktop: 6 columnas */
.mcs-grid{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: var(--mcs-gap-md) !important;
}

/* Tablet: 4 columnas */
@media (max-width: 1199px){
  .mcs-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobile: 2 columnas */
@media (max-width: 768px){
  .mcs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.mcs-card{
  background: var(--mcs-bg-soft) !important;
  border-radius: var(--mcs-radius-lg) !important;
  text-align: center !important;
  font-size: var(--mcs-fs-13) !important;
  padding: var(--mcs-gap-md) !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  border: 1px solid transparent !important;
}
.mcs-card:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--mcs-shadow-sm) !important;
  border-color: rgba(22,22,22,.08) !important;
}
.mcs-card img{
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  background: #ddd !important;
  margin-bottom: 6px !important;
}

.mcs-album-title{ font-weight: 600 !important; color: var(--mcs-ink) !important; }
.mcs-album-artist{ color: #666 !important; }
.mcs-album-year{ color: #999 !important; font-size: var(--mcs-fs-12) !important; }

/* --- Search bars --- */
#mcs-album-discover-search-input, 
#mcs-search-box input,
#mcs-home-search-input,
#mcs-user-query{
  border-radius: var(--mcs-radius-md) !important;
  padding: 16px 24px !important;
  font-size: var(--mcs-fs-16) !important;
  line-height: var(--mcs-fs-16) !important;
  border: 1px solid #ccc !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}
#mcs-search-btn,
#mcs-home-search-btn,
#mcs-user-btn, button, #mcs-discover-more{
  padding: 12px 24px !important;
  border: none !important;
  background: var(--mcs-ink-2) !important;
  color: #F7F7F7 !important;
  border-radius: var(--mcs-radius-md) !important;
  cursor: pointer !important;
  font-size: var(--mcs-fs-16) !important;
  line-height: var(--mcs-fs-16) !important;
  align-self: start;
}

/* --- Tabs (Profile) --- */
.mcs-tab-content{
  background: var(--mcs-bg) !important;
  padding: 24px 40px 40px !important;
  border-radius: 0 0 var(--mcs-radius-xl) var(--mcs-radius-xl) !important;
}
@media (max-width: 768px){
  .mcs-tab-content{
    padding: 16px 16px 24px !important; /* 24/40→16/24 */
    border-radius: 0 0 var(--mcs-radius-xl) var(--mcs-radius-xl) !important;
  }
}

.mcs-tab-buttons{
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}
.mcs-tab-btn{
  width: 50% !important;
  border-radius: var(--mcs-radius-lg) var(--mcs-radius-lg) 0 0 !important;
  padding: 16px !important;
  background: var(--mcs-bg-soft) !important;
  color: var(--mcs-ink-2) !important;
  cursor: pointer !important;
  transition: background-color .3s ease, color .3s ease !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}
.mcs-tab-btn:hover{ background: var(--mcs-bg) !important; color: var(--mcs-ink) !important; }
.mcs-tab-btn.active{ background: var(--mcs-bg) !important; color: var(--mcs-ink) !important; }

/* Subtabs */
.mcs-subtabs{ display:flex !important; gap:0 !important; padding:0 0 16px !important; gap: 8px !important;}
.mcs-subtab-btn{
  width: 33% !important;
  border-radius: var(--mcs-radius-md) !important;
  padding: 16px !important;
  background: var(--mcs-bg-soft) !important;
  color: var(--mcs-ink-2) !important;
  cursor: pointer !important;
  transition: background-color .3s ease, color .3s ease !important;
  border: 1px solid transparent !important;
}
.mcs-subtab-btn:hover{ background: var(--mcs-ink-2) !important; color: #F7F7F7 !important; }
.mcs-subtab-btn.active{ background: var(--mcs-ink-2) !important; color: #F7F7F7 !important; }

/* --- Profile header counters --- */
.mcs-profile-header .mcs-counter-value{
  color:#fff; margin:0; font-size: var(--mcs-fs-64) !important; line-height: 1 !important;
}
.mcs-profile-header .mcs-counter-label{
  font-size: var(--mcs-fs-16) !important; color:#f7f7f7; line-height: 1.1 !important;
}
@media (max-width: 768px){
  .mcs-profile-header{
    gap: var(--mcs-gap-xl) !important;
  }
  .mcs-subtab-btn{
      padding: 12px 8px !important;
    }
}

/* --- Follow modal --- */
#mcs-follow-modal{
  background: rgba(0,0,0,.6) !important;
}
#mcs-follow-content{
  background: var(--mcs-bg) !important;
  border-radius: var(--mcs-radius-lg) !important;
  max-width: 640px !important;
  width: 90% !important;
  max-height: 80% !important;
  overflow:auto !important;
  padding: 20px !important;
  position: relative !important;
}
#mcs-close-follow{
    padding: 0px !important;
    border: 0px !important;
    color: #161616 !important;
    box-shadow: none !important;
  position:absolute !important;
  top:24px !important; right:24px !important;
  border:none !important; background:none !important;
  font-size: 18px !important; cursor:pointer !important;
}

/* --- User cards (search / discover) --- */
.mcs-user-card{
  display:flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--mcs-gap-md) !important;
  background: var(--mcs-bg-soft) !important;
  border-radius: var(--mcs-radius-lg) !important;
  padding: var(--mcs-gap-lg) !important;
  margin-bottom: var(--mcs-gap-lg) !important;
}
.mcs-user-card img{
  width:80px !important; height:80px !important; border-radius:50% !important; object-fit:cover !important;
}
.mcs-user-info{ display:flex !important; flex-direction:column !important; gap:4px !important; }
.mcs-user-name{ font-weight:600 !important; font-size: var(--mcs-fs-16) !important; color: var(--mcs-ink) !important; }
.mcs-user-username{ font-size: var(--mcs-fs-12) !important; color: var(--mcs-ink-2) !important; }
.mcs-user-actions{
  margin-left:auto !important;
  text-align:right !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.mcs-view-profile{ border:none !important; background:#eee !important; color: var(--mcs-ink) !important; }
.mcs-follow-toggle, #mcs-follow-btn { border:1px solid var(--mcs-border) !important; background:#fff !important; color: var(--mcs-ink) !important; }
.mcs-follow-toggle.following, #mcs-follow-btn.following{ border:1px solid var(--mcs-bg) !important; background: var(--mcs-ink-2) !important; color:#fff !important; }

/* mini album covers strip */
.mcs-mini-albums{ display:flex !important; gap: var(--mcs-gap-sm) !important; width:100% !important; }
.mcs-mini-albums img{ width:64px !important; height:64px !important; border-radius:0 !important; object-fit:cover !important; background:#ccc !important; }
@media (max-width:768px){
  .mcs-mini-albums img{ width:56px !important; height:56px !important; }
}

/* --- Album single header + tracklist --- */
.mcs-album-single{
  display:flex !important;
  gap: 20px !important;
  align-items:flex-start !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.mcs-album-single .mcs-cover-wrap{ flex: 0 0 220px !important; max-width: 220px !important; }
.mcs-album-single .mcs-cover-wrap img{ width:100% !important; border-radius: 8px !important; object-fit: cover !important; }
@media (max-width:768px){
  .mcs-album-single .mcs-cover-wrap{ flex: 1 1 140px !important; max-width: 240px !important; }
}

#mcs-tracklist{ list-style:none !important; padding-left:0 !important; column-count: 4 !important; column-gap: 24px !important; }
#mcs-tracklist li{ break-inside: avoid !important; margin-bottom:4px !important; font-size: var(--mcs-fs-12) !important; }
@media (max-width: 1024px){
  #mcs-tracklist{ column-count: 3 !important; }
}
@media (max-width: 768px){
  #mcs-tracklist{ column-count: 2 !important; column-gap: 16px !important; }
}

/* --- Collection / wishlist buttons on single --- */
#mcs-collection-box{
  display:flex !important;
  flex-direction: row !important;
  gap: var(--mcs-gap-lg) !important;
}
#mcs-collection-box .mcs-save{
  margin-top: 6px !important;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  background: #222 !important;
  color: #fff !important;
}
.mcs-wishlist-btn{
  padding: 8px 12px !important;
  border: 1px solid #222 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
@media (max-width: 768px){
  #mcs-collection-box{ flex-direction: column !important; gap: var(--mcs-gap-md) !important; }
}

/* --- Activity feed --- */
.mcs-activity-following .mcs-activity-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--mcs-gap-lg) !important;
}

/* Cada item */
.mcs-activity-item {
  font-size: var(--mcs-fs-14) !important;
  line-height: 1.4 !important;
  border: 1px solid var(--mcs-border) !important;
  padding: var(--mcs-gap-md) !important;
  border-radius: var(--mcs-radius-lg) !important;
  background: var(--mcs-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 calc(25% - var(--mcs-gap-lg)) !important; /* 4 items por fila */
  box-sizing: border-box !important;
}
@media (min-width: 769px) {
  .mcs-activity-item {
      max-width: 247px !important;
  }
}
/* Mobile: 1 item por fila */
@media (max-width: 768px) {
  .mcs-activity-item {
    flex: 1 1 100% !important; /* ocupa todo el ancho */
  }
}

.mcs-activity-time{ color:#999 !important; font-size: var(--mcs-fs-12) !important; }

#mcs-home-search-less, #mcs-discover-less {
    margin-left: 16px !important;
}
@media (max-width: 768px) {
  #mcs-home-search-less, #mcs-discover-less {
        margin-left: 40px !important;
        margin-right: 40px !important;
        margin-top: 16px !important;
    }
}


/* --- Misc helpers --- */
.mcs-hide-on-mobile{ display:block !important; }
@media (max-width: 768px){ .mcs-hide-on-mobile{ display:none !important; } }
.mcs-show-on-mobile{ display:none !important; }
@media (max-width: 768px){ .mcs-show-on-mobile{ display:block !important; } }

/* Ensures common “Mostrar más” buttons are consistent */
.mcs-btn-outline{
  padding:10px 16px !important;
  border:1px solid var(--mcs-ink-2) !important;
  border-radius: 12px !important;
  background:#fff !important;
  cursor:pointer !important;
}

.mcs-user-link { cursor: pointer; }

/* Grid 2 cols (se apila en mobile) */
.mcs-cta-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:16px;
  margin:16px 0 8px;
}
@media (max-width: 720px){
  .mcs-cta-grid{ grid-template-columns: 1fr; }
}

/* Tiles base */
.mcs-tile{
  background:#F7F7F7;

  border-radius:16px;
  padding:16px;
}
.mcs-tile-head{ margin-bottom:12px; }
.mcs-tile-title{
  margin:0;
  font-size:18px;
  line-height:20px;
  color:#161616;
}
.mcs-tile-sub{
  color:#666;
  font-size:12px;
}

/* Toggles de formato */
.mcs-format-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.mcs-format-toggle{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #161616 !important;
  border-radius:12px;
  background:transparent !important;
  color:#161616 !important;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.mcs-format-toggle:hover{ transform: translateY(-1px); }
.mcs-format-toggle.is-active{
  background:#161616 !important;
  color:#FFF !important;
}
.mcs-format-toggle .mcs-icon{ display:inline-flex; }

/* Botón primario */
.mcs-primary{
  width:100%;
  padding:12px 16px;
  border:none;
  border-radius:12px;
  background:#161616;
  color:#FFF;
  cursor:pointer;
  font-weight:600;
  transition:opacity .12s ease, transform .12s ease;
}
.mcs-primary:hover{ opacity:.9; transform: translateY(-1px); }


#mcs-user-search, .mcs-album-discover, .mcs-home{
    gap: var(--mcs-gap-xl) !important;
}




/* Wishlist toggle */
.mcs-wishlist-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid #161616 !important;
  border-radius:12px;
  background:transparent !important;
  color:#161616 !important;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.mcs-wishlist-toggle:hover{ transform: translateY(-1px); }

/* Dos estados con SVGs custom */
.mcs-wishlist-toggle .icon-heart,
.mcs-wishlist-toggle .icon-broken{ display:none; }
.mcs-wishlist-toggle .label-remove{ display:none; }

.mcs-wishlist-toggle.is-active{
  background:#161616 !important;
  color:#FFF !important;
}
.mcs-wishlist-toggle.is-active .icon-heart{ display:inline; }    /* activo = corazón */
.mcs-wishlist-toggle.is-active .label-remove{ display:inline; }
.mcs-wishlist-toggle.is-active .label-add{ display:none; }

.mcs-wishlist-toggle:not(.is-active) .icon-broken{ display:inline; } /* inactivo = corazón roto */
.mcs-wishlist-toggle:not(.is-active) .label-add{ display:inline; }
.mcs-wishlist-toggle:not(.is-active) .label-remove{ display:none; }

/* Rayita interior del corazón activo (detalle sutil) */
.mcs-wishlist-toggle .icon-heart .slash{ opacity:.18; }

/* Mensajes */
.mcs-msg{
  margin-top:8px;
  font-size:12px;
  color:#666;
  display:none;
}


/* Íconos inline */
.mcs-icon{ display:inline-block; vertical-align:middle; }

/* “Badges” de contador con ícono + número */
.mcs-counter{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.mcs-counter .count-wrap{
  display:flex; align-items:center; gap:10px;
}
.mcs-counter .count-num{
  color:#fff; font-size:64px; line-height:1; margin:0;
  margin-bottom: -8px;
}
.mcs-counter .count-label{
  font-size:16px; color:#f7f7f7; line-height:18px; text-align: center;
}
.mcs-counter .icon-wrap{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#161616; color:#fff;
}
@media (max-width:720px){
  .mcs-counter .count-num{ font-size:48px; }
}
p .mcs-icon.mr{ margin-right:8px; }

.mcs-show-followers, .mcs-show-following, .mcs-follow-stats {
    font-size: var(--mcs-fs-16);
    text-decoration: none !important;
}

.um-profile-photo a.um-profile-photo-img {
    border: none !important;
    box-shadow: var(--mcs-shadow-sm) !important;
}


.mcs-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #161616;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 12px;
  margin: 0 !important; /* por si el theme mete márgenes */
}

/* Solo en mobile, si querés esconderla en desktop */
@media (min-width: 769px){
  .mcs-bottom-nav{
    display: none;
  }
}

.mcs-bottom-item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #F7F7F7;
}

.mcs-bottom-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.mcs-bottom-icon svg{
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.mcs-bottom-item.is-active .mcs-bottom-icon{
  background: #FFFFFF;
}

.mcs-bottom-item.is-active{
  color: #161616;
}


/* === Header superior === */
.mcs-top-header{
  background: #161616;
  z-index: 998;
  height: 64px;
}

/* Desktop / tablet: fijo arriba */
@media (min-width: 768px){
  .mcs-top-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
  }
}

.mcs-top-header-inner{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0px 0px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px !important;
}

.mcs-top-logo{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #f7f7f7;
  text-align: left;
}
a.custom-logo-link {
    align-self: start;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #f7f7f7;
    text-align: left;
    justify-content: flex-start;
    flex-direction: row;
    width: -webkit-fill-available;
}

.mcs-top-logo img, .custom-logo-link img{
  height: auto !important;
  width: 150px !important;
}

.mcs-logo-text{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Navegación derecha */
.mcs-top-nav{
  display: flex;
  align-items: center;
  gap: 24px;
}

.mcs-top-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px;
  border-radius: 999px;
  text-decoration: none;
  color: #f7f7f7;
  font-size: 14px;
  line-height: 1;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.mcs-top-link:hover{
  background: #f7f7f7;
  color: #161616;
}

.mcs-top-icon{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* el activo lo cambia */
}

.mcs-top-icon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.mcs-top-label{
  white-space: nowrap;
}

/* Activo: icono con círculo blanco y texto más fuerte */
.mcs-top-link.is-active{
  font-weight: 600;
  color: #161616;
}

.mcs-top-link.is-active .mcs-top-icon{
  background: #F7f7f7;
}

/* === Mobile: solo logo centrado, header NO fijo === */
@media (max-width: 767px){
  .mcs-top-header{
    position: static; /* no fixed en mobile */
  }
    
    .mcs-top-logo img, .custom-logo-link img{
      height: auto !important;
      width: 125px !important;
      margin: 0 auto;
    }
  .mcs-top-header-inner{
    justify-content: center;
  }

  .mcs-top-logo, .custom-logo-link{
    margin: 0 auto;
  }

  .mcs-top-nav{
    display: none;
  }
}