/*
 Theme Name: LoopHive Astra Child
 Template: astra
*/

/* Herunder lægger vi ALT dit rigtige design */
/* (ingen flere debug-outline / neon-grøn test osv.) */
/* ====== Browse Loops — Grid layout ====== */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

html, body {
  font-family: 'Montserrat', system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body * {
  font-family: 'Montserrat', inherit !important;
}

.loops-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ====== Loop card ====== */
.loop-item {
    background: rgba(22, 24, 37, 0.65) !important;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 0 35px rgba(125, 84, 255, 0.09);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover state */
.loop-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 50px rgba(125, 84, 255, 0.18);
}

/* ===== Titles ===== */
.loop-item h3 {
    color: #f9fafb;
    font-size: 20px;
    margin-bottom: 6px;
}
.loop-item p {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    margin-bottom: 6px;
}

/* ===== Audio player spacing ===== */
.loop-item audio {
    margin-top: 12px;
    margin-bottom: 16px;
    width: 100%;
}

/* ===== Download button ===== */
.loop-item button,
.loop-item a.button,
.loop-item a {
    background: linear-gradient(135deg, #6366f1, #8a55ff);
    color: white !important;
    padding: 10px 18px;
    border-radius: 12px;
    display: inline-block;
    text-decoration: none !important;
    font-weight: 600;
    border: none;
}

.loop-item button:hover,
.loop-item a:hover {
    opacity: .85;
}

/* Tekst */
.loop-item p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #d1d5db;
}

.loop-item p + p {
  margin-top: 6px;
}

/* License / tags som pills */
.loop-item .loop-licenses ul {
  margin-top: 12px;
  padding: 0;
}

.loop-item .loop-licenses li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.95);
  font-size: 0.72rem;
  color: #e5e7eb;
  list-style: none;
}

/* Download / CTA-knap */
.loop-item a[download],
.loop-item .loop-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 7px 16px;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(129, 140, 248, 0.95);
  color: #e5e7eb;
  background: transparent;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.loop-item a[download]:hover,
.loop-item .loop-cta:hover {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-color: transparent;
  color: #020617;
  box-shadow: 0 14px 35px rgba(79, 70, 229, 0.7);
  transform: translateY(-1px);
}

/* Mobil tweaks */
@media (max-width: 768px) {
  .loops-list {
    margin: 28px 16px 64px;
    gap: 18px;
  }

  .loop-item {
    padding: 16px 14px 14px;
  }
}

/* Titel + link */
.loop-item h3 {
  font-size: 1.05rem;
  margin: 4px 0 4px;
}

.loop-item h3 a {
  color: #f9fafb;
  text-decoration: none;
}

.loop-item h3 a:hover {
  text-decoration: underline;
}

/* Tekst */
.loop-item p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #d1d5db;
}

.loop-item p + p {
  margin-top: 6px;
}

/* License / tags som pills */
.loop-item .loop-licenses ul {
  margin-top: 12px;
  padding: 0;
}

.loop-item .loop-licenses li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.95);
  font-size: 0.72rem;
  color: #e5e7eb;
  list-style: none;
}

/* Download / CTA-knap */
.loop-item a[download],
.loop-item .loop-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 7px 16px;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(129, 140, 248, 0.95);
  color: #e5e7eb;
  background: transparent;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.loop-item a[download]:hover,
.loop-item .loop-cta:hover {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-color: transparent;
  color: #020617;
  box-shadow: 0 14px 35px rgba(79, 70, 229, 0.7);
  transform: translateY(-1px);
}

/* Mobil tweaks */
@media (max-width: 768px) {
  .loops-list {
    margin: 28px 16px 64px;
    gap: 18px;
  }

  .loop-item {
    padding: 16px 14px 14px;
  }
}


/* license-liste inde i loop cards */

.loop-item .loop-licenses ul {
  margin-top: 4px;
}

.loop-item .loop-licenses li {
  list-style: disc;
}

/* audio player */

.loop-item audio,
.loop-single audio {
  width: 100%;
}

/* download-link i liste */

.loop-item a[download] {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid #fff;
  padding: 6px 10px;
  border-radius: 4px;
}

.loop-item a[download]:hover {
  background: #fff;
  color: #000;
}

/* === SINGLE LOOP PAGE === */

.loop-single {
  background: #0b0b0b;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

.loop-single h1 {
  margin-top: 0;
  margin-bottom: 10px;
}

.loop-single p {
  margin: 4px 0;
}

/* bokse til licenser, pro, split */

.loop-single .loop-licenses {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 12px;
  background: #111;
}

.loop-single .loop-licenses li {
  list-style: disc;
}

/* download under valgt licens */

.loop-single .loop-download-box {
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 14px;
  background: #121212;
}

.loop-single .loop-download-box a[download] {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid #fff;
  text-decoration: none;
}

.loop-single .loop-download-box a[download]:hover {
  background: #fff;
  color: #000;
}

/* “coming soon”-knapper */

.loop-single button[disabled] {
  background: transparent;
  border-radius: 4px;
  border: 1px dashed #666;
  color: #aaa;
  padding: 6px 12px;
  font-size: 0.9rem;
}
/* ==== LOOPHIVE LANDING WRAPPER ==== */

#loophive-landing {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f5f5;
}

/* mørk baggrund til sektionerne (temaet håndterer body) */
#loophive-landing section {
  background: #050509;
}

/* centrer max-width og spacing (vi overstyrer inline bare lidt med !important) */
#loophive-landing section {
  max-width: 1000px;
  margin: 0 auto 40px auto !important;
  border-radius: 14px;
  padding: 40px 24px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* generel typografi */

#loophive-landing h1,
#loophive-landing h2,
#loophive-landing h3 {
  color: #ffffff;
  letter-spacing: 0.02em;
}

#loophive-landing h1 {
  font-size: 2.6rem !important;
  margin-bottom: 18px;
}

#loophive-landing h2 {
  font-size: 2rem !important;
  margin-bottom: 16px;
}

#loophive-landing h3 {
  font-size: 1.4rem !important;
  margin-bottom: 10px;
}

#loophive-landing p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #d5d5d5;
}

/* lister */

#loophive-landing ul,
#loophive-landing ol {
  color: #e0e0e0;
  font-size: 0.95rem;
}

#loophive-landing ul {
  padding-left: 20px;
}

#loophive-landing ul li,
#loophive-landing ol li {
  margin-bottom: 6px;
}

/* horisontale linjer mellem sektioner */

#loophive-landing + hr,
#loophive-landing hr {
  border: none;
}

/* CTA-knapper (vi rammer generelt a-links i CTA-områder) */

#loophive-landing a {
  transition: all 0.15s ease-in-out;
}

/* knapper i hero og final CTA – vi matcher farven #7a3cff */

#loophive-landing a[href*="browse-loops"],
#loophive-landing a[href*="become-creator"],
#loophive-landing a[href*="Apply as Creator"] {
  font-weight: 500;
}

/* generelt: lilla hover på primære links */

#loophive-landing a:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

/* små tweaks til “How it works” to columns layout */

@media (min-width: 800px) {
  #loophive-landing section:nth-of-type(4) > div {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 40px;
  }
}

/* FAQ spacing */

#loophive-landing section h3 {
  margin-top: 14px;
}

/* sidste CTA center */

#loophive-landing section:last-of-type {
  text-align: center;
}

/* lidt ekstra luft under knapper i sidste sektion */

#loophive-landing section:last-of-type a {
  margin-bottom: 6px;
}
/* Global dark background */
body,
.site,
.site-content,
.ast-container,
#page {
  background: #050509 !important;
}

/* Fjern evt. hvide bokse rundt om indholdet */
#primary,
#main {
  background: transparent !important;
}

/* Loophive landing layout */
#loophive-landing {
  max-width: 1100px;
  margin: 40px auto 80px auto;
  padding: 0 16px 40px;
}

/* Mere konsistent afstand mellem sektionerne */
#loophive-landing section {
  margin-bottom: 32px;
}

/* Hero-sektionen må gerne have lidt ekstra luft */
#loophive-landing section:first-of-type {
  margin-bottom: 40px;
}

/* Hvis dine kort ikke allerede er centreret */
#loophive-landing section > div {
  margin-left: auto;
  margin-right: auto;
}
/* Make Astra pages full-width globally */
.ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Ensure dark background fills entire viewport */
.site,
#page,
body {
  background: #050509 !important;
}

/* Remove default Astra content box */
#primary,
#main {
  background: transparent !important;
  box-shadow: none !important;
}
/* Force full-width layout */
.ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Remove Astra content box styling */
#primary, #main {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Make background full dark */
body, #page {
    background: #050509 !important;
}
/* === Global dark layout for LoopHive === */

/* Mørk baggrund overalt */
body,
.site,
#page {
  background: #050509 !important;
  color: #f5f5f7;
}

/* Fjern Astra's hvide content-box og smalle container */
.ast-container,
.site-content,
#primary,
#main {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Skjul den grimme "Home" overskrift på sider */
.page .entry-title {
  display: none;
}

/* Wrapper til landing page indhold (vores custom HTML) */
#loophive-landing {
  max-width: 1100px;
  margin: 40px auto 80px auto;
  padding: 0 16px 40px;
}

/* Giv sektionerne mere rolig, ens afstand */
#loophive-landing section {
  margin-bottom: 32px;
}

/* Sørg for at kortene er centreret */
#loophive-landing section > div {
  margin-left: auto;
  margin-right: auto;
}

/* Lidt pænere tekstgenerelt */
#loophive-landing h1,
#loophive-landing h2,
#loophive-landing h3 {
  letter-spacing: 0.01em;
}

#loophive-landing p {
  line-height: 1.7;
}
/* Add space under header so hero section does not touch the top */
#loophive-landing {
    padding-top: 120px !important;   /* justér tallet hvis du vil have mere/mindre */
}
/* ========== CREATOR DASHBOARD – MODERN DARK STYLE ========== */

/* Baggrund kun på dashboard-siden */
.page-template-creator-dashboard {
  background: #020617;
  color: #e5e7eb;
}

/* Gør Astra-headeren mere neutral på denne side */
.page-template-creator-dashboard .site-header,
.page-template-creator-dashboard .main-header-bar {
  background: #020617 !important;
  box-shadow: none;
}

/* Fjern Astra's standard-indpakning og lad os selv centrere */
.page-template-creator-dashboard .site-content,
.page-template-creator-dashboard #primary {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Selve dashboard-containeren */
.creator-dashboard {
  max-width: 1120px;
  margin: 40px auto 80px;
  padding: 0 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", sans-serif;
}

/* Generelle sektioner */
.cd-section {
  margin-bottom: 28px;
}

/* ---------- Header ---------- */

.cd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.cd-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #f9fafb;
}

.cd-subtitle {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
}

.cd-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Knapper */

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
}

.cd-btn-primary {
  background: #6366f1;
  color: #f9fafb;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.35);
}

.cd-btn-primary:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(99, 102, 241, 0.55);
}

.cd-btn-secondary,
.cd-btn-ghost {
  background: transparent;
  border-color: #27272f;
  color: #e5e7eb;
}

.cd-btn-secondary:hover,
.cd-btn-ghost:hover {
  background: #111827;
  border-color: #3f3f46;
}

.cd-btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.cd-btn-xs {
  padding: 4px 10px;
  font-size: 12px;
}

/* ---------- Cards (moderne, ikke for 2010-agtige) ---------- */

.cd-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 16px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

/* Minimal, men lidt glass: let overlay + blur */
.cd-card {
  backdrop-filter: blur(10px);
}

/* KPI grid */

.cd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cd-kpi-label {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
}

.cd-kpi-value {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  color: #f9fafb;
}

.cd-kpi-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

/* ---------- Sektionstitler ---------- */

.cd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cd-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
}

.cd-link {
  font-size: 13px;
  color: #a5b4fc;
  text-decoration: none;
}

.cd-link:hover {
  text-decoration: underline;
}

/* ---------- TABLE (Modern Dark + Minimal Borders) ---------- */

.cd-table-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(31, 41, 55, 0.4);
}

.cd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #e5e7eb;
}

/* Header */
.cd-table thead {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
}

.cd-table th {
  padding: 10px 14px;
  font-weight: 500;
  color: #9ca3af;
  border-bottom: 1px solid rgba(31, 41, 55, 0.4);
}

/* Body rows */
.cd-table td {
  padding: 10px 14px;
  border-top: 1px solid rgba(31, 41, 55, 0.2);
}

/* Hover - subtle glow instead of block highlight */
.cd-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.55);
  backdrop-filter: blur(4px);
}

/* Action buttons */
.cd-table-actions {
  text-align: right;
}

/* Remove ALL white/light borders by ensuring no inherited theme rules leak */
.cd-table th, .cd-table td {
  border-color: rgba(31, 41, 55, 0.25) !important;
}

/* Status pills */

.cd-status {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cd-status-publish {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.cd-status-draft {
  background: rgba(250, 204, 21, 0.16);
  color: #facc15;
}

/* Empty state */

.cd-empty {
  text-align: center;
}

.cd-empty p {
  margin-bottom: 10px;
  color: #d4d4d8;
}

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .creator-dashboard {
    max-width: 100%;
    margin: 24px auto 60px;
    padding-inline: 16px;
  }

  .cd-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .cd-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cd-kpi-grid {
    grid-template-columns: 1fr;
  }

  .cd-table {
    font-size: 12px;
  }
}
/* ---------- MY LOOPS SPECIFIC ---------- */

.ml-header {
  align-items: center;
}

.ml-count {
  margin-top: 8px;
  font-size: 13px;
  color: #9ca3af;
}

.ml-filters {
  padding: 12px 16px;
}

.ml-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
}

/* Search + filter groups */
.ml-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ml-filter-group label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
}

/* Search input */
.ml-search-group {
  flex: 1 1 220px;
  min-width: 200px;
}

.ml-search-group input {
  background: #020617;
  color: #e5e7eb;
  border-radius: 999px;
  border: 1px solid #27272f;
  padding: 7px 12px;
  font-size: 13px;
}

.ml-search-group input::placeholder {
  color: #6b7280;
}

.ml-search-group input:focus {
  outline: none;
  border-color: #4f46e5;
}

/* Selects */
.ml-filter-group select {
  background: #020617;
  color: #e5e7eb;
  border-radius: 999px;
  border: 1px solid #27272f;
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  min-width: 150px;
}

.ml-filter-group select:focus {
  outline: none;
  border-color: #4f46e5;
}

/* Apply / reset buttons */
.ml-filter-actions {
  display: flex;
  gap: 8px;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .ml-filters-form {
    align-items: stretch;
  }

  .ml-search-group,
  .ml-filter-group select {
    width: 100%;
  }
}
/* ----- HERO SECTION ----- */
.lh-hero {
  padding: 140px 24px 140px;
}


.lh-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.lh-hero-title {
  font-size: 50px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
}

.lh-hero-subtitle {
  font-size: 25px;
  color: #d1d5db;
  margin-bottom: 32px;
  line-height: 1.6;
}

.lh-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}

.lh-btn {
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.lh-btn-primary {
    padding: 8px 16px;
  font-size: 12px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 16px 40px rgba(99, 102, 241, 0.45);
}

.lh-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 22px 55px rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
}


.lh-btn-secondary {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

.lh-btn-secondary:hover {
  background: #111827;
  border-color: #6b7280;
}

.lh-hero-trust {
  margin-top: 20px;
  font-size: 14px;
  color: #9ca3af;
}

/* Remove underline for all lh-btn links */
.lh-btn {
  text-decoration: none !important;
}

.lh-hero-title {
  margin-bottom: 24px;
}

.lh-hero-subtitle {
  margin-bottom: 36px;
}

.lh-hero-ctas {
  margin-bottom: 32px;
}

/* Lad indholdet være transparent så baggrunden ses igennem */
.home .site-content,
.home .ast-container {
  background: transparent !important;
}
/* Hero som centralt kort uden mærkelige kanter */
.lh-hero {
  padding: 140px 24px 140px;
  text-align: center;
  color: #f9fafb;
}

.lh-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
/* HOME: fuld blå gradient-baggrund på hele siden */
.home,
.home body,
.home .site,
.home #page {
  background: radial-gradient(circle at top, #1e1b4b, #020617 60%) !important;
}

/* Ingen bokse/white boxes ovenpå på forsiden */
.home .site-content,
.home .ast-container,
.home #primary,
.home #main {
  background: transparent !important;
  box-shadow: none !important;
}
/* -------- Landing sections (below hero) -------- */

.lh-section {
  padding: 80px 24px;
}

.lh-section-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.lh-kicker {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #818cf8;
  margin-bottom: 12px;
}

.lh-section-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #e5e7eb;
  margin-bottom: 12px;
}

.lh-section-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: #9ca3af;
  max-width: 640px;
  margin-bottom: 32px;
}

/* Grid with cards */
.lh-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Cards */
.lh-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 18px 20px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
}

.lh-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 8px;
}

.lh-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #9ca3af;
}

/* Step badges in licensing section */
.lh-steps .lh-card {
  position: relative;
  padding-top: 30px;
}
.lh-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lh-card:hover {
  transform: translateY(-4px);
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
}


.lh-step-badge {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(129, 140, 248, 0.2);
  color: #c7d2fe;
}

/* Final CTA section – lidt mere centrering */
.lh-section-cta {
  text-align: center;
  padding-bottom: 120px;
}

.lh-section-cta .lh-section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.lh-section-cta .lh-hero-ctas {
  justify-content: center;
}

/* Mobile tweaks */
@media (max-width: 800px) {
  .lh-section {
    padding: 60px 18px;
  }

  .lh-section-title {
    font-size: 22px;
  }

  .lh-grid-3 {
    grid-template-columns: 1fr;
  }
}
/* Simple fade-up animation */
@keyframes lh-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero animation */
.lh-hero-inner {
  animation: lh-fade-up 0.7s ease-out 0.1s both;
}

/* Sections under hero */
.lh-section-inner {
  animation: lh-fade-up 0.7s ease-out 0.2s both;
}
/* Step cards — move number badge to top-right */
.lh-step-card {
  position: relative;
  padding-top: 32px !important; /* extra spacing since the badge moves */
}

/* Number badge */
.lh-step-number {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
}
/* Force step badges to top-right inside cards */
.lh-card {
    position: relative !important;
}

.lh-card .lh-step-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    background: rgba(255,255,255,0.08) !important;
    color: #9ca3af !important;
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
    backdrop-filter: blur(6px) !important;
    display: inline-block !important;
    z-index: 10 !important;
}
/* Round, modern step-badges with LoopHive color theme */
.lh-card {
    position: relative !important;
}

.lh-card .lh-step-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.7rem !important;
    font-weight: 600 !important;

    border-radius: 999px !important;

    /* Soft LoopHive purple glow */
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;

    box-shadow: 
        0 4px 10px rgba(99, 102, 241, 0.35),
        0 0 12px rgba(139, 92, 246, 0.25) !important;

    backdrop-filter: blur(6px) !important;
    z-index: 10 !important;
}
/* ==========================================================
   LOOPHIVE — PREMIUM NEON BADGE + HOVER GLOW + MICRO TILT
   ========================================================== */

.lh-card {
    position: relative !important;
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
                box-shadow 0.35s ease !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}

/* Micro-tilt + stronger glow on hover */
.lh-card:hover {
    transform: perspective(900px) rotateX(3deg) rotateY(-3deg) scale(1.02);
    box-shadow:
        0 18px 55px rgba(0,0,0,0.55),
        0 0 35px rgba(124, 77, 255, 0.4) !important;
}

/* Neon badge */
.lh-card .lh-step-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;

    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    font-size: 0.9rem !important;
    font-weight: 600 !important;
    z-index: 10;

    background: #0d0f1a !important;
    border: 2px solid #7c4dff !important;
    color: #e6d6ff !important;

    box-shadow:
        0 0 8px rgba(124,77,255,0.85),
        0 0 22px rgba(124,77,255,0.55),
        inset 0 0 6px rgba(124,77,255,0.25) !important;

    animation: lhNeonPulse 2.4s infinite ease-in-out;
    transform: translateZ(20px);
}

/* Stronger glow on card hover */
.lh-card:hover .lh-step-badge {
    box-shadow:
        0 0 12px rgba(124,77,255,1),
        0 0 38px rgba(124,77,255,0.8),
        inset 0 0 8px rgba(124,77,255,0.4) !important;
}

/* Neon pulse animation */
@keyframes lhNeonPulse {
    0% {
        box-shadow:
            0 0 8px rgba(124,77,255,0.75),
            0 0 18px rgba(124,77,255,0.45),
            inset 0 0 4px rgba(124,77,255,0.18);
    }
    50% {
        box-shadow:
            0 0 14px rgba(124,77,255,1),
            0 0 32px rgba(124,77,255,0.75),
            inset 0 0 8px rgba(124,77,255,0.35);
    }
    100% {
        box-shadow:
            0 0 8px rgba(124,77,255,0.75),
            0 0 18px rgba(124,77,255,0.45),
            inset 0 0 4px rgba(124,77,255,0.18);
    }
}
/* Center hero CTAs og trust linje */
.lh-hero-ctas,
.lh-hero-trust {
    display: flex;
    justify-content: center;
    text-align: center;
}

.lh-hero-inner {
    text-align: center !important;
}
/* Center hero content */
.lh-hero-inner {
    text-align: center !important;
}

/* CTA-wrapper: knapper + "trusted by" */
.lh-hero-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;      /* gør det muligt at bryde linjen */
    gap: 10px;
    margin-top: 24px;
}

/* Knapperne i hero */
.lh-hero-ctas .lh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;     /* større knapper */
    font-size: 16px;        /* større tekst */
    border-radius: 50px;    /* gør formen endnu mere smooth */

    margin: 0 6px;          /* lidt spacing mellem knapperne */
}


/* "Trusted by..." skal ligge UNDER knapperne */
.lh-hero-ctas .lh-hero-trust {
    flex-basis: 100%;      /* fylder hele linjen = ryger ned under */
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}
/* ===== Latest Loops section ===== */

.lh-section-latest {
  padding: 10px 0 60px;
}

.lh-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Overskrifter og tekst i sektioner */
.lh-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 10px;
}

.lh-section-title {
  font-size: 24px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 8px;
}

.lh-section-subtitle {
  font-size: 14px;
  color: #9ca3af;
  max-width: 600px;
  margin: 0 0 24px;
}

/* Grid layout */
.lh-loops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Loop cards */
.lh-loop-card {
  position: relative;
  background: radial-gradient(circle at top left,
    rgba(79, 70, 229, 0.16),
    rgba(15, 23, 42, 0.98)
  );
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 18px 18px 20px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(1px);
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out;
}
.lh-loop-card {
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}


.lh-loop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(129, 140, 248, 0.8);
  box-shadow:
    0 26px 70px rgba(15, 23, 42, 0.95),
    0 0 28px rgba(79, 70, 229, 0.35);
}

/* Meta pills */
.lh-loop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.lh-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #e5e7eb;
}

.lh-pill-subtle {
  background: rgba(15, 23, 42, 0.6);
  color: #9ca3af;
}

/* Tekst inde i kortene */
.lh-loop-title {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 2px;
}

.lh-loop-creator {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.lh-loop-desc {
  font-size: 13px;
  color: #d1d5db;
  margin-bottom: 12px;
}

/* Tags */
.lh-loop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.lh-loop-tags span {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5f5;
}

/* Knappen i kortet genbruger dit button-look */
.lh-btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
  text-decoration: none !important;
  background: transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.lh-btn-ghost-sm:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(129, 140, 248, 0.9);
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.45);
  transform: translateY(-1px);
}

/* Responsiv - én kolonne på mobil */
@media (max-width: 900px) {
  .lh-loops-grid {
    grid-template-columns: 1fr;
  }
}
/* === Featured loop card (purple glow) === */

.lh-loop-card {
  position: relative; /* så badge kan positioneres */
}

/* Selve featured-styling */
.lh-loop-card--featured {
  background: radial-gradient(circle at top left,
    rgba(129, 140, 248, 0.28),
    rgba(15, 23, 42, 0.98)
  );
  border-color: rgba(129, 140, 248, 0.9);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.75),
    0 0 32px rgba(129, 140, 248, 0.6);
  transform: translateY(-2px);
  padding-top: 28px; /* lidt ekstra luft pga badge */
}

/* Hover: lidt ekstra lift på featured */
.lh-loop-card--featured:hover {
  transform: translateY(-5px);
}

/* Badge øverst i højre hjørne */
.lh-loop-badge {
  position: absolute;
  top: -15px;
  right: 14px;
  padding: 6px 9px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #f9fafb;
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.6);
  white-space: nowrap;
}
/* ===== Loophive custom audio player ===== */

.lh-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
}

.lh-audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #f9fafb;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
/* Pause-ikon når der spilles */
.lh-audio-play.is-playing span {
  border: none;
  width: 12px;
  height: 12px;
  position: relative;
}

.lh-audio-play.is-playing span::before,
.lh-audio-play.is-playing span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: #ffffff;
}

.lh-audio-play.is-playing span::after {
  right: 0;
  left: auto;
}

/* ===== Loophive audio track + waveform ===== */

.lh-audio-track {
  position: relative;
  flex: 1;
  height: 1px; 
	/* lidt højere så bølgerne kan ses */
  border-radius: 999px;
  background: rgba(50, 65, 81, 0.85);
  overflow: hidden;
  cursor: pointer;
}

/* Skjul browserens UI */
.lh-audio-element {
  display: none;
}
/* Gør play/pause-ikonet tydeligere */
.lh-audio-play span {
  font-size: 16px;
  color: #f9fafb;
  line-height: 1;
  display: inline-block;
  transform: translateX(1px); /* så trekanten ser centreret ud */
}
/* ===== Browse Loops – layout ===== */
.loops-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 60px auto 120px;
    padding: 0 20px;
}

/* Kort-stil (glass / mørk) */
.loop-item {
    position: relative;
    background: radial-gradient(circle at top left, #1f2937 0%, #020617 65%);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    padding: 22px 24px 20px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.85);
    color: #f9fafb;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Lille “glow” på hover */
.loop-item::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at top, rgba(129, 140, 248, 0.18), transparent 55%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.loop-item:hover {
    transform: translateY(-4px);
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 1);
}

.loop-item:hover::before {
    opacity: 1;
}

/* ===== Typografi inde i kort ===== */

/* Titel */
.loop-item h3 {
    font-size: 18px !important;
    font-weight: 600;
    margin: 0 0 8px !important;
    color: #f9fafb;
}

/* Generelle tekster */
.loop-item p {
    font-size: 13px !important;
    line-height: 1.6;
    margin: 2px 0 !important;
    color: rgba(241, 245, 249, 0.75);
}

/* Første meta-linje (BPM / Key) lidt lysere */
.loop-item p:first-of-type {
    font-weight: 500;
    color: rgba(244, 244, 245, 0.9);
}

/* License-tekst kan være lidt dæmpet */
.loop-item p:last-of-type {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: rgba(148, 163, 184, 0.9);
}

/* ===== Audio + Download ===== */

/* Lidt luft før afspiller */
.loop-item audio {
    margin-top: 14px;
    width: 100%;
}

/* Download-knappen (WP bruger typisk .button) */
.loop-item .button,
.loop-item button,
.loop-item a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 8px 20px;
    border-radius: 999px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #f9fafb;
    text-decoration: none;
    box-shadow: 0 14px 38px rgba(79, 70, 229, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.loop-item .button:hover,
.loop-item button:hover,
.loop-item a.button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 20px 55px rgba(79, 70, 229, 0.8);
}

.loop-item .button:active,
.loop-item button:active,
.loop-item a.button:active {
    transform: translateY(0);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.7);
}
/* ===== Download-knap på Browse Loops: Lilla pill-style ===== */

.loops-list .loop-item a,
.loops-list .loop-item button,
.loops-list .loop-item input[type="button"],
.loops-list .loop-item input[type="submit"],
.loops-list .loop-item .button,
.loops-list .loop-item .wp-element-button,
.loops-list .loop-item .wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 14px !important;
    padding: 8px 22px !important;

    border-radius: 999px !important;
    border: none !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;

    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #f9fafb !important;
    text-decoration: none !important;

    box-shadow: 0 14px 38px rgba(79, 70, 229, 0.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Hover-effekt */
.loops-list .loop-item a:hover,
.loops-list .loop-item button:hover,
.loops-list .loop-item input[type="button"]:hover,
.loops-list .loop-item input[type="submit"]:hover,
.loops-list .loop-item .button:hover,
.loops-list .loop-item .wp-element-button:hover,
.loops-list .loop-item .wp-block-button__link:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 20px 55px rgba(79, 70, 229, 0.8) !important;
}
.site-footer a[href*="wpastra"] {
    display: none !important;
}
.site-footer .ast-theme-footer {
    display: none !important;
}
body {
    background: linear-gradient(
        to bottom,
        #05060F 0%,
        #05060F 60%,
        #02030A 100%
    ) !important;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        rgba(88, 76, 255, 0.08) 0%,
        rgba(0,0,0,0) 60%
    );
}
/* ==== LoopHive Custom Footer ==== */

/* Skjul Astra's standard-footer (den med "Powered by Astra") */
.site-footer {
    display: none;
}

/* Wrapper */
.lh-footer {
    background:
        radial-gradient(circle at top,
            rgba(20, 20, 35, 0.35) 0,
            rgba(5, 5, 9, 1) 70%
        );
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding: 40px 16px 28px;
    color: #f5f5f7;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}


/* Indhold centreret som resten af sitet */
.lh-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Topsektion: logo + tagline */
.lh-footer-top {
    text-align: center;
    margin-bottom: 28px;
}

.lh-footer-logo {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855ff);
    color: #0b0b15;
    box-shadow: 0 0 40px rgba(129, 140, 248, 0.55);
    margin-bottom: 10px;
}

.lh-footer-tagline {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.75);
}

/* Grid med 3 kolonner */
.lh-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 26px;
}

.lh-footer-col h4 {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.65);
    margin: 0 0 12px;
}

.lh-footer-col a {
    display: block;
    font-size: 14px;
    padding: 4px 0;
    color: rgba(226, 232, 240, 0.78);
    text-decoration: none;
    transition: color 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}

.lh-footer-col a:hover {
    color: #a5b4fc;
    transform: translateX(2px);
    opacity: 1;
}

/* Bottom line */
.lh-footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    padding-top: 14px;
    text-align: center;
}

.lh-footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: rgba(148, 163, 184, 0.7);
}

/* Responsiv: stack kolonner på mobil */
@media (max-width: 780px) {
    .lh-footer {
        padding: 32px 16px 22px;
    }

    .lh-footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lh-footer-col {
        text-align: left;
    }
}
/* Center footer columns perfectly */
.lh-footer-columns {
    max-width: 900px; /* juster efter smag: 800–1100px */
    margin: 0 auto;   /* centrer containeren */
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-top: 32px;
}

/* Hvis du vil have dem endnu mere centreret visuelt */
.lh-footer-columns > div {
    flex: 1;
    min-width: 0;
}
/* === LoopHive custom footer === */

.site-footer {
  background: radial-gradient(circle at top center, #15193b 0, #050509 55%, #050509 100%);
  padding: 80px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Fjern evt. standard-footer-tekst fra Astra, hvis noget stadig sniger sig ind */
.site-footer .site-info,
.site-footer .ast-small-footer {
  display: none;
}

/* Wrapper */
.lh-footer {
  color: #f5f5ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

.lh-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Logo-pill */
.lh-footer-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 0 40px rgba(129, 140, 248, 0.5);
  margin-bottom: 10px;
}

.lh-footer-tagline {
  font-size: 13px;
  color: #a5b4fc;
  margin: 0 0 36px;
}

/* Grid med 3 kolonner, centreret */
.lh-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  justify-items: center;
  margin-bottom: 36px;
  text-align: left;
}

.lh-footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b6baff;
  margin-bottom: 12px;
}

.lh-footer-col a {
  display: block;
  font-size: 13px;
  color: #e5e7ff;
  text-decoration: none;
  margin-bottom: 6px;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.lh-footer-col a:hover {
  opacity: 1;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Nederste linje */
.lh-footer-bottom {
  border-top: 1px solid rgba(148, 163, 255, 0.18);
  padding-top: 18px;
  font-size: 11px;
  color: #9ca3ff;
  opacity: 0.8;
}

/* Mobil: stack kolonnerne pænt */
@media (max-width: 768px) {
  .lh-footer-inner {
    text-align: left;
  }

  .lh-footer-grid {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }

  .lh-footer-logo-pill {
    margin-left: 0;
  }
}
.lh-footer-tagline {
  margin-bottom: 24px; /* tidligere 36px */
}

.lh-footer-grid {
  margin-bottom: 28px; /* tidligere 36px */
}
.site-footer {
  background: radial-gradient(circle at top center, #0b0d20 0, #050509 55%, #050509 100%);
}
/* Browse Loops Header */
.lh-browse-header {
    text-align: center;
    margin-top: 120px;
    margin-bottom: 40px;
}

.lh-browse-header h1 {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
}

.lh-browse-header p {
    font-size: 18px;
    opacity: 0.7;
    margin-top: 8px;
}

/* Filterbar styling */
.lh-filterbar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.lh-filterbar button {
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    transition: 0.15s ease;
}

.lh-filterbar button:hover,
.lh-filterbar button.active {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-color: transparent;
}
/* === Browse Loops – filter chips === */

.lh-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px auto 10px;
    justify-content: center;
}

.lh-filterbar button {
    background: rgba(255, 255, 255, 0.03);
    color: #f5f5f5;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lh-filterbar button.active {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-color: transparent;
    color: #f9fafb;
}

/* Container til værdichips */
.lh-filter-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    min-height: 32px; /* så den ikke hopper når tom */
}

/* Selve “pills” */
.lh-filter-chip {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e5e7eb;
    font-size: 0.8rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.lh-filter-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(129, 140, 248, 0.8);
}

.lh-filter-chip.active {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-color: transparent;
    color: #f9fafb;
}

/* Små fade/slide på loop cards */
.loops-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.loop-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.loop-item.is-hidden {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
/* ------------------------------
   LOOPHIVE – AUDIO PLAYER STYLE
   Matches landing page player
------------------------------ */

.lh-audio-player {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 0 18px rgba(140, 82, 255, 0.15);
    backdrop-filter: blur(6px);
    margin-top: 10px;
}

/* Play button */
.lh-audio-play {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a4cff, #8a63ff);
    color: white;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 0 12px rgba(106, 76, 255, 0.4);
    position: relative;
}

/* Play icon inside button */
.lh-audio-play::before {
    content: "▶";
    font-size: 16px;
    margin-left: 2px;
}

/* When playing */
.lh-audio-play.playing {
    background: linear-gradient(135deg, #ff4cf0, #b44cff);
    box-shadow: 0 0 16px rgba(255, 76, 240, 0.6);
}

.lh-audio-play.playing::before {
    content: "❚❚";
    margin-left: 0;
}

/* Progress bar wrapper */
.lh-audio-progress-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

/* Fill bar */
.lh-audio-progress {
    height: 6px;
    width: 0%;
    background: linear-gradient(90deg, #8f5cff, #c283ff);
    border-radius: 6px;
    transition: width 0.15s linear;
}

/* Time text */
.lh-audio-time {
    font-size: 13px;
    opacity: .7;
    color: #cfcfcf;
    min-width: 42px;
    text-align: right;
}
.lh-why {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 24px;
  text-align: center;
  color: #eaeaf0;
}

.lh-why h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.lh-why-sub {
  opacity: 0.8;
  margin-bottom: 20px;
}

.lh-why-points {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.lh-why-points li {
  background: rgba(255,255,255,0.04);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
}
/* Browse Loops – gradient pill tagline */
.lh-browse-tagline {
  display: flex;
  justify-content: center;
  margin: 0px 0 50px;
}

.lh-browse-tagline span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 10px 25px rgba(1, 120, 148, 0.35);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #050816;  /* mørk tekst, så den matcher din style */
}
.lh-audio-play span {
  display: none;
}
.lh-audio-play {
  width: 48px;        /* eller den størrelse du vil have */
  height: 48px;       /* samme som width → perfekt cirkel */
  border-radius: 50%; /* gør den rund */
  padding: 0;         /* sikrer proportionerne */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Browse Loops grid layout */
.lh-browse-loops-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.lh-browse-loops-grid {
  margin-top: 2.5rem;
}

.lh-loop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* Loop card basics */
.lh-loop-card {
  border-radius: 24px;
  padding: 1.75rem;
}

/* Actions (Download + View loop) */
.lh-loop-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Gør en secondary-agtig knap synlig, hvis vi bruger ghost-klassen */
.lh-btn.lh-btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  font-size: 0.9rem;
}
.lh-loop-actions .lh-btn-ghost-sm {
  font-size: 12px;        /* tweak */
  padding: 10px 14px;     /* tweak */
}
.lh-filter-values {
  margin-top: 1rem;
  display: none; /* JS sætter display:flex når relevant */
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lh-filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.lh-filter-chip.active {
  border-color: transparent;
  background: linear-gradient(90deg, #a855ff, #6366f1);
}
/* Single loop layout */
.lh-single-loop-wrapper {
  max-width: 960px;
  margin: 80px auto 80px;
  padding: 32px 32px 48px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(168,85,255,0.35), transparent 60%),
    radial-gradient(circle at bottom right, rgba(99,102,241,0.28), transparent 60%),
    rgba(17,17,28,0.92);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 80px rgba(0,0,0,0.75);
}

/* Back link as pill */
.lh-single-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(15,23,42,0.9);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.8;
  text-decoration: none;
  margin-bottom: 18px;
}

/* Back link styled like main purple buttons */
.lh-single-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg,#a855ff,#6366f1);
  color: white !important;
  text-decoration: none;
  font-weight: 999;
  font-size: 12.5px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  margin-bottom: 24px;
}

.lh-single-back-link:hover {
  transform: translateY(0px);
  box-shadow: 0 18px 40px rgba(0,0,0,.0);
  opacity: 0.9;
}

.lh-single-back-arrow {
  font-size: 14px;
}


.lh-single-back-arrow {
  font-size: 12px;
}

/* HERO / banner – Variant B */
.lh-single-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 26px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(168,85,255,0.55), transparent 60%),
    radial-gradient(circle at bottom right, rgba(56,189,248,0.35), transparent 55%),
    linear-gradient(135deg, #020617, #020617 25%, #020617 55%, #020617);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

/* “Waveform / light streak” i hero */
.lh-single-hero::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto;
  height: 120px;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.25) 0,
      rgba(255,255,255,0.25) 2px,
      transparent 2px,
      transparent 8px
    );
  opacity: 0.10;
  transform: skewX(-18deg);
  filter: blur(6px);
  pointer-events: none;
}

/* lille ekstra glow nederst
.lh-single-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px;
  height: 120px;
  background: radial-gradient(circle at center, rgba(148,163,253,0.5), transparent 65%);
  opacity: 0.35;
  pointer-events: none;
} */


/* Title + meta */
.lh-single-hero-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.lh-single-title {
  font-size: 32px;
  margin-bottom: 6px;
  color: #f9fafb;
}

.lh-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0.9;
  font-size: 13px;
  color: #e5e7eb;
}


/* Creator in hero */
.lh-single-hero-creator {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
}

.lh-single-creator-avatar {
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
}

.lh-single-creator-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lh-single-creator-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
  color: #cbd5e1;
}

.lh-single-creator-name {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff !important;
}

.lh-single-creator-name:hover {
  text-decoration: underline;
}

.lh-single-creator-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
  color: #cbd5e1;
}


/* Player */
.lh-single-player {
  margin: 12px 0 24px;
}

.lh-single-audio {
  width: 100%;
}

/* Instruments */
.lh-single-instruments {
  margin: 8px 0 22px;
  opacity: 0.9;
}

/* License box */
.lh-single-license-box h3 {
  margin-bottom: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 1;
  color: #ffffff;
}

.lh-single-license-list li {
  margin-bottom: 14px;
  opacity: 1;
  font-size: 13px;
  color: #e5e7eb;
}

.lh-single-license-list li span {
  font-size: 12px;
  opacity: 0.85;
  color: #d1d5db;
}


.lh-single-license-list li span {
  font-size: 12px;
  opacity: 0.85;
  color: #d1d5db;
}


.lh-single-license-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lh-single-license-list li {
  margin-bottom: 14px;
  opacity: 0.9;
  font-size: 13px;
}

.lh-single-license-list li span {
  font-size: 12px;
  opacity: 0.8;
}

/* Download section */
.lh-single-download-section {
  margin-top: 12px;
}

.lh-single-license-note {
  margin-bottom: 4px;
  font-size: 13px;
}

.lh-single-license-explainer {
  margin-bottom: 10px;
  font-size: 12px;
  opacity: 0.8;
}

.lh-single-download-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 15px 24px;
  border-radius: 999px;
  background: linear-gradient(90deg,#a855ff,#6366f1);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.7);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.lh-single-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.8);
  opacity: 0.95;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .lh-single-loop-wrapper {
    margin: 60px 16px 60px;
    padding: 24px 18px 32px;
    border-radius: 22px;
  }

  .lh-single-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .lh-single-title {
    font-size: 24px;
  }
}
/* Skjul native WP audio player */
.lh-single-player audio {
  display: none;
}
/* Custom LoopHive player (single page) */
.lh-single-player {
  margin: 20px 0 30px;
}

.lh-single-player .lh-audio-player {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.lh-single-player .lh-audio-play {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: none;
  background: linear-gradient(135deg, #8254fe, #5c2cff);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(125, 53, 255, 0.5);
}

.lh-single-player .lh-audio-play span {
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent white;
  margin-left: 2px;
}

.lh-single-player .lh-audio-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.lh-single-player .lh-audio-progress {
  height: 100%;
  width: 0%;
  background: white;
  border-radius: 4px;
}

.lh-single-player .lh-audio-time {
  font-size: 12px;
  opacity: 0.7;
  min-width: 38px;
  text-align: right;
}
.lh-audio-play {
  cursor: pointer;
  pointer-events: auto;
}
.lh-audio-play {
  pointer-events: auto !important;
  z-index: 999999 !important;
  position: relative !important;
  background: rgba(0,0,0,0.4) !important;
}
.lh-single-audio-track,
.lh-audio-track {
    pointer-events: none !important;
}
/* Slå klik fra på alt inde i audio-player */
.lh-audio-player * {
  pointer-events: none !important;
}

/* MEN: knappen + dens ikon MÅ godt få klik */
.lh-audio-player .lh-audio-play,
.lh-audio-player .lh-audio-play * {
  pointer-events: auto !important;
  cursor: pointer;
}
.lh-audio-track,
.lh-audio-progress,
.lh-audio-time {
    pointer-events: none !important;
}

.lh-audio-play {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* LoopHive – Browse Loops cards hover reset */
.loops-list .loop-item {
  background: radial-gradient(circle at top left, #1b1234 0%, #090812 60%, #05040a 100%);
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.loops-list .loop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
  border-color: rgba(180, 120, 255, 0.55);
  background: radial-gradient(circle at top left, #29124a 0%, #0b0718 55%, #05040a 100%);
}
/* Allow clicks through LoopHive glows / gradients */
[class^="lh-"]::before,
[class^="lh-"]::after,
[class*=" lh-"]::before,
[class*=" lh-"]::after {
    pointer-events: none !important;
}
/* EMERGENCY: sørg for at links/knapper ligger over dekorations-lag */
body .site a,
body .site button {
  position: relative;
  z-index: 5;
}
.lh-mini-brandline {
  text-align: center;
  color: #b3b3bd;
  font-size: 15px;
  margin: 25px 0 25px;
  opacity: 0.9;
}
/* Better header spacing */
.lh-browse-header {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Pill styling */
.lh-browse-pill {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 22px;
  background: #8254ff;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
}

/* Reduce giant whitespace above loop cards */
.loops-list {
  margin-top: 20px !important;
}

.lh-filterbar {
  margin-bottom: 20px;
}

.lh-browse-loops-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* === Browse Loops header spacing === */
.lh-browse-header {
  max-width: 1100px;
  margin: 120px auto 28px;   /* top = afstand fra menu, bund = lidt luft ned til filters */
  padding: 0 16px;
  text-align: center;
}

/* cards lidt tættere på, men ikke helt nede i footer */
.loops-list {
  margin-top: 28px !important;
  margin-bottom: 90px;
}

/* lidt luft under filter-knapperne */
.lh-filterbar {
  margin-top: 22px;
  margin-bottom: 6px;
}

/* mobil – lidt mindre topmargin */
@media (max-width: 768px) {
  .lh-browse-header {
    margin-top: 100px;
  }
}
/* === Browse Loops – layout der matcher landing page === */

.lh-browse-loops-page {
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 120px 16px 40px; /* giver luft under headeren */
}

/* Hero / intro */
.lh-browse-hero {
  text-align: center;
  margin-bottom: 28px;
}

.lh-browse-hero .lh-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #818cf8;
  margin-bottom: 10px;
}

.lh-hero-title--browse {
  font-size: 40px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.lh-hero-subtitle--browse {
  font-size: 15px;
  color: #9ca3af;
  max-width: 640px;
  margin: 0 auto 22px;
  line-height: 1.7;
}

/* Filterbar + chips tættere på hero og loops */
.lh-browse-hero .lh-filterbar {
  margin-top: 14px;
  margin-bottom: 10px;
}

.lh-browse-hero .lh-filter-values {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Loops grid tættere på hero – overskriv gamle margins */
.lh-browse-loops-page .loops-list {
  margin: 16px 0 80px !important;  /* ingen kæmpe top-margin */
  padding: 0 !important;
}

/* Hvis den gamle gradient-pill stadig findes, skjul den */
.lh-browse-tagline {
  display: none !important;
}

/* Cards skal kunne have et glow-lag indeni */
body.page-id-39 .loop-item {
  position: relative;
  overflow: hidden;
}

/* Glow-lag i baggrunden af kortet */
body.page-id-39 .loop-item::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 50% 0%, rgba(130, 84, 255, 0.45), transparent 60%);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.9);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  pointer-events: none;
}

/* Når man hover cardet – glow fader ind */
body.page-id-39 .loop-item:hover::before {
  opacity: 0.75;
  transform: translate3d(0, 0, 0) scale(1.05);
}

/* Lidt ekstra depth på cards generelt */
body.page-id-39 .loop-item {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

/* Fallback hvis browser ikke kan blurre */
@supports not ((backdrop-filter: blur(1px))) {
  body.page-id-39 .loop-item {
    backdrop-filter: none;
  }
}
/* --- Browse Loops Typography --- */
.page-id-39 h1,
.page-id-39 h2,
.page-id-39 .section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(165, 113, 255, 0.35); /* Varm lilla glow */
}

/* Undertekst / description */
.page-id-39 p {
    font-family: 'Montserrat', sans-serif !important;
    color: #d6d6e8;
    text-shadow: 0 0 6px rgba(145, 96, 255, 0.25);
}

/* Tabs (Genre/Mood/Key…) */
.page-id-39 .loop-filters button,
.page-id-39 .loop-filters a {
    font-family: 'Montserrat', sans-serif !important;
}
/* --- LOOP CARDS --- */

/* Card title (fx: Bouncy Rhodes) */
.page-id-39 .loop-card-title,
.page-id-39 .loop-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.2px;
    text-shadow: 
        0 0 6px rgba(150, 110, 255, 0.28),
        0 0 12px rgba(150, 110, 255, 0.20);
}

/* Metadata: BPM, Genre, Key, Mood, Instruments osv. */
.page-id-39 .loop-card p,
.page-id-39 .loop-meta,
.page-id-39 .loop-meta * {
    font-family: 'Montserrat', sans-serif !important;
    color: #cfcfe8;
    font-weight: 400;
    text-shadow: 
        0 0 4px rgba(120, 85, 240, 0.22);
}

/* Buttons (View Loop / Download) */
.page-id-39 .loop-card .button,
.page-id-39 .loop-card button,
.page-id-39 .loop-card a.button {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
}
.page-id-39 .loop-card-title {
    text-shadow:
        0 0 10px rgba(145, 90, 255, 0.16),
        0 0 18px rgba(145, 90, 255, 0.08);
}
/* ================================
   LOOPHIVE — PREMIUM CARD GLOW PACK
   ================================ */

/* --- 1. Base depth blur bag hvert kort --- */
.page-id-39 .loop-card {
    position: relative;
    overflow: visible !important;
}

.page-id-39 .loop-card::before {
    content: "";
    position: absolute;
    inset: -20px;
    background: rgba(122, 72, 255, 0.25);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.55;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

/* Hover = mere glow men stadig subtilt */
.page-id-39 .loop-card:hover::before {
    opacity: 0.8;
    filter: blur(55px);
}

/* --- 2. Subtil ambient border-glow rundt om kortet --- */
.page-id-39 .loop-card {
    box-shadow:
        0 0 12px rgba(153, 109, 255, 0.18),
        0 0 25px rgba(153, 109, 255, 0.10),
        0 0 50px rgba(153, 109, 255, 0.06);
}

/* --- 3. Subtil breathing animation --- */
@keyframes loopGlowPulse {
    0% { opacity: 0.55; }
    50% { opacity: 0.75; }
    100% { opacity: 0.55; }
}

.page-id-39 .loop-card::before {
    animation: loopGlowPulse 6s ease-in-out infinite;
}

/* --- 4. Montserrat + glow for tekst (title, meta, knapper) --- */
.page-id-39 .loop-card-title,
.page-id-39 .loop-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(140, 100, 255, 0.30),
        0 0 16px rgba(140, 100, 255, 0.18);
}

.page-id-39 .loop-card p,
.page-id-39 .loop-meta {
    font-family: 'Montserrat', sans-serif !important;
    color: #d3d1ea;
    text-shadow: 0 0 6px rgba(140, 100, 255, 0.22);
}

.page-id-39 .loop-card a.button,
.page-id-39 .loop-card button {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
}
/* ============================
   GLOBAL FONT — MONTSERRAT
   Gælder ALLE sider + ALLE elements
   ============================ */

/* Loader font hvis ikke allerede included */
@import url('https://fonts.googleapis.com/css2?family=:wght@300;400;500;600;700;800&display=swap');

/* Sæt hele html + body + alle standard-elementer */
html, body {
    font-family: 'Montserrat', sans-serif !important;
}

/* Sørger for at overskrifter også fanger den */
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, select, textarea,
.nav-menu a,
.site-title, .site-description,
.entry-title, .entry-content {
    font-family: 'Montserrat', sans-serif !important;
}
/* --- FIX: Restore audio play icon size & font --- */
.lh-audio-play::before {
    font-family: "Font Awesome 5 Free", "Material Icons", sans-serif !important;
    font-weight: 900; /* hvis Font Awesome – ellers kan fjernes */
    font-size: 18px !important; /* original størrelse */
    line-height: 1 !important;
}
/* ============================
   BROWSE LOOPS – APPLE x LOOPHIVE
   Kun på Browse Loops (page 39)
============================ */

/* Layout omkring gridet */
body.page-id-39 .loops-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 32px 16px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Loop card – glassy mørk, mere Apple-agtig og mindre neon */
body.page-id-39 .loop-item {
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(129, 140, 248, 0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.10), transparent 55%),
    rgba(15, 23, 42, 0.96);
  border-radius: 18px !important;
  padding: 20px 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* Blød glow-layer bag indholdet */
body.page-id-39 .loop-item::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at top, rgba(129, 140, 248, 0.25), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

body.page-id-39 .loop-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.98),
    0 0 0 1px rgba(191, 219, 254, 0.28);
  border-color: rgba(191, 219, 254, 0.7) !important;
}

body.page-id-39 .loop-item:hover::before {
  opacity: 1;
}

/* Titler – mere clean, mindre skrigende */
body.page-id-39 .loop-item h3 {
  color: #f9fafb;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Tekst / meta-linjer */
body.page-id-39 .loop-item p {
  color: rgba(226, 232, 240, 0.82);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Lidt ekstra luft mellem sektionerne inde i kortet */
body.page-id-39 .loop-item p + p {
  margin-top: 2px;
}

body.page-id-39 .loop-item p:last-of-type {
  margin-bottom: 10px;
}

/* Audio player – pill style */
body.page-id-39 .loop-item audio {
  margin-top: 12px;
  margin-bottom: 14px;
  width: 100%;
  border-radius: 999px;
  filter: drop-shadow(0 8px 22px rgba(15, 23, 42, 0.95));
}

/* Knap-række */
body.page-id-39 .loop-item .loop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Hvis du ikke har .loop-buttons som wrapper,
   kan du stadig få det meste af looket via a-tags: */
body.page-id-39 .loop-item a {
  text-decoration: none;
}

/* View / Download knapper – Apple-ish, men LoopHive farver */
body.page-id-39 .loop-item a,
body.page-id-39 .loop-item .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  min-width: 110px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 248, 0.9);
  background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.65), rgba(17, 24, 39, 1));
  color: #f9fafb;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(30, 64, 175, 0.7);
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    border-color 0.16s ease-out,
    background 0.16s ease-out;
}

body.page-id-39 .loop-item a:hover,
body.page-id-39 .loop-item .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(30, 64, 175, 0.9);
  border-color: rgba(191, 219, 254, 1);
}

/* Evt. forskel på "View" og "Download" (lidt mere punch på download) */
body.page-id-39 .loop-item a.download,
body.page-id-39 .loop-item .download-btn {
  background: radial-gradient(circle at top left, rgba(168, 85, 247, 0.8), rgba(30, 27, 75, 1));
}
/* =========================================
   BROWSE LOOPS — EGEN BAGGRUND (PAGE 39)
   ========================================= */

/* Nulstil alle mørke bokse på denne side */
body.page-id-39,
body.page-id-39 .site,
body.page-id-39 #page,
body.page-id-39 .site-content,
body.page-id-39 .ast-container,
body.page-id-39 #primary,
body.page-id-39 #main {
  background: transparent !important;
  background-image: none !important;
}

/* Læg vores Apple x LoopHive gradient på hele siden */
body.page-id-39 #page {
  background:
    radial-gradient(circle at 15% 25%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(56, 189, 248, 0.14), transparent 60%),
    #050509 !important;
}
/* =========================================
   BROWSE LOOPS – FILTER CHIPS (PAGE 39)
   Apple x LoopHive style
========================================= */

/* Selve filterbaren */
body.page-id-39 .lh-filterbar {
  max-width: 700px;
  margin: 22px auto 8px;
  padding: 0 12px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Nulstil Gutenberg / tema defaults på knapperne */
body.page-id-39 .lh-filterbar button {
  all: unset;                      /* reset alt legacy-style */
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 16px;
  border-radius: 999px;

  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;

  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e5e7eb;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.9);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    color 0.18s ease;
}

/* Hover / fokus */
body.page-id-39 .lh-filterbar button:hover,
body.page-id-39 .lh-filterbar button:focus-visible {
  background: radial-gradient(circle at top left,
              rgba(129, 140, 248, 0.8),
              rgba(56, 189, 248, 0.85));
  border-color: transparent;
  color: #0b1020;
  transform: translateY(-1px);
  box-shadow:
    0 14px 35px rgba(17, 24, 39, 0.95),
    0 0 20px rgba(129, 140, 248, 0.65);
  outline: none;
}

/* Aktivt filter (den valgte chip) */
body.page-id-39 .lh-filterbar button.active {
  background: radial-gradient(circle at top left,
              rgba(129, 140, 248, 1),
              rgba(168, 85, 247, 1));
  border-color: transparent;
  color: #0b1020;
}

/* Mobil: lidt mindre størrelse og tættere på loops */
@media (max-width: 768px) {
  body.page-id-39 .lh-filterbar {
    margin-top: 16px;
    margin-bottom: 4px;
    gap: 8px;
  }

  body.page-id-39 .lh-filterbar button {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
}
/* =========================================
   BROWSE LOOPS – FILTER CHIPS (SMALLER SIZE)
========================================= */

body.page-id-39 .lh-filterbar button {
  padding: 5px 12px !important;          /* mindre højde + bredde */
  font-size: 0.75rem !important;         /* mindre tekst */
  letter-spacing: 0.06em !important;     /* lidt mindre spacing */
  
  border-radius: 999px !important;
  
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  color: #e5e7eb !important;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.85) !important;
}

/* Hover + active bliver også mindre intense */
body.page-id-39 .lh-filterbar button:hover,
body.page-id-39 .lh-filterbar button:focus-visible {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow:
    0 10px 28px rgba(17, 24, 39, 0.9),
    0 0 12px rgba(129, 140, 248, 0.5) !important;
}

body.page-id-39 .lh-filterbar button.active {
  background: radial-gradient(circle at top left,
              rgba(129, 140, 248, 1),
              rgba(168, 85, 247, 1)) !important;
  border-color: transparent !important;
  color: #0b1020 !important;
}
/* =========================================
   BROWSE LOOPS – HERO GLOW (PAGE 39)
========================================= */

body.page-id-39 .lh-browse-header {
  max-width: 1100px;
  margin: 110px auto 24px;
  padding: 0 16px;
  text-align: center;
}

/* Titel: "Browse Loops" */
body.page-id-39 .lh-browse-header h1 {
  position: relative;
  display: inline-block;
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f9fafb;
  text-shadow:
    0 0 16px rgba(148, 163, 255, 0.45),
    0 0 34px rgba(79, 70, 229, 0.55);
}

/* Blød glow-bar bag overskriften */
body.page-id-39 .lh-browse-header h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 80%;
  height: 6px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center,
      rgba(129, 140, 248, 0.75),
      rgba(56, 189, 248, 0.05)
    );
  opacity: 0.55;
  filter: blur(10px);
  pointer-events: none;
}

/* Underteksterne under "Browse Loops" */
body.page-id-39 .lh-browse-header p {
  max-width: 640px;
  margin: 14px auto 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.82);
  text-shadow: 0 0 10px rgba(15, 23, 42, 0.9);
}

/* Lidt mere luft mellem 1. og 2. linje tekst */
body.page-id-39 .lh-browse-header p + p {
  margin-top: 4px;
}

/* Mobil tweaks */
@media (max-width: 768px) {
  body.page-id-39 .lh-browse-header {
    margin-top: 96px;
  }

  body.page-id-39 .lh-browse-header h1 {
    font-size: 2.1rem;
  }

  body.page-id-39 .lh-browse-header h1::after {
    width: 70%;
  }
}
/* ==================================================
   BROWSE LOOPS – CARD DEPTH & PREMIUM HOVER EFFECTS
   ================================================== */

body.page-id-39 .loop-item {
  position: relative;
  padding: 20px 18px !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(129, 140, 248, 0.12), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(56, 189, 248, 0.10), transparent 60%),
    rgba(15, 23, 42, 0.88) !important;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.65),
    inset 0 0 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(148, 163, 184, 0.06) !important;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  transform: translateY(0) scale(1);
  transition:
    transform 0.22s cubic-bezier(.25,.46,.45,.94),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

/* Glow layer bag kortet */
body.page-id-39 .loop-item::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at center,
              rgba(129, 140, 248, 0.45),
              transparent 70%);
  opacity: 0;
  filter: blur(32px);
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

/* Subtil depth under hover */
body.page-id-39 .loop-item:hover {
  transform: translateY(-6px) scale(1.015);

  box-shadow:
    0 26px 75px rgba(0, 0, 0, 0.85),
    inset 0 0 22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(190, 215, 255, 0.18) !important;

  border-color: rgba(190, 215, 255, 0.45) !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(129, 140, 248, 0.18), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(56, 189, 248, 0.14), transparent 60%),
    rgba(15, 23, 42, 0.92) !important;
}

/* Glow aktiveres ved hover */
body.page-id-39 .loop-item:hover::before {
  opacity: 0.55;
}

/* Indre content styling */
body.page-id-39 .loop-item h3 {
  color: #f9fafb;
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
}

body.page-id-39 .loop-item p {
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.82rem;
  line-height: 1.55;
}
/* =========================================
   BROWSE LOOPS – CUSTOM AUDIO PLAYER (PAGE 39)
   Styler .lh-audio-player, ikke native <audio>
========================================= */

body.page-id-39 .lh-audio-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin-top: 14px !important;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;

  border-radius: 999px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(129,140,248,0.20), transparent 55%),
    rgba(15,23,42,0.96) !important;
  border: 1px solid rgba(30,64,175,0.75) !important;

  box-shadow:
    0 14px 34px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,0.9) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Play-knappen */
body.page-id-39 .lh-audio-play {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(135deg,#6366f1,#a855f7) !important;
  box-shadow: 0 0 16px rgba(129,140,248,0.75) !important;
  cursor: pointer !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease !important;
}

/* Play-knap hover */
body.page-id-39 .lh-audio-play:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    0 0 22px rgba(129,140,248,0.95),
    0 0 40px rgba(168,85,247,0.7) !important;
}

/* Track + progressbar */
body.page-id-39 .lh-audio-track {
  position: relative !important;
  flex: 1 !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(30,41,59,0.9) !important;
  overflow: hidden !important;
}

body.page-id-39 .lh-audio-progress {
  position: absolute !important;
  inset: 0 !important;
  width: 0%; /* JS opdaterer denne */
  background: linear-gradient(90deg,#6366f1,#a855f7) !important;
  border-radius: 999px !important;
}

/* Tiden til højre */
body.page-id-39 .lh-audio-time {
  min-width: 40px !important;
  text-align: right !important;
  font-size: 12px !important;
  color: rgba(226,232,240,0.85) !important;
}

/* Selve <audio>-elementet er skjult – det bruges kun af JS */
body.page-id-39 .lh-audio-element {
  display: none !important;
}
/* Center play-knap med progressbar på Browse Loops */
body.page-id-39 .lh-audio-player {
    display: flex !important;
    align-items: center !important;  /* <-- Dette centerer alt vertikalt */
    gap: 12px !important;
}

body.page-id-39 .lh-audio-play {
    display: flex !important;
    align-items: center !important;   /* <-- Sikrer at SVG/ikon er centreret */
    justify-content: center !important;
    height: 40px !important;          /* Sikrer samme højde hver gang */
    width: 40px !important;
}
/* Vertical alignment fix for play button */
body.page-id-39 .lh-audio-play {
    margin-top: -6px !important; /* løfter play-knappen op */
}
body.page-id-39 .lh-audio-play {
    transform: translateY(-6px) !important;
}
/* ===============================
   Browse Loops – filter chips glow
   (øverst: Genre / Mood / Key / ...)
=============================== */

body.page-id-39 .lh-filterbar {
  gap: 10px;
  justify-content: center;
}

/* Base look */
body.page-id-39 .lh-filterbar button {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e5e7f5;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    color 0.15s ease;
}

/* Hover */
body.page-id-39 .lh-filterbar button:hover {
  transform: translateY(-1px);
  border-color: rgba(191, 219, 254, 0.9);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.95),
    0 0 16px rgba(129, 140, 248, 0.45);
}

/* Active filter chip */
body.page-id-39 .lh-filterbar button.active {
  background: radial-gradient(circle at top left,
    rgba(129, 140, 248, 0.9),
    rgba(79, 70, 229, 0.95));
  border-color: transparent;
  color: #f9fafb;
  box-shadow:
    0 18px 42px rgba(79, 70, 229, 0.9),
    0 0 26px rgba(168, 85, 247, 0.7);
}
/* ==================================
   FEATURED LOOP – premium glow
   (føj klassen .featured til loop-item)
================================== */

body.page-id-39 .loop-item.featured {
  position: relative !important;
  border: 1px solid rgba(191, 219, 254, 0.45) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(129,140,248,0.18), transparent 65%),
    radial-gradient(circle at 80% 100%, rgba(56,189,248,0.14), transparent 65%),
    rgba(15,23,42,0.94) !important;
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 22px 60px rgba(79,70,229,0.45),
    0 0 32px rgba(129,140,248,0.35),
    0 0 0 1px rgba(191,219,254,0.2) !important;
}

/* Soft spotlight bag det valgte loop */
body.page-id-39 .loop-item.featured::before {
  content: "";
  position: absolute;
  inset: -30%;
  margin: auto;
  background: radial-gradient(circle, rgba(129,140,248,0.35), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

/* Lidt mere clean title på featured */
body.page-id-39 .loop-item.featured h3 {
  color: #ffffff !important;
  text-shadow:
    0 0 12px rgba(79,70,229,0.6),
    0 0 22px rgba(129,140,248,0.4) !important;
}
/* FEATURED LOOK – kun første loop-card på Browse Loops */
body.page-id-39 .loops-list .loop-item:first-child {
  position: relative !important;
  border: 1px solid rgba(191, 219, 254, 0.45) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(129,140,248,0.18), transparent 65%),
    radial-gradient(circle at 80% 100%, rgba(56,189,248,0.14), transparent 65%),
    rgba(15,23,42,0.94) !important;
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 22px 60px rgba(79,70,229,0.45),
    0 0 32px rgba(129,140,248,0.35),
    0 0 0 1px rgba(191,219,254,0.2) !important;
}

/* Soft spotlight bag det valgte loop */
body.page-id-39 .loops-list .loop-item:first-child::before {
  content: "";
  position: absolute;
  inset: -30%;
  margin: auto;
  background: radial-gradient(circle, rgba(129,140,248,0.35), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}

/* Lidt ekstra crisp titel */
body.page-id-39 .loops-list .loop-item:first-child h3 {
  color: #ffffff !important;
  text-shadow:
    0 0 12px rgba(79,70,229,0.6),
    0 0 22px rgba(129,140,248,0.4) !important;
}
/* Eksempel – gør loop card tekst mindre og hvidere */

.lh-section-title,
.lh-hero-title,
.lh-section-subtitle,
.lh-loop-card,
.lh-loop-card p,
.lh-loop-card h3 {
  color: #ffffff !important;
}

.lh-loop-card p {
  font-size: 13px !important;
}
/* Hero title – make slightly smaller + softer glow */
.lh-hero-title {
    font-size: 46px !important;      /* tidligere ~56px */
    line-height: 1.15 !important;
    text-shadow:
        0 0 18px rgba(140, 100, 255, 0.45),
        0 0 26px rgba(140, 100, 255, 0.25) !important;
}

/* Hero subtitle – lidt mindre og mørkere */
.lh-hero-subtitle {
    font-size: 17px !important;
    color: rgba(240, 240, 255, 0.75) !important; 
}
/* Loop card title */
.loop-item h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(120, 80, 255, 0.25);
}

/* Loop card body text */
.loop-item p {
    font-size: 13px !important;
    color: rgba(230, 230, 245, 0.85) !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
/* Section title */
.lh-section-title,
.lh-featured-title,
.lh-latest-title {
    font-size: 34px !important;        /* mindre */
    color: #ffffff !important;
    text-shadow: 
        0 0 12px rgba(80, 60, 140, 0.25),
        0 0 28px rgba(80, 60, 140, 0.15) !important;
}

/* Section text under */
.lh-section-subtitle {
    font-size: 15px !important;
    color: rgba(200, 200, 230, 0.65) !important; /* mere eksklusivt og mørkere */
    max-width: 640px;
}
/* ============================
   LANDING PAGE – LATEST LOOPS
   Finere typografi + subtil glow
   ============================ */

/* Selve kortet – en anelse mindre og roligere */
.lh-loop-card {
  padding: 16px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(129, 140, 248, 0.16), transparent 60%),
    rgba(10, 16, 28, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow:
    0 16px 40px rgba(6, 10, 25, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Titel på loop (inde i kortet) */
.lh-loop-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(80, 60, 140, 0.35);
}

/* Creator-navn */
.lh-loop-creator {
  font-size: 12px;
  color: rgba(200, 210, 240, 0.75);
  margin-bottom: 8px;
}

/* Beskrivelsen */
.lh-loop-desc {
  font-size: 13px;
  color: rgba(215, 220, 245, 0.82);
}

/* Små tags / pills */
.lh-loop-tags span {
  font-size: 11px;
  color: rgba(202, 210, 255, 0.9);
}

/* “Featured” badge en smule nedtonet */
.lh-loop-badge {
  font-size: 10px;
  letter-spacing: 0.14em;
  box-shadow: 0 0 14px rgba(129, 140, 248, 0.55);
}
/* Make loop cards align the CTA button at the bottom */
.loop-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Make the CTA section stick to the bottom */
.lh-loop-actions {
    margin-top: auto !important;
    padding-top: 20px;
}

/* Optional: give a small margin above the meta tags so spacing stays clean */
.loop-meta {
    margin-bottom: 20px;
}
/* Align audio player content perfectly vertically */
.lh-audio-player {
    display: flex;
    align-items: center;          /* centrér alt på Y-aksen */
}

/* Play-knap skal ikke hænge for højt */
.lh-audio-play {
    margin-top: 0 !important;
    transform: translateY(0px);   /* skub den lige en smule ned */
}

/* Sørg for at bar + tid følger med */
.lh-audio-track,
.lh-audio-time {
    margin-top: 0 !important;
    transform: translateY(1px);
}
/* Force-align play-knappen i audio playeren */
.lh-audio-player button.lh-audio-play {
    margin-top: 0 !important;
    transform: translateY(2.5px) !important;  /* juster tallet op/ned hvis den skal højere/lavere */
}

/* Sørg for at hele rækken er centreret vertikalt */
.lh-audio-player {
    display: flex !important;
    align-items: center !important;
}

/* Track + tid følger samme linje */
.lh-audio-player .lh-audio-track,
.lh-audio-player .lh-audio-time {
    margin-top: 0 !important;
    transform: translateY(1px) !important;
}
.lh-loop-meta {
  margin: 0.15rem 0;
}

.lh-loop-meta-primary {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}

.lh-loop-meta-secondary {
  font-size: 12px;
  opacity: 0.75;
}

.lh-loop-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Overordnet filter-område */
.lh-browse-filters {
  max-width: 960px;
  margin: 0 auto 2.5rem;
  display: grid;
  gap: 1.5rem; /* mindre afstand mellem sektioner */
}

/* Hver sektion: label + chips på én linje */
.lh-filter-section {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Sektionstitler (Genre / Mood / Key / ...) */
.lh-filter-title {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  min-width: 90px;
}

/* Selve chip-rækken */
.lh-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem; /* mindre afstand mellem chips */
}

/* Chips / knapperne */
.lh-filter-btn {
  font-size: 0.7rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  cursor: pointer;
}

/* Active state (hvis du vil have lidt tydeligere valgt chip) */
.lh-filter-btn.is-active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 12px rgba(180, 120, 255, 0.35);
}

/* Mindre luft mellem hero og filterbar + mellem filterbar og loops */
.lh-browse-loops-hero {
  margin-bottom: 16px;
}

.lh-browse-loops-grid {
  margin-top: 0px;
}

/* Mobile tweaks: sektioner i én kolonne */
@media (max-width: 768px) {
  .lh-filter-section {
    flex-direction: column;
    gap: 0.5rem;
  }

  .lh-filter-title {
    font-size: 0.8rem;
  }

  .lh-filter-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
  }
}
/* Overordnet filter-område */
.lh-browse-filters {
  max-width: 960px;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Sektion: label + chips */
.lh-filter-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Sektionstitler (Genre / Mood / ...) */
.lh-filter-title {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  min-width: 90px;
}

/* Rækken af chips */
.lh-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

/* Chips */
.lh-filter-btn {
  font-size: 0.7rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  cursor: pointer;
}

/* Active state */
.lh-filter-btn.is-active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 12px rgba(180, 120, 255, 0.35);
}


.lh-browse-loops-hero {
  margin-bottom: 16px;
}

.lh-browse-loops-grid {
  margin-top: 0px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .lh-filter-section {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Gør filter-section til column layout i stedet for row */
.lh-filter-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
/* Gør Genre/Mood/Key/Instrument/BPM hvide med glow */
.lh-filter-title {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 600;
  letter-spacing: 0.05em;

  /* Glow */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(140, 80, 255, 0.4);
}
/* Gør filter-sektioner centrerede */
.lh-filter-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* CENTER TEKST OG CHIPS */
  text-align: center;
}

/* Titel: hvid/glow + centreret */
.lh-filter-title {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(140, 80, 255, 0.4);
}

/* Chips container skal også centreres */
.lh-filterbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* CENTER CHIPS */
  gap: 10px;
  margin-top: 0.25rem;
}
.lh-reset-filters-btn {
  display: block;
  margin: 30px auto -10px auto;
  padding: 10px 24px;

  border-radius: 999px;
  font-size: 14px;
  font-weight: 350;
  letter-spacing: 0.04em;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  color: #fff;

  line-height: 0.5;   /* ← Løfter teksten perfekt op */
  cursor: pointer;
  transition: 0.25s ease;
}

.lh-reset-filters-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 10px rgba(140,80,255,0.45);
}
.lh-loop-card {
  box-shadow: 0 4px 20px rgba(120, 0, 255, 0.15); /* subtil lila */
  background: rgba(0, 0, 0, 0.35); 
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* Browse Loops – ryd ALT glow på loop cards */
body.page-id-39 .lh-loop-card,
body.page-id-39 .loop-card {
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Hvis glow ligger på pseudo-elementer, fjern det også */
body.page-id-39 .lh-loop-card::before,
body.page-id-39 .lh-loop-card::after {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

/* Ekstra sikkerhed – hvis grid har drop-shadow, fjern den */
body.page-id-39 .lh-loop-grid {
  filter: none !important;
}
/* Clean, modern shadow til loop cards */
body.page-id-39 .lh-loop-card,
body.page-id-39 .loop-card {
  background: rgba(0, 0, 0, 0.40) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  box-shadow:
  0 8px 22px rgba(0,0,0,0.45),
  inset 0 0 20px rgba(255,255,255,0.02);
}
/* LOOPHIVE SIGNATURE CARD SHADOW */
body.page-id-39 .lh-loop-card,
body.page-id-39 .loop-card {
  background: rgba(10, 5, 20, 0.55) !important; /* dyb mørk-lilla glas */
  border: 1px solid rgba(180, 140, 255, 0.12) !important; /* lilla micro-edge */
  backdrop-filter: blur(18px) saturate(140%);

  box-shadow:
    0 0 25px rgba(130, 70, 255, 0.18),    /* soft neon aura */
    0 12px 28px rgba(0,0,0,0.55),         /* dyb løft fra baggrunden */
    inset 0 0 18px rgba(255, 255, 255, 0.03); /* subtil glassmorphism sheen */
  border-radius: 18px;
}
/* ====== Active filter badges ====== */
.lh-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 20px 0;
    max-width: 1400px;
    margin: 0 auto 8px;
}

.lh-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 20, 32, 0.9);
    box-shadow: 0 0 18px rgba(125, 84, 255, 0.23);
    backdrop-filter: blur(12px);
    color: #f5f5ff;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lh-filter-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(148, 112, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
}

.lh-filter-badge-label {
    opacity: 0.8;
}

.lh-filter-badge-value {
    font-weight: 600;
}

.lh-filter-badge-remove {
    font-size: 11px;
    line-height: 1;
    opacity: 0.65;
}

.lh-filter-badge-remove::before {
    content: "✕";
}

/* Clear all badge */
.lh-filter-badge--clear {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    opacity: 0.8;
}

.lh-filter-badge--clear:hover {
    opacity: 1;
    box-shadow: 0 0 14px rgba(125, 84, 255, 0.35);
}
/* ====== Empty-state (ingen loops matcher) ====== */
.lh-empty-state {
    display: none;
    padding: 40px;
    text-align: center;
    background: rgba(22, 24, 37, 0.85);
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(125, 84, 255, 0.2);
    color: #f5f5ff;
    font-size: 18px;
    font-weight: 600;
    backdrop-filter: blur(12px);
}

.lh-empty-state.show {
    display: block;
}
/* ===== KEY DROPDOWN ===== */

/* containeren for key-sektionen */
.lh-filter-section--keys {
    position: relative;
}

.lh-filter-title--clickable {
    position: relative; /* så vi kan placere indikator absolut */

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 120px; /* fast bredde for perfekt center, juster efter smag */
    padding: 6px 10px;

    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5f5ff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

/* pilen til højre — absolut positioneret */
.lh-filter-title-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: 0.7;
    pointer-events: none; /* klik ikke på den */
}
    .lh-filter-title-indicator {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.lh-filter-section--keys.is-open .lh-filter-title-indicator {
    transform: rotate(180deg);
    opacity: 1;
}

/* Selve dropdown-panelet */
.lh-key-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;

    border-radius: 18px;
    padding: 14px 14px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.75);
    backdrop-filter: solid(18px);
    color: #fff;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 200; /* foran loop-cards */
}

.lh-filter-section--keys.is-open .lh-key-panel {
    opacity: 1;
    pointer-events: auto;
}

/* Grid / layout for key options */
.lh-key-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Smalle, rene pills */
.lh-key-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 10px;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);

    font-size: 11px;
    letter-spacing: 0.03em;
    color: #f5f5ff;
    text-align: center;
    white-space: nowrap;

    cursor: pointer;
}

/* Hover = lidt mere glow */
.lh-key-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile: lidt større spacing så det ikke klumper */
@media (max-width: 768px) {
    .lh-key-grid {
        justify-content: flex-start;
        gap: 6px;
    }
}
/* Standard filter-knapper (genre/mood/instrument/bpm) – ACTIVE state */
.lh-filter-btn.is-active {
    border-color: rgba(148, 112, 255, 0.85);
    background: radial-gradient(circle at 0 0, rgba(148, 112, 255, 0.35), rgba(12, 14, 28, 0.9));
    box-shadow: 0 0 24px rgba(148, 112, 255, 0.6);
    color: #ffffff;
}
/* Loop cards – base look */
.lh-loop-card {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

/* Hover-effekt */
.lh-loop-card:hover {
    transform: translateY(-4px);
    border-color: rgba(148, 112, 255, 0.5);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
    background: radial-gradient(circle at top left, rgba(148, 112, 255, 0.14), rgba(10, 12, 24, 0.98));
}
.lh-key-option {
    padding: 3px 9px;
    font-size: 10px;
    border-radius: 999px;
}

/* Titel over hver gruppe (Mood / Instrument / BPM) */
.lh-filter-title {
    margin: 0 0 10px;   /* mindre afstand ned til knapper */
    font-size: 18px;
}

/* Selve rækkerne af knapper */
.lh-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;      /* lidt mindre gap mellem knapper */
}
/* Gør key-sektionen tættere på Mood og Instrument */
.lh-filter-section--keys {
    margin: -15px 0 0px;
}

/* Key-knappen selv – en smule mindre vertikalt */
.lh-filter-title--clickable {
    padding-top: 4px;
    padding-bottom: 4px;
}
.lh-filter-title--clickable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;

    width: 120px; /* eller hvad du bruger */
    padding: 6px 10px;

    background: rgba(255,255,255,0.04);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);

    color: #f5f5ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

/* FLYT TEKSTEN OP/NED */
.lh-key-text {
    position: relative;
    top: -1px; /** ændr til -2px, -3px, +1px osv. **/
}

.lh-filter-title-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: 0.7;
    pointer-events: none;
}

/* ---------------- Single hero – refined ---------------- */

.lh-single-loop {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.lh-single-hero {
    margin: 12px auto 28px;
    padding: 0 4px;
    text-align: left;
}

.lh-single-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f9fafb;
    margin: 0 0 4px;
}

.lh-single-meta {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}

.lh-license-note {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 8px;
}

/* -----------------------------------------
   Loophive Single – Sticky bar refined
------------------------------------------*/

.lh-sticky-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9000;

    padding: 10px 14px;
    background: radial-gradient(circle at top,
        rgba(129, 140, 248, 0.22),
        rgba(15, 23, 42, 0.96)
    );
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(148, 163, 184, 0.4);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lh-sticky-title {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lh-sticky-download {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    text-decoration: none;
}

/* Kun på små skærme – skjul på desktop hvis du synes den fylder */
@media (min-width: 900px) {
    .lh-sticky-bar {
        display: none;
    }
}
/* ---------------- License row – 2025 Loophive style ---------------- */

.lh-license-section {
    margin: 22px auto 40px;
    padding: 0 4px;
}

.lh-license-heading {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}

/* 3 kolonner på desktop, collapse på mobile */
.lh-license-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Kort – fladere, mere app-agtige */
.lh-license-card {
    position: relative;
    border-radius: 18px;
    padding: 14px 16px 12px;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 253, 0.14), transparent 55%),
        rgba(9, 11, 22, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);

    display: grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: 6px;
    text-align: left;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.lh-license-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.95);
    border-color: rgba(167, 139, 250, 0.7);
}

/* Badge-chip øverst */
.lh-license-badge {
    justify-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f9fafb;
    opacity: 0.9;
}

.lh-badge-free {
    background: rgba(96, 165, 250, 0.45);
}

.lh-badge-split {
    background: rgba(52, 211, 153, 0.45);
}

.lh-badge-pro {
    background: rgba(249, 115, 22, 0.55);
}

.lh-license-card h3 {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
}

.lh-license-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
}

/* Pris-linje i Pro-kort */
.lh-pro-price {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #c7d2fe;
}

/* CTA – pill-knapper, men mindre */
.lh-license-cta {
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

/* Free */
.lh-cta-free {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.55);
}

.lh-cta-free:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(129, 140, 248, 0.8);
}

/* Split */
.lh-cta-split {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(52, 211, 153, 0.6);
    color: #bbf7d0;
}

.lh-cta-split:hover {
    background: rgba(34, 197, 94, 0.22);
}

/* Pro */
.lh-cta-pro {
    background: rgba(248, 148, 88, 0.12);
    border-color: rgba(248, 148, 88, 0.7);
    color: #fed7aa;
}

.lh-cta-pro:hover {
    background: rgba(248, 148, 88, 0.22);
}

/* Responsiv */
@media (max-width: 960px) {
    .lh-license-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .lh-license-row {
        grid-template-columns: 1fr;
    }
}


/* Hero Finpudsning */
.lh-single-hero {
    max-width: 980px;
    margin: 20px auto 32px;
    padding: 0 20px;
    text-align: left;
}

.lh-single-title {
    font-size: 32px;
}

.lh-single-meta {
    margin-bottom: 18px;
    font-size: 13px;
    opacity: 0.8;
}

.lh-license-note {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 10px;
}
/* --------- Single loop – Creator pill --------- */

.lh-single-creator {
    margin: 6px 0 18px;
}

.lh-creator-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
}

.lh-creator-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, #fde68a, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #0b1020;
}

.lh-creator-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lh-creator-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9ca3af;
}

.lh-creator-name {
    font-size: 12px;
    font-weight: 500;
    color: #e5e7eb;
}
/* Spacing & layout for single loop page */
.lh-single-loop {
    max-width: 1080px;
    margin: 0 auto;
    padding: 160px 24px 100px; /* mere luft fra toppen */
}

/* Hero: samme bredde som licenskort, ikke presset op */
.lh-single-hero {
    max-width: 100%;
    margin: 20 auto 28px;
    padding: 14px 18px;
}
/* Fjern download-knap og note fra hero – de lever nu i licenskortene */
.lh-single-hero .lh-single-download-btn,
.lh-single-hero .lh-license-note {
    display: none;
}
/* Player i hero skal strækkes ud */
.lh-single-hero .lh-audio-player {
    width: 100%;
    margin-top: 10px;
}
/* Hero-layout: mere luft og relativ position til overlay */
.lh-single-loop {
    max-width: 1100px;
    margin: 0 auto;
    padding: 180px 24px 100px; /* træk hele blokken længere ned */
}

.lh-single-hero {
    position: relative;
    margin: 0 auto 30px;
    padding: 18px 26px;
}

/* Titel + meta som ren venstre blok */
.lh-single-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f9fafb;
    margin: 0 0 4px;
}

.lh-single-meta {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
}
/* Flyt creator-pill ud til højre, på linje med player */
.lh-single-creator {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    margin: 0;
}

/* Gør pill'en en anelse mere kompakt, så den passer ved siden af player */
.lh-creator-pill {
    padding: 4px 10px 4px 6px;
    gap: 8px;
}

.lh-creator-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
}
/* Hero = [Title/meta] [Player flex] [Creator] */
.lh-single-hero {
  display: grid;
  grid-template-columns: 360px 1fr 190px; /* player får 1fr (max plads) */
  align-items: center;
  gap: 24px;
  padding: 20px 26px;
}
/* Player fylder hele midterkolonnen */
.lh-single-hero .lh-audio-player {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: center;
}
/* Creator skal være i sit eget grid-område */
.lh-single-creator {
    position: static;
    transform: none;
    justify-self: end;
}
.lh-creator-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
}

.lh-creator-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

body {
  font-family: 'Montserrat', sans-serif !important;
}
/* === Global Font: Montserrat (Astra override) === */
body {
  font-family: 'Montserrat', sans-serif;
}
/* === Force Montserrat across common elements === */
body,
button,
input,
select,
textarea {
  font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
p, a, li, span, label, small, strong, em {
  font-family: 'Montserrat', sans-serif !important;
}
/* === Nuclear: force Montserrat everywhere === */
*,
*::before,
*::after {
  font-family: 'Montserrat', sans-serif !important;
}
/* === Global Font: Montserrat (Astra override) === */
:root {
  --ast-global-font-family: 'Montserrat', sans-serif;
  --ast-body-font-family: 'Montserrat', sans-serif;
  --ast-headings-font-family: 'Montserrat', sans-serif;
}

body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
}
body {
  font-weight: 400;
  letter-spacing: 0.1px;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

h4, h5, h6 {
  font-weight: 600;
}
/* Active filter badges container */
.lh-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}

/* Badge styling */
.lh-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(22, 24, 37, 0.65);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.lh-filter-badge-label {
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

.lh-filter-badge-remove {
  width: 10px;
  height: 10px;
  opacity: 0.8;
  position: relative;
}

.lh-filter-badge-remove::before,
.lh-filter-badge-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.lh-filter-badge-remove::before { transform: translate(-50%, -50%) rotate(45deg); }
.lh-filter-badge-remove::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Clear badge variant */
.lh-filter-badge--clear {
  background: rgba(125, 84, 255, 0.18);
  border-color: rgba(125, 84, 255, 0.35);
}
.lh-filter-badge {
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.lh-filter-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(125,84,255,.25);
}
.lh-filter-btn.is-active,
.lh-key-option.is-active {
  background: linear-gradient(135deg, #7d54ff, #9b7bff);
  color: #fff;
  box-shadow: 0 0 20px rgba(125,84,255,.35);
}
/* Audio play/pause icons */
.lh-audio-play {
  position: relative;
}

.lh-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.lh-icon--pause { display: none; }

/* When playing, swap icons */
.lh-audio-play[data-state="playing"] .lh-icon--play { display: none; }
.lh-audio-play[data-state="playing"] .lh-icon--pause { display: inline-block; }

/* Pure CSS icons (no SVG needed) */
.lh-icon--play::before{
  content:"";
  display:block;
  width:0;height:0;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateX(1px);
}

.lh-icon--pause::before,
.lh-icon--pause::after{
  content:"";
  display:inline-block;
  width:4px;
  height:14px;
  background: currentColor;
  border-radius:2px;
}

.lh-icon--pause::after{
  margin-left:4px;
}
/* === Browse card play/pause icon toggle === */
.lh-audio-play .lh-icon--pause { display: none; }
.lh-audio-play .lh-icon--play  { display: inline-flex; }

.lh-audio-play.is-playing .lh-icon--play  { display: none; }
.lh-audio-play.is-playing .lh-icon--pause { display: inline-flex; }

.lh-audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lh-audio-play {
  transition: transform .12s ease, filter .12s ease;
}
.lh-audio-play:active {
  transform: scale(0.96);
}
/* ================================
   LH Audio Play / Pause Toggle
   ================================ */

/* Default state = paused → show PLAY */
.lh-audio-play .lh-icon--pause {
  display: none;
}

.lh-audio-play .lh-icon--play {
  display: inline-flex;
}

/* Playing state → show PAUSE */
.lh-audio-play.is-playing .lh-icon--play {
  display: none;
}

.lh-audio-play.is-playing .lh-icon--pause {
  display: inline-flex;
}
/* Kill injected WP emoji inside play icon */
.lh-audio-play .lh-icon img.emoji {
  display: none !important;
}
.lh-audio-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* === Pixel-perfect centered play/pause (stacked icons) === */
.lh-audio-play{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* prevent baseline weirdness */
}

/* Stack BOTH icons on top of each other, center them */
.lh-audio-play .lh-icon--play,
.lh-audio-play .lh-icon--pause{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;               /* for centering icon contents */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Default: show PLAY only */
.lh-audio-play .lh-icon--pause{ opacity: 0; pointer-events: none; }
.lh-audio-play .lh-icon--play { opacity: 1; }

/* Playing: show PAUSE only */
.lh-audio-play.is-playing .lh-icon--play { opacity: 0; pointer-events: none; }
.lh-audio-play.is-playing .lh-icon--pause{ opacity: 1; }

/* Kill any injected emoji/img so it can't affect layout */
.lh-audio-play img.emoji{ display:none !important; }
.lh-audio-play{
  width: 64px;   /* justér hvis din knap er større */
  height: 64px;
}
.lh-audio-play .lh-icon--play { transform: translate(-50%, -50%) translateX(1px); }
.lh-audio-play .lh-icon--pause{ transform: translate(-50%, -50%); }

/* === HARD RESET: prevent extra pause glyphs/pseudo elements === */
.lh-audio-play::before,
.lh-audio-play::after {
  content: none !important;
  display: none !important;
}

/* Ensure button is a clean icon container */
.lh-audio-play{
  position: relative !important;
  overflow: hidden;
  line-height: 0;
}

/* Stack icons in center */
.lh-audio-play .lh-icon{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* Default: show play only */
.lh-audio-play .lh-icon--play{ opacity: 1 !important; }
.lh-audio-play .lh-icon--pause{ opacity: 0 !important; }

/* Playing: show pause only */
.lh-audio-play.is-playing .lh-icon--play{ opacity: 0 !important; }
.lh-audio-play.is-playing .lh-icon--pause{ opacity: 1 !important; }

/* Hide any injected emoji/img */
.lh-audio-play img.emoji{ display:none !important; }
/* === Fine-tune pause icon optical centering + spacing === */
.lh-audio-play .lh-icon--pause{
  /* Optical centering (justér 1-2px hvis needed) */
  transform: translate(-50%, -50%) translateX(-2px) !important;
}

/* If pause bars are drawn as pseudo elements inside pause icon */
.lh-audio-play .lh-icon--pause::before,
.lh-audio-play .lh-icon--pause::after{
  /* Create a clearer gap by nudging bars apart */
  transform: translateX(-2px) !important;
}

.lh-audio-play .lh-icon--pause::after{
  transform: translateX(2px) !important;
}
/* ==========================
   Browse audio progress/seek
   ========================== */

/* Click zone */
.lh-audio-track{
  position: relative;
  height: 10px;          /* større hitbox = lettere at seek */
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 50;
}

/* Background bar */
.lh-audio-progress{
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;  /* IMPORTANT: track tager klikket */
}

/* Fill */
.lh-audio-progress-fill{
  height: 100%;
  width: 0%;
  background: rgba(125, 84, 255, 0.65);
  border-radius: 999px;
  transition: width .08s linear;
  pointer-events: none;
}
/* === Filter badge hover fix === */
.lh-filter-badge:hover {
  background: rgba(255, 255, 255, 0.12); /* subtil hvid */
  color: #fff;
}

/* Behold gul som "aktiv", ikke hover */
.lh-filter-badge {
  transition: background .15s ease, color .15s ease;
}

/* Clear filters hover (mere neutral) */
.lh-filter-badge--clear:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* === Single Loop: match Browse play/pause look (CSS-only) === */

/* Sørg for at knappen/cirklen er “ikon-container” */
.lh-audio-player .lh-audio-play{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Fjern evt. injected emoji/svg der skubber layout */
.lh-audio-player .lh-audio-play img.emoji{ display:none !important; }

/* Tegn PLAY som pseudo-element */
.lh-audio-player .lh-audio-play::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) translateX(1px);
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid #fff;
  filter: drop-shadow(0 0 10px rgba(125,84,255,.45));
}

/* Når den spiller: skjul PLAY og tegn PAUSE */
.lh-audio-player .lh-audio-play[aria-pressed="true"]::after{
  content:"";
  width:18px;
  height:20px;
  border:0;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#fff,#fff) left 3px top/6px 100% no-repeat,
    linear-gradient(#fff,#fff) right 3px top/6px 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(125,84,255,.45));
}
/* =========================================
   Single Loop — Typography pass (SAFE)
   ========================================= */

/* Scope: prøv at ramme single loop siden uden at påvirke alt */
body.single-loop .entry-content,
body.single-loop .lh-single,
body.single-loop .lh-loop-single,
body.single-loop .lh-loop-hero {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* H1 hero */
body.single-loop h1,
body.single-loop .lh-loop-title,
body.single-loop .lh-single-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Subtitle / description */
body.single-loop .lh-loop-subtitle,
body.single-loop .lh-loop-description,
body.single-loop .lh-single-description,
body.single-loop .lh-loop-meta-sub {
  opacity: 0.86;
  line-height: 1.55;
}

/* Meta labels (BPM / Key / Genre etc.) */
body.single-loop .lh-meta-label,
body.single-loop .lh-loop-meta-label,
body.single-loop .lh-spec-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Meta values */
body.single-loop .lh-meta-value,
body.single-loop .lh-loop-meta-value,
body.single-loop .lh-spec-value {
  font-weight: 600;
  opacity: 0.92;
}

/* Tag / chip text */
body.single-loop .lh-tag,
body.single-loop .lh-chip,
body.single-loop .lh-pill {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

/* Links (så de ikke skriger) */
body.single-loop a {
  text-decoration: none;
}
body.single-loop a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* =========================================
   Single Loop — Subtle hero glow (SAFE)
   ========================================= */

body.single-loop h1,
body.single-loop .lh-loop-title,
body.single-loop .lh-single-title {
  text-shadow:
    0 0 18px rgba(125, 84, 255, 0.25),
    0 0 32px rgba(80, 140, 255, 0.15);
}

/* Meta line – meget let separation */
body.single-loop .lh-loop-meta,
body.single-loop .lh-loop-meta-sub {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}
/* =========================================
   Single Loop — Card / container look (SAFE)
   ========================================= */

/* HERO CARD (øverste store blok) */
body.single-loop :is(.lh-loop-hero, .lh-single-hero, .lh-loop-hero-card, .lh-hero-card) {
  background: rgba(18, 20, 32, 0.62) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 0 45px rgba(125, 84, 255, 0.10);
  padding: 28px 28px;
}

/* Hvis heroen allerede har meget padding, så hjælper den her med spacing */
body.single-loop :is(.lh-loop-hero, .lh-single-hero, .lh-loop-hero-card, .lh-hero-card) * {
  box-sizing: border-box;
}

/* PLAY AREA (holder det clean og adskilt – kun visuelt) */
body.single-loop :is(.lh-audio-player, .lh-loop-player, .lh-hero-player) {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 16px 18px;
}

/* SECTION TITLES (fx “AVAILABLE LICENSES”) */
body.single-loop :is(.lh-section-title, .lh-licenses-title, .lh-available-licenses) {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.72;
  margin-top: 22px;
  margin-bottom: 12px;
}

/* LICENSE CARDS – samme glass look */
body.single-loop :is(.lh-license-card, .lh-license, .license-card, .lh-licenses-grid > div) {
  background: rgba(18, 20, 32, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

/* Hover: subtil lift (ikke “pop”) */
body.single-loop :is(.lh-license-card, .lh-license, .license-card, .lh-licenses-grid > div):hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(125, 84, 255, 0.10);
}

/* Buttons – mere “premium pill” (uden at ændre funktion) */
body.single-loop :is(.lh-license-card, .lh-license, .license-card, .lh-licenses-grid > div) :is(a, button, .button, .wp-block-button__link) {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Mobile safety: lidt mindre padding i hero */
@media (max-width: 768px) {
  body.single-loop :is(.lh-loop-hero, .lh-single-hero, .lh-loop-hero-card, .lh-hero-card) {
    padding: 18px 16px;
    border-radius: 18px;
  }
}
body.single-loop :is(.lh-loop-hero, .lh-single-hero, .lh-loop-hero-card, .lh-hero-card) {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.00) 35%
    ),
    rgba(18, 20, 32, 0.62) !important;
}
body.single-loop :is(.lh-license-card, .lh-license, .license-card, .lh-licenses-grid > div) {
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(125, 84, 255, 0.08);
}
body.single-loop :is(.lh-section-title, .lh-licenses-title, .lh-available-licenses) {
  font-weight: 600;
  letter-spacing: 0.14em;
}
/* =========================================
   Single Loop — Play/Pause UI (VISUAL ONLY)
   ========================================= */

/* --- Targets (hero + evt sticky) --- */
body.single-loop :is(.lh-audio-play, .lh-sticky-play, .lh-play, .lh-player-play) {
  width: 54px;
  height: 54px;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(125, 84, 255, 0.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* Hover: subtil lift */
body.single-loop :is(.lh-audio-play, .lh-sticky-play, .lh-play, .lh-player-play):hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.65),
    0 0 44px rgba(125, 84, 255, 0.14);
}

/* Tastatur-focus (clean, ikke grim blå outline) */
body.single-loop :is(.lh-audio-play, .lh-sticky-play, .lh-play, .lh-player-play):focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(125, 84, 255, 0.22),
    0 18px 55px rgba(0, 0, 0, 0.65);
}

/* --- Ikoner (SVG eller font-icon) --- */
body.single-loop :is(.lh-audio-play, .lh-sticky-play, .lh-play, .lh-player-play) svg {
  width: 18px;
  height: 18px;
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(125, 84, 255, 0.18));
}

/* Hvis du bruger <i> / icon font */
body.single-loop :is(.lh-audio-play, .lh-sticky-play, .lh-play, .lh-player-play) i {
  font-size: 18px;
  opacity: 0.95;
  text-shadow: 0 0 14px rgba(125, 84, 255, 0.18);
}

/* --- “Playing” state (hvis din markup sætter en class/attr) --- */
/* Dækker typiske patterns uden JS-ændringer */
body.single-loop :is(
  .lh-audio-player.is-playing .lh-audio-play,
  .lh-audio-player.playing .lh-audio-play,
  .lh-audio-player.lh-is-playing .lh-audio-play,
  .lh-audio-play[aria-pressed="true"]
) {
  border-color: rgba(125, 84, 255, 0.26) !important;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.65),
    0 0 55px rgba(125, 84, 255, 0.22);
}

/* --- Progress bar / timeline (kun kosmetik) --- */
body.single-loop :is(.lh-audio-progress, .lh-progress, .lh-player-progress) {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hvis du har en “fill” indeni */
body.single-loop :is(.lh-audio-progress-fill, .lh-progress-fill, .lh-player-progress-fill) {
  height: 100%;
  border-radius: 999px;
  background: rgba(125, 84, 255, 0.55);
  box-shadow: 0 0 20px rgba(125, 84, 255, 0.18);
}

/* Timestamp – mere “premium” */
body.single-loop :is(.lh-audio-time, .lh-time, .lh-player-time) {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.82;
}
/* Single Loop — play button / progress (matches Browse Loops vibe) */
body.single-loop .lh-audio-play{
  width:56px;height:56px;
  border-radius:999px;
  background:rgba(22,24,37,.55);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 30px rgba(125,84,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.single-loop .lh-audio-play:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.65), 0 0 42px rgba(125,84,255,.16);
}

body.single-loop .lh-audio-progress{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
body.single-loop .lh-audio-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(125,84,255,.55);
  box-shadow: 0 0 20px rgba(125,84,255,.18);
}

body.single-loop .lh-audio-time{
  font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
  opacity:.82;
}
/* =========================================
   Single Loop — Player UI matches Browse Loops (CSS only)
   ========================================= */

/* Layout: play + bar + time på samme linje */
body.single-loop .lh-audio-player{
  display:flex;
  align-items:center;
  gap:14px;
}

body.single-loop .lh-audio-track{
  flex: 1;
  min-width: 180px;
}

/* Play button: glass pill vibe */
body.single-loop .lh-audio-play{
  width:56px;height:56px;
  border-radius:999px !important;
  background:rgba(22,24,37,.55) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 30px rgba(125,84,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body.single-loop .lh-audio-play:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65), 0 0 44px rgba(125,84,255,.16);
}

/* “Playing” state via JS class */
body.single-loop .lh-audio-player.is-playing .lh-audio-play{
  border-color: rgba(125,84,255,.28) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65), 0 0 60px rgba(125,84,255,.22);
}

/* Icon spans (play/pause) – center */
body.single-loop .lh-audio-play{
  display:grid;
  place-items:center;
}

/* Progress bar */
body.single-loop .lh-audio-progress{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

body.single-loop .lh-audio-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(125,84,255,.55);
  box-shadow: 0 0 20px rgba(125,84,255,.18);
}

/* Time */
body.single-loop .lh-audio-time{
  font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
  opacity:.82;
  min-width: 46px;
  text-align:right;
}
/* =========================================
   Single Loop — Play button violet disc
   (match Browse Loops)
   ========================================= */

body.single-loop .lh-audio-play{
  background:
    radial-gradient(
      120% 120% at 30% 20%,
      rgba(160, 120, 255, 0.95),
      rgba(125, 84, 255, 0.85) 45%,
      rgba(90, 60, 200, 0.85) 100%
    ) !important;

  border: 1px solid rgba(180, 140, 255, 0.55) !important;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(125, 84, 255, 0.12),
    0 0 40px rgba(125, 84, 255, 0.45);
}

/* Hover – lidt mere punch */
body.single-loop .lh-audio-play:hover{
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.65),
    0 0 0 8px rgba(125, 84, 255, 0.18),
    0 0 55px rgba(125, 84, 255, 0.6);
}

/* Playing state – samme look som Browse Loops */
body.single-loop .lh-audio-player.is-playing .lh-audio-play{
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.7),
    0 0 0 10px rgba(125, 84, 255, 0.22),
    0 0 65px rgba(125, 84, 255, 0.75);
}
/* =========================================
   Single Loop — About title brighter + subtle glow
   ========================================= */

body.single-loop :is(h2, .lh-about-title, .lh-section-heading, .wp-block-heading){
  color: rgba(255,255,255,0.86);
  text-shadow:
    0 0 18px rgba(125, 84, 255, 0.18),
    0 0 40px rgba(255, 255, 255, 0.06);
}

/* Hvis "About this Loop" er den store H2 og du vil ramme mere præcist */
body.single-loop h2{
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* =========================================
   Single Loop — Subtle ambient background like Browse Loops
   ========================================= */

body.single-loop{
  position: relative;
  background: #070812; /* base */
}

body.single-loop::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;

  background:
    radial-gradient(900px 520px at 18% 18%, rgba(125,84,255,0.18), transparent 60%),
    radial-gradient(800px 520px at 82% 30%, rgba(80,140,255,0.12), transparent 62%),
    radial-gradient(900px 600px at 50% 85%, rgba(125,84,255,0.10), transparent 65%);
}

/* Sørg for at alt indhold ligger OVER baggrundslaget */
body.single-loop #page,
body.single-loop .site,
body.single-loop .site-content,
body.single-loop .content-area,
body.single-loop .entry-content{
  position: relative;
  z-index: 1;
}
/* =========================================
   Single Loop — Player pill pops more
   ========================================= */

body.single-loop :is(.lh-audio-player, .lh-loop-player, .lh-hero-player){
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(0,0,0,0.28) !important;

  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 40px rgba(0,0,0,0.55),
    0 0 34px rgba(125,84,255,0.08);

  border-radius: 18px;
}

/* Progress bar: lidt mere synlig */
body.single-loop .lh-audio-progress{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.08);
}
/* ===== Single Loop: About heading (force) ===== */
body.single-loop .entry-content h2,
body.single-loop .entry-content h2.wp-block-heading,
body.single-loop .entry-content .wp-block-heading{
  color: rgba(255,255,255,0.92) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow:
    0 0 22px rgba(125,84,255,0.22),
    0 0 55px rgba(0,0,0,0.35) !important;
}
/* =========================================
   Single Loop — Canvas background behind cards
   (Browse Loops vibe)
   ========================================= */

body.single-loop .site-content,
body.single-loop .content-area,
body.single-loop .entry-content,
body.single-loop .ast-container{
  background:
    radial-gradient(
      1200px 700px at 20% 10%,
      rgba(125, 84, 255, 0.10),
      transparent 55%
    ),
    radial-gradient(
      1000px 700px at 80% 30%,
      rgba(80, 140, 255, 0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(12, 14, 28, 0.92),
      rgba(6, 7, 16, 0.96)
    ) !important;
}
/* =========================================
   Single Loop — About header styled like section system
   ========================================= */

body.single-loop .entry-content h2{
  /* Behold big headline vibe */
  color: rgba(255,255,255,0.90) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;

  /* Let “system” glow */
  text-shadow:
    0 0 18px rgba(125,84,255,0.16),
    0 0 42px rgba(0,0,0,0.35) !important;

  /* spacing som en section */
  margin-top: 34px !important;
  margin-bottom: 16px !important;
  position: relative;
}

/* Lav en lille “section marker” under (samme vibe som headers) */
body.single-loop .entry-content h2::after{
  content:"";
  display:block;
  margin-top: 12px;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(125,84,255,0.75),
    rgba(80,140,255,0.35),
    rgba(255,255,255,0.00)
  );
  opacity: 0.65;
}
/* =========================================
   Single Loop — Force styling for "About this Loop"
   (matches section system)
   ========================================= */

/* Target the heading by its text content-like structure:
   We can't select text in pure CSS reliably, so we go wide + strong on H2/H3 in entry */
body.single-loop :is(.entry-content, .site-content, .content-area) :is(h2, h3).wp-block-heading,
body.single-loop :is(.entry-content, .site-content, .content-area) h2,
body.single-loop :is(.entry-content, .site-content, .content-area) h3{
  color: rgba(255,255,255,0.90) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 0 18px rgba(125,84,255,0.16), 0 0 42px rgba(0,0,0,0.35) !important;
  margin-top: 34px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

/* Underline marker */
body.single-loop :is(.entry-content, .site-content, .content-area) :is(h2, h3)::after{
  content:"" !important;
  display:block !important;
  margin-top: 12px !important;
  width: 90px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(125,84,255,0.85),
    rgba(80,140,255,0.45),
    rgba(255,255,255,0.00)
  ) !important;
  opacity: 0.75 !important;
}
/* =========================================
   Creator Dashboard — fix header overlap
   Page ID: 144
   ========================================= */

body.page-id-144 .site-content,
body.page-id-144 .content-area,
body.page-id-144 .entry-content{
  padding-top: 120px !important;
}
/* =========================================
   Creator Dashboard (page-id-144) — V1 polish
   ========================================= */

body.page-id-144 .lh-dashboard-wrap{
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Head row */
body.page-id-144 .lh-dashboard-header,
body.page-id-144 .lh-dashboard-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}

/* Stats grid */
body.page-id-144 .lh-stats,
body.page-id-144 .lh-dashboard-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 22px;
}

@media (max-width: 900px){
  body.page-id-144 .lh-stats,
  body.page-id-144 .lh-dashboard-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-id-144 .lh-stat-card,
body.page-id-144 .lh-stat{
  background: rgba(18, 20, 32, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  padding: 16px 16px;
}

body.page-id-144 .lh-stat-label{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
}

body.page-id-144 .lh-stat-value{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body.page-id-144 .lh-stat-sub{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}

/* Main card sections */
body.page-id-144 .lh-dashboard-card{
  background: rgba(18, 20, 32, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  padding: 18px;
}

/* Section title */
body.page-id-144 .lh-dashboard-card h2{
  margin: 0 0 14px;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .85;
}

/* Loop rows */
body.page-id-144 .lh-loop-row,
body.page-id-144 .lh-dashboard-loop{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}

body.page-id-144 .lh-loop-row + .lh-loop-row{
  margin-top: 10px;
}

body.page-id-144 .lh-loop-title{
  font-weight: 750;
}

body.page-id-144 .lh-loop-meta{
  margin-top: 6px;
  opacity: .75;
  font-size: 13px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.page-id-144 .lh-loop-actions{
  display:flex;
  gap: 12px;
  margin-left: auto;
}

body.page-id-144 .lh-link{
  text-decoration:none;
  opacity:.9;
}

body.page-id-144 .lh-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Status pill */
body.page-id-144 .lh-status{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .9;
  margin-left: auto;
}

body.page-id-144 .lh-status-publish{ background: rgba(40,180,120,0.12); border-color: rgba(40,180,120,0.25); }
body.page-id-144 .lh-status-draft{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

/* Primary CTA button (violet disc vibe) */
body.page-id-144 .lh-btn-primary,
body.page-id-144 a.lh-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  color:#fff;
  border: 1px solid rgba(180, 140, 255, 0.40);
  background: radial-gradient(120% 120% at 30% 20%,
    rgba(160,120,255,0.95),
    rgba(125,84,255,0.85) 45%,
    rgba(90,60,200,0.85) 100%
  );
  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 40px rgba(125,84,255,.35);
}
/* =========================================
   Creator Dashboard (page-id-144) — style cd-* system
   ========================================= */

body.page-id-144 main,
body.page-id-144 .cd-main{
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Section header */
body.page-id-144 .cd-section-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 22px 0 12px;
}

body.page-id-144 .cd-section-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .85;
}

/* Card wrapper */
body.page-id-144 .cd-card{
  background: rgba(18, 20, 32, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Empty state inside card */
body.page-id-144 .cd-empty{
  padding: 18px;
}
body.page-id-144 .cd-empty p{
  margin: 0 0 14px;
  opacity: .8;
}

/* Table */
body.page-id-144 .cd-table{
  width: 100%;
  border-collapse: collapse;
}

body.page-id-144 .cd-table thead th{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .7;
  text-align: left;
  padding: 14px 16px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.page-id-144 .cd-table tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

body.page-id-144 .cd-table tbody tr:hover{
  background: rgba(0,0,0,0.14);
}

/* Actions column align */
body.page-id-144 .cd-table-actions{
  text-align: right;
  white-space: nowrap;
}

/* Status pill */
body.page-id-144 .cd-status{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .9;
}

body.page-id-144 .cd-status-publish{
  background: rgba(40,180,120,0.12);
  border-color: rgba(40,180,120,0.25);
}
body.page-id-144 .cd-status-draft{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* Links */
body.page-id-144 .cd-link{
  text-decoration: none;
  opacity: .85;
}
body.page-id-144 .cd-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons */
body.page-id-144 .cd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 14px;
  gap: 8px;
}

/* Primary CTA (violet) */
body.page-id-144 .cd-btn-primary{
  border-color: rgba(180, 140, 255, 0.40);
  color:#fff;
  background: radial-gradient(120% 120% at 30% 20%,
    rgba(160,120,255,0.95),
    rgba(125,84,255,0.85) 45%,
    rgba(90,60,200,0.85) 100%
  );
  box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 40px rgba(125,84,255,.35);
}

body.page-id-144 .cd-btn-primary:hover{
  box-shadow: 0 18px 60px rgba(0,0,0,.65), 0 0 55px rgba(125,84,255,.45);
}

/* Ghost button */
body.page-id-144 .cd-btn-ghost{
  background: rgba(0,0,0,0.18);
}
body.page-id-144 .cd-btn-ghost:hover{
  background: rgba(0,0,0,0.26);
  border-color: rgba(255,255,255,0.16);
}

/* XS / SM sizing */
body.page-id-144 .cd-btn-xs{ padding: 8px 12px; font-size: 12px; }
body.page-id-144 .cd-btn-sm{ padding: 10px 14px; font-size: 13px; }

/* Responsive: make table scroll on small screens */
@media (max-width: 860px){
  body.page-id-144 .cd-table-wrapper{
    overflow-x: auto;
  }
  body.page-id-144 .cd-table{
    min-width: 720px;
  }
}
/* =========================================
   Creator Dashboard (page-id-144) — Stats cards
   ========================================= */

body.page-id-144 .cd-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 22px;
}

@media (max-width: 900px){
  body.page-id-144 .cd-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-id-144 .cd-stat-card{
  background: rgba(18, 20, 32, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  padding: 16px;
}

body.page-id-144 .cd-stat-label{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
}

body.page-id-144 .cd-stat-value{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body.page-id-144 .cd-stat-sub{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}
/* Creator Dashboard — header action buttons side by side */
body.page-id-144 .cd-header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* pæn wrap på mobil */
}
body.page-id-144 .cd-header-actions a{
  display: inline-flex;
}
/* Creator Dashboard — FORCE header actions inline */
body.page-id-144 .cd-header-actions{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.page-id-144 .cd-header-actions > a,
body.page-id-144 .cd-header-actions .cd-btn{
  display: inline-flex !important;
}
/* If Astra wraps actions weirdly, force header to lay out correctly */
body.page-id-144 .cd-header{
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
}
body.page-id-144 .cd-row-link{
  color: inherit;
  text-decoration: none;
  font-weight: 650;
  opacity: .92;
}
body.page-id-144 .cd-row-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* =========================================
   Creator Dashboard — subtle canvas background
   Page ID: 144
   ========================================= */

body.page-id-144 .site-content,
body.page-id-144 .content-area,
body.page-id-144 main{
  background:
    radial-gradient(
      1000px 600px at 18% 12%,
      rgba(125, 84, 255, 0.10),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 82% 28%,
      rgba(80, 140, 255, 0.08),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(12, 14, 28, 0.92),
      rgba(6, 7, 16, 0.96)
    ) !important;
}
/* Creator Dashboard — remove border before actions column */
body.page-id-144 .cd-table th:last-child,
body.page-id-144 .cd-table td:last-child{
  border-left: none !important;
}
body.page-id-144 .cd-table td:last-child{
  box-shadow: none !important;
}
/* =========================================
   Single Loop — Restore Download Free button
   ========================================= */

/* Base button */
body.single-loop a.lh-download-btn,
body.single-loop .lh-license-card a[href*="lh_download"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 14px 18px;

  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  color: #fff !important;

  border-radius: 999px;
  border: 1px solid rgba(180, 140, 255, 0.45);

  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(160,120,255,0.95),
    rgba(125,84,255,0.85) 45%,
    rgba(90,60,200,0.85) 100%
  );

  box-shadow:
    0 14px 45px rgba(0,0,0,.55),
    0 0 40px rgba(125,84,255,.35);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* Hover */
body.single-loop a.lh-download-btn:hover,
body.single-loop .lh-license-card a[href*="lh_download"]:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.65),
    0 0 55px rgba(125,84,255,.45);
}

/* Active / click */
body.single-loop a.lh-download-btn:active,
body.single-loop .lh-license-card a[href*="lh_download"]:active{
  transform: translateY(0);
  filter: brightness(.95);
}

/* Remove ugly browser focus / visited styles */
body.single-loop a.lh-download-btn:visited,
body.single-loop .lh-license-card a[href*="lh_download"]:visited{
  color: #fff !important;
}

body.single-loop a.lh-download-btn:focus,
body.single-loop .lh-license-card a[href*="lh_download"]:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(125,84,255,.35),
    0 18px 60px rgba(0,0,0,.65);
}
/* =========================================
   My Loops — layout + overlap fix
   ========================================= */

body.page-template-page-my-loops .site-content,
body.page-template-page-my-loops .content-area,
body.page-template-page-my-loops .entry-content{
  padding-top: 120px !important;
}

body.page-template-page-my-loops .cd-main{
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
}
body.page-template-page-my-loops .cd-section-header{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

body.page-template-page-my-loops .cd-page-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  opacity: .95;
}

body.page-template-page-my-loops .cd-header-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.page-template-page-my-loops .site-content,
body.page-template-page-my-loops .content-area,
body.page-template-page-my-loops main{
  background:
    radial-gradient(1000px 600px at 18% 12%, rgba(125, 84, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 82% 28%, rgba(80, 140, 255, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(12, 14, 28, 0.92), rgba(6, 7, 16, 0.96)) !important;
}
/* =========================================
   My Loops — polish (page-id-104)
   ========================================= */

/* Fix header overlap */
body.page-id-104 .site-content,
body.page-id-104 .content-area,
body.page-id-104 .entry-content{
  padding-top: 120px !important;
}

/* Center + spacing */
body.page-id-104 .cd-main{
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

/* Subtle canvas background (matches dashboard) */
body.page-id-104 .site-content,
body.page-id-104 .content-area,
body.page-id-104 main{
  background:
    radial-gradient(1000px 600px at 18% 12%, rgba(125, 84, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 82% 28%, rgba(80, 140, 255, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(12, 14, 28, 0.92), rgba(6, 7, 16, 0.96)) !important;
}

/* Header layout */
body.page-id-104 .cd-section-header{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

body.page-id-104 .cd-page-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: .95;
}

body.page-id-104 .cd-header-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* My Loops (page-id-104) — remove Astra "invisible box" wrapper */
body.page-id-104 .site-content,
body.page-id-104 .content-area,
body.page-id-104 .ast-container,
body.page-id-104 .site-content > .ast-container,
body.page-id-104 #primary,
body.page-id-104 #content{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.page-id-104 .entry-content,
body.page-id-104 .entry{
  background: transparent !important;
  box-shadow: none !important;
}
/* My Loops — undo "boxed" canvas background */
body.page-id-104 .site-content,
body.page-id-104 .content-area,
body.page-id-104 main{
  background: transparent !important;
}
body.page-id-104{
  background:
    radial-gradient(1000px 600px at 18% 12%, rgba(125, 84, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 82% 28%, rgba(80, 140, 255, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(12, 14, 28, 0.92), rgba(6, 7, 16, 0.96)) !important;
}
body.page-id-104 #page,
body.page-id-104 #content,
body.page-id-104 .site-content,
body.page-id-104 .ast-container{
  background: transparent !important;
}
/* My Loops — Top loop badge */
body.page-id-104 .cd-top-badge{
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  color: #d8c9ff;
  background: rgba(125,84,255,.18);
  border: 1px solid rgba(125,84,255,.35);
}
/* Upload success banner */
.lh-banner{
  background: rgba(125,84,255,.10);
  border: 1px solid rgba(125,84,255,.28);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 35px rgba(0,0,0,.45);
}
.lh-banner strong{ font-weight: 800; }
.lh-banner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
/* Key options — LoopHive DNA (no yellow anywhere) */
.lh-key-option{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.lh-key-option:hover{
  background: rgba(138,94,255,0.10) !important;
  border-color: rgba(138,94,255,0.40) !important;
  box-shadow: 0 0 0 2px rgba(138,94,255,0.12) !important;
}

.lh-key-option:focus,
.lh-key-option:focus-visible{
  outline: none !important;
  background: rgba(138,94,255,0.12) !important;
  border-color: rgba(138,94,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(138,94,255,0.16) !important;
}

/* Selected/active states */
.lh-key-option.is-active,
.lh-key-option.is-selected,
.lh-key-option[aria-pressed="true"],
.lh-key-option[aria-selected="true"] {
  background: rgba(138,94,255,0.18) !important;
  border-color: rgba(138,94,255,0.55) !important;
  color: #fff !important;
  box-shadow:  0 0 0 2px rgba(138,94,255,0.18) !important;
}

/* KEY trigger button — remove yellow, match LoopHive */
.lh-filterbar button[data-field="key"],
.lh-filterbar .lh-filter-btn[data-field="key"]{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

.lh-filterbar button[data-field="key"]:hover,
.lh-filterbar .lh-filter-btn[data-field="key"]:hover{
  background: rgba(138,94,255,0.14) !important;
  border-color: rgba(138,94,255,0.45) !important;
  box-shadow: 0 0 0 2px rgba(138,94,255,0.14), 0 14px 40px rgba(0,0,0,0.45) !important;
}
/* Make filter dropdowns sit above everything and not see-through */
.lh-browse-filters,
.lh-filterbar{
  position: relative;
  isolation: isolate; /* fixes weird z-index stacking */
}

.lh-key-panel{
  z-index: 9999 !important;
  background: rgba(10, 10, 16, 0.92) !important; /* less see-through */
  border: 1px blur rgba(255,255,255,0.14) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65) !important;
}
.lh-key-trigger{
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}
/* Only on Browse Loops: remap Astra global yellow to LoopHive violet */
body.page-id-39{
  --ast-global-color-7: #8a5eff; /* LoopHive violet */
}
/* Browse Loops: tighten spacing between hero (filters) and grid */
body.page-id-39 .lh-browse-loops-hero{
  padding-bottom: 16px !important;  /* justér: 16–40 */
  margin-bottom: 0 !important;
}

body.page-id-39 .lh-browse-loops-grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-id-39 .lh-browse-loops-hero .lh-browse-filters,
body.page-id-39 .lh-browse-loops-hero .lh-filterbar{
  margin-bottom: 0 !important;
}
body.page-id-39 section.lh-browse-loops-hero{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
/* Browse Loops — FINAL spacing (no hacks) */
body.page-id-39 section.lh-browse-loops-hero{
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 20px !important;   /* justér */
  margin-bottom: 0 !important;
}

/* Nulstil alt “luft” inde i hero */
body.page-id-39 section.lh-browse-loops-hero *{
  margin-bottom: 0;
}

/* Specifikt: hvis “Advanced filters” blokken eller genre-pills har margin */
body.page-id-39 section.lh-browse-loops-hero .lh-browse-filters,
body.page-id-39 section.lh-browse-loops-hero .lh-filterbar,
body.page-id-39 section.lh-browse-loops-hero .lh-filter-section,
body.page-id-39 section.lh-browse-loops-hero .lh-filter-section--genre{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Grid må IKKE have top spacing */
body.page-id-39 .lh-browse-loops-grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hvis grid ligger i en wrapper (ofte astra container) */
body.page-id-39 .ast-container,
body.page-id-39 .site-content,
body.page-id-39 .content-area{
  padding-top: 0 !important;
}
/* Fallback: force transparent header everywhere */
.site-header,
.ast-primary-header,
.ast-primary-header-bar,
.ast-header-container{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Single pages (posts + CPT): force transparent header */
body.single .site-header,
body.single .ast-primary-header,
body.single .ast-primary-header-bar,
body.single .ast-header-container{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* If loops are a CPT like "loop" */
body.single-loop .site-header,
body.single-loop .ast-primary-header,
body.single-loop .ast-primary-header-bar{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Kill Astra header underlay (single pages only) */
body.single .site-primary-header-wrap {
  background: transparent !important;
  box-shadow: none !important;
}

/* Extra safety */
body.single .ast-primary-header,
body.single .ast-primary-header-bar {
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== Upload Loop – force full width (Astra override) ===== */
body.page-template-page-upload-loop
.ast-container,
body.page-template-page-upload-loop
.ast-container-fluid,
body.page-template-page-upload-loop
.site-content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* hvis Astra bruger ast-builder wrapper */
body.page-template-page-upload-loop
.ast-builder-grid-row-container {
  max-width: 100% !important;
}

/* sørg for content faktisk fylder */
body.page-template-page-upload-loop
#content,
body.page-template-page-upload-loop
.site-content {
  width: 100% !important;
}

/* =========================
   Become a Creator (Public)
   ========================= */
.lh-become{
  max-width: 980px;
  margin: 120px auto 140px;
  padding: 0 24px;
}

.lh-become-card{
  position: relative;
  border-radius: 26px;
  padding: 34px 34px 26px;
  background: rgba(18, 20, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* subtle brand glow */
.lh-become-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 300px at 20% 10%, rgba(125,84,255,0.22), transparent 60%),
              radial-gradient(700px 300px at 80% 20%, rgba(125,84,255,0.14), transparent 60%);
  pointer-events:none;
  filter: blur(0px);
}

.lh-become-eyebrow{
  position: relative;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 10px;
}

.lh-become-title{
  position: relative;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.06;
  margin: 0 0 10px;
  text-shadow: 0 0 26px rgba(125,84,255,0.22);
}

.lh-become-subtitle{
  position: relative;
  margin: 0 0 24px;
  opacity: .8;
  max-width: 70ch;
}

.lh-become-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 22px;
}

.lh-become-panel{
  border-radius: 20px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.lh-become-panel h3{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.lh-become-panel ul,
.lh-become-panel ol{
  margin: 0;
  padding-left: 18px;
  opacity: .85;
}

.lh-become-panel li{
  margin: 8px 0;
}

.lh-become-actions{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.lh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.lh-btn-primary{
  background: linear-gradient(135deg, #7d54ff, #5b7bff);
  color: #fff !important;
  box-shadow: 0 18px 55px rgba(125,84,255,0.24);
}

.lh-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(125,84,255,0.32);
}

.lh-btn-ghost{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85) !important;
}

.lh-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(125,84,255,0.35);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
}

.lh-become-tip{
  position: relative;
  margin: 14px 0 0;
  font-size: 13px;
  opacity: .55;
}

/* Mobile */
@media (max-width: 820px){
  .lh-become{ margin: 96px auto 120px; }
  .lh-become-card{ padding: 26px 18px 18px; }
  .lh-become-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Become a Creator — tweaks
   ========================= */

/* 1) Make title readable + more "LoopHive" */
.lh-become-title{
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 22px rgba(125,84,255,0.22);
}

/* 2) Spacing polish */
.lh-become-subtitle{
  margin-bottom: 28px;
  opacity: .82;
}

/* 6) Card a touch more glass + glow */
.lh-become-card{
  background: rgba(18, 20, 28, 0.62);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,0.58);
}

/* 3) Make the two columns feel more structured */
.lh-become-panel{
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.09);
}

.lh-become-panel h3{
  color: rgba(255,255,255,0.9);
}

/* a little tighter list rhythm */
.lh-become-panel li{
  margin: 7px 0;
}

/* 4) CTA buttons same height + better hover */
.lh-become-actions .lh-btn{
  min-height: 46px;
  padding: 12px 18px;
}

.lh-btn-ghost{
  background: rgba(255,255,255,0.035);
}

.lh-btn-ghost:hover{
  background: rgba(125,84,255,0.08);
  border-color: rgba(125,84,255,0.40);
}

/* 5) Tip -> small disclaimer pill */
.lh-become-tip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  opacity: .72;
  margin-top: 14px;
}

/* OPTIONAL: make the whole card sit a bit lower (less crowded under header) */
.lh-become{
  margin-top: 140px;
}
/* Become card — hero treatment */
.lh-become-card{
  position: relative;
  background: rgba(18,20,30,0.65);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

body.page-id-87 .site-content{
  background:
    radial-gradient(
      1200px 900px at 25% -25%,
      rgba(180,150,255,0.55),
      transparent 55%
    ),
    radial-gradient(
      700px 500px at 80% 15%,
      rgba(140,240,255,0.35),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #181a3d 0%,
      #0d0f26 55%,
      #070812 100%
    ) !important;
}

/* Slight background grain feel via glow illusion */
body.page-id-87 .lh-become-card{
  box-shadow:
    0 40px 120px rgba(0,0,0,0.65),
    0 0 120px rgba(125,84,255,0.15) !important;
}
/* ======================================================
   Become a Creator — LoopHive
   ====================================================== */

.lh-become {
  min-height: 100vh;
  background: transparent;
  padding: 120px 20px 140px;
}


/* Hero container */
.lh-become-hero {
  max-width: 980px;
  margin: 0 auto;
}

/* Main card */
.lh-become-card {
  background: rgba(20, 22, 38, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 28px;
  padding: 56px 52px 48px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 60px rgba(125,84,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Badge */
.lh-become-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  color: #cfc7ff;
  background: rgba(125,84,255,0.14);
  border: 1px solid rgba(125,84,255,0.28);
  margin-bottom: 22px;
}

/* Title */
.lh-become-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  text-shadow: 0 0 22px rgba(125,84,255,0.35);
}

/* Subtitle */
.lh-become-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin-bottom: 44px;
}

/* Feature grid */
.lh-become-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
  margin-bottom: 48px;
}

/* Feature row */
.lh-become-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Dot */
.lh-dot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7d54ff, #5f7cff);
  box-shadow: 0 0 12px rgba(125,84,255,0.8);
  flex-shrink: 0;
}

/* Feature title */
.lh-become-feature-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

/* Feature text */
.lh-become-feature-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
}

/* CTA */
.lh-become-cta {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

/* Buttons (inherits your global LH buttons, but safe fallback) */
.lh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .22s ease;
}

.lh-btn-primary {
  background: linear-gradient(135deg, #7d54ff, #5f7cff);
  color: #fff;
  box-shadow: 0 10px 30px rgba(125,84,255,0.35);
}

.lh-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(125,84,255,0.45);
}

.lh-btn-ghost {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
}

.lh-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
}

/* Footnote */
.lh-become-footnote {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.lh-become-footnote span {
  color: #b8a9ff;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .lh-become-card {
    padding: 42px 28px 38px;
  }

  .lh-become-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lh-become-sub {
    margin-bottom: 34px;
  }
}
/* ===============================
   LoopHive Footer – Centered
   =============================== */

.lh-footer {
  text-align: center;
}

.lh-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lh-footer-tagline {
  max-width: 520px;
  margin: 12px auto 0;
}

/* Grid */
.lh-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  justify-items: center;
  margin-top: 48px;
}

/* Columns */
.lh-footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lh-footer-col h4 {
  margin-bottom: 16px;
}

/* Links */
.lh-footer-col a {
  margin: 6px 0;
  display: inline-block;
}

/* Bottom */
.lh-footer-bottom {
  margin-top: 48px;
  text-align: center;
}
/* ===============================
   Footer link hover glow
   =============================== */

.lh-footer-col a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: 
    color 0.25s ease,
    text-shadow 0.25s ease,
    transform 0.25s ease;
}

.lh-footer-col a:hover {
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(125,84,255,0.45),
    0 0 14px rgba(125,84,255,0.25);
  transform: translateY(-1px);
}
.lh-audio-play.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.lh-badge-warn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.25);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 10px;
}
.lh-audio-play.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
/* LoopHive Header — injected menu items */

.lh-nav-link { opacity: .92; }
.lh-nav-link:hover { opacity: 1; }

.lh-menu-account > a,
.lh-menu-creator > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Avatar pill */
.lh-account-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,20,.35);
  backdrop-filter: blur(14px);
}

.lh-avatar{
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color:#fff;
  background: radial-gradient(circle at 30% 30%, rgba(125,84,255,.95), rgba(60,120,255,.65));
  box-shadow: 0 0 18px rgba(230, 230, 250, 1);
}

.lh-account-text{
  font-size: 13px;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Submenus styling (Astra uses .sub-menu) */
.lh-submenu{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,20,.65);
  backdrop-filter: blur(16px);
  padding: 10px 8px;
  min-width: 220px;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
}

.lh-submenu li a{
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.88) !important;
}

.lh-submenu li a:hover{
  background: rgba(125,84,255,.14);
  color: #fff !important;
}

/* Keep dropdown aligned nicely on the right */
.lh-menu-account .sub-menu,
.lh-menu-creator .sub-menu{
  right: 0;
  left: auto;
}
/* ===== Account pill (avatar i headeren) ===== */
.lh-menu-account > a,
.lh-account-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  transition: all .2s ease;
}

.lh-menu-account > a:hover {
  background: rgba(125, 84, 255, 0.08);
  border-color: rgba(125, 84, 255, 0.25);
}

/* Avatar circle */
.lh-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7d54ff, #9f7bff);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(125,84,255,0.15);
}

/* Name next to avatar */
.lh-account-text {
  font-size: 14px;
  color: #d6d6e7;
  white-space: nowrap;
}


/* ===== Dropdown menu (glass look) ===== */
.lh-submenu,
.sub-menu.lh-submenu {
  background: rgba(15, 16, 30, 0.85) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  min-width: 200px;
}

/* Items inside dropdown */
.lh-submenu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: #cfcfe6 !important;
  transition: all .15s ease;
}

/* Hover effect */
.lh-submenu li a:hover {
  background: rgba(125,84,255,0.12);
  color: #fff !important;
}

/* Remove Astra default borders */
.lh-submenu li {
  border: none !important;
}

/* Slight spacing from header */
.lh-menu-account .sub-menu {
  margin-top: 10px;
}
/* =========================
   Header account pill (compact)
   ========================= */

/* Only affect header nav */
header .lh-menu-account .lh-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 18, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 22px rgba(125, 84, 255, 0.10);
}

/* The circular initials */
header .lh-menu-account .lh-creator-avatar--nav {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #fff;
  background: radial-gradient(circle at 30% 30%, rgba(170, 120, 255, 1), rgba(88, 121, 255, 1));
  box-shadow: 0 0 18px rgba(125, 84, 255, 0.25);
}

/* Kill any inherited "giant bubble" styles */
header .lh-menu-account .lh-avatar,
header .lh-menu-account .lh-account-text {
  display: none !important;
}

/* =========================
   Header dropdown styling (LoopHive DNA)
   ========================= */

header .lh-submenu,
header .lh-submenu.lh-submenu--account {
  min-width: 220px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(12, 14, 24, 0.82);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 28px rgba(125, 84, 255, 0.14);
}

/* Dropdown links */
header .lh-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}

header .lh-submenu a:hover {
  background: rgba(125, 84, 255, 0.12);
  color: #fff;
}
/* =========================
   Header creator pill (compact, like single loop)
   ========================= */

header .lh-menu-account .lh-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 14px 6px 6px;
  border-radius: 999px;

  background: rgba(16, 18, 30, 0.6);
  border: 1px solid rgba(255,255,255,0.10);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 0 22px rgba(125, 84, 255, 0.14);

  transition: all .2s ease;
}

header .lh-menu-account .lh-account-pill:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 26px rgba(125, 84, 255, 0.22);
}

/* Avatar circle */
header .lh-menu-account .lh-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  color: #fff;

  background: radial-gradient(circle at 30% 30%, #b68cff, #6f7dff);
  box-shadow: 0 0 18px rgba(125, 84, 255, 0.35);

  flex-shrink: 0;
}

/* Name text */
header .lh-menu-account .lh-account-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

/* Remove any giant inherited sizing */
header .lh-menu-account {
  max-width: none;
}

header .lh-menu-account * {
  transform: none !important;
}
/* =========================================
   Astra header — force LoopHive account pill
   ========================================= */

/* Target Astra primary menu reliably */
.ast-primary-header-bar .main-header-menu .lh-menu-account > a.lh-account-pill,
.ast-primary-header-bar .ast-primary-header-bar-main .main-header-menu .lh-menu-account > a.lh-account-pill,
.main-header-menu .lh-menu-account > a.lh-account-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 6px 14px 6px 6px !important;
  border-radius: 999px !important;

  background: rgba(16, 18, 30, 0.60) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 0 22px rgba(125, 84, 255, 0.14) !important;

  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  text-decoration: none !important;
}

/* Hover */
.main-header-menu .lh-menu-account > a.lh-account-pill:hover {
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 26px rgba(125, 84, 255, 0.22) !important;
}

/* Avatar circle (force SMALL) */
.main-header-menu .lh-menu-account .lh-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;

  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;

  color: #fff !important;

  background: radial-gradient(circle at 30% 30%, #b68cff, #6f7dff) !important;
  box-shadow: 0 0 18px rgba(125, 84, 255, 0.35) !important;
}

/* Name text (compact) */
.main-header-menu .lh-menu-account .lh-account-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.92) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}

/* If Astra adds weird pseudo overlays */
.main-header-menu .lh-menu-account > a.lh-account-pill::before,
.main-header-menu .lh-menu-account > a.lh-account-pill::after {
  content: none !important;
}

/* Mobile: keep it tighter */
@media (max-width: 921px) {
  .main-header-menu .lh-menu-account > a.lh-account-pill {
    padding: 6px 10px 6px 6px !important;
  }
  .main-header-menu .lh-menu-account .lh-account-text {
    max-width: 110px !important;
  }
}
/* =========================================
   Fjern socials i headeren (Astra)
   ========================================= */

/* Mest almindelige Astra social selectors */
.ast-header-social-wrap,
.ast-social-icons,
.ast-header-social-icons,
.header-social-inner-wrap {
  display: none !important;
}

/* Backup hvis Astra har lagt dem som menu-items */
.main-header-menu .menu-item.social,
.main-header-menu .ast-social-menu {
  display: none !important;
}
/* =========================================
   LoopHive header creator pill (bredere)
   ========================================= */

.lh-account-pill {
  display: flex !important;
  align-items: center;
  gap: 10px;

  padding: 6px 16px !important;   /* ← gør den bredere horisontalt */
  min-width: 160px;               /* ← tvinger lidt bredde */
  border-radius: 999px;

  background: rgba(20,20,30,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

/* Avataren mindre så bredden føles mere elegant */
.lh-account-pill .lh-avatar {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

/* Navnet må gerne fylde lidt */
.lh-account-pill .lh-account-text {
  font-size: 14px;
  opacity: 0.95;
  white-space: nowrap;
}
/* =========================================
   Header account pill = samme stil som single loop creator pill
   ========================================= */

.lh-account-pill {
  display: flex !important;
  align-items: center;
  gap: 10px;

  padding: 6px 14px !important;
  border-radius: 999px;

  background: rgba(22, 24, 37, 0.65);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 25px rgba(125, 84, 255, 0.08);

  text-decoration: none !important;
}

/* Avatar identisk proportioner */
.lh-account-pill .lh-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;

  background: linear-gradient(135deg, #7f5bff, #b68cff);
  color: #fff;

  font-size: 13px;
  font-weight: 600;

  display: grid;
  place-items: center;
}

/* Navnet samme vibe som creator pill */
.lh-account-pill .lh-account-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #eaeaff;
  opacity: 0.95;

  white-space: nowrap;
}

/* Hover føles "premium" */
.lh-account-pill:hover {
  border-color: rgba(125, 84, 255, 0.35);
  box-shadow: 0 0 35px rgba(125, 84, 255, 0.18);
}
/* Sørg for at teksten faktisk vises */
.lh-account-pill {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 14px !important;
  max-width: 220px;
}

/* Username tekst */
.lh-account-pill .lh-account-text {
  display: block !important;
  font-size: 14px;
  font-weight: 500;
  color: #eaeaff;
  opacity: 0.95;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Avatar stadig kompakt */
.lh-account-pill .lh-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.lh-account-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lh-account-text strong {
  font-weight: 600;
  font-size: 14px;
}

.lh-account-text span {
  font-size: 11px;
  opacity: 0.6;
}
/* Header dropdown: compact + clean (LoopHive DNA) */
header .lh-submenu,
header .sub-menu.lh-submenu {
  min-width: 200px !important;
  padding: 8px !important;
  border-radius: 16px !important;
}

/* Links: mindre padding + mindre font */
header .lh-submenu a {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

/* Fjern ekstra spacing mellem li’s */
header .lh-submenu li {
  margin: 0 !important;
}

/* Gør “Log out” lidt tydeligere (men stadig premium) */
header .lh-submenu a[href*="logout"] {
  color: rgba(255,255,255,0.78) !important;
  opacity: 0.95;
}
header .lh-submenu a[href*="logout"]:hover {
  background: rgba(255, 80, 120, 0.12) !important;
}
/* ===== Header dropdown (Creator Hub menu) ===== */

.lh-submenu,
.menu-item .sub-menu {
  background: rgba(14, 16, 26, 0.92) !important; /* mørk LoopHive baggrund */
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none !important; /* fjerner blå glow */
}

/* Dropdown items hover */
.lh-submenu li a:hover {
  background: rgba(255,255,255,0.04);
}
.lh-menu-creator > a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
}
/* Kill ghost dropdown: use display none/block (no opacity transitions) */
.lh-menu-creator > .sub-menu,
.lh-menu-account > .sub-menu {
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Show only when hovered or keyboard focus is inside */
.lh-menu-creator:hover > .sub-menu,
.lh-menu-creator:focus-within > .sub-menu,
.lh-menu-account:hover > .sub-menu,
.lh-menu-account:focus-within > .sub-menu {
  display: block !important;
}
/* ---------- Advanced Filters = LoopHive pill ---------- */

/* =========================
   Advanced Filters — pill toggle + clean panel
   ========================= */

/* 1) Sørg for at <details> ikke tegner en "container boks" */
.lh-advanced-filters {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px auto 26px !important; /* justér spacing */
  max-width: 1200px; /* eller din grid width */
}

/* 2) Dræb evt. pseudo-elementer der laver den store oval */
.lh-advanced-filters::before,
.lh-advanced-filters::after,
.lh-advanced-inner::before,
.lh-advanced-inner::after {
  content: none !important;
  display: none !important;
}

/* 3) Summary = selve pill-knappen */
.lh-advanced-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  /* LoopHive DNA */
  background: rgba(22, 24, 37, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);

  color: rgba(255,255,255,0.92);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;

  box-shadow: 0 0 35px rgba(125, 84, 255, 0.14);
}

/* Fjern default triangle/marker */
.lh-advanced-summary::-webkit-details-marker { display: none; }
.lh-advanced-summary::marker { content: ""; }

/* 4) Den lille indikator (pil) */
.lh-advanced-summary-indicator {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,0.75);
  transform: translateY(1px);
  transition: transform .18s ease;
  opacity: .9;
}

.lh-advanced-filters[open] .lh-advanced-summary-indicator {
  transform: translateY(1px) rotate(180deg);
}

/* Hover/focus */
.lh-advanced-summary:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 45px rgba(125, 84, 255, 0.22);
}
.lh-advanced-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(125,84,255,0.25), 0 0 45px rgba(125,84,255,0.22);
}

/* 5) Panelet der åbner (ikke kæmpe) */
.lh-advanced-inner {
  margin-top: 18px;
  padding: 18px 18px 6px;

  background: rgba(22, 24, 37, 0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  backdrop-filter: blur(18px);

  box-shadow: 0 0 55px rgba(0,0,0,0.35);
}

/* Hvis noget tidligere har sat størrelse/position vildt */
.lh-advanced-inner {
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}
/* =========================
   Advanced Filters — Pill toggle + clean panel (FINAL)
   ========================= */

.lh-advanced-filters{
  /* center pill */
  display: flex;
  justify-content: center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  margin: 18px auto 14px !important;
  max-width: 1200px;
}

/* Dræb evt. pseudo-elementer der laver weird shapes */
.lh-advanced-filters::before,
.lh-advanced-filters::after,
.lh-advanced-inner::before,
.lh-advanced-inner::after{
  content: none !important;
  display: none !important;
}

.lh-advanced-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  /* IMPORTANT: ikke full width */
  width: fit-content !important;
  display: inline-flex !important;

  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px !important;
  border-radius: 999px;

  background: rgba(22, 24, 37, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);

  color: rgba(255,255,255,0.92);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;

  box-shadow: 0 0 35px rgba(125, 84, 255, 0.14);
  transition: all .2s ease;
}

/* Fjern default marker */
.lh-advanced-summary::-webkit-details-marker{ display:none; }
.lh-advanced-summary::marker{ content:""; }

/* Indicator triangle (bruger dit tomme <span>) */
.lh-advanced-summary-indicator{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,0.75);
  transform: translateY(1px);
  transition: transform .18s ease;
  opacity: .9;
}

.lh-advanced-filters[open] .lh-advanced-summary-indicator{
  transform: translateY(1px) rotate(180deg);
}

.lh-advanced-summary:hover{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 45px rgba(125, 84, 255, 0.22);
}

.lh-advanced-summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(125,84,255,0.25), 0 0 45px rgba(125,84,255,0.22);
}

/* Panel */
.lh-advanced-inner{
  margin-top: 16px !important;
  padding: 14px 16px 6px !important;

  background: rgba(22, 24, 37, 0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  backdrop-filter: blur(18px);

  box-shadow: 0 0 55px rgba(0,0,0,0.35);

  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}
/* Kill the big left oval completely */
.lh-advanced-filters > *:not(summary):not(.lh-advanced-inner) {
  display: none !important;
}

/* Extra safety if it's a pseudo element */
.lh-advanced-filters::before,
.lh-advanced-filters::after {
  content: none !important;
  display: none !important;
}
.lh-advanced-inner::before,
.lh-advanced-inner::after {
  display: none !important;
  content: none !important;
}
/* Skjul den gamle "Advanced filters" summary fuldstændigt */
.lh-advanced-summary {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
/* =========================
   Advanced Filters — clean (LoopHive DNA)
   Works with: button + <details>
   ========================= */

/* Kill any old container visuals */
.lh-advanced-filters {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
}

/* Pensionér den store "oval": hide summary entirely */
.lh-advanced-summary {
  display: none !important;
}

/* The pill button */
.lh-advanced-toggle {
  appearance: none;
  border: 0;
  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 18px;
  border-radius: 999px;

  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.92);
  background: rgba(22, 24, 37, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);

  box-shadow: 0 0 30px rgba(125, 84, 255, 0.14);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  margin: 18px auto 12px;
}

.lh-advanced-toggle:hover {
  border-color: rgba(140, 110, 255, 0.35);
  background: rgba(140, 110, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(140, 110, 255, 0.10),
              0 12px 38px rgba(140, 110, 255, 0.18);
  transform: translateY(-1px);
}

.lh-advanced-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(125,84,255,0.25),
              0 12px 38px rgba(140,110,255,0.18);
}

.lh-advanced-toggle__label { position: relative; top: 0.5px; }

/* Chevron */
.lh-advanced-toggle__chev {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,0.78);
  opacity: .9;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}

.lh-advanced-toggle.is-open .lh-advanced-toggle__chev {
  transform: translateY(1px) rotate(180deg);
}

/* Panel */
.lh-advanced-inner {
  margin-top: 14px;
  padding: 18px 18px 10px;

  background: rgba(22, 24, 37, 0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  backdrop-filter: blur(18px);

  box-shadow: 0 0 55px rgba(0,0,0,0.35);
}

/* If something old forced weird sizing */
.lh-advanced-inner {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}

/* Closed state: hide panel */
.lh-advanced-filters:not([open]) .lh-advanced-inner {
  display: none;
}
/* Center Advanced Filters pill */
.lh-advanced-toggle,
.lh-advanced-summary {
  display: flex;
  justify-content: center;
}

/* Hvis knappen selv er pillen */
.lh-advanced-toggle {
  margin: 0 auto 18px;
  width: fit-content;
}
/* Sørg for at KEY dropdown ligger over badges */
#lh-key-panel,
.lh-key-panel,
.lh-filter-section--keys {
  position: relative;
  z-index: 999;
}
/* Sørg for at key-sektionen er center container */
.lh-filter-section--keys {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Selve key-panelet */
#lh-key-panel {
  width: 100%;
  max-width: 900px !important;       /* justér hvis nødvendigt */
  margin: 16px auto 0 !important;    /* center horisontalt */
}
/* Lukket = ingen plads */
#lh-key-panel {
  display: none;
}

/* Når key er åben */
.lh-filter-section--keys.is-open #lh-key-panel {
  display: block;
}
/* Single Loop — Mobile responsive */
@media (max-width: 820px) {

  /* Sørg for hero card ikke bliver “for bred” og at indhold kan wrappe */
  .lh-single-hero {
    padding: 22px 18px !important;
  }

  /* Titel lidt mindre + bedre line breaks */
  .lh-single-title {
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em;
  }

  /* Meta må IKKE være én lang linje der presser layoutet */
  .lh-single-meta {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: .85;
    white-space: normal !important;
  }

  /* Hvis du har et wrapper-område til top-rows, tving wrap */
  .lh-single-hero,
  .lh-single-hero * {
    max-width: 100%;
  }

  /* Creator pill: placér den under meta og align venstre */
  .lh-single-creator {
    margin-top: 14px !important;
    display: flex;
    justify-content: flex-start !important;
  }

  .lh-creator-pill {
    transform: none !important;
    max-width: 100%;
  }
}
@media (max-width: 820px) {
  .lh-audio-player {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
  }

  .lh-audio-track {
    flex: 1 1 auto;
    min-width: 0; /* vigtigt i flex layouts */
  }

  .lh-audio-time {
    font-size: 12px !important;
    opacity: .85;
  }
}
@media (max-width: 900px) {
  .lh-licenses-grid,
  .lh-single-licenses-grid,
  .available-licenses-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* lidt mindre padding inde i kortene */
  .lh-license-card {
    padding: 18px !important;
  }
}
/* ==========================================
   SINGLE LOOP — MOBILE HARD FIX (Astra-safe)
   ========================================== */
@media (max-width: 820px) {

  /* 1) Sørg for at selve single wrapper ikke har weird side-padding/overflow */
  .lh-single-loop {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 2) Hero: tving ALT til at stacke */
  .lh-single-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;

    padding: 18px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Hvis Astra/andre wrappers laver flex-row, så neutraliser */
  .lh-single-hero > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 4) Titel og meta må wrappe normalt */
  .lh-single-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .lh-single-meta {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    font-size: 12px !important;
    opacity: .85;
  }

  /* 5) Creator pill: aldrig absolute på mobil + under meta */
  .lh-single-creator {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 2px !important;
  }

  .lh-creator-pill {
    max-width: 100% !important;
    width: auto !important;
  }

  /* 6) Player: tving fuld bredde og ingen overflow */
  .lh-audio-player {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .lh-audio-track {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* VIGTIG for at progress ikke skubber alt */
  }

  .lh-audio-progress {
    width: 100% !important;
  }

  .lh-audio-time {
    font-size: 12px !important;
    opacity: .85;
    white-space: nowrap;
  }

  /* 7) Licenses grid: 1 kolonne på mobil */
  .lh-licenses-grid,
  .lh-single-licenses-grid,
  .available-licenses-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
/* SINGLE LOOP — flyt save/heart på mobil */
@media (max-width: 820px) {

  /* Sørg for at vi kan absolute-positionere inde i hero */
  .lh-single-hero{
    position: relative !important;
  }

  /* Selve heart-knappen (hero) */
  .lh-fav-btn--hero{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 50 !important;

    /* optional: lidt mindre på mobil */
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
  }

  /* hvis hjertet selv er for stort */
  .lh-fav-btn--hero .lh-fav-heart{
    font-size: 16px !important;
    line-height: 1 !important;
  }
}
/* vigtig: wrapperen skal være position:relative */
.lh-single-hero-card,
.lh-single-hero{
  position: relative;
}

/* inline heart i øverste højre hjørne */
.lh-fav-btn--inline{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(22,24,37,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 35px rgba(125,84,255,0.14);

  color: rgba(255,255,255,0.85);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.lh-fav-btn--inline:hover{
  background: rgba(125,84,255,0.14);
  border-color: rgba(125,84,255,0.35);
  box-shadow: 0 0 45px rgba(125,84,255,0.22);
  transform: translateY(-1px);
}

.lh-fav-btn--inline.is-active{
  background: rgba(125,84,255,0.20);
  border-color: rgba(125,84,255,0.55);
}

.lh-fav-btn--inline .lh-fav-heart{
  font-size: 18px;
  line-height: 1;
}

/* mobil: mindre + lidt tættere på kanten */
@media (max-width: 820px){
  .lh-fav-btn--inline{
    width: 46px;
    height: 46px;
    top: 14px;
    right: 14px;
  }
}
/* Hero wrapper skal være reference for absolute */
.lh-single-hero {
  position: relative;
}

/* Flyt heart button til top-right af hero */
.lh-fav-btn--inline {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 10;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(22, 24, 37, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);

  box-shadow: 0 0 30px rgba(125,84,255,0.12);
  transition: all .18s ease;
}

.lh-fav-btn--inline:hover {
  background: rgba(125,84,255,0.14);
  border-color: rgba(125,84,255,0.4);
  box-shadow: 0 0 45px rgba(125,84,255,0.25);
  transform: translateY(-1px);
}

.lh-fav-btn--inline.is-active {
  background: rgba(125,84,255,0.25);
  border-color: rgba(125,84,255,0.6);
}

.lh-fav-btn--inline .lh-fav-heart {
  font-size: 20px;
  line-height: 1;
}

/* Mobil tweaks */
@media (max-width: 768px) {
  .lh-fav-btn--inline {
    width: 38px !important;
    height: 38px !important;
    top: 14px;
    right: 14px;
  }
}
/* FORCE: single loop heart to top-right */
.single-loop .lh-single-hero { position: relative !important; }

.single-loop .lh-fav-btn--inline{
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 999 !important;

  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(22,24,37,0.55) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) !important;

  box-shadow: 0 0 30px rgba(125,84,255,0.12) !important;
}

.single-loop .lh-fav-btn--inline .lh-fav-heart{
  font-size: 20px !important;
  line-height: 1 !important;
}
/* =========================================
   Single loop – heart button: desktop inline, mobile corner
   ========================================= */

/* Sørg for at rækken kan være anchor for absolute på mobil */
.lh-single-creator-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop: keep it inline (ved siden af creator pill) */
@media (min-width: 769px){
  .lh-fav-btn.lh-fav-btn--inline{
    position: static !important;
    margin-left: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
  }
}

/* Mobile: flyt hjertet op i højre hjørne (LoopHive DNA pill) */
@media (max-width: 768px){
  .lh-fav-btn.lh-fav-btn--inline{
    position: absolute !important;
    top: -150px !important;     /* justér: -52px / -60px / -70px */
    right: -145px !important;
    z-index: 5;

    width: 46px !important;
    height: 46px !important;
    border-radius: 999px;

    background: rgba(22, 24, 37, 0.55);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    box-shadow: 0 0 35px rgba(125, 84, 255, 0.18);

    display: grid;
    place-items: center;
  }

  .lh-fav-btn.lh-fav-btn--inline .lh-fav-heart{
    font-size: 18px;
    line-height: 1;
  }
}
@media (max-width: 768px){
  .lh-fav-btn.lh-fav-btn--inline{
    top: -64px;
    right: -18px;
    z-index: 9999;   /* 👈 tvinger den ovenpå ALT */
  }
}
.lh-single-hero {
  position: relative;
}
/* sørg for hero er en reference */
.lh-single-hero { position: relative; }

/* giv selve hero-kortet et lavere z-index */
.lh-single-hero-card,
.lh-single-card,
.lh-single-inner {
  position: relative;
  z-index: 1;
}

/* tving fav-knappen helt øverst i hero’en */
.lh-fav-btn.lh-fav-btn--inline{
  position: absolute;
  z-index: 9999;
}

.lh-single-hero,
.lh-single-hero * {
  /* IKKE globalt, men tjek den wrapper der klipper */
}

.lh-single-hero-card,
.lh-single-card {
  overflow: visible !important;
}
/* =========================
   Single loop — Favorite button positioning
   ========================= */

/* 1) Skab en “anchor” for absolute positioning */
.lh-single-hero{
  position: relative;
  overflow: visible !important;
}

/* Hvis du har en hero card wrapper et andet sted, så sørg også for overflow visible */
.lh-single-hero-card,
.lh-single-loop,
.lh-single-creator,
.lh-single-creator-row{
  overflow: visible !important;
}

/* 2) Default (desktop): behold den inline ved siden af creator pill */
.lh-single-creator-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

.lh-fav-btn.lh-fav-btn--inline{
  position: relative;  /* inline default */
  z-index: 5;
}

/* 3) Mobil: flyt knappen op i højre hjørne og læg den OVER alt */
@media (max-width: 768px){
  .lh-fav-btn.lh-fav-btn--inline{
    position: absolute !important;
    top: 22px;          /* justér */
    right: -18px;       /* NEGATIV => “halvt ude / halvt inde” */
    z-index: 9999 !important;

    /* så den klikker rent */
    pointer-events: auto;
  }
}

/* 4) Hvis der findes overlay/pseudo-lag i hero, så tving dem bagved */
.lh-single-hero::before,
.lh-single-hero::after{
  z-index: 0 !important;
}

.lh-single-title,
.lh-single-meta,
.lh-single-creator{
  position: relative;
  z-index: 2;
}
/* ========== SINGLE HERO ROW: Desktop order ========== */

/* Sørg for at rækken er flex på web */
.lh-single-creator-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Desktop: Like (fav) skal stå FØR creator pill */
@media (min-width: 769px){
  .lh-single-creator-row .lh-fav-btn.lh-fav-btn--inline{
    position: relative !important;
    inset: auto !important;   /* nulstil top/right osv */
    order: 0;                 /* først */
    margin-right: 12px;       /* spacing */
    z-index: 5;
  }

  .lh-single-creator-row .lh-creator-pill{
    order: 1;                 /* efter like */
  }
}

/* Mobil: behold den i hjørnet */
@media (max-width: 768px){
  .lh-single-creator-row .lh-fav-btn.lh-fav-btn--inline{
    position: absolute !important;
    top: 22px;
    right: -18px;
    z-index: 9999 !important;
  }
}
/* --- SINGLE: creator pill styling (aflang, clean) --- */
.lh-creator-pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(22, 24, 37, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 35px rgba(125, 84, 255, 0.14);
}

.lh-creator-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lh-creator-text{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
  min-width:0;
}

.lh-creator-label{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .7;
}

.lh-creator-name{
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px; /* justér hvis du vil */
}

/* Hero skaber et anker for absolute elements */
.lh-single-hero{
  position: relative;
}


/* Hvis hero har ::before/::after overlay, så sørg for det ligger under UI */
.lh-single-hero::before,
.lh-single-hero::after{
  z-index: 0 !important;
}

.lh-single-hero > *{
  position: relative;
  z-index: 2;
}
/* 1) Sørg for at rækken ligger i højre side og alt flugter */
.lh-single-creator{
  display: flex;
  justify-content: flex-end;
}

.lh-single-creator-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;              /* afstand mellem hjerte og pill */
  width: auto;
}

/* 2) Tving rækkefølge: hjerte til venstre, pill til højre */
.lh-fav-btn--inline{ order: 1; }
.lh-creator-pill{ order: 2; }

/* 3) Fjern evt. “mystisk” margin som skubber hjertet væk */
.lh-fav-btn--inline{
  margin: 0 !important;
}

/* Hvis du tidligere har sat space-between et sted, så neutralisér */
.lh-single-creator-row{
  justify-content: flex-end !important;
}
.lh-fav-btn--inline,
.lh-creator-pill{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Single hero skal være reference for absolute positioning */
.lh-single-hero{
  position: relative;
}

/* Desktop: placer creator + like i top højre */
@media (min-width: 900px){
  .lh-single-creator{
    position: absolute;
    top: 28px;
    right: 28px;
    margin: 0 !important;
    width: auto !important;
    display: flex;
    justify-content: flex-end;
    z-index: 30;
  }

  .lh-single-creator-row{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
}

/* Mobile: behold normal flow (så det ikke ødelægger mobil-layout) */
@media (max-width: 899px){
  .lh-single-creator{
    position: static;
  }
}
/* HERO container skal være reference */
.lh-single-hero {
  position: relative;
}

/* Rækken med creator + fav placeres absolut */
.lh-single-creator {
  position: absolute;
  top: 32px;        /* justér hvis du vil højere/lavere */
  right: 32px;      /* afstand fra højre kant */
  z-index: 10;
}

/* Sørg for at række stadig er pæn */
.lh-single-creator-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* ===== Single loop HERO layout fix (no overlap) ===== */
body.single-loop .lh-single-hero {
  display: grid !important;
  grid-template-columns: 1fr auto !important;   /* venstre content, højre actions */
  grid-template-rows: auto auto auto !important;
  column-gap: 18px !important;
  align-items: start !important;
}

/* Title + meta venstre */
body.single-loop .lh-single-hero .lh-single-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.single-loop .lh-single-hero .lh-single-meta {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

/* Creator + heart højre (øverst), låst til højre side */
body.single-loop .lh-single-hero .lh-single-creator {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
}

/* Sørg for row inde i creator holder sig pæn */
body.single-loop .lh-single-hero .lh-single-creator-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Player skal under – og have fuld bredde */
body.single-loop .lh-single-hero .lh-audio-player,
body.single-loop .lh-single-hero .lh-single-player,
body.single-loop .lh-single-hero .lh-single-audio {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}
@media (max-width: 768px) {
  body.single-loop .lh-single-hero {
    grid-template-columns: 1fr !important;
  }

  body.single-loop .lh-single-hero .lh-single-creator {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin-top: 12px !important;
  }

  body.single-loop .lh-single-hero .lh-audio-player,
  body.single-loop .lh-single-hero .lh-single-player,
  body.single-loop .lh-single-hero .lh-single-audio {
    grid-row: 4 !important;
  }
}
/* ===== Player width: ~1/3 (responsive) ===== */
body.single-loop .lh-single-hero .lh-audio-player,
body.single-loop .lh-single-hero .lh-single-player,
body.single-loop .lh-single-hero .lh-single-audio{
  width: clamp(280px, 33vw, 460px) !important;  /* tweak max hvis du vil */
  flex: 0 0 auto !important;
}
/* ===== Creator row: pixel-perfect alignment ===== */
body.single-loop .lh-single-creator{
  margin-top: 0 !important;
}

body.single-loop .lh-single-creator-row{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  white-space:nowrap !important;
}

/* Giv creator pill og heart samme "baseline height" */
body.single-loop .lh-creator-pill{
  height: 52px !important;          /* match heart */
  display:inline-flex !important;
  align-items:center !important;
}

body.single-loop .lh-fav-btn--inline{
  height: 52px !important;          /* match pill */
  width: 52px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin: 0 !important;
}
/* ===== Force order: creator pill then heart (or swap if you want) ===== */
body.single-loop .lh-creator-pill{ order: 1 !important; }
body.single-loop .lh-fav-btn--inline{ order: 2 !important; }
/* ===== Safety reset (prevents weird floating) ===== */
body.single-loop .lh-single-creator,
body.single-loop .lh-single-creator-row,
body.single-loop .lh-fav-btn--inline{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/* Mobile safety reset */
@media (max-width: 899px){
  body.single-loop .lh-fav-btn--inline{
    position: static !important;
    transform: none !important;
    left:auto !important; right: 50px !important; top:auto !important; bottom:auto !important;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

html, body {
  font-family: 'Montserrat', system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.lh-audio-play { pointer-events: auto; }
.lh-audio-play * { pointer-events: none; } /* ikoner kan ikke “stjæle” klikket */

/* === Landing page (page-id-7) play button: force visible icon === */

.page-id-7 .lh-audio-player{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.page-id-7 .lh-audio-track,
.page-id-7 .lh-audio-progress,
.page-id-7 .lh-audio-time{
  display:none !important;
}

/* Button */
.page-id-7 .lh-audio-play{
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: radial-gradient(circle at top left, #9b6bff, #5b2eff);
  box-shadow:
    0 0 0 6px rgba(155,107,255,0.08),
    0 0 30px rgba(155,107,255,0.45);

  display:flex;
  align-items:center;
  justify-content:center;

  overflow: visible;
}

/* Hide any internal icon spans so they can't mess with it */
.page-id-7 .lh-audio-play .lh-icon{
  display:none !important;
}

/* FORCE play triangle */
.page-id-7 .lh-audio-play::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-42%, -50%); /* lidt mod højre (like real play icon) */

  width: 0;
  height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;

  z-index: 2;
  pointer-events: none;
}

.page-id-7 .lh-audio-play::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 2px solid rgba(155,107,255,0.35);
  filter: blur(0.2px);
  pointer-events:none;
}
/* =========================
   Landing page (page-id-7) — simple visible play button
   ========================= */
body.page-id-7 .lh-audio-player {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Fjern kassen/progress/timestamp på landing */
body.page-id-7 .lh-audio-track,
body.page-id-7 .lh-audio-time {
  display: none !important;
}

/* Selve knappen */
body.page-id-7 .lh-audio-play {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(170,120,255,.95), rgba(110,70,255,.55));
  box-shadow: 0 10px 30px rgba(120,80,255,.25), 0 0 25px rgba(120,80,255,.25);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  z-index: 5;
}

/* Den “tom” span må gerne være der – men vi tegner ikonet via pseudo-element */
body.page-id-7 .lh-audio-play > span {
  display: none !important;
}

/* Play trekant */
body.page-id-7 .lh-audio-play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid rgba(255,255,255,.92);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: translateX(2px);
}

/* Pause state hvis din JS sætter .is-playing på wrapperen */
body.page-id-7 .lh-audio-player.is-playing .lh-audio-play::before {
  width: 18px;
  height: 22px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0 40%, transparent 40% 60%, rgba(255,255,255,.92) 60% 100%);
  transform: none;
  border-radius: 2px;
}

/* Skjul selve <audio> visuelt */
body.page-id-7 .lh-audio-player audio {
  display: none !important;
}

.lh-download-btn.is-disabled{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}

/* Modal: hidden by default */
.lh-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

/* Visible when opened */
.lh-modal.is-open {
  display: block;
}

.lh-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.lh-modal__card {
  position: relative;
  max-width: 520px;
  margin: 10vh auto 0;
}

/* ---------- LoopHive Modal (Glass DNA) ---------- */

.lh-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.lh-modal.is-open{ display:block; }

.lh-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(5, 6, 18, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lh-modal__card{
  position:relative;
  max-width: 720px;
  margin: 14vh auto 0;
  padding: 28px 30px;

  border-radius: 22px;

  /* Glass */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.05)
  );
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);

  color: rgba(255,255,255,.92);
}

.lh-modal__card h3{
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: -0.02em;
  display:flex;
  align-items:center;
  gap: 12px;
  color: #ffffff;
}

.lh-modal__card p{
  margin: 0 0 22px;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
  max-width: 60ch;
}

/* Fake lock icon (no emoji) */
.lh-modal__title-lock{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  position: relative;

  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.lh-modal__title-lock:before{
  content:"";
  position:absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.82);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  opacity: .95;
}

.lh-modal__title-lock:after{
  content:"";
  position:absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 14px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255,255,255,.82);
  opacity: .92;
}

/* Buttons layout */
.lh-modal__actions{
  display:flex;
  gap: 14px;
  align-items:center;
}

.lh-modal__actions .lh-btn{
  border-radius: 999px;
  padding: 12px 18px;
}

/* If you have these variants already, keep them.
   Otherwise these ensure DNA-consistency: */
.lh-btn--ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.lh-btn--primary{
  background: linear-gradient(90deg, rgba(132,90,255,1), rgba(175,110,255,1));
  border: 1px solid rgba(255,255,255,.12);
  color: #0a0717;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 720px){
  .lh-modal__card{
    margin: 12vh 16px 0;
    padding: 22px 20px;
  }
  .lh-modal__card h3{ font-size: 26px; }
  .lh-modal__card p{ font-size: 16px; }
}
/* Glass textarea — About this loop (Upload + Edit) */
.lh-field textarea[name="lh_description"],
textarea[name="lh_description"]{
  width: 100%;
  min-height: 140px;
  resize: vertical;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.92) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 16px !important;
  padding: 14px 16px !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
  outline: none !important;
}

.lh-field textarea[name="lh_description"]::placeholder,
textarea[name="lh_description"]::placeholder{
  color: rgba(255,255,255,0.45) !important;
}

.lh-field textarea[name="lh_description"]:focus,
textarea[name="lh_description"]:focus{
  border-color: rgba(140,110,255,0.55) !important;
  box-shadow: 0 0 0 4px rgba(140,110,255,0.18), 0 14px 40px rgba(0,0,0,0.35) !important;
}

.lh-upload-fields {
  gap: 14px !important; /* i stedet for fx 24px */
}

.lh-field {
  margin-bottom: 0 !important;
}

/* Match textarea with LoopHive input style (upload + edit) */
.lh-field textarea {
  background: rgba(255, 255, 255, 0.03);   /* samme vibe som inputs */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  color: #e9e9f4;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  box-shadow: none; /* fjerner den ekstra "white card" følelse */
}

/* Placeholder farve matcher resten */
.lh-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Focus state matcher inputs */
.lh-field textarea:focus {
  outline: none;
  border-color: rgba(140, 110, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

/* Fjern evt ekstra glow/shadow hvis browser tilføjer det */
.lh-field textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* LoopHive – About this loop (Upload + Edit) */
.lh-field textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* Placeholder styling */
.lh-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Focus state */
.lh-field textarea:focus {
  outline: none;
  border-color: rgba(140, 90, 255, 0.35);
}

.lh-upload-card.is-collapsed .lh-acc-body { display: none; }
.lh-upload-card .lh-acc-body { display: block; }

/* === LoopHive: unify subtle field tint (inputs + textarea + select) === */

:root{
  --lh-field-bg: rgba(255,255,255,0.028);
  --lh-field-bd: rgba(255,255,255,0.085);
  --lh-field-in: rgba(0,0,0,0.35);          /* inner depth */
  --lh-field-hi: rgba(255,255,255,0.04);   /* subtle top highlight */
}

.lh-field input,
.lh-field textarea,
.lh-field select{
  background: var(--lh-field-bg) !important;
  border: 1px solid var(--lh-field-bd) !important;

  /* Ensures SAME “glass” depth across all field types */
  box-shadow:
    inset 0 1px 0 var(--lh-field-hi),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 -12px 24px var(--lh-field-in);

  color: rgba(255,255,255,0.92);
}

/* textarea often looks different because of default resize / line-height */
.lh-field textarea{
  line-height: 1.35;
  resize: vertical;
}

/* iOS/Chrome autofill can tint fields differently */
.lh-field input:-webkit-autofill,
.lh-field textarea:-webkit-autofill,
.lh-field select:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  transition: background-color 9999s ease-out 0s;
  box-shadow:
    0 0 0 1000px rgba(10,12,18,0.85) inset,
    inset 0 1px 0 var(--lh-field-hi) !important;
}
/* FORCE match on Upload + Edit (higher specificity) */
.page-template-page-creator-portal .lh-field textarea,
.page-template-page-creator-portal .lh-field input,
.page-template-page-creator-portal .lh-field select,
.page-template-page-edit-loop .lh-field textarea,
.page-template-page-edit-loop .lh-field input,
.page-template-page-edit-loop .lh-field select{
  background: rgba(255,255,255,0.028) !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    inset 0 -12px 24px rgba(0,0,0,0.35) !important;
}
.lh-loop-description{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  position:relative !important;
  z-index:50 !important;
  margin-top:24px !important;
}

/* Single loop – About this loop */
.lh-loop-description {
  margin-top: 48px;
}

.lh-loop-description__body {
  max-width: 760px;
  line-height: 1.65;
  font-size: 16px;
  opacity: 0.92;
}

.lh-loop-description__body p {
  margin: 0 0 14px;
}

/* About this loop – final polish */
.lh-loop-description {
  margin-top: 56px;
}

.lh-loop-description__body {
  max-width: 720px;
  line-height: 1.7;
  font-size: 16px;
  color: rgba(255,255,255,0.9);
}

.lh-loop-description__body p {
  margin: 0 0 16px;
}

/* Pro CTA baseline should already exist; this only fixes Owned state */
.lh-license-cta.lh-cta-pro.is-owned{
  pointer-events: none;
  cursor: default;
  opacity: 1;

  /* Match Pro button vibe (brown) */
  background: rgba(120, 78, 56, 0.22);
  border: 1px solid rgba(205, 150, 115, 0.25);
  color: rgba(255, 225, 205, 0.90);

  /* Same geometry as your CTA */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Optional: make it feel "confirmed" */
.lh-license-cta.lh-cta-pro.is-owned::after{
  content: "";
}
/* Unified pill CTA across all license cards */
.lh-license-cta,
.lh-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 52px;               /* FAST højde */
  border-radius: 999px;       /* Perfect pill */
  padding: 0 28px;            /* Ens horisontal luft */

  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;

  text-align: center;
  white-space: nowrap;
}

/* Owned state skal ligne de andre – bare farveændring */
.lh-license-cta.is-owned {
  background: rgba(20, 60, 50, 0.8); /* eller din grønne */
  color: #b6f7d8;
}

/* Disabled free */
.lh-download-btn.is-disabled {
  height: 52px;
  border-radius: 999px;
}

.lh-license-cta,
.lh-download-btn {
  transition: all 0.2s ease;
}

.lh-license-cta:hover,
.lh-download-btn:hover {
  transform: translateY(-1px);
}

.lh-license-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .2px;
}

/* Owned */
.lh-cta-pro.is-owned {
  background: linear-gradient(135deg, rgba(70,255,170,.12), rgba(70,255,170,.05));
  color: #7fffd4;
  border: 1px solid rgba(70,255,170,.25);
}

/* Sold */
.lh-cta-pro.is-sold {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.08);
}
.lh-btn-owned {
  background: rgba(60, 200, 140, 0.12);
  border: 1px solid rgba(60, 200, 140, 0.35);
  color: #7ef0b5;
  cursor: default;
}

.lh-btn-sold {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
  cursor: not-allowed;
}
.lh-btn-locked {
  background: rgba(255,255,255,0.03);
  border: 0.5px dashed rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
}
.lh-loop-actions .lh-btn,
.lh-loop-actions a,
.lh-loop-actions button {
  min-height: 44px;
  line-height: 1;
}

/* FEATURED LOOP */
.lh-loop-card.is-featured {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(157,123,255,0.15),
    0 0 40px rgba(157,123,255,0.08);
}

.lh-loop-card.is-featured::before {
  content: "FEATURED";
  position: absolute;
  top: 14px;
  left: 14px;

  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 999px;

  color: #e9e2ff;
  background: linear-gradient(135deg, rgba(157,123,255,0.25), rgba(123,92,255,0.25));
  border: 1px solid rgba(157,123,255,0.35);
  backdrop-filter: blur(8px);

  box-shadow: 0 6px 20px rgba(123,92,255,0.25);
}
/* Featured (Admin choice) */
.lh-loop-card.is-featured{
  border: 1px solid rgba(180, 140, 255, .28);
  box-shadow: 0 0 0 1px rgba(180, 140, 255, .08), 0 18px 60px rgba(120, 80, 255, .14);
  position: relative;
}

.lh-loop-card.is-featured::before{
  content: "FEATURED";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18, 20, 32, .55);
  backdrop-filter: blur(14px);
}
/* Pill size lock for all primary actions in cards */
.lh-loop-actions .lh-btn,
.lh-license-card .lh-license-cta,
.lh-license-card .lh-download-btn,
.lh-license-card .lh-btn-owned,
.lh-license-card .lh-btn-sold{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

/* Owned / Sold visuals */
.lh-btn-owned{
  border: 1px solid rgba(120, 255, 200, .25);
  background: rgba(20, 40, 32, .45);
  backdrop-filter: blur(14px);
}

.lh-btn-sold{
  border: 1px solid rgba(255, 200, 120, .22);
  background: rgba(40, 32, 18, .45);
  backdrop-filter: blur(14px);
}
/* Browse loops — actions wrapper */
.lh-loop-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;          /* vigtig */
  align-items:center;
}

/* Alle actions-pills samme “height” og må gerne krympe */
.lh-loop-actions .lh-btn,
.lh-loop-actions a.lh-btn,
.lh-loop-actions button.lh-btn,
.lh-loop-actions .lh-license-cta{
  height:52px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-width:0;             /* vigtig (ellers kan den skubbe ud) */
  flex:1 1 160px;          /* giver pladsdeling + wrap */
  box-sizing:border-box;
}

/* Mobil: gør dem 100% så de aldrig kan stikke ud */
@media (max-width: 520px){
  .lh-loop-actions .lh-btn,
  .lh-loop-actions a.lh-btn,
  .lh-loop-actions button.lh-btn,
  .lh-loop-actions .lh-license-cta{
    flex:1 1 100%;
    width:100%;
  }
}
/* Dæmp alle action buttons (browse + single) */
.lh-btn,
.lh-license-cta {
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Endnu mere subtil for ghost / secondary knapper */
.lh-btn-ghost,
.lh-btn-ghost-sm {
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Locked / License required skal føles disabled – ikke shiny */
.lh-btn-locked {
  box-shadow: none !important;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.12);
}
/* Audio player border → mere neutral glass outline */
.lh-audio-player {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 20px rgba(0,0,0,0.35);
}

/* Hvis selve play-cirklen også har blå ring */
.lh-audio-play {
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.06),
    0 6px 18px rgba(0,0,0,0.4) !important;
}

/* Fjern evt blå focus-outline */
.lh-audio-player:focus,
.lh-audio-player:focus-visible {
  outline: none !important;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 20px rgba(0,0,0,0.35) !important;
}
/* ===== FORCE: dræb blå border på hele audio komponenten ===== */
.lh-audio-player,
.lh-audio-player * ,
.lh-audio-player::before,
.lh-audio-player::after {
  outline: none !important;
}

/* typiske steder hvor border/outline lever */
.lh-audio-player,
.lh-audio-track,
.lh-audio-track *,
.lh-audio-wave,
.lh-audio-progress,
.lh-audio-progress-fill {
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* giv selve wrapperen en neutral glass kant */
.lh-audio-player {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 10px 28px rgba(0,0,0,0.45) !important;
}
/* Fokus/klik states kan give blå ring */
.lh-audio-player:focus,
.lh-audio-player:focus-visible,
.lh-audio-play:focus,
.lh-audio-play:focus-visible,
.lh-loop-card:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
.lh-audio-player {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
.lh-audio-player {
  border: 1px solid rgba(255, 255, 255, 0.035) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}
/* ================================
   LoopHive — Featured Badge
================================ */
.lh-loop-card {
  position: relative; /* required for badge positioning */
}

.lh-featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.92);
  background: rgba(125, 84, 255, 0.16);
  border: 1px solid rgba(125, 84, 255, 0.26);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  backdrop-filter: blur(10px);
}

/* small star-dot icon */
.lh-featured-badge::before {
  content: "★";
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
  transform: translateY(-1px);
}
/* =========================================================
   Featured pill — match landing page style
   Usage: <div class="lh-featured-pill">FEATURED</div>
========================================================= */

.lh-loop-card {
  position: relative; /* anchor pill */
}

.lh-featured-pill {
  position: absolute;

  top: -14px;    /* ← flytter den halvt udenfor kortet */
  right: 20px;    /* ← flugter stadig med tekst */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 14px;

  border-radius: 999px;

  font-weight: 700;
  letter-spacing: .16em;
  font-size: 11px;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(141, 96, 255, .95), rgba(88, 64, 255, .85));

  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(125, 84, 255, .14);

  z-index: 10;
  pointer-events: none;
}

/* Mobile tweak */
@media (max-width: 520px){
  .lh-featured-pill{
    top: 14px;
    right: 14px;
    height: 34px;
    padding: 0 14px;
    font-size: 11px;
  }
}
.lh-fav-btn {
  opacity: 0.4;
  transform: scale(0.95);
}

.lh-loop-card:hover .lh-fav-btn {
  opacity: 1;
  transform: scale(1);
}

.lh-featured-pill {
  position: absolute;
  top: -14px;
  right: 20px;

  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;

  border-radius: 999px;

  background: linear-gradient(135deg, #7b5cff, #9a6bff);
  color: white;

  box-shadow: 0 8px 24px rgba(123,92,255,0.25);
}
.lh-fav-btn {
  top: 18px !important;       /* i stedet for helt oppe ved badge */
  right: 16px;

  width: 32px;
  height: 32px;

  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
}
/* =========================
   Browse loop card: layout
   ========================= */

/* Sørg for at card-body er position context */
.lh-loop-card,
.lh-loop-card-body {
  position: relative;
}

/* ---------- FAV (flyt til venstre, før titel visuelt) ---------- */
.lh-loop-card-body .lh-fav-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  right: auto;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);

  z-index: 5;
}

/* Giv titel plads så den ikke kolliderer med knappen */
.lh-loop-card-body .lh-loop-title {
  padding-left: 54px; /* plads til fav knap */
}

/* ---------- FEATURED pill (mindre + strammere) ---------- */
.lh-featured-badge {
  position: absolute;
  top: -12px;
  right: 18px;

  padding: 6px 12px;        /* mindre */
  font-size: 11px;          /* mindre tekst */
  line-height: 1;
  letter-spacing: 0.16em;   /* "premium" spacing */
  font-weight: 700;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(123,92,255,0.95), rgba(154,107,255,0.95));
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);

  box-shadow: 0 10px 26px rgba(123,92,255,0.22);
  z-index: 6;
}

/* (Valgfrit) gør pill en anelse mere "compact" på mobil */
@media (max-width: 520px) {
  .lh-featured-badge {
    top: -11px;
    right: 14px;
    padding: 5px 10px;
    font-size: 10.5px;
  }

  .lh-loop-card-body .lh-fav-btn {
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
  }

  .lh-loop-card-body .lh-loop-title {
    padding-left: 50px;
  }
}
/* =========================
   Browse card: Title row + Fav inline
   ========================= */

.lh-loop-title-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Titlen må gerne tage pladsen */
.lh-loop-title-row .lh-loop-title{
  flex:1;
  margin:0;
}

/* Fav inline (ikke overlay) */
.lh-loop-title-row .lh-fav-btn,
.lh-fav-btn--inline{
  transform: none !important;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* Hvis dit tema har en hover-regel der skjuler fav: slå den ihjel */
.lh-loop-card:hover .lh-fav-btn{
  opacity: 1 !important;
}

/* Lidt mere “premium” hover */
.lh-fav-btn--inline:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.lh-loop-title-row{
  flex-direction: row-reverse;
  justify-content: flex-end;
}
/* Title row spacing */
.lh-loop-title-row {
  gap: 6px; /* prøv 4–8px */
  align-items: center;
}

/* Hvis der stadig er luft pga margin på h3 */
.lh-loop-title {
  margin: 0;
}

/* Hvis fav-knappen selv har margin */
.lh-fav-btn {
  margin: 0;
}
.lh-loop-title-row {
  gap: 2px;
}
/* Flyt titel tættere på fav-knappen */
.lh-loop-title {
  margin-top: -6px !important;
}
/* Fjern luft under hjertet */
.lh-fav-btn {
  margin-bottom: 0 !important;
}

/* Træk titlen lidt op */
.lh-loop-title {
  margin-top: 4px !important;
}
.lh-loop-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px; /* kontroller afstand til meta-linjen */
}

/* Titel skal ikke skubbe noget */
.lh-loop-title {
  margin: 0 !important;
  line-height: 1.2;
}

/* Favorit-knap mindre og mere subtil */
.lh-fav-btn--inline {
  position: static !important; /* fjerner hover-position-hacks */
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

/* Selve hjertet */
.lh-fav-btn--inline .lh-fav-heart {
  font-size: 16px;
  opacity: 0.85;
}
/* Title row: hold tingene tight */
.lh-loop-title-row{
  display:flex;
  align-items:center;
  justify-content:flex-start !important; /* ikke space-between */
  gap:10px;
}

/* H3 må IKKE strække sig */
h3.lh-loop-title{
  margin:0 !important;
  padding:0 !important;
  text-indent:0 !important;

  flex:0 1 auto !important;   /* vigtig: ingen flex-grow */
  width:auto !important;       /* vigtig: ingen 100% width */
  max-width:100%;
  display:inline-block !important; /* shrink-to-fit */
}

/* Hvis et theme har smidt pseudo-element spacing */
h3.lh-loop-title::before,
h3.lh-loop-title::after{
  content:none !important;
}
/* Tving title-row til venstre */
.lh-loop-title-row{
  justify-content:flex-start !important;
  text-align:left !important;
  width:100%;
  margin-left:-4px !important; /* prøv -2 til -8px */

}

/* Sørg for at selve card-body ikke centrerer børn */
.lh-loop-card-body{
  text-align:left !important;
}

/* === FORCE: Title + Fav row skal være LEFT aligned (i flow) === */
.lh-loop-card .lh-loop-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  width:100% !important;
  text-align:left !important;
}

/* dræb alt “usynligt” spacing på h3 */
.lh-loop-card h3.lh-loop-title,
.lh-loop-card .lh-loop-title{
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

/* sørg for fav er en normal flex-item (ikke absolute) */
.lh-loop-card .lh-fav-btn--inline,
.lh-loop-card .lh-fav-btn{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
}

/* hvis card-body tidligere centrerede alt */
.lh-loop-card .lh-loop-card-body{
  text-align:left !important;
}

/* --- LoopHive: dropdown usability fix --- */
.lh-menu-account,
.lh-menu-creator {
  position: relative;
}

/* Ensure submenu can be clicked (and on top) */
.lh-menu-account > .lh-submenu,
.lh-menu-creator > .lh-submenu,
.lh-menu-account > .sub-menu,
.lh-menu-creator > .sub-menu {
  z-index: 999999;
}

/* Default hidden (if your CSS already hides it, this won't hurt) */
.lh-menu-account > .lh-submenu,
.lh-menu-creator > .lh-submenu,
.lh-menu-account > .sub-menu,
.lh-menu-creator > .sub-menu {
  display: none;
}

/* Open states: JS toggles .is-open */
.lh-menu-account.is-open > .lh-submenu,
.lh-menu-creator.is-open > .lh-submenu,
.lh-menu-account.is-open > .sub-menu,
.lh-menu-creator.is-open > .sub-menu {
  display: block;
}

/* Keyboard support: tab into menu should keep it open */
.lh-menu-account:focus-within > .lh-submenu,
.lh-menu-creator:focus-within > .lh-submenu,
.lh-menu-account:focus-within > .sub-menu,
.lh-menu-creator:focus-within > .sub-menu {
  display: block;
}

/* --- FORCE background on the actual page wrappers (Astra) --- */
html, body.page-id-747{
  background: #08090d !important;
}

/* Astra wrappers – make them transparent so body/html shows */
body.page-id-747 #page,
body.page-id-747 .site,
body.page-id-747 .site-content,
body.page-id-747 .ast-container,
body.page-id-747 .ast-container-fluid,
body.page-id-747 .ast-page-builder-template{
  background: transparent !important;
}

/* The actual gold wash overlay */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1400px 700px at 50% -10%, rgba(212,175,55,0.09), transparent 60%),
    radial-gradient(1000px 500px at 80% 110%, rgba(212,175,55,0.06), transparent 65%),
    radial-gradient(900px 420px at 15% 35%, rgba(212,175,55,0.04), transparent 65%);
}

/* Make sure your main content is above the overlay */
body.page-id-747 #page{
  position: relative;
  z-index: 1;
}

/* =========================================================
   LoopHive – Checkout success card polish
   Page: 747
   Wrapper: .lh-checkout-card.lh-checkout-success
========================================================= */

body.page-id-747 .lh-checkout-card.lh-checkout-success{
  position: relative;
  background:
    linear-gradient(
      135deg,
      rgba(210,170,90,.10),
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,.55)
    );
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}


/* gold edge glow – ikke boble, mere kant */
body.page-id-747 .lh-checkout-card.lh-checkout-success::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  background:
    linear-gradient(
      140deg,
      rgba(215,180,100,.35),
      rgba(215,180,100,0) 40%,
      rgba(215,180,100,.10) 70%,
      rgba(215,180,100,0)
    );

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  padding:1px;
  opacity:.55;
}


/* =========================================================
   Check icon – matcher card baggrund
========================================================= */

body.page-id-747 .lh-checkout-icon{
  background:
    linear-gradient(
      135deg,
      rgba(210,170,90,.22),
      rgba(85,110,255,.18)
    );
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 12px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* =========================================================
   Title + sub – lidt mere punch
========================================================= */

body.page-id-747 .lh-checkout-title{
  color: #fff;
  text-shadow: 0 6px 24px rgba(0,0,0,.6);
}

body.page-id-747 .lh-checkout-sub{
  color: rgba(255,255,255,.75);
}


/* =========================================================
   Actions (knapper) – mindre boble
========================================================= */

body.page-id-747 .lh-checkout-actions a,
body.page-id-747 .lh-checkout-actions button{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45);
}


/* =========================================================
   Divider
========================================================= */

body.page-id-747 .lh-checkout-divider{
  border:0;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215,180,100,.35),
      rgba(255,255,255,.10),
      transparent
    );
}


/* =========================================================
   WHAT HAPPENS NEXT – fladere, mere panel
========================================================= */

body.page-id-747 .lh-checkout-steps{
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* teksten i steps */
body.page-id-747 .lh-checkout-steps li{
  color: rgba(255,255,255,.78);
}


/* =========================================================
   Session box – mere "system field", mindre bubble
========================================================= */

body.page-id-747 .lh-checkout-meta{
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;

  box-shadow:
    0 16px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* session text */
body.page-id-747 .lh-checkout-meta code,
body.page-id-747 .lh-checkout-meta{
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

/* =========================================================
   LoopHive — LH Static Pages (page-lh-static.php only)
   Scope: body.page-template-page-lh-static
   ========================================================= */

body.page-template-page-lh-static .lh-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  box-sizing: border-box;
}

/* Luft under header (Astra) */
body.page-template-page-lh-static .lh-page > .lh-hero-card{
  margin-top: 28px;
}

/* ======================
   HERO CARD
   ====================== */
body.page-template-page-lh-static .lh-hero-card{
  border-radius: 22px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,16,24,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.page-template-page-lh-static .lh-hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(124, 90, 255, .18);
  color: rgba(255,255,255,.90);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

body.page-template-page-lh-static .lh-page-title{
  margin: 14px 0 6px;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.95);
}

body.page-template-page-lh-static .lh-page-sub{
  margin: 0;
  max-width: 68ch;
  color: rgba(255,255,255,.65);
  font-size: 15px;
  line-height: 1.55;
}

body.page-template-page-lh-static .lh-hero-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-template-page-lh-static .lh-meta{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* ======================
   BUTTONS
   ====================== */
body.page-template-page-lh-static .lh-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.04);
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  text-decoration: none;
}

body.page-template-page-lh-static .lh-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  text-decoration: none;
}

body.page-template-page-lh-static .lh-btn.primary{
  background: rgba(124, 90, 255, .22);
  border-color: rgba(124, 90, 255, .35);
}

body.page-template-page-lh-static .lh-btn.primary:hover{
  background: rgba(124, 90, 255, .28);
}

/* ======================
   CONTENT LAYOUT + CARD
   ====================== */
body.page-template-page-lh-static .lh-page .lh-page-content{
  width: 100%;
  margin-top: 26px;
  display: grid;
  gap: 18px;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

body.page-template-page-lh-static .lh-page .lh-section-card{
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}

/* Typography inside content */
body.page-template-page-lh-static .lh-section-card h2{
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
  color: rgba(255,255,255,.92);
}

body.page-template-page-lh-static .lh-section-card h3{
  font-size: 16px;
  line-height: 1.35;
  margin: 16px 0 8px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

body.page-template-page-lh-static .lh-section-card p,
body.page-template-page-lh-static .lh-section-card li{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
}

body.page-template-page-lh-static .lh-section-card ul,
body.page-template-page-lh-static .lh-section-card ol{
  margin: 10px 0 14px 20px;
}

body.page-template-page-lh-static .lh-section-card li{
  margin: 6px 0;
}

body.page-template-page-lh-static .lh-section-card hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}

/* Links + mailto should be white */
body.page-template-page-lh-static .lh-section-card a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.page-template-page-lh-static .lh-section-card a[href^="mailto:"]{
  color: rgba(255,255,255,.92);
}

/* Optional callout */
body.page-template-page-lh-static .lh-callout{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(124, 90, 255, .12);
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.55;
}
body.page-template-page-lh-static .lh-callout strong{ color: rgba(255,255,255,.92); }

/* Gutenberg cleanup */
body.page-template-page-lh-static .lh-page .wp-block-heading{ margin-top: 0; }
body.page-template-page-lh-static .lh-page .wp-block-separator{ border-color: rgba(255,255,255,.10); }

/* Mobile */
@media (max-width: 640px){
  body.page-template-page-lh-static .lh-page{
    padding: 18px 16px 64px;
  }
  body.page-template-page-lh-static .lh-hero-card,
  body.page-template-page-lh-static .lh-section-card{
    padding: 18px 16px;
  }
}

/* ======================
   Upload Guide (page-id-772) calmer typography
   ====================== */
body.page-id-772.page-template-page-lh-static .lh-section-card h2{ font-size: 18px; }
body.page-id-772.page-template-page-lh-static .lh-section-card h3{ font-size: 15px; }
body.page-id-772.page-template-page-lh-static .lh-section-card p,
body.page-id-772.page-template-page-lh-static .lh-section-card li{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
}
body.page-id-772.page-template-page-lh-static .lh-section-card strong{
  color: rgba(255,255,255,.86);
}

/* Card container */
.lh-loop-card {
  position: relative;
  overflow: visible; /* vigtigt: klip ikke UI */
}

/* Hvis du vil beholde blur/overlay-looket, så gør det her i stedet */
.lh-loop-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px; /* match dit kort */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events:none;
  z-index:0;
}

/* Alt indhold skal ligge over overlay */
.lh-loop-card > *{
  position: relative;
  z-index: 1;
}

/* Rækken med play + meta chips */
.lh-loop-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;      /* vigtig */
  min-width: 0;
}

/* Play-knappen må ikke shrinke mærkeligt */
.lh-loop-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

/* Meta pills/chips */
.lh-loop-chip {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;  /* chiptekst på én linje */
}

/* Hvis du vil have at chips kan wrappe pænt uden at blive mast */
.lh-loop-chip {
  padding: 6px 10px;
  border-radius: 999px;
}

/* ========== Loop Card: audio/meta/actions layout fix ========== */

/* 1) Stop clipping af UI (badge/chips) */
.lh-loop-card {
  overflow: visible !important;
}

/* Hvis du har en indre wrapper der klipper (meget typisk) */
.lh-loop-card * {
  min-width: 0;
}

/* 2) Audio player række: må gerne wrap og ikke sprænge */
.lh-loop-card .lh-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;      /* vigtig */
  width: 100%;
}

/* Hvis din play-knap har en class, ellers ignorer */
.lh-loop-card .lh-audio-player button,
.lh-loop-card .lh-audio-player .lh-play-btn {
  flex: 0 0 auto;
}

/* 3) Tags/chips: wrap pænt i flere linjer */
.lh-loop-card .lh-loop-tags {
  display: flex;
  flex-wrap: wrap;      /* vigtig */
  gap: 8px;
  width: 100%;
  overflow: visible;
}

/* Chips må ikke prøve at være 100% bredde */
.lh-loop-card .lh-loop-tags > * {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
}

/* 4) Actions button: hold den pæn og fuld bredde hvis du vil */
.lh-loop-card .lh-loop-actions {
  width: 100%;
}

/* Hvis din actions-knap er pill-form */
.lh-loop-card .lh-loop-actions a,
.lh-loop-card .lh-loop-actions button {
  width: 100%;
}

.lh-loop-card {
  position: relative;
  overflow: visible !important;
}

.lh-loop-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px; /* match dit kort */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events:none;
  z-index:0;
}

.lh-loop-card > *{
  position: relative;
  z-index: 1;
}

/* ===== LoopHive PATCH: Featured pill should be compact, not full-width ===== */

/* Prøv at ramme de mest sandsynlige featured-klasser */
.lh-loop-card .featured,
.lh-loop-card .lh-featured,
.lh-loop-card .lh-badge-featured,
.lh-loop-card .lh-pill.featured,
.lh-loop-card .lh-pill--featured {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

/* Hvis featured ligger i en wrapper der tvinger den til 100% */
.lh-loop-card .featured-wrap,
.lh-loop-card .lh-featured-wrap,
.lh-loop-card .lh-badge-wrap {
  display: block !important;
  width: 100% !important;
}

/* Og sørg for at selve pill’en ikke bliver strukket af flex */
.lh-loop-card .featured,
.lh-loop-card .lh-featured,
.lh-loop-card .lh-badge-featured {
  flex: 0 0 auto !important;
}

/* ===== LoopHive PATCH: audio + tags should wrap nicely inside card ===== */

.lh-loop-card {
  overflow: visible !important;
}

/* Audio player row */
.lh-loop-card .lh-audio-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Hvis du har en “waveform/progress” pille inde i audio-player */
.lh-loop-card .lh-audio-player .lh-wave,
.lh-loop-card .lh-audio-player .wave,
.lh-loop-card .lh-audio-player .progress,
.lh-loop-card .lh-audio-player .lh-progress {
  flex: 1 1 180px !important;
  min-width: 140px !important;
  max-width: 100% !important;
}

/* Play knap (så den ikke bliver mast) */
.lh-loop-card .lh-audio-player button,
.lh-loop-card .lh-audio-player .lh-play-btn,
.lh-loop-card .lh-audio-player .play {
  flex: 0 0 auto !important;
}

/* Tags/chips wrap */
.lh-loop-card .lh-loop-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Chips må ikke ekspandere til fuld bredde */
.lh-loop-card .lh-loop-tags > * {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* =========================
   Loop cards: Featured + Audio/Meta patch
   (paste at VERY BOTTOM of style.css)
   ========================= */

/* --- Featured badge: make it a compact pill, not a full-width bar --- */
.lh-loop-card--featured {
  position: relative;
}

.lh-loop-card--featured .lh-loop-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin: 0 0 12px 0 !important; /* plads under badge */
}

/* --- Loop meta row: keep pills on one line and wrap nicely --- */
.lh-loop-card .lh-loop-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* --- Audio player layout: button + track + time inline, responsive --- */
.lh-loop-card .lh-audio-player{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 10px 0 !important;
}

.lh-loop-card .lh-audio-play{
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Track should expand but not overflow */
.lh-loop-card .lh-audio-track{
  position: relative;
  flex: 1 1 180px !important;
  min-width: 140px !important;
  max-width: 100% !important;
}

/* Wave row should not force weird sizing */
.lh-loop-card .lh-audio-wave{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Progress line stays inside track */
.lh-loop-card .lh-audio-progress{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
}

/* Time label fixed width so it doesn't jump */
.lh-loop-card .lh-audio-time{
  flex: 0 0 auto !important;
  min-width: 44px !important;
  text-align: right !important;
  opacity: .8;
}

/* --- Tags: always wrap, never overflow --- */
.lh-loop-card .lh-loop-tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
}

.lh-loop-card .lh-loop-tags > span{
  flex: 0 0 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* --- Actions button full width (looks right in your UI) --- */
.lh-loop-card .lh-loop-actions{
  width: 100% !important;
  margin-top: 14px !important;
}

.lh-loop-card .lh-loop-actions .lh-btn{
  width: 100% !important;
}

/* Safety: don't let inner elements break flex due to min-width:auto */
.lh-loop-card *{
  min-width: 0;
}

/* TARGET: Featured pill like screenshot (floating top-right) */
.lh-loop-card.lh-loop-card--featured{
  position: relative !important;
  overflow: visible !important;
}

.lh-loop-card.lh-loop-card--featured .lh-loop-badge{
  position: absolute !important;
  top: -18px !important;
  right: 24px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ===== Fix: Audio player (play button + track pill) ===== */

.lh-loop-card .lh-audio-player{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Play circle */
.lh-loop-card .lh-audio-play{
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

/* Triangle centering */
.lh-loop-card .lh-audio-play > span{
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: translateX(1px) translateY(-1px); /* micro-center */
}

/* Track pill */
.lh-loop-card .lh-audio-track{
  flex: 1 1 auto !important;
  min-width: 140px !important;
  height: 44px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Wave inside track */
.lh-loop-card .lh-audio-wave{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
}

.lh-loop-card .lh-audio-wave span{
  width: 6px !important;
  height: 16px !important;
  border-radius: 99px !important;
  opacity: .8;
}

/* Progress overlay */
.lh-loop-card .lh-audio-progress{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0%;
  opacity: .25;
  pointer-events: none !important;
}

/* Time label */
.lh-loop-card .lh-audio-time{
  flex: 0 0 auto !important;
  min-width: 46px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.lh-loop-card .lh-audio-play{
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lh-loop-card .lh-audio-play.is-playing > span{
  transform: none !important;
  font-size: 0 !important;
}
.lh-loop-card .lh-audio-play.is-playing > span::before{
  content: "❚❚";
  font-size: 14px;
  letter-spacing: 2px;
}

/* Nuclear specificity */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play > span{
  font-size: 16px !important;
  transform: translateX(1px) translateY(-1px) !important;
}/* Nuclear specificity */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play > span{
  font-size: 16px !important;
  transform: translateX(1px) translateY(-1px) !important;
}

.lh-loops-grid article.lh-loop-card .lh-audio-player .lh-audio-track{
  height: 44px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  overflow: hidden !important;
}

/* ===== Play button: match reference (purple circle + white play) ===== */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;

  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: radial-gradient(circle at 30% 30%,
    rgba(190, 160, 255, 1) 0%,
    rgba(140, 110, 255, 1) 45%,
    rgba(110, 80, 235, 1) 100%) !important;

  box-shadow:
    0 10px 26px rgba(120, 90, 255, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;

  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

/* Fjern evt. browser default focus ring og lav en pæn */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play:focus{
  outline: none !important;
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play:focus-visible{
  outline: 2px solid rgba(190,160,255,0.65) !important;
  outline-offset: 3px !important;
}

/* Hover/active micro interaction */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play:hover{
  transform: translateY(-1px) !important;
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play:active{
  transform: translateY(0px) scale(0.98) !important;
}

/* Make the triangle white and perfectly centered */
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play > span{
  display: block !important;
  width: 0 !important;
  height: 0 !important;

  /* triangle via borders (cleaner than text glyph) */
  border-left: 12px solid rgba(255,255,255,0.98) !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;

  /* center + tiny optical shift to the right */
  transform: translateX(1px) !important;

  /* hide the original "►" character */
  font-size: 0 !important;
  line-height: 0 !important;
}

.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play.is-playing > span{
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  transform: none !important;
  font-size: 0 !important;
  position: relative !important;
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play.is-playing > span::before,
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play.is-playing > span::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.98);
}
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play.is-playing > span::before{ left: 2px; }
.lh-loops-grid article.lh-loop-card .lh-audio-player button.lh-audio-play.is-playing > span::after{ right: 2px; }

/* Remove the right audio bar completely */
.lh-loops-grid article.lh-loop-card .lh-audio-player .lh-audio-track{
  display: none !important;
}

/* (valgfrit – hvis du også vil skjule tiden ved siden af) */
/*
.lh-loops-grid article.lh-loop-card .lh-audio-player .lh-audio-time{
  display: none !important;
}
*/

/* Sørg for at play-knappen stadig står pænt */
.lh-loops-grid article.lh-loop-card .lh-audio-player{
  gap: 0 !important;
}

/* Remove the whole audio bar/pill background, keep only the play button */
.lh-loops-grid article.lh-loop-card .lh-audio-player{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ==========================
   BROWSE LOOPS: HARD RESET of our audio CSS
   Scope to Browse Loops page only
   ========================== */

body.page-id-39 .lh-audio-player,
body.page-id-39 .lh-audio-play,
body.page-id-39 .lh-audio-track,
body.page-id-39 .lh-audio-wave,
body.page-id-39 .lh-audio-progress,
body.page-id-39 .lh-audio-time,
body.page-id-39 .lh-audio-play > span{
  all: unset !important;
}

/* Restore sane defaults so layout doesn't collapse */
body.page-id-39 .lh-audio-player{ display:flex !important; align-items:center !important; gap:12px !important; }
body.page-id-39 .lh-audio-play{ display:inline-flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; }
body.page-id-39 .lh-audio-play > span{ display:inline-block !important; }

/* ==========================
   BROWSE LOOPS: Featured badge floating top-right
   ========================== */

body.page-id-39 .lh-loop-card--featured{
  position: relative !important;
  overflow: visible !important;
}

body.page-id-39 .lh-loop-card--featured .lh-loop-badge{
  position: absolute !important;
  top: -18px !important;
  right: 24px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ==========================
   BROWSE LOOPS ONLY (page-id-XX): show play/pause icon again
   ========================== */

body.page-id-XX .lh-audio-play{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* IMPORTANT: undo the triangle hack + font-size:0 so JS text shows */
body.page-id-XX .lh-audio-play > span{
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: none !important;
  display: inline-block !important;
}

/* ==========================
   BROWSE LOOPS ONLY (page-id-XX): featured badge like reference
   ========================== */

body.page-id-XX .lh-loop-card--featured{
  position: relative !important;
  overflow: visible !important;
}

body.page-id-XX .lh-loop-card--featured .lh-loop-badge{
  position: absolute !important;
  top: -18px !important;
  right: 24px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ===== LoopHive DNA: Browse play button ===== */

.lh-loop-card .lh-audio-play{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;

  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: radial-gradient(circle at 30% 30%,
    rgba(190,160,255,1) 0%,
    rgba(140,110,255,1) 45%,
    rgba(110,80,235,1) 100%) !important;

  box-shadow:
    0 10px 26px rgba(120,90,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;

  cursor: pointer !important;
}

/* Replace the text icon with a clean triangle */
.lh-loop-card .lh-audio-play > span{
  width: 0 !important;
  height: 0 !important;

  border-left: 12px solid rgba(255,255,255,0.98) !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;

  transform: translateX(1px) !important;

  font-size: 0 !important;
  line-height: 0 !important;
}

/* When playing, show pause bars (requires JS to add .is-playing) */
.lh-loop-card .lh-audio-play.is-playing > span{
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  transform: none !important;
  position: relative !important;
}

.lh-loop-card .lh-audio-play.is-playing > span::before,
.lh-loop-card .lh-audio-play.is-playing > span::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:4px;
  border-radius:99px;
  background: rgba(255,255,255,0.98);
}
.lh-loop-card .lh-audio-play.is-playing > span::before{ left:2px; }
.lh-loop-card .lh-audio-play.is-playing > span::after{ right:2px; }