/* ==========================================================================
   BH Top Nav + Slide Menu
   Movido desde el <style id="bh-topnav-sa-css"> inline de beatshouse-plugin.php
   el 2026-09-20. Vivía inline en cada página, así que cualquier cambio de menú
   solo se veía cuando expiraba el HTML cacheado de TODO el sitio — un deploy
   podía tardar minutos en aparecer, y por página. Como archivo lo versiona
   filemtime() y se ve apenas se sube.
   Se encola ÚLTIMO (prioridad 9999, depende de beatshouse-nav) a propósito:
   inline iba en el <body> y le ganaba por orden a toda hoja del <head>. Cargarlo
   al final conserva esa posición. Las reglas van tal cual estaban.
   ========================================================================== */

/* ── Nav bar ── */
.bh-topnav{
  position:fixed;top:0;left:0;right:0;z-index:99999;pointer-events:auto;
  background:rgba(4,4,6,.98);
  border-bottom:1px solid rgba(34,182,255,.1);
  padding:env(safe-area-inset-top,0px) 0 0 0;
}
.bh-topnav__bar{
  display:flex;justify-content:center;align-items:center;gap:0;
  padding:0;height:46px;
  background:transparent;border:0;box-shadow:none;
  box-sizing:border-box;width:100%;
}
.bh-topnav__bar::before{display:none;}
/* ── Items ── */
.bh-topnav .bh-dock-item{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1 1 0;width:auto;max-width:none;min-width:0;
  height:46px;min-height:44px;
  padding:0;border:0;border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.6);
  font:700 9px/1 'DM Mono','Space Mono',monospace;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:color .18s ease;
  isolation:isolate;
}
/* Transparent hit-target overlay */
.bh-topnav .bh-dock-item::before{
  content:'';position:absolute;inset:0;z-index:2;
  pointer-events:auto;cursor:pointer;
}
.bh-topnav .bh-dock-item > *{position:relative;z-index:1;pointer-events:none;}
/* Underline active indicator */
.bh-topnav .bh-dock-item::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:#22B6FF;
  transform:scaleX(0);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:3;
}
.bh-topnav .bh-dock-item__label{
  font:700 9px/1 'DM Mono','Space Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;
  display:block;pointer-events:auto;white-space:nowrap;
}
/* Narrowest phones: 7 tap targets get tight — trim label tracking + icon so
   nothing wraps or clips. */
@media(max-width:400px){
  .bh-topnav .bh-dock-item__label{font-size:7.5px;letter-spacing:.05em;}
  .bh-topnav .bh-dock-item i{font-size:14px;}
}
.bh-topnav .bh-dock-item i{
  font-size:15px;line-height:1;
  display:inline-flex;align-items:center;
  opacity:.65;transition:opacity .18s ease;
}
/* Active */
.bh-topnav .bh-dock-item.active{color:#fff;background:transparent;}
.bh-topnav .bh-dock-item.active::after{transform:scaleX(1);}
.bh-topnav .bh-dock-item.active i,.bh-topnav .bh-dock-item.active svg{opacity:1;}
@media(hover:hover){
  .bh-topnav .bh-dock-item:hover:not(.active){color:rgba(255,255,255,.65);background:rgba(255,255,255,.03);}
  .bh-topnav .bh-dock-item:hover i{opacity:1;}
}
/* Menu button */
.bh-topnav .bh-dock-item--menu{
  /* Equal-width like the other dock items so the 4-item bar (Home·Menu·Account·Cart)
     spaces evenly — was a fixed 52px centre-axis divider back when Browse made it 5.
     !important + inline (renders after bh-nav.css): bh-nav.css pins the menu to a fixed
     36/38/46px with !important across several breakpoints; matching !important here (later
     source order, equal specificity) is what actually lets it grow to an equal slot. */
  flex:1 1 0 !important;width:auto !important;min-width:0 !important;max-width:none !important;
  border:0 !important;border-radius:0;
  background:transparent;
  transition:color .18s,background .18s;
}
.bh-topnav .bh-dock-item--menu::after{display:none;}
.bh-topnav .bh-dock-item--menu.active,
.bh-topnav .bh-dock-item--menu.is-menu-open{
  color:#22B6FF;background:rgba(34,182,255,.07);
}
.bh-topnav .bh-dock-item--menu .bh-dock-menu-icon{width:12px;height:12px;overflow:visible;}
.bh-topnav .bh-dock-item--menu .bh-menu-dots{opacity:1;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);}
.bh-topnav .bh-dock-item--menu .bh-menu-x{opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);}
.bh-topnav .bh-dock-item--menu.is-menu-open{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);}
.bh-topnav .bh-dock-item--menu.is-menu-open .bh-menu-dots{opacity:0;transform:rotate(45deg) scale(.5);}
.bh-topnav .bh-dock-item--menu.is-menu-open .bh-menu-x{opacity:1;transform:scale(1) rotate(0);}
/* Cart badge + notifications badge (clase propia: el hidrato del carrito
   reescribe .bh-dock-badge en cada carga). */
.bh-topnav .bh-dock-badge,
.bh-topnav .bh-notif-badge{
  position:absolute;top:8px;right:calc(50% - 14px);
  min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;
  background:#22B6FF;color:#fff;
  font:700 8px/14px 'DM Mono',monospace;
  text-align:center;pointer-events:none;
}
.bh-topnav .bh-dock-badge.is-empty,
.bh-topnav .bh-notif-badge.is-empty{display:none;}
/* Page root offset */
#bh-page-root{padding-top:max(64px,calc(46px + env(safe-area-inset-top,0px) + 10px));}
@media(max-width:700px){
  .bh-topnav__bar::before{display:none;}
  .bh-topnav__bar{justify-content:center;padding:0;gap:0;height:46px;}
}
@media(max-width:400px){
  .bh-topnav__bar{height:42px;}
  .bh-topnav .bh-dock-item{height:42px;}
  .bh-topnav .bh-dock-item__label{font-size:8px;letter-spacing:.1em;}
  .bh-topnav .bh-dock-item--menu{flex:1 1 0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
}
/* .bh-topnav__primary: defensive base only — the inline desktop primary-nav
   was reverted to "solo dock de íconos" (see next comment + changelog). No
   primary markup is rendered; destinations live in the Menu. */
.bh-topnav__primary{display:none;}
/* Desktop header row removed (user: "solo dock de íconos") — the nav is now the same
   even 4-icon dock (Home·Menu·Account·Cart) at ALL widths, falling back to the base
   .bh-topnav__bar (centered) + .bh-dock-item (flex:1). .bh-topnav__primary stays
   display:none (base); its destinations (Beats/Songs/Mastering/…) live in the Menu (::). */

/* ── Full-page menu overlay ── */
.bh-slide-backdrop{
  display:none;position:fixed;inset:0;z-index:99997;
  background:rgba(4,3,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.bh-slide-backdrop.is-open{display:block;}
.bh-slide-menu{
  position:fixed;top:58px;right:0;left:0;bottom:0;z-index:99998;
  /* Ancho completo (2026-09-20). Era un cajón de 360px arriba de 640px de
     viewport — abajo de eso bh-nav.css ya lo hacía full width con !important,
     así que el desktop era la excepción rara. Con el ancho entero las secciones
     entran en columnas (ver .bh-fullmenu-col) en vez de apilarse en una tira. */
  width:100%;max-width:none;
  background:#0a0917;
  border-left:0;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;
}
.bh-slide-menu.is-open{transform:translateX(0);}

/* Menu close button */
.bh-menu-close-btn{
  position:absolute;top:14px;right:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.35);width:28px;height:28px;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;transition:all .14s;z-index:2;
}
.bh-menu-close-btn:hover{color:#fff;background:rgba(255,255,255,.08);}

/* Head: user card */
.bh-slide-menu__head{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.bh-slide-menu__head-link{display:contents;text-decoration:none;}
.bh-slide-menu__avatar{
  width:38px;height:38px;flex-shrink:0;border-radius:9px;
  object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 8px rgba(0,0,0,.35);
}
.bh-slide-menu__name{
  margin:0 0 3px;font:600 13px/1.2 'Manrope',system-ui,sans-serif;
  color:rgba(255,255,255,.88);letter-spacing:-.01em;
}
.bh-slide-menu__role{
  margin:0;font:600 8.5px/1 'DM Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

/* Single-column body */
.bh-fullmenu-body{
  display:flex;flex-direction:column;flex:1;
  padding:8px 0 4px;
}
.bh-fullmenu-col{
  /* El layout de esta rejilla lo define bh-nav.css (.bh-fullmenu-col, con
     !important); acá solo queda lo que no es layout, para no tener dos fuentes
     de verdad del mismo grid. */
  padding:0;
}
/* Los hairlines entre secciones separaban una lista vertical; en columnas
   sobran. */
.bh-fullmenu-div{display:none;}
/* Cabecera, pie y legal alineados a la misma columna que el cuerpo. */
.bh-slide-menu__head > *,
.bh-fullmenu-footer,
.bh-fullmenu-legal{max-width:1180px;margin-left:auto;margin-right:auto;width:100%;
  /* border-box: en móvil estos tres llevan padding lateral (16px) y con
     width:100% content-box medían 407 dentro de un menú de 375 — el brand del
     footer terminaba 16px fuera del viewport. El entorno local lo tapaba con un
     reset global que producción no tiene. */
  box-sizing:border-box;}

/* Section label — <summary> de cada categoría colapsable */
.bh-fullmenu-sec{display:flex;flex-direction:column;padding:14px 16px 6px;}
details.bh-fullmenu-sec{display:block;}
details.bh-fullmenu-sec[open]{padding-bottom:10px;}
.bh-fullmenu-sec-lbl{
  font:700 9px/1 'DM Mono',monospace;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.22);
  padding:6px 4px 10px;
  display:flex;align-items:center;gap:7px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  list-style:none;
}
.bh-fullmenu-sec-lbl::-webkit-details-marker{display:none;}
@media(hover:hover){.bh-fullmenu-sec-lbl:hover{color:rgba(255,255,255,.5);}}
.bh-fullmenu-sec-lbl::before{
  content:'';display:block;width:2px;height:9px;border-radius:2px;
  background:currentColor;flex-shrink:0;
}
/* Chevron CSS (sin depender de Font Awesome en ::after) */
.bh-fullmenu-sec-lbl::after{
  content:'';margin-left:auto;width:5px;height:5px;flex-shrink:0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;
  transition:transform .18s ease;
}
details.bh-fullmenu-sec[open] > .bh-fullmenu-sec-lbl::after{transform:translateY(1px) rotate(-135deg);}

/* Section divider */
.bh-fullmenu-div{
  height:1px;background:rgba(255,255,255,.05);
  margin:4px 16px;
}

/* Menu items */
.bh-slide-menu__item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;width:100%;border-radius:7px;
  border:0;background:transparent;
  color:rgba(255,255,255,.58);
  font:500 13px/1 'Manrope',system-ui,sans-serif;
  text-decoration:none;cursor:pointer;
  transition:color .12s,background .12s;
  -webkit-tap-highlight-color:transparent;box-sizing:border-box;
}
@media(hover:hover){.bh-slide-menu__item:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.05);}}
.bh-slide-menu__item:active{background:rgba(255,255,255,.07)!important;}
.bh-slide-menu__item i{
  font-size:13px;width:17px;text-align:center;flex-shrink:0;
  color:rgba(255,255,255,.28);transition:color .12s;
}
@media(hover:hover){.bh-slide-menu__item:hover i{color:rgba(255,255,255,.7);}}
.bh-slide-menu__item span{flex:1;min-width:0;}

.bh-slide-menu__item--primary{
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}
@media(hover:hover){.bh-slide-menu__item--primary:hover{background:rgba(255,255,255,.11);color:#fff;}}
.bh-slide-menu__item--primary i{color:rgba(255,255,255,.65)!important;}
.bh-slide-menu__item--danger{color:rgba(255,255,255,.22);}
@media(hover:hover){.bh-slide-menu__item--danger:hover{color:rgba(255,255,255,.48);background:rgba(255,255,255,.04);}}
.bh-slide-menu__item--active{color:rgba(255,255,255,.95)!important;background:rgba(255,255,255,.08)!important;}
.bh-slide-menu__item--active i{color:rgba(255,255,255,.7)!important;}
.bh-slide-menu__badge{
  margin-left:auto;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);
  font:700 9px/1.7 'DM Mono',monospace;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
  letter-spacing:.06em;white-space:nowrap;
}

/* Footer */
.bh-fullmenu-footer{
  margin-top:auto;
  padding:12px 16px;border-top:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;gap:6px;
}
.bh-fullmenu-footer__brand{
  margin-left:auto;
  font:800 8px/1 'Syne','Manrope',sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.1);pointer-events:none;
}
.bh-fullmenu-legal{
  padding:4px 16px 14px;display:flex;gap:8px;align-items:center;
  font:600 9px/1 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
}
.bh-fullmenu-legal a{color:rgba(255,255,255,.2);text-decoration:none;transition:color .14s;}
.bh-fullmenu-legal a:hover{color:rgba(255,255,255,.5);}
.bh-fullmenu-legal span{color:rgba(255,255,255,.1);}
.bh-slide-menu__sep{height:1px;background:rgba(255,255,255,.04);margin:2px 0;}

@media(max-width:680px){
  .bh-slide-menu{top:54px;width:100vw;border-left:none;}
}

/* ── Favorites panel (assets/js/bh-favorites.js) ───────────────────────────
   Overlay propio para que Favorites abra sobre cualquier página, sin depender
   del stage de la home. */
.bh-favs{position:fixed;inset:0;z-index:100000;}
.bh-favs[hidden]{display:none!important;}
.bh-favs__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s;
}
.bh-favs.is-open .bh-favs__backdrop{opacity:1;}
.bh-favs__sheet{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);
  display:flex;flex-direction:column;
  background:#0b0b0d;border-left:1px solid rgba(255,255,255,.07);
  transform:translateX(24px);opacity:0;transition:transform .2s,opacity .2s;
}
.bh-favs.is-open .bh-favs__sheet{transform:none;opacity:1;}
.bh-favs__head{
  display:flex;align-items:center;gap:10px;
  padding:16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.bh-favs__title{
  margin:0;color:#fff;
  font:800 13px/1 'Syne','Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;
}
.bh-favs__close{
  margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);
}
.bh-favs__close:hover{background:rgba(255,255,255,.12);color:#fff;}
.bh-favs__list{flex:1;overflow-y:auto;padding:8px;}
.bh-favs__item{display:flex;align-items:center;gap:6px;}
.bh-favs__open{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:10px;text-decoration:none;
}
.bh-favs__open:hover{background:rgba(255,255,255,.05);}
.bh-favs__art{
  width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;
  background:rgba(255,255,255,.06);
}
.bh-favs__art--ph{
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);
}
.bh-favs__info{min-width:0;display:flex;flex-direction:column;gap:2px;}
.bh-favs__name{
  color:#fff;font:700 12px/1.3 'Manrope',sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bh-favs__by{color:rgba(255,255,255,.4);font:600 10px/1 'DM Mono',monospace;}
.bh-favs__price{
  margin-left:auto;flex:none;
  color:rgba(255,255,255,.55);font:700 10px/1 'DM Mono',monospace;
}
.bh-favs__rm{
  flex:none;width:28px;height:28px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.3);
}
.bh-favs__rm:hover{background:rgba(255,60,60,.14);color:#ff6b6b;}
.bh-favs__empty{padding:40px 16px;text-align:center;color:rgba(255,255,255,.45);}
.bh-favs__empty h4{margin:0 0 6px;color:#fff;font:800 13px/1.2 'Syne',sans-serif;}
.bh-favs__empty p{margin:0;font:600 11px/1.5 'Manrope',sans-serif;}

@media(max-width:680px){
  .bh-favs__sheet{width:100vw;border-left:none;}
}

/* ── Notifications (assets/js/bh-notifications.js) ──────────────────────────
   Panel de la campana. Reusa el sheet de Favorites (.bh-favs*); aquí va solo
   lo propio. El badge comparte la regla del carrito (arriba). */
.bh-notif__markall{
  margin-left:auto;padding:7px 10px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  font:700 10px/1 'DM Mono',monospace;letter-spacing:.04em;
}
.bh-notif__markall:hover{background:rgba(255,255,255,.12);color:#fff;}
.bh-notif .bh-favs__close{margin-left:0;}
.bh-notif__item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px;border-radius:10px;text-decoration:none;
  color:rgba(255,255,255,.55);
}
a.bh-notif__item:hover{background:rgba(255,255,255,.05);}
.bh-notif__item.is-unread{color:#fff;background:rgba(34,182,255,.06);}
.bh-notif__icon{
  flex:none;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);font-size:12px;
}
.bh-notif__item.is-unread .bh-notif__icon{background:rgba(34,182,255,.14);color:#22B6FF;}
.bh-notif__body{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px;}
.bh-notif__text{font:600 12px/1.4 'Manrope',sans-serif;overflow-wrap:anywhere;}
.bh-notif__ago{color:rgba(255,255,255,.35);font:600 10px/1 'DM Mono',monospace;}
.bh-notif__all{
  display:block;padding:14px 16px;text-align:center;
  border-top:1px solid rgba(255,255,255,.06);text-decoration:none;
  color:rgba(255,255,255,.55);font:700 10px/1 'DM Mono',monospace;letter-spacing:.04em;
}
.bh-notif__all:hover{color:#fff;}
/* Lista completa: My Account > Notifications y [mis_notificaciones] / [user_notifications]. */
.bh-account__panel .bh-notif__list,
.bh-notif-page .bh-notif__list{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.bh-notif-page{max-width:720px;margin:0 auto;padding:16px;}
.bh-notif-page__head{display:flex;align-items:center;gap:10px;}