/* ==========================================================================
   BeatsHouse — Stitch Design Enhancement v3.1
   Applies refined design patterns from Stitch mockups to [app].
   Layered on top of existing home.php inline styles.
   ========================================================================== */

/* ── CSS Variables ── */
.bh-home-v5 {
  --bh-accent: #ffffff;
  --bh-accent-rgb: 255, 255, 255;
  --bh-success: #d4d4d4;
  --bh-error: #888888;
  --bh-highlight: #d4d4d4;
  --bh-bg: #000000;
  --bh-surface: #080808;
  --bh-border: rgba(255,255,255,0.08);
  --bh-text: #f4f4f5;
  --bh-muted: #a1a1aa;
  --bh-font-headline: 'Syne', system-ui, sans-serif;
  --bh-font-body: 'Manrope', system-ui, sans-serif;
  --bh-font-label: 'Manrope', system-ui, sans-serif;
}

/* ── Glass Card Utility ── */
.bh-home-v5 .bh-glass,
.bh-home-v5 .bh-home-featured-body {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bh-border) !important;
}

/* ── Hero Section — Waveform Glow ── */
.bh-home-v5 .bh-home-hero {
  position: relative;
  isolation: isolate;
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}

.bh-home-v5 .bh-home-hero::before {
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    rgba(var(--bh-accent-rgb), 0.12) 0%,
    transparent 70%
  ) !important;
  min-height: 200px !important;
  inset: -20px -20px auto -20px !important;
}

/* ── Featured Card ── */
.bh-home-v5 .bh-home-featured-body {
  border-radius: 0 !important;
  padding: 22px 20px 18px !important;
  position: relative;
  overflow: hidden;
}

.bh-home-v5 .bh-home-featured-body::before {
  background: radial-gradient(
    ellipse 90% 80% at -8% -12%,
    rgba(var(--bh-accent-rgb), 0.14),
    transparent 55%
  ) !important;
}

.bh-home-v5 .bh-home-featured-title {
  font-family: var(--bh-font-headline) !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 5vw, 32px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-shadow: 0 0 32px rgba(var(--bh-accent-rgb), 0.08), 0 2px 6px rgba(6, 6, 8, 0.7) !important;
}

.bh-home-v5 .bh-home-section-label {
  font-family: var(--bh-font-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bh-accent) !important;
}

.bh-home-v5 .bh-home-featured-meta {
  font-family: var(--bh-font-label) !important;
  font-size: 11px !important;
  color: var(--bh-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── Price Row Badges ── */
.bh-home-v5 .bh-home-price-row span {
  background: rgba(var(--bh-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--bh-accent-rgb), 0.15) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--bh-font-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--bh-accent) !important;
  letter-spacing: 0.04em !important;
}

/* ── CTA Buttons ── */
.bh-home-v5 .bh-home-btn--primary {
  background: #ffffff !important;
  border: none !important;
  color: #0c0c0c !important;
  border-radius: 999px !important;
  font-family: var(--bh-font-headline) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  padding: 12px 24px !important;
  box-shadow: 0 8px 26px rgba(var(--bh-accent-rgb), 0.22) !important;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(var(--bh-accent-rgb), 0.3) !important;
}

.bh-home-v5 .bh-home-btn:not(.bh-home-btn--primary) {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--bh-border) !important;
  border-radius: 999px !important;
  color: var(--bh-text) !important;
  font-family: var(--bh-font-headline) !important;
  font-weight: 600 !important;
}

/* ── Section Titles ── */
.bh-home-v5 .bh-home-list-title {
  font-family: var(--bh-font-headline) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  color: #fff !important;
}

.bh-home-v5 .bh-home-bottom h3 {
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
}

/* ── Beat Track Rows ── */
.bh-home-v5 .bh-home-trackrow {
  border-radius: 0 !important;
  padding: 10px 12px !important;
  border-bottom: none !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.14s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-trackrow:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.bh-home-v5 .bh-home-trackrow:active {
  transform: scale(0.99) !important;
}

.bh-home-v5 .bh-home-trackavatar {
  border-radius: 0 !important;
  border: 1px solid var(--bh-border) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
              0 4px 12px rgba(6, 6, 8, 0.4) !important;
}

.bh-home-v5 .bh-home-trackname,
.bh-home-v5 .bh-home-trackname a {
  font-family: var(--bh-font-headline) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.bh-home-v5 .bh-home-trackauthor {
  font-family: var(--bh-font-label) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--bh-muted) !important;
}

.bh-home-v5 .bh-home-trackprice {
  font-family: var(--bh-font-label) !important;
  color: var(--bh-accent) !important;
  font-weight: 700 !important;
}

/* ── Play Buttons ── */
.bh-home-v5 .bh-home-master-play {
  border-radius: 999px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-master-play:hover {
  border-color: rgba(var(--bh-accent-rgb), 0.5) !important;
  background: rgba(var(--bh-accent-rgb), 0.08) !important;
  color: var(--bh-accent) !important;
  transform: scale(1.06) !important;
}

.bh-home-v5 .bh-home-master-play:active {
  transform: scale(0.97) !important;
}

/* ── Dock Navigation ── (canonical styles in home.php inline block) */

.bh-home-v5 .bh-dock-item:hover:not(.active) {
  color: #fff !important;
}

/* ── Services Cards ── */
.bh-home-v5 .bh-home-service-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%) !important;
  border: 1px solid var(--bh-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  transition: border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-service-card:hover {
  border-color: rgba(var(--bh-accent-rgb), 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.bh-home-v5 .bh-home-service-card:active {
  transform: scale(0.98) !important;
}

/* Quick nav removed — unified into .bh-topbar */

/* ── Stage Header ── (canonical in home.php inline) */

/* ── Producer Avatar ── */
.bh-home-v5 .bh-home-producer-avatar {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06) !important;
  width: 34px !important;
  height: 34px !important;
}

/* ── Scrollbar Hide for Horizontal Scrolls ── */
.bh-home-v5 .bh-home-tracklist::-webkit-scrollbar,
.bh-home-v5 .bh-home-featured-body::-webkit-scrollbar {
  display: none;
}

/* ── Bottom Section (Services/Songs) ── */
.bh-home-v5 .bh-home-bottom h3 {
  font-family: var(--bh-font-headline) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

@keyframes bh-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bh-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bh-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes bh-slide-in-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes bh-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bh-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bh-accent-rgb), 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--bh-accent-rgb), 0); }
}

@keyframes bh-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes bh-progress-bar {
  from { width: 0; }
  to   { width: var(--bh-progress, 0%); }
}

@keyframes bh-spin {
  to { transform: rotate(360deg); }
}

@keyframes bh-bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   PAGE & SECTION ENTRANCE ANIMATIONS
   ========================================================================== */

/* Hero entrance */
.bh-home-v5 .bh-home-hero {
  animation: bh-fade-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* Featured card entrance — slight delay */
.bh-home-v5 .bh-home-featured {
  animation: bh-fade-in-up 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards !important;
}

/* Track rows stagger entrance */
.bh-home-v5 .bh-home-trackrow {
  animation: bh-fade-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}
.bh-home-v5 .bh-home-trackrow:nth-child(1) { animation-delay: 0.05s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(2) { animation-delay: 0.10s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(3) { animation-delay: 0.15s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(4) { animation-delay: 0.20s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(5) { animation-delay: 0.25s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(6) { animation-delay: 0.30s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(7) { animation-delay: 0.35s !important; }
.bh-home-v5 .bh-home-trackrow:nth-child(8) { animation-delay: 0.40s !important; }

/* Section titles entrance */
.bh-home-v5 .bh-home-list-title,
.bh-home-v5 .bh-home-bottom h3 {
  animation: bh-fade-in 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards !important;
}

/* Stage module slide-in */
.bh-home-v5 #bh-home-app-stage.is-open {
  animation: bh-slide-in-right 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* ==========================================================================
   BUTTON INTERACTIONS (from Stitch components)
   ========================================================================== */

/* Primary CTA — glow + lift + press */
.bh-home-v5 .bh-home-btn--primary {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.16s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-btn--primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(var(--bh-accent-rgb), 0.35),
              0 0 0 4px rgba(var(--bh-accent-rgb), 0.1) !important;
}

.bh-home-v5 .bh-home-btn--primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 4px 12px rgba(var(--bh-accent-rgb), 0.2) !important;
  background: #d4d4d4 !important;
}

/* Secondary / Glass button */
.bh-home-v5 .bh-home-btn:not(.bh-home-btn--primary) {
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-btn:not(.bh-home-btn--primary):hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px) !important;
}

.bh-home-v5 .bh-home-btn:not(.bh-home-btn--primary):active {
  transform: translateY(0) scale(0.97) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* All clickable elements — tap feedback */
.bh-home-v5 button,
.bh-home-v5 a.button,
.bh-home-v5 [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Icon buttons (play, heart, cart, share) */
.bh-home-v5 .bh-home-master-play,
.bh-home-v5 .bh-dock-item,
.bh-home-v5 .bh-topbar-link {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.16s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.16s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.16s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Play button — pulse on playing state */
.bh-home-v5 .bh-home-master-play.is-playing,
.bh-home-v5 .master-play.is-playing {
  animation: bh-pulse-glow 2s ease-in-out infinite !important;
  border-color: var(--bh-accent) !important;
  color: var(--bh-accent) !important;
}

/* ==========================================================================
   NAVIGATION & DOCK ANIMATIONS (canonical in home.php inline)
   ========================================================================== */

/* Dock entrance */
.bh-home-v5 .bh-dock-container {
  animation: bh-slide-in-bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards !important;
}

/* quicknav removed — see .bh-topbar */

/* ==========================================================================
   CARD INTERACTIONS
   ========================================================================== */

/* Glass cards — hover lift */
.bh-home-v5 .bh-home-featured-body,
.bh-home-v5 .bh-home-service-card {
  transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-featured-body:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(var(--bh-accent-rgb), 0.2) !important;
  box-shadow: 0 20px 40px rgba(6, 6, 8, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.06),
              0 0 0 1px rgba(var(--bh-accent-rgb), 0.08) !important;
}

/* Track row — hover slide */
.bh-home-v5 .bh-home-trackrow {
  transition: background 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-trackrow:hover {
  transform: translateX(4px) !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: -4px 0 0 0 var(--bh-accent) !important;
  border-radius: 0 !important;
}

/* Track avatar — hover zoom */
.bh-home-v5 .bh-home-trackavatar {
  transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-home-trackrow:hover .bh-home-trackavatar {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
              0 6px 16px rgba(6, 6, 8, 0.5) !important;
}

/* ==========================================================================
   PLAYER BAR
   ========================================================================== */

/* Player bar — glass frosted */
.bh-home-v5 .bh-home-player,
.bh-home-v5 [class*="player-bar"],
.bh-home-v5 .bh-player-mini {
  background: rgba(17, 17, 20, 0.94) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Player progress bar */
.bh-home-v5 .bh-player-progress,
.bh-home-v5 [class*="progress-bar"] {
  background: rgba(var(--bh-accent-rgb), 0.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.bh-home-v5 .bh-player-progress-fill,
.bh-home-v5 [class*="progress-fill"],
.bh-home-v5 [class*="progress-bar"] > div {
  background: linear-gradient(90deg, #ffffff, #d4d4d4) !important;
  border-radius: 999px !important;
  transition: width 0.3s linear !important; /* linear intentional for progress bars */
}

/* ==========================================================================
   LOADING & SKELETON STATES
   ========================================================================== */

/* Skeleton loading placeholder */
.bh-home-v5 .bh-skeleton,
.bh-home-v5 [data-loading="true"] {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: bh-shimmer 1.8s ease-in-out infinite !important;
  border-radius: 0 !important;
  color: transparent !important;
}

/* Loading spinner */
.bh-home-v5 .bh-spinner,
.bh-home-v5 .bh-loading::after {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(var(--bh-accent-rgb), 0.2) !important;
  border-top-color: var(--bh-accent) !important;
  border-radius: 50% !important;
  animation: bh-spin 0.6s linear infinite !important;
  display: inline-block !important;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.bh-home-v5 .bh-toast,
.bh-home-v5 .woocommerce-message,
.bh-home-v5 .woocommerce-info {
  animation: bh-fade-in-up 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ==========================================================================
   TAB NAVIGATION (Beats | Songs | Collabs)
   ========================================================================== */

.bh-home-v5 [class*="tab-nav"] button,
.bh-home-v5 [class*="tab-nav"] a,
.bh-home-v5 .bh-home-mode-tab {
  position: relative !important;
  font-family: var(--bh-font-headline) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--bh-muted) !important;
  padding: 8px 0 12px !important;
  border: none !important;
  background: transparent !important;
  transition: color 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 [class*="tab-nav"] button.active,
.bh-home-v5 [class*="tab-nav"] a.active,
.bh-home-v5 .bh-home-mode-tab.active {
  color: var(--bh-accent) !important;
}

/* Animated underline indicator */
.bh-home-v5 [class*="tab-nav"] button.active::after,
.bh-home-v5 [class*="tab-nav"] a.active::after,
.bh-home-v5 .bh-home-mode-tab.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--bh-accent) !important;
  border-radius: 999px !important;
  animation: bh-scale-in 0.22s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* ==========================================================================
   BADGE PILLS (BPM, Key, Genre)
   ========================================================================== */

.bh-home-v5 .bh-badge,
.bh-home-v5 [class*="bpm-badge"],
.bh-home-v5 [class*="key-badge"],
.bh-home-v5 .bh-license-badges span {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(var(--bh-accent-rgb), 0.08) !important;
  border: 1px solid rgba(var(--bh-accent-rgb), 0.15) !important;
  color: var(--bh-accent) !important;
  font-family: var(--bh-font-label) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: background 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .bh-badge:hover,
.bh-home-v5 .bh-license-badges span:hover {
  background: rgba(var(--bh-accent-rgb), 0.14) !important;
  border-color: rgba(var(--bh-accent-rgb), 0.3) !important;
}

/* ==========================================================================
   INPUT FIELDS
   ========================================================================== */

.bh-home-v5 input[type="text"],
.bh-home-v5 input[type="search"],
.bh-home-v5 input[type="email"],
.bh-home-v5 textarea,
.bh-home-v5 select {
  background: var(--bh-surface) !important;
  border: 1px solid var(--bh-border) !important;
  border-radius: 0 !important;
  color: var(--bh-text) !important;
  font-family: var(--bh-font-body) !important;
  padding: 10px 14px !important;
  transition: border-color 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 input:focus,
.bh-home-v5 textarea:focus,
.bh-home-v5 select:focus {
  outline: none !important;
  border-color: rgba(var(--bh-accent-rgb), 0.4) !important;
  box-shadow: 0 0 0 3px rgba(var(--bh-accent-rgb), 0.08) !important;
}

.bh-home-v5 input::placeholder,
.bh-home-v5 textarea::placeholder {
  color: #555555 !important;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

.bh-home-v5 ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.bh-home-v5 ::-webkit-scrollbar-track {
  background: transparent;
}

.bh-home-v5 ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}

.bh-home-v5 ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.16);
}

/* ==========================================================================
   STAGE MODULE TRANSITIONS
   ========================================================================== */

/* Stage body content fade */
.bh-home-v5 #bh-home-app-stage .js-bh-stage-body {
  animation: bh-fade-in 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* Stage header glass */
.bh-home-v5 #bh-home-app-stage > header,
.bh-home-v5 .bh-topbar {
  background: rgba(10, 10, 11, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--bh-border) !important;
}

/* Stage back button */
.bh-home-v5 .js-bh-stage-close,
.bh-home-v5 [data-bh-stage-close] {
  color: var(--bh-accent) !important;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .js-bh-stage-close:hover {
  transform: translateX(-3px) !important;
}

.bh-home-v5 .js-bh-stage-close:active {
  transform: translateX(-1px) scale(0.97) !important;
}

/* ==========================================================================
   WAVEFORM
   ========================================================================== */

.bh-home-v5 .bh-home-wave,
.bh-home-v5 .wave-container {
  border-radius: 0 !important;
  overflow: hidden !important;
  border-bottom: none !important;
}

/* ==========================================================================
   HOME SECTION TRANSITIONS (home/vault/services/profile modes)
   ========================================================================== */

.bh-home-v5.is-module-open .bh-home-hero,
.bh-home-v5.is-module-open .bh-home-featured,
.bh-home-v5.is-module-open .bh-home-recent,
.bh-home-v5.is-module-open .bh-home-bottom {
  transition: opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ==========================================================================
   CHECKOUT BUTTON ENHANCEMENT
   ========================================================================== */

.bh-home-v5 .wc-proceed-to-checkout .checkout-button,
.bh-home-v5 #place_order {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.bh-home-v5 .wc-proceed-to-checkout .checkout-button:hover,
.bh-home-v5 #place_order:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--bh-accent-rgb), 0.25) !important;
}

.bh-home-v5 .wc-proceed-to-checkout .checkout-button:active,
.bh-home-v5 #place_order:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
  .bh-home-v5 .bh-home-featured-title {
    font-size: 24px !important;
  }
  .bh-home-v5 .bh-home-trackrow {
    grid-template-columns: 32px 42px minmax(0,1fr) auto !important;
    padding: 8px !important;
  }
  .bh-home-v5 .bh-home-wave-cell {
    display: none !important;
  }
  /* Dock: see home.php inline */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bh-home-v5 *,
  .bh-home-v5 *::before,
  .bh-home-v5 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}