/*
Theme Name: DAV Strains Workroom
Theme URI: https://davstrains.com
Author: DAV Strains Workroom
Author URI: https://davstrains.com
Description: Premium mobile-first WordPress/PWA theme for Dav Strains Workroom.
Version: 4.0.0
License: Proprietary – for davstrains.com use only
Text Domain: dav-strains-workroom
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
*/

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════ */
:root {
  /* Palette */
  --bg:       #050810;
  --navy:     #071524;
  --navy2:    #0b1d32;
  --panel:    rgba(255,255,255,.075);
  --panel2:   rgba(255,255,255,.115);
  --line:     rgba(255,255,255,.15);
  --line2:    rgba(255,255,255,.24);
  --text:     #f5f8ff;
  --muted:    rgba(245,248,255,.72);
  --soft:     rgba(245,248,255,.55);
  --gold:     #f0c46c;
  --gold2:    #d2a03b;
  --blue:     #66c7ff;
  --ink:      #0b1220;
  --paper:    #fff7ea;

  /* Surfaces */
  --radius:   28px;
  --radius2:  18px;
  --shadow:   0 30px 90px rgba(0,0,0,.38);

  /* Layout */
  --header:   86px;
  --player:   96px;

  /* v3.7 layout system */
  --dav-top-player:  96px;
  --dav-bottom-menu: 92px;
}

/* ════════════════════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dav-top-player) + 24px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  padding-top:    var(--dav-top-player);
  padding-bottom: var(--dav-bottom-menu);
}
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }

/* Accessibility */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: #fff; color: #000; padding: 12px; z-index: 99999;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ════════════════════════════════════════════════════════════
   3. APP HEADER  (desktop — positioned BOTTOM by v3.7)
   ════════════════════════════════════════════════════════════ */
.app-header {
  position: fixed;
  z-index: 9998;
  /* Default: top — overridden to bottom by v3.7 block below */
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 24px));
  min-height: 72px;
  border: 1px solid var(--line);
  background: rgba(5,8,16,.74);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 999px;
  box-shadow: 0 20px 70px rgba(0,0,0,.36);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  transition: transform .28s ease, opacity .28s ease;
}
body.admin-bar .app-header { top: 48px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(240,196,108,.6);
  box-shadow: 0 0 0 5px rgba(240,196,108,.09);
}
.brand strong { display: block; font-weight: 950; font-size: 16px; letter-spacing: -.2px; }
.brand small  { display: block; margin-top: 3px; color: var(--gold); font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }

/* Desktop nav */
.desktop-nav { display: flex; align-items: center; gap: 6px; }
.desktop-nav a {
  font-size: 13px; font-weight: 850; color: rgba(255,255,255,.84);
  padding: 12px 13px; border-radius: 999px; transition: .22s ease; white-space: nowrap;
}
.desktop-nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.desktop-nav .nav-cta {
  background: linear-gradient(135deg,#fff,#f7dfad); color: #09111f;
  border: 1px solid rgba(240,196,108,.65); box-shadow: 0 10px 28px rgba(240,196,108,.16);
}

/* Hamburger */
.menu-button {
  display: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.08);
  color: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-button span { width: 22px; height: 2px; background: #fff; border-radius: 99px; transition: .22s; }
.menu-button.active span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.menu-button.active span:nth-child(2) { opacity: 0; }
.menu-button.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   4. STICKY PLAYER  (top)
   ════════════════════════════════════════════════════════════ */
.sticky-player {
  position: fixed;
  z-index: 9996;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, calc(100% - 24px));
  min-height: 74px;
  border: 1px solid rgba(240,196,108,.22);
  background: rgba(5,8,16,.84);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 999px;
  box-shadow: 0 22px 70px rgba(0,0,0,.44);
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  transition: transform .28s ease, opacity .28s ease;
}
body.admin-bar .sticky-player { top: 46px; }

.play-main, .player-nav {
  border-radius: 50%; border: 0;
  background: #fff; color: #071524;
  font-weight: 950; display: grid; place-items: center; cursor: pointer;
}
.play-main  { width: 48px; height: 48px; }
.player-nav { width: 42px; height: 42px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid var(--line); }

.player-meta { min-width: 0; }
.player-meta strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta small  { display: block; color: var(--muted); font-size: 12px; }

.progress { margin-top: 8px; height: 4px; background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--blue),var(--gold)); }

.player-controls { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════════════
   5. BOTTOM NAV  (mobile — auto-hide)
   ════════════════════════════════════════════════════════════ */
.bottom-nav { display: none; } /* shown at ≤720px */

/* ════════════════════════════════════════════════════════════
   6. V3.7 LAYOUT OVERRIDES (player top / nav bottom)
   ════════════════════════════════════════════════════════════ */
.app-header {
  top:    auto !important;
  bottom: 14px !important;
}
body.admin-bar .app-header { top: auto !important; bottom: 10px !important; }

/* Auto-hide: slide nav DOWN off screen */
.app-header.nav-hidden,
.bottom-nav.nav-hidden {
  transform: translate(-50%, calc(100% + 28px)) !important;
  opacity: 0;
  pointer-events: none;
}

/* Float elements clear the bottom nav */
.whatsapp-float { bottom: calc(var(--dav-bottom-menu) + 18px) !important; }
.cookie-banner  { bottom: calc(var(--dav-bottom-menu) + 18px) !important; }

/* ════════════════════════════════════════════════════════════
   7. HERO
   ════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(3,8,16,.92) 0%,
      rgba(5,14,26,.82) 36%,
      rgba(5,14,26,.44) 68%,
      rgba(5,14,26,.18) 100%
    ),
    url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 19% 35%, rgba(102,199,255,.20), transparent 33%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.56));
}
.hero-content {
  position: relative; z-index: 1;
  width: min(720px,92vw); margin-left: clamp(22px,8vw,140px);
  padding: 130px 0 90px;
}
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line2); background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px); border-radius: 999px;
  padding: 9px 15px; color: rgba(255,255,255,.86); font-size: 13px; margin-bottom: 28px;
}
.badge span { width: 8px; height: 8px; background: var(--blue); box-shadow: 0 0 15px var(--blue); border-radius: 50%; }
h1, .page-title { font-size: clamp(52px,7.2vw,96px); line-height: .95; letter-spacing: -3px; margin: 0 0 24px; font-weight: 980; }
.hero p, .lead   { font-size: 18px; line-height: 1.76; color: var(--muted); max-width: 650px; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-metrics {
  margin-top: 36px; display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  max-width: 660px; background: rgba(255,255,255,.08); backdrop-filter: blur(18px);
}
.hero-metrics article { padding: 18px; border-right: 1px solid var(--line); }
.hero-metrics article:last-child { border-right: none; }
.hero-metrics strong { display: block; color: var(--gold); font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.hero-metrics span   { display: block; margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: rgba(255,255,255,.68); font-weight: 900; }

/* Page hero (inner pages) */
.page-hero {
  padding: 150px clamp(20px,5vw,74px) 70px;
  background:
    linear-gradient(90deg,rgba(5,8,16,.98),rgba(7,21,36,.86)),
    url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center / cover no-repeat;
}
.page-hero--books {
  background:
    linear-gradient(160deg, rgba(3,8,16,.90) 0%, rgba(6,20,36,.72) 50%, rgba(3,8,16,.88) 100%),
    url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center / cover no-repeat !important;
}

/* PMPro / account / checkout page heroes */
.pmpro-account  .entry-hero,
.pmpro-levels   .entry-hero,
.pmpro-checkout .entry-hero,
.page           .entry-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  background:
    linear-gradient(90deg, rgba(3,8,18,.28) 0%, rgba(3,8,18,.06) 100%),
    url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center 54% / cover no-repeat !important;
}
.pmpro-account  .entry-hero::before,
.pmpro-levels   .entry-hero::before,
.pmpro-checkout .entry-hero::before,
.page           .entry-hero::before {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(circle at 30% 50%, rgba(52,116,255,.16), transparent 34%),
    radial-gradient(circle at 72% 55%, rgba(240,196,108,.18), transparent 32%) !important;
  z-index: -1 !important; pointer-events: none !important;
}
.pmpro-account  .entry-hero h1,
.pmpro-levels   .entry-hero h1,
.pmpro-checkout .entry-hero h1,
.page           .entry-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  font-size: clamp(48px,7vw,92px) !important;
  line-height: .95 !important;
}

/* ════════════════════════════════════════════════════════════
   8. BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn, .button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 999px; padding: 14px 22px;
  border: 1px solid var(--line2); font-weight: 950;
  transition: .22s ease; text-decoration: none !important;
  cursor: pointer;
}
.btn:hover, .button:hover, .wp-block-button__link:hover {
  transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.btn-primary, .woocommerce a.button.checkout-button, .woocommerce button.button.alt {
  background: #fff; color: #081321; border-color: #fff;
}
.btn-ghost  { background: rgba(255,255,255,.06); color: #fff; }
.btn-gold   { background: linear-gradient(135deg,var(--gold),#fff0c9); color: #0c1422; border-color: rgba(240,196,108,.65); }
.btn.dark   { background: #071524; color: #fff; border-color: #071524; }

/* ════════════════════════════════════════════════════════════
   9. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════ */
.section {
  position: relative; padding: 96px clamp(20px,5vw,74px);
  background: var(--bg); color: var(--text);
}
.section.alt   { background: linear-gradient(180deg,#071524,#050810); }
.section.light { background: #f9f1e2; color: #111827; }
.section.light .lead,
.section.light p { color: #3d4958; }

.wrap        { width: min(1160px,100%); margin: 0 auto; }
.page-content{ padding: 70px clamp(20px,5vw,74px); }

.section-head       { max-width: 840px; margin: 0 auto 42px; text-align: center; }
.section-head.left  { text-align: left; margin-left: 0; }
.kicker {
  display: inline-block; color: var(--gold); letter-spacing: .18em;
  text-transform: uppercase; font-size: 12px; font-weight: 950; margin-bottom: 12px;
}
h2 { font-size: clamp(34px,5vw,64px); line-height: 1.02; letter-spacing: -1.7px; margin: 0 0 16px; font-weight: 980; }
h3 { font-weight: 950; }

.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

/* ════════════════════════════════════════════════════════════
   10. CARDS (generic)
   ════════════════════════════════════════════════════════════ */
.card, .glass, .product-card, .story-card, .genre-card, .membership-card {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); overflow: hidden;
}
.card, .genre-card, .membership-card { padding: 26px; }
.card p, .genre-card p, .membership-card p, .story-card p, .product-card p {
  color: var(--muted); line-height: 1.65;
}
.section.light .card, .section.light .story-card, .section.light .product-card {
  background: rgba(255,255,255,.72); border-color: rgba(12,20,34,.12); box-shadow: 0 20px 55px rgba(8,13,24,.08);
}
.section.light .card p, .section.light .story-card p, .section.light .product-card p { color: #4d5b6a; }

/* ════════════════════════════════════════════════════════════
   11. GENRE FILTER
   ════════════════════════════════════════════════════════════ */
.genre-filter {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 30px;
}
.genre-filter button {
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff;
  border-radius: 999px; padding: 11px 16px; font-weight: 900; cursor: pointer;
  transition: .2s ease;
}
.genre-filter button:hover  { background: rgba(255,255,255,.12); }
.genre-filter button.active { background: #fff; color: #0b1220; }

/* ════════════════════════════════════════════════════════════
   12. MUSIC GRID & TRACK CARDS
   ════════════════════════════════════════════════════════════ */
.music-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

/* Base track card */
.track-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  border-radius: 24px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 230px;
  transition: border-color .22s ease, background .22s ease;
}

/* Member (full-stream) track card */
.track-card.is-member {
  border-color: rgba(240,196,108,.32);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(240,196,108,.06));
}
.track-card.is-member:hover {
  border-color: rgba(240,196,108,.55);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(240,196,108,.10));
}

/* Preview-only track card */
.track-card.is-preview {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.track-card.is-preview:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

/* Album art thumbnail */
.track-art {
  height: 120px; border-radius: 19px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgba(102,199,255,.45), transparent 38%),
    radial-gradient(circle at 70% 45%, rgba(240,196,108,.50), transparent 35%),
    rgba(255,255,255,.08);
  display: grid; place-items: center;
}
.track-art img { width: 100%; height: 100%; object-fit: cover; }

/* Track badge pill (Full stream / 20s preview) */
.track-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.14);
  align-self: flex-start;
}
.track-badge--full {
  background: rgba(240,196,108,.18);
  color: var(--gold);
  border-color: rgba(240,196,108,.36);
}
.track-badge--preview {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.50);
  border-color: rgba(255,255,255,.10);
}

/* Genre label */
.track-genre {
  display: block;
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
}

/* Track title */
.track-title {
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
  color: var(--text);
}

/* Action row: Play + Download/Subscribe */
.track-actions {
  display: flex; gap: 8px; margin-top: auto;
}

/* Play button (.dav-play) */
.track-play-btn,
.dav-play {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.10);
  color: #fff;
  min-height: 40px;
  font-size: 12px; font-weight: 950;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.track-play-btn:hover,
.dav-play:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.track-card.is-active .dav-play,
.track-play-btn[data-track].is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #071524;
}

/* Download / Buy button (.dav-download) — ALWAYS navigates, never plays */
.track-buy-btn,
.dav-download {
  flex: 1;
  border-radius: 999px;
  min-height: 40px;
  font-size: 12px; font-weight: 950;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  text-decoration: none !important;
}
/* Member: white Download button */
.track-buy-btn {
  background: #fff;
  color: #081321;
  border: 1px solid rgba(255,255,255,.85);
}
.track-buy-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,255,255,.18); }

/* Non-member: gold Subscribe button */
.track-upgrade-btn {
  background: linear-gradient(135deg, var(--gold), #fff3d0);
  color: #0c1422;
  border: 1px solid rgba(240,196,108,.55);
}
.track-upgrade-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(240,196,108,.22); }

/* ════════════════════════════════════════════════════════════
   13. MUSIC UPGRADE BANNER (above grid for non-subscribers)
   ════════════════════════════════════════════════════════════ */
.music-upgrade-banner {
  /* JS sets display:flex or display:none — do NOT set display here */
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240,196,108,.10), rgba(240,196,108,.04));
  border: 1px solid rgba(240,196,108,.24);
  margin-bottom: 20px;
}
.banner-icon { font-size: 22px; flex: 0 0 auto; }
.banner-text {
  flex: 1; font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.5;
}
.banner-text strong { color: var(--gold); }
.banner-cta {
  display: inline-flex; align-items: center;
  min-height: 42px; padding: 10px 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #fff3d0);
  color: #0c1422; font-weight: 950; font-size: 13px;
  border: 1px solid rgba(240,196,108,.5); text-decoration: none;
  transition: .2s ease; white-space: nowrap; flex: 0 0 auto;
}
.banner-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(240,196,108,.20); }

/* ════════════════════════════════════════════════════════════
   14. PREVIEW-ENDED TOAST
   ════════════════════════════════════════════════════════════ */
#davPreviewToast {
  position: fixed;
  left: 50%;
  top: calc(var(--dav-top-player) + 14px);
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: 18px;
  background: rgba(10,18,32,.96);
  border: 1px solid rgba(240,196,108,.32);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  color: rgba(255,255,255,.90); font-size: 14px; font-weight: 850;
  max-width: calc(100vw - 32px); width: max-content;
  pointer-events: none; opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  backdrop-filter: blur(18px);
}
#davPreviewToast.show {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
#davPreviewToast a { color: var(--gold); font-weight: 950; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#davPreviewToast button {
  background: none; border: none; color: rgba(255,255,255,.55);
  font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 50%; transition: .2s; flex: 0 0 auto;
}
#davPreviewToast button:hover { color: #fff; background: rgba(255,255,255,.10); }

/* ════════════════════════════════════════════════════════════
   15. MOOD GATE MODAL
   ════════════════════════════════════════════════════════════ */
#davMoodGate {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(3,8,16,.72); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
#davMoodGate.open { opacity: 1; pointer-events: auto; }
.mood-gate-card {
  position: relative; max-width: 480px; width: 100%;
  background: rgba(9,20,36,.98); border: 1px solid rgba(240,196,108,.28);
  border-radius: 28px; padding: 40px 32px; text-align: center;
  box-shadow: 0 32px 90px rgba(0,0,0,.45);
  transform: translateY(12px); transition: transform .28s ease;
}
#davMoodGate.open .mood-gate-card { transform: translateY(0); }
.mood-gate-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; color: rgba(255,255,255,.72);
  font-size: 14px; cursor: pointer; transition: .2s;
}
.mood-gate-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.mood-gate-icon { display: block; font-size: 40px; margin-bottom: 16px; }
.mood-gate-card h3 { font-size: 22px; color: #fff; margin-bottom: 12px; line-height: 1.3; }
.mood-gate-card p  { color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.72; margin-bottom: 24px; }
.mood-gate-card p strong { color: var(--gold); }
.mood-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mood-gate-actions .btn { min-height: 46px; font-size: 14px; }

/* ════════════════════════════════════════════════════════════
   16. READING ROOM — MOOD SELECTOR BAR
   ════════════════════════════════════════════════════════════ */
.reading-music-bar {
  background: rgba(5,14,26,.96) !important;
  color: #fff !important;
  padding: 22px clamp(20px,5vw,74px) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.reading-music-inner {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.reading-music-label { min-width: 200px; flex: 0 0 auto; }
.reading-music-label .kicker { display: block; margin-bottom: 6px; }
.reading-music-label p { font-size: 13px; color: rgba(255,255,255,.72); margin: 0; line-height: 1.5; }
.inline-upgrade-link { color: var(--gold); font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }

.mood-selector { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.mood-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.84); font-size: 13px; font-weight: 850;
  cursor: pointer; transition: .22s ease; white-space: nowrap;
}
.mood-pill:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }
.mood-pill.active {
  background: linear-gradient(135deg, var(--gold), #fff0c9);
  color: #0c1422; border-color: rgba(240,196,108,.65);
  box-shadow: 0 6px 20px rgba(240,196,108,.20); font-weight: 950;
}
/* Locked mood pills (non-music subscribers) */
.mood-pill[aria-label*="Requires"] { opacity: .65; }
.mood-pill[aria-label*="Requires"]:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* ════════════════════════════════════════════════════════════
   17. READER PANEL (books)
   ════════════════════════════════════════════════════════════ */
.reader-panel {
  background: var(--paper); color: #111827; border-radius: 32px;
  padding: clamp(24px,4vw,48px); box-shadow: 0 24px 80px rgba(0,0,0,.25);
  line-height: 1.82; font-size: 19px;
}
.reader-panel h2 { color: #111827; }
.reader-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.reader-controls button {
  border-radius: 99px; border: 1px solid rgba(0,0,0,.12);
  background: #fff; padding: 10px 14px; font-weight: 900; cursor: pointer;
}
.reader-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(210,160,59,.12); color: var(--gold2);
  font-size: 11px; font-weight: 950; letter-spacing: .10em; text-transform: uppercase;
  border: 1px solid rgba(210,160,59,.22); margin-left: auto;
}
.chapter-eyebrow {
  display: block; color: var(--gold2); font-family: Inter, Arial, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: .18em;
  font-weight: 950; margin-bottom: 10px; margin-top: 6px;
}
.reader-title { font-size: clamp(26px,3.5vw,42px) !important; margin-bottom: 24px !important; }

/* Content gate */
.chapter-end-gate { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(8,21,39,.12); }
.gate-card {
  text-align: center; padding: 36px; border-radius: 26px;
  background: linear-gradient(180deg,#fff,#faf4e8);
  border: 1px solid rgba(210,160,59,.22); box-shadow: 0 18px 55px rgba(8,21,39,.08);
}
.gate-icon { font-size: 40px; display: block; margin-bottom: 14px; }
.gate-card h3 { font-size: 26px; margin-bottom: 10px; color: #111827; }
.gate-card p  { color: #4d5b6a; font-size: 16px; line-height: 1.72; max-width: 480px; margin: 0 auto 22px; }

/* Chapter list (subscribers) */
.chapter-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 28px; }
.chapter-card { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(8,21,39,.10); box-shadow: 0 14px 40px rgba(8,21,39,.07); }
.chapter-num  { display: inline-block; color: var(--gold); font-weight: 950; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.chapter-card h3 { font-size: 19px; color: #111827; margin-bottom: 8px; }
.chapter-card p  { color: #4d5b6a; font-size: 14px; line-height: 1.65; margin-bottom: 16px; }

/* Books upgrade section */
.books-upgrade-section { background: linear-gradient(180deg,#fff8ed,#f5efe5) !important; }
.books-upgrade-card {
  text-align: center; max-width: 760px; margin: 0 auto; padding: 52px 36px;
  border-radius: 32px; background: linear-gradient(160deg,#fff,#faf3e2);
  border: 1px solid rgba(210,160,59,.20); box-shadow: 0 22px 70px rgba(8,21,39,.09);
}
.books-upgrade-card h2 { font-size: clamp(28px,4vw,50px); color: #111827; }

/* ════════════════════════════════════════════════════════════
   18. BOOKS PAGE
   ════════════════════════════════════════════════════════════ */
.book-feature { display: grid; grid-template-columns: .75fr 1.25fr; gap: 28px; align-items: center; }
.book-cover { border-radius: 28px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.story-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.story-card  { padding: 24px; }
.story-card .label {
  display: inline-flex; color: #0d1420; background: var(--gold);
  padding: 6px 10px; border-radius: 99px; font-size: 11px; font-weight: 950;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.label--gold { background: linear-gradient(135deg, var(--gold), #fff0c9) !important; color: #0c1422 !important; }
.label--lock { background: rgba(8,21,39,.06) !important; color: #667188 !important; border: 1px solid rgba(8,21,39,.10); }
.story-card--locked { opacity: .85; }

/* ════════════════════════════════════════════════════════════
   19. MEMBERSHIP CARDS
   ════════════════════════════════════════════════════════════ */
.membership-card.featured {
  border-color: rgba(240,196,108,.72);
  background: linear-gradient(180deg, rgba(240,196,108,.16), rgba(255,255,255,.08));
}
.price { font-size: 38px; font-family: Georgia, serif; color: var(--gold); margin: 14px 0; }

/* PMPro "Choose membership" → styled as Upgrade button */
.pmpro_account-membership a[href*="levels"]:not(.btn) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 48px !important; padding: 12px 22px !important; border-radius: 999px !important;
  background: linear-gradient(135deg, var(--gold), #fff0c9) !important;
  color: #0c1422 !important; font-weight: 950 !important; font-size: 0 !important;
  border: 1px solid rgba(240,196,108,.65) !important; text-decoration: none !important;
  transition: .22s ease !important; box-shadow: 0 8px 24px rgba(240,196,108,.18) !important;
}
.pmpro_account-membership a[href*="levels"]:not(.btn)::before {
  content: "⬆ Upgrade membership"; font-size: 15px !important;
}

/* ════════════════════════════════════════════════════════════
   20. SYSTEMS, STORE, CONTACT
   ════════════════════════════════════════════════════════════ */
.systems-grid .card strong { color: var(--gold); font-size: 28px; }
.legal-note { border-top: 1px solid var(--line); padding: 20px 0; color: var(--soft); font-size: 12px; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   21. FLOATING UI (WhatsApp, Cookie, Install)
   ════════════════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed; right: 20px; bottom: calc(var(--dav-bottom-menu) + 18px);
  width: 56px; height: 56px; border-radius: 50%; background: #25d366;
  color: #fff; z-index: 9997; display: grid; place-items: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.45);
  transition: transform .22s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); }
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }

.cookie-banner {
  position: fixed; left: 18px; bottom: calc(var(--dav-bottom-menu) + 18px);
  z-index: 9998; width: min(420px, calc(100% - 36px));
  border: 1px solid var(--line); border-radius: 22px;
  background: rgba(5,8,16,.95); box-shadow: var(--shadow); padding: 18px; display: none;
}
.cookie-banner.show { display: block; }
.cookie-banner p { color: var(--muted); line-height: 1.55; font-size: 13px; }
.cookie-actions { display: flex; gap: 10px; margin-top: 12px; }
.cookie-actions button {
  flex: 1; border-radius: 999px; border: 1px solid var(--line);
  min-height: 42px; background: rgba(255,255,255,.08); color: #fff; font-weight: 900;
}
.cookie-actions .accept { background: #fff; color: #071524; }

/* ════════════════════════════════════════════════════════════
   22. FOOTER
   ════════════════════════════════════════════════════════════ */
.site-footer { background: #02050b; color: rgba(255,255,255,.62); padding: 58px clamp(20px,5vw,74px) 28px; }
.footer-grid { width: min(1160px,100%); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .8fr .8fr .8fr; gap: 32px; }
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; }
.footer-title { color: var(--gold); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; font-weight: 950; margin-bottom: 14px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  width: min(1160px,100%); margin: 34px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.credit strong { color: var(--gold); }

/* ════════════════════════════════════════════════════════════
   23. WOOCOMMERCE
   ════════════════════════════════════════════════════════════ */
.woocommerce div.product, .woocommerce-page .content-area { color: #111827; background: #fff; border-radius: 24px; padding: 22px; }
.woocommerce-page main { background: #f9f1e2; color: #111827; }
.woocommerce-page .site-footer { color: rgba(255,255,255,.62); }

/* WooCommerce checkout order summary */
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-product-price { display: none !important; }
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-formatted-money-amount,
.woocommerce-checkout .wc-block-components-totals-wrapper .wc-block-components-formatted-money-amount {
  font-family: inherit !important; font-size: 1rem !important; color: #111827 !important; font-weight: 700 !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__total-price { font-size: 1rem !important; color: #111827 !important; font-weight: 700 !important; text-align: right !important; }
.woocommerce-checkout .wc-block-components-order-summary { color: #111827 !important; }

/* ════════════════════════════════════════════════════════════
   24. REVEAL ANIMATION
   ════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   25. TABLET  (≤1040px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  body.admin-bar .app-header { top: 60px !important; }
  .app-header { border-radius: 28px; }
  .menu-button { display: flex; }
  .desktop-nav {
    display: none; position: absolute;
    top: 82px; left: 0; right: 0;
    background: rgba(5,8,16,.98); border: 1px solid var(--line);
    border-radius: 24px; padding: 12px; box-shadow: var(--shadow);
  }
  .desktop-nav.open { display: grid; }
  .desktop-nav a { display: block; background: rgba(255,255,255,.06); border-radius: 15px; padding: 14px; }
  .grid-4, .music-grid { grid-template-columns: repeat(2,1fr); }
  .grid-3, .story-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .book-feature { grid-template-columns: 1fr; }
  .hero-content { margin-left: 24px; }
  .brand small { display: none; }
  .chapter-list { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   26. MOBILE  (≤720px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root {
    --player:          94px;
    --dav-top-player:  94px;
    --dav-bottom-menu: 76px;
  }

  body { padding-bottom: var(--dav-bottom-menu); }
  body.admin-bar .sticky-player { top: 58px !important; }

  /* Hide desktop header — bottom-nav takes over */
  .app-header { display: none !important; }

  /* Player: full-width pill */
  .sticky-player {
    top: 8px !important; bottom: auto !important;
    border-radius: 28px;
    width: calc(100% - 18px);
    grid-template-columns: 48px 1fr auto;
  }

  /* Bottom nav */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997;
    height: 66px; background: rgba(5,8,16,.94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(5,1fr);
    transition: transform .28s ease;
  }
  .bottom-nav.nav-hidden { transform: translateY(calc(100% + 12px)) !important; }
  .bottom-nav a { display: grid; place-items: center; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 900; }
  .bottom-nav a strong { display: block; font-size: 18px; line-height: 1; }

  /* Hero */
  .hero {
    background:
      linear-gradient(180deg, rgba(5,8,16,.75), rgba(5,8,16,.96)),
      url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center top / cover no-repeat;
  }
  .hero-content { padding: 128px 0 70px; width: calc(100% - 48px); margin: 0 24px; }
  h1, .page-title { font-size: clamp(44px,14vw,70px); letter-spacing: -1.8px; }
  .hero p, .lead { font-size: 16.5px; }
  .hero-actions { display: grid; }
  .btn { width: 100%; }
  .hero-metrics { grid-template-columns: 1fr; }
  .hero-metrics article { border-right: 0; border-bottom: 1px solid var(--line); }

  /* Grids */
  .grid-2, .grid-3, .grid-4, .music-grid,
  .story-grid, .footer-grid, .chapter-list { grid-template-columns: 1fr; }

  /* Section spacing */
  .section { padding: 72px 20px; }

  /* Player controls */
  .player-controls { display: grid; }
  .player-nav { width: 38px; height: 38px; }

  /* Float */
  .whatsapp-float { right: 14px; bottom: calc(var(--dav-bottom-menu) + 12px) !important; width: 50px; height: 50px; }
  .cookie-banner  { bottom: calc(var(--dav-bottom-menu) + 10px) !important; left: 10px; right: 10px; }

  /* Footer */
  .footer-bottom { display: grid; }
  .brand span { max-width: 190px; }

  /* Reading room */
  .reading-music-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mood-selector { width: 100%; }
  .mood-pill { font-size: 12px; padding: 9px 13px; }

  /* Cards */
  .gate-card { padding: 26px 22px; }
  .books-upgrade-card { padding: 36px 22px; }
  .banner-cta { width: 100%; justify-content: center; }

  /* PMPro pages */
  .pmpro-account .entry-hero,
  .pmpro-levels  .entry-hero,
  .pmpro-checkout .entry-hero,
  .page .entry-hero {
    min-height: 260px !important;
    background-position: center center !important;
  }
  .pmpro-account .entry-hero h1,
  .pmpro-levels  .entry-hero h1,
  .pmpro-checkout .entry-hero h1 {
    font-size: clamp(38px,12vw,60px) !important;
  }

  /* Toast position on mobile */
  #davPreviewToast {
    top: calc(var(--dav-top-player) + 10px);
    font-size: 13px; padding: 12px 16px; gap: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   27. REDUCED MOTION
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .track-card, .sticky-player, .app-header, .bottom-nav { transition: none; }
  .app-header.nav-hidden, .bottom-nav.nav-hidden { transition: none; }
}

/* ── Novel-specific reader styles (append to style.css) ── */

/* Chapter location / dateline */
.chapter-location {
  color: var(--gold2, #d2a03b);
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: block;
}

/* Pull-quote / message block inside novel */
.novel-quote {
  margin: 32px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--gold2, #d2a03b);
  background: rgba(210,160,59,.07);
  border-radius: 0 14px 14px 0;
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.75;
  color: #2c3b4f;
}

/* Chapter navigation button row */
.chapter-nav {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(8,21,39,.10);
  display: flex;
  justify-content: flex-end;
}

/* ================================================================
   DAV WORKROOM — v3.8 fixes (append to style.css)
   1. Book library tile grid (compact, tap-to-open)
   2. Sticky player responsive + visibility
   3. Join/Subscribe button responsive
   4. Font anti-aliasing
   5. Auto-hide scroll direction fix
   ================================================================ */

/* ── 0. Font rendering ─────────────────────────────────────── */
body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 1. BOOK TILE GRID ─────────────────────────────────────── */
.book-tile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 5 columns desktop → scales down gracefully */
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* Individual tile */
.book-tile { position: relative; }

.book-tile-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor: pointer;
  text-decoration: none !important;
}

.book-tile-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  border-color: rgba(240,196,108,.40);
}

/* Cover image area — 2:3 portrait ratio */
.book-tile-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(160deg,#0b1d32,#050810);
}

.book-tile-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .3s ease;
}

.book-tile-link:hover .book-tile-cover img { transform: scale(1.04); }

/* Placeholder cover (no image yet) */
.book-tile-cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 40%, rgba(240,196,108,.18), transparent 60%), #0b1d32;
}
.book-tile-placeholder-icon { font-size: 32px; opacity: .55; }

/* Badges */
.book-tile-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.4;
}
.book-tile-badge--free  { background: #25d366; color: #fff; }
.book-tile-badge--novel { background: rgba(240,196,108,.90); color: #0c1422; }

/* Lock overlay */
.book-tile-lock {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 16px; line-height: 1;
  background: rgba(5,8,16,.72); border-radius: 50%;
  width: 28px; height: 28px; display: grid; place-items: center;
}

/* Meta text below cover */
.book-tile-meta {
  padding: 10px 12px 14px;
  display: flex; flex-direction: column; gap: 3px;
}

.book-tile-type {
  font-size: 10px; font-weight: 950; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); line-height: 1;
}

.book-tile-title {
  font-size: 13px; font-weight: 950; line-height: 1.25;
  color: var(--text); margin: 0;
  /* Prevent font blur on small sizes */
  -webkit-font-smoothing: antialiased;
}

.book-tile-author {
  font-size: 11px; color: var(--muted); margin: 0; line-height: 1.3;
}

/* Locked tile: dim slightly */
.book-tile--locked .book-tile-link { opacity: .82; }
.book-tile--locked .book-tile-link:hover { opacity: 1; }

/* Coming soon tile: non-interactive */
.book-tile--coming-soon .book-tile-link { cursor: default; pointer-events: none; opacity: .55; }

/* ── 1b. Tile grid responsive ── */
@media (max-width: 1040px) {
  .book-tile-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .book-tile-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .book-tile-meta  { padding: 8px 10px 12px; }
  .book-tile-title { font-size: 12px; }
}

@media (max-width: 440px) {
  .book-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── 2. STICKY PLAYER — responsive & always visible ─────────── */
.sticky-player {
  /* Ensure it's always on top and never hidden unintentionally */
  will-change: transform;
}

/* The player itself should NEVER auto-hide — only the nav does */
/* Remove any nav-hidden class the old JS may apply to the player */
.sticky-player.nav-hidden {
  transform: translateX(-50%) !important; /* reset — player stays visible */
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile: full-width, clear font */
@media (max-width: 720px) {
  .sticky-player {
    top: 6px !important;
    width: calc(100% - 14px) !important;
    border-radius: 22px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    grid-template-columns: 44px 1fr auto !important;
    min-height: 62px !important;
  }

  .play-main {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px;
    flex-shrink: 0;
  }

  .player-meta strong {
    font-size: 13px !important;
    -webkit-font-smoothing: antialiased;
  }

  .player-meta small {
    font-size: 11px !important;
  }

  .player-controls {
    display: flex !important;
    gap: 6px;
  }

  .player-nav {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* Ensure progress bar is visible */
  .progress { margin-top: 6px; height: 3px; }
}

/* ── 3. JOIN / SUBSCRIBE BUTTON — fully responsive ──────────── */

/* Nav CTA pill */
.desktop-nav .nav-cta,
.nav-cta {
  white-space: nowrap;
  min-width: 0;
  padding: 12px 18px !important;
  font-size: 13px !important;
  /* Prevent shrinking on small screens */
  flex-shrink: 0;
}

/* Bottom nav Subscribe link */
.bottom-nav .nav-subscribe {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), #fff0c9);
  color: #0c1422 !important;
  border-radius: 14px;
  margin: 8px 4px;
  font-size: 11px;
  font-weight: 950;
}

/* Mobile header: brand + subscribe inline */
@media (max-width: 720px) {
  /* App header hidden on mobile, so the footer bottom-nav is what matters */
  .bottom-nav a.nav-subscribe strong { color: var(--gold); }
}

/* Tablet: header bar fits subscribe + logo without overflow */
@media (max-width: 1040px) and (min-width: 721px) {
  .desktop-nav { display: none; }
  .app-header {
    /* Show just brand + hamburger + subscribe on tablet */
    padding: 8px 14px !important;
  }
  /* Inline subscribe button beside hamburger */
  .header-subscribe-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), #fff0c9);
    color: #0c1422;
    font-weight: 950;
    font-size: 13px;
    border: 1px solid rgba(240,196,108,.65);
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── 4. AUTO-HIDE: ONLY the nav bars hide — player never hides ── */

/* The app-header (bottom nav on desktop) auto-hides */
.app-header {
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}

/* Correct hide transform: app-header is at bottom, so slide DOWN */
.app-header.nav-hidden {
  transform: translate(-50%, calc(100% + 28px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile bottom-nav auto-hides downward */
.bottom-nav {
  transition: transform .28s ease !important;
  will-change: transform;
}
.bottom-nav.nav-hidden {
  transform: translateY(calc(100% + 12px)) !important;
}

/* ── 5. GENERAL FONT CLARITY ─────────────────────────────────── */

/* Heading sharpness */
h1, h2, h3, h4 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Small labels: force crisp rendering */
.kicker, .track-badge, .book-tile-badge, .track-genre,
.book-tile-type, .chapter-num, .label {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 6. NOVEL READER extras ──────────────────────────────────── */
.chapter-location {
  color: var(--gold2, #d2a03b);
  font-family: Inter, Arial, sans-serif;
  font-size: 13px; font-style: normal; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 28px; display: block;
}

.novel-quote {
  margin: 32px 0; padding: 24px 28px;
  border-left: 3px solid var(--gold2, #d2a03b);
  background: rgba(210,160,59,.07);
  border-radius: 0 14px 14px 0;
  font-style: italic; font-size: 1.05em; line-height: 1.75;
  color: #2c3b4f;
}

.chapter-nav {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid rgba(8,21,39,.10);
  display: flex; justify-content: flex-end;
}

/* ── v3.2.1 primary menu dropdown + mood separation ─────────── */
.desktop-nav a[aria-current="page"] { color: var(--gold,#f0c46c); }
.nav-more { position: relative; display: inline-flex; align-items: center; }
.nav-more-btn {
  font: inherit; font-size: 13px; font-weight: 850; color: rgba(255,255,255,.84);
  padding: 12px 13px; border-radius: 999px; border: 0; background: transparent;
  cursor: pointer; white-space: nowrap;
}
.nav-more:hover .nav-more-btn, .nav-more:focus-within .nav-more-btn { background: rgba(255,255,255,.10); color: #fff; }
.nav-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 190px;
  padding: 8px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,16,.98); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: none; z-index: 99999;
}
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu { display: grid; gap: 4px; }
.nav-more-menu a { display: block; border-radius: 12px; padding: 11px 12px; }
@media (max-width:1040px){ .nav-more { display:block; } .nav-more-menu { position: static; display: grid; background: transparent; border:0; box-shadow:none; padding: 4px 0 0 10px; } .nav-more-btn { display:none; } }
.dav-mood-section--amapiano .dav-kicker { margin-bottom: 8px; }
.dav-mood-card--piano { background: linear-gradient(145deg, rgba(201,147,58,.10), rgba(18,26,45,.72)); border-color: rgba(201,147,58,.22); }
.dav-mood-card--piano .dav-mood-icon { color: var(--gold,#f0c46c); }
.dav-mood-grid--amapiano { grid-template-columns: repeat(2, 1fr); }
@media (min-width:700px){ .dav-mood-grid--amapiano { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1060px){ .dav-mood-grid--amapiano { grid-template-columns: repeat(6, 1fr); } }

.dav-mobile-home-chip {
  display: none;
}

@media (max-width: 768px) {
  .dav-mobile-home-chip {
    display: inline-flex;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    z-index: 9998;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(7, 11, 24, 0.82);
    border: 1px solid rgba(242, 179, 61, 0.35);
    color: #f8e8bd;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }

  body.admin-bar .dav-mobile-home-chip {
    top: calc(58px + env(safe-area-inset-top));
  }
}

/* =====================================================
   DAV HERO WAVE FIX
   ===================================================== */

.dav-hero {
  position: relative;
  overflow: hidden;
}

.dav-hero__left,
.dav-hero__album,
.dav-hero > * {
  position: relative;
  z-index: 2;
}

.dav-hero__wave {
  position: absolute;
  left: 28%;
  right: 18%;
  top: 36%;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  opacity: .95;
  filter: saturate(1.25) brightness(1.15);
  background:
    radial-gradient(circle at 15% 50%, rgba(112, 74, 255, .55), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(28, 209, 255, .45), transparent 28%),
    radial-gradient(circle at 78% 50%, rgba(242, 179, 61, .65), transparent 32%);
}

.dav-hero__wave::before,
.dav-hero__wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgba(255,255,255,.18) 8px,
      transparent 10px
    );
  mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 72%);
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 72%);
  opacity: .45;
}

.dav-hero__wave::after {
  background:
    linear-gradient(90deg,
      rgba(108,140,245,.0),
      rgba(108,140,245,.95),
      rgba(242,179,61,.95),
      rgba(255,255,255,.0)
    );
  height: 3px;
  top: 50%;
  bottom: auto;
  opacity: .9;
  box-shadow:
    0 0 24px rgba(108,140,245,.65),
    0 0 34px rgba(242,179,61,.45);
}

@media (max-width: 820px) {
  .dav-hero__wave {
    left: 4%;
    right: 4%;
    top: 34%;
    height: 130px;
    opacity: .85;
  }
}

/* =====================================================
   DAV CONTACT PAGE + WPFORMS
   ===================================================== */

.dav-contact-page {
  background:
    radial-gradient(circle at top left, rgba(108,140,245,.12), transparent 35%),
    radial-gradient(circle at top right, rgba(242,179,61,.12), transparent 35%),
    #060a14;
  color: #f6f7fb;
  padding: clamp(70px, 8vw, 120px) 24px;
}

.dav-contact-hero {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.dav-contact-hero h1 {
  font-size: clamp(38px, 6vw, 78px);
  line-height: .95;
  margin: 18px 0;
  font-weight: 900;
}

.dav-contact-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: #a6adbd;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
}

.dav-contact-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
}

.dav-contact-card,
.dav-contact-form-card {
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(8,12,24,.94));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.dav-contact-card h2,
.dav-contact-card h3 {
  margin-top: 0;
  color: #fff;
}

.dav-contact-card p,
.dav-contact-card li {
  color: #a6adbd;
  line-height: 1.7;
}

.dav-contact-card strong {
  color: #fff;
}

.dav-contact-card hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 28px 0;
}

.dav-contact-card ul {
  margin: 0;
  padding-left: 18px;
}

/* WPForms dark premium styling */
.dav-contact-form-card .wpforms-container {
  margin: 0 !important;
}

.dav-contact-form-card .wpforms-field-label {
  color: #f6f7fb !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.dav-contact-form-card input,
.dav-contact-form-card textarea,
.dav-contact-form-card select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
  min-height: 52px !important;
  padding: 13px 15px !important;
  font-family: var(--dav-font) !important;
}

.dav-contact-form-card textarea {
  min-height: 150px !important;
}

.dav-contact-form-card input::placeholder,
.dav-contact-form-card textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
}

.dav-contact-form-card input:focus,
.dav-contact-form-card textarea:focus,
.dav-contact-form-card select:focus {
  border-color: rgba(242,179,61,.85) !important;
  box-shadow: 0 0 0 4px rgba(242,179,61,.12) !important;
  outline: none !important;
}

.dav-contact-form-card .wpforms-field-description,
.dav-contact-form-card .wpforms-field-sublabel,
.dav-contact-form-card .wpforms-field-limit-text {
  color: #8f97aa !important;
}

.dav-contact-form-card .wpforms-error {
  color: #ff8585 !important;
}

.dav-contact-form-card button[type="submit"],
.dav-contact-form-card .wpforms-submit {
  background: linear-gradient(135deg, #f2b33d, #ffd16a) !important;
  color: #090d18 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 15px 30px !important;
  font-weight: 900 !important;
  min-height: 54px !important;
  box-shadow: 0 18px 40px rgba(242,179,61,.22) !important;
  cursor: pointer !important;
}

.dav-contact-form-card button[type="submit"]:hover,
.dav-contact-form-card .wpforms-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

@media (max-width: 820px) {
  .dav-contact-page {
    padding: 48px 16px 120px;
  }

  .dav-contact-grid {
    grid-template-columns: 1fr;
  }

  .dav-contact-hero {
    text-align: left;
  }

  .dav-contact-hero h1 {
    font-size: clamp(38px, 12vw, 58px);
  }
}