/* TWOFACE — Beats page-only stylesheet (only beats.html loads this) */

:root{
  --panel:#151517; --panelBorder:#1d1d22; --borderSubtle:#1c1c1f;
  --accentBeats:#7d5fff; --chip:#1f1f22; --chipText:#e6e6eb; --chipBorder:#26262b;
  --btnBg:#222227; --btnHover:#2c2c33;

  --modalBg:#0f1014; --modalBorder:#24252c; --backdrop:rgba(0,0,0,.55);

  /* Gold used across the site (keeps MP3+WAV glow consistent) */
  --gold: #ffd740;
  --gold-28: rgba(255,215,64,.28);
  --gold-12: rgba(255,215,64,.12);
  --gold-90: rgba(255,215,64,.90);

  /* Recommended (gold) glow tones */
  --recGlowBg: rgba(255, 215, 64, .08);
  --recGlow:   rgba(255, 215, 64, .22);
  --recRing1:  rgba(255, 215, 64, .18);
  --recRing2:  rgba(255, 215, 64, .08);
  --recBorder: #4a4120;
  --recBadgeBg:#2a260f;
  --recBadgeBd:#4d4217;
  --recBadgeTx:#ffe58b;
}

/* ---- Page head ---- */
.page-head{padding:24px 0 6px;}
.page-head h2{margin:0 0 6px;color:#fff;font-size:28px;}
.page-head p{margin:0;color:#a0a0a7;}

/* Info row (question mark + text) */
.info-row{margin:10px 0 6px;}
@media (min-width:900px){ .info-row{display:flex;justify-content:center;} }
/* no outer glow, keep the gold ring */
.info-link{
  /* … */
  box-shadow:
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
}

.info-link:hover{
  background: rgba(255,215,64,.12);
  box-shadow:
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
  border-color: var(--recBorder);
}

.info-link:focus-visible{outline:2px solid #3a3a44; outline-offset:2px}
.qmark{
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%;
  background: var(--recBadgeBg);
  border:1px solid var(--recBadgeBd);
  font-weight:700; font-size:12px; color: var(--recBadgeTx);
  line-height:1;
}

/* ---------- Filters / Controls ---------- */
.beats-controls{margin:10px 0 18px;border-bottom:1px solid var(--borderSubtle);padding-bottom:10px;}
.beats-controls .row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.ctrl{display:flex;flex-direction:column;gap:6px;min-width:140px}
.ctrl > span{font-size:12px;color:#b6b6be}
.ctrl input[type="search"],
.ctrl input[type="number"],
.ctrl select{
  background:#101013;border:1px solid #24242a;color:#e8e8ee;
  border-radius:10px;padding:8px 10px;min-height:38px
}
.ctrl select{cursor:pointer}
.ctrl.bpm .bpm-range{display:flex;align-items:center;gap:8px}
.ctrl .sep{opacity:.6}

/* Reset — link style */
.btn-reset{
  background:transparent;color:#d0d0da;border:0;border-radius:0;
  padding:0 2px;cursor:pointer;min-height:auto;text-decoration:underline;
}
.btn-reset:hover{opacity:.85}

.results-bar{margin-top:8px;color:#a0a0a7;font-size:14px}

/* ---------- List / Row ---------- */
.tracks{display:flex;flex-direction:column;gap:14px;margin:18px 0 60px}

.track{
  background:var(--panel);border:1px solid var(--panelBorder);border-radius:12px;
  padding:12px;display:grid;align-items:center;gap:14px;
  grid-template-columns:48px 56px auto minmax(320px,1.6fr) auto;
  grid-template-areas:"ctrl art title wave actions";
}

/* Control (play/pause) — FIXED NEUTRAL GREY */
.t-ctrl{grid-area:ctrl;display:grid;place-items:center}
.t-ctrl button{
  width:38px;height:38px;border-radius:50%;
  background:#2b2b30 !important;
  border:1px solid #34343a !important;
  color:#000;display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
  cursor:pointer;transition:transform .12s ease-in-out
}
.t-ctrl button:hover{transform:scale(1.05)}
.t-ctrl button svg *{fill:#000 !important;stroke:#000 !important;} /* icon black */

/* Art */
.t-art{grid-area:art;position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#0b0b0c;border:1px solid #222}
.t-art img{width:100%;height:100%;object-fit:cover}

/* Title / meta */
.t-title{grid-area:title;min-width:220px}
.t-title h4{margin:0 0 2px;color:#fff;font-weight:700;letter-spacing:.02em}
.meta{display:flex;gap:10px;align-items:center;color:#a0a0a7;font-size:13px;flex-wrap:wrap}
.meta .chip{background:var(--chip);color:var(--chipText);padding:2px 8px;border-radius:999px;border:1px solid var(--chipBorder)}

/* Wave (taller, easier to scrub) — CONSTANT GOLD */
.t-wave{
  grid-area:wave;height:44px;border-radius:8px;overflow:hidden;position:relative;border:1px solid #222;background:#101013;cursor:pointer
}
.wave-bars{position:absolute;inset:0;background:repeating-linear-gradient(to right,#1f1f24 0 2px,transparent 2px 7px);opacity:.9}
.wave-progress{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold-28),var(--gold-12));
  border-right:2px solid var(--gold-90);
  transition:width .06s linear;pointer-events:none
}
.t-time{
  position:absolute;right:8px;bottom:6px;font-size:12px;color:#c9c9d2;opacity:.9;background:rgba(14,14,18,.55);
  padding:2px 6px;border-radius:6px;border:1px solid #24242a
}

/* ---------- Actions (Buy / Add) ---------- */
.t-actions{
  grid-area:actions;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  position:relative;
}

/* Uppercase, smaller pills */
.buy-btn{
  appearance:none;border:1px solid #2e2e34;cursor:pointer;font:inherit;
  background:var(--btnBg);color:#eaeaf2;padding:9px 12px;border-radius:999px;
  white-space:nowrap;transition:background .15s ease, border-color .15s ease;
  text-transform:uppercase;letter-spacing:.06em;font-size:12px;line-height:1.1;
}
.buy-btn:hover{background:var(--btnHover)}
.buy-btn:focus-visible{outline:2px solid rgba(125,95,255,.35); outline-offset:2px}
.add-btn{background:transparent;border-color:#34343a;color:#eaeaf2}
.add-btn:hover{background:#1a1a1f;border-color:#3a3a40}

/* Menus (under buttons) */
.buy-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:360px;max-width:min(420px, 92vw);
  background:#121216;border:1px solid #26262b;border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);padding:8px;display:none;z-index:10;
  transform: translateY(6px); opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.buy-menu.open{display:block; transform: translateY(0); opacity:1}
.buy-menu a,
.buy-menu a[role="button"]{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:10px 12px;border-radius:8px;color:#eaeaf2;text-decoration:none;border:1px solid transparent;
  cursor:pointer;
}
.buy-menu a:hover,
.buy-menu a[role="button"]:hover{background:#1b1b20;border-color:#292930}
.buy-menu a[aria-disabled="true"]{opacity:.45;pointer-events:none}
.buy-menu .text{display:flex;flex-direction:column;gap:4px;min-width:0}
.buy-menu .title{font-weight:700;letter-spacing:.02em;white-space:normal}
.buy-menu .sub{color:#bdbdd0;font-size:12.5px;line-height:1.35}
.buy-menu .price{
  background:var(--chip);color:var(--chipText);border:1px solid var(--chipBorder);
  border-radius:999px;padding:4px 8px;white-space:nowrap;align-self:center
}
.buy-menu .badge{
  display:inline-block;margin-left:8px;padding:2px 6px;border-radius:999px;
  font-size:11px;line-height:1.2;background:#1f2230;border:1px solid #2c3150;color:#cfd3ff
}

/* Recommended item glow (gold) */
.buy-menu a.recommended,
.buy-menu a[role="button"].recommended{
  background: var(--recGlowBg);
  box-shadow:
    0 8px 24px var(--recGlow),
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
  border-color: #3a341c;
}
.buy-menu a.recommended:hover,
.buy-menu a[role="button"].recommended:hover{
  background: rgba(255,215,64,.12);
  box-shadow:
    0 10px 28px var(--recGlow),
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
  border-color: var(--recBorder);
}
.buy-menu a.recommended .badge,
.buy-menu a[role="button"].recommended .badge{
  background: var(--recBadgeBg);
  border-color: var(--recBadgeBd);
  color: var(--recBadgeTx);
}

/* Small screens: keep menus inside the viewport and align under the triggering row */
@media (max-width: 560px){
  .t-actions{overflow:visible}
  .buy-menu{
    right:auto; left:0;
    min-width:min(92vw, 380px);
    max-width:92vw;
  }
}

/* ---------- Responsive row layout ---------- */
@media (max-width:900px){
  .track{
    grid-template-columns:48px 56px 1fr;
    grid-template-areas:
      "ctrl art title"
      "wave wave wave"
      "actions actions actions";
    gap:10px
  }
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:saturate(1) blur(2px)}
.modal-panel{
  position:relative; z-index:1; width:min(680px, 92vw); max-height:85vh; overflow:auto;
  margin:8vh auto 0; background:var(--modalBg); border:1px solid var(--modalBorder);
  border-radius:14px; padding:18px 18px 14px; box-shadow:0 20px 80px rgba(0,0,0,.55)
}
.modal-close{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  border:1px solid #2a2b33; background:#181920; color:#eaeaf2; cursor:pointer
}
.modal-close:hover{background:#1f2028}
.modal-content ul{margin:0 0 8px 18px}
.modal-content li{margin:6px 0}
.modal-cta{margin:10px 0 0; color:#d9d9e3}
.modal-actions{display:flex;justify-content:flex-end;margin-top:12px}
.modal-actions .btn{height:auto;padding:8px 14px;border-radius:10px;border:1px solid #2a2a30;background:#1a1b20;color:#fff}
.modal-actions .btn:hover{background:#22232a}

/* ===== Beats hero banner ===== */
.beats-hero { margin: 12px 0 18px; }
.beats-hero .img-wrap {
  position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  background: #0b0b0c; border: 1px solid #1d1d22;
}
.beats-hero img{ display:block; width:100%; height:auto; aspect-ratio: 2048 / 652; object-fit:cover; }
@media (max-width: 768px){
  .beats-hero .img-wrap{ border-radius:12px; }
  .beats-hero img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 420px){ .beats-hero img{ aspect-ratio: 4 / 3; } }

/* Hide title block above the banner on Beats only + breathing room below “?” pill */
.page-head{ display:none; }
.beats-hero{ margin-top:8px; }
.info-row{ margin-bottom:70px; }
@media (max-width:560px){ .info-row{ margin-bottom:24px; } }

/* === Desktop filter row: predictable widths === */
@media (min-width: 1200px){
  .beats-controls .row{
    display:grid;
    grid-template-columns:
      minmax(240px, 12%)  /* Search  */
      minmax(120px, 12%)  /* Genre   */
      minmax(120px, 12%)  /* Mood    */
      minmax(120px, 12%)  /* Key     */
      minmax(210px, 18%)  /* BPM     */
      minmax(110px, 8%)   /* Sort    */
      auto;               /* Reset   */
    column-gap:14px; align-items:end;
  }
  .beats-controls .row > .ctrl,
  .beats-controls .row > .btn-reset{ min-width:0; }
  label.ctrl[for="q"]{ grid-column:1; }
  label.ctrl[for="genre"]{ grid-column:2; }
  label.ctrl[for="mood"]{ grid-column:3; }
  label.ctrl[for="key"]{ grid-column:4; }
  .ctrl.bpm{ grid-column:5; }
  label.ctrl[for="sort"]{ grid-column:6; }
  .btn-reset{ grid-column:7; justify-self:start; }
  label.ctrl[for="sort"] > select{ width:120px; min-width:110px; max-width:140px; }
  .ctrl.bpm .bpm-range{ gap:6px; }
  .ctrl.bpm .bpm-range input{ width:80px; max-width:86px; }
}
/* make inputs fill their cells */
.beats-controls .row .ctrl > input,
.beats-controls .row .ctrl > select{ width:100%; }

/* === Reset button: restore pill style === */
.btn-reset{
  appearance: none;                      /* avoid UA default */
  background: transparent;
  color: #d0d0da;
  border: 1px solid #2a2a30;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 38px;
  line-height: 1;
}
.btn-reset:hover{ background:#19191e; }
.btn-reset:focus-visible{
  outline: 2px solid rgba(125,95,255,.35);
  outline-offset: 2px;
}

/* === Results bar alignment === */
/* Base: keep mobile left-aligned */
.results-bar{
  margin-top: 8px;
  color:#a0a0a7;
  font-size:14px;
  display:flex;
  gap:12px;
  align-items:center;
}

/* Desktop: hug the right edge */
@media (min-width: 900px){
  .results-bar{ justify-content: flex-end; }
}

/* Reset button: never underline */
.btn-reset,
a.btn-reset,
.btn-reset:link,
.btn-reset:visited,
.btn-reset:hover,
.btn-reset:focus,
.btn-reset:active{
  text-decoration: none !important;
}

/* Uppercase the "<count> results" text */
.results-bar span:last-child{
  text-transform: uppercase;
  letter-spacing: .02em; /* optional: looks a bit nicer in caps */
}

/* ==== PLAY BUTTONS: force a uniform light grey (#bbbbbb) ==== */
:root { --playbtn-grey: #bbbbbb; }

#tracks .track .t-ctrl button,
#tracks .track .t-play,
#tracks .track .play-btn,
#tracks .track button[aria-label^="Play"],
#tracks .track button[aria-label^="Pause"]{
  background: var(--playbtn-grey) !important;
  border-color: var(--playbtn-grey) !important;
  color: #000 !important;  /* ensures any built-in glyph is visible */
}

/* If an inline SVG is used for the icon, make it dark for contrast */
#tracks .track .t-ctrl button svg,
#tracks .track .t-ctrl button svg *,
#tracks .track .t-play svg,
#tracks .track .t-play svg *{
  fill: #000 !important;
  stroke: #000 !important;
}

/* Results line: push it down a bit and keep it right-aligned */
.results-bar{
  margin-top: 22px;           /* ← increase this number for more/less room */
  color:#a0a0a7;
  font-size:14px;
  display:flex;
  justify-content:flex-end;   /* right align */
  gap:10px;
}

/* === Beats: Info pill (no glow, gold ring, dark background) === */
/* Paste this at the very bottom of beats.css */

.info-link{
  /* layout */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* kill native button styling that caused the white look */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* visual */
  background: transparent;                 /* stay dark, no white fill */
  border: 1px solid var(--recBorder);      /* thin gold ring outline */
  color: #dfe0e6;
  font: inherit;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;

  /* inner “double ring” (no outer glow) */
  box-shadow:
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
}

.info-link:hover{
  background: #111217;                     /* subtle dark hover */
  border-color: var(--recBorder);
  box-shadow:
    0 0 0 1px var(--recRing1) inset,
    0 0 0 2px var(--recRing2) inset;
}

/* Keep the badge consistent */
.qmark{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--recBadgeBg);
  border: 1px solid var(--recBadgeBd);
  font-weight: 700;
  font-size: 12px;
  color: var(--recBadgeTx);
  line-height: 1;
}

/* ===== Mobile (portrait) layout tweaks for Beats ===== */
@media (max-width: 768px) and (orientation: portrait){

  /* 1) Hero banner: full-bleed width inside padded container */
  .beats-hero .img-wrap{
    width: 100vw;                  /* span the full viewport width */
    margin-left: 50%;              /* center the full-bleed box */
    transform: translateX(-50%);   /* cancel the container padding */
    border-radius: 12px;           /* keep a softer mobile radius */
  }
  /* keep using a taller crop on phones; you already have 16:9/4:3 rules —
     this just ensures no accidental shrinking */
  .beats-hero img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 2) Filters: 4-row grid */
  .beats-controls .row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "q     q     q"      /* Row 1: Search spans full width */
      "genre mood  key"    /* Row 2: three compact selects */
      "bpm   bpm   bpm"    /* Row 3: BPM across the row */
      "sort  .     reset"; /* Row 4: Sort left, Reset right */
    column-gap: 10px;
    row-gap: 12px;
    align-items: end;
  }

  /* Map controls to grid areas */
  label.ctrl[for="q"]     { grid-area: q; }
  label.ctrl[for="genre"] { grid-area: genre; }
  label.ctrl[for="mood"]  { grid-area: mood; }
  label.ctrl[for="key"]   { grid-area: key; }
  .ctrl.bpm               { grid-area: bpm; }
  label.ctrl[for="sort"]  { grid-area: sort; justify-self: start; }
  .btn-reset              { grid-area: reset; justify-self: end; }

  /* Compact BPM inputs (3 digits max) */
  .ctrl.bpm .bpm-range{
    gap: 6px;                         /* tighten spacing around the dash */
  }
  .ctrl.bpm .bpm-range input{
    width: 80px;                      /* comfortably fits 3 digits */
    max-width: 86px;
  }

  /* Ensure inputs/selects fill their cell cleanly */
  .beats-controls .row .ctrl > input,
  .beats-controls .row .ctrl > select{
    width: 100%;
  }
}

/* =======================
   Mobile (portrait) fixes
   ======================= */
@media (max-width: 768px) and (orientation: portrait){

  /* Guard against any sneaky horizontal scroll on phones */
  body, .container, .content { overflow-x: hidden; }

  /* 1) Hero: keep it inside the container width and show the whole image */
  .beats-hero .img-wrap{
    width: 100%;            /* follow container width (no 100vw) */
    margin: 0;              /* no centering trick needed */
    transform: none;
    border-radius: 12px;
  }
  .beats-hero img{
    width: 100%;
    height: auto;
    object-fit: contain;     /* show entire image (no crop) */
    aspect-ratio: auto;      /* override earlier aspect rules */
  }

  /* 2) Filters: 4-row compact grid, fully contained */
  .beats-controls .row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "q     q     q"      /* Row 1: Search */
      "genre mood  key"    /* Row 2: three compact selects */
      "bpm   bpm   sort"   /* Row 3: BPM (left) + Sort (right) on same line */
      "reset reset reset"; /* Row 4: Reset (left) */
    column-gap: 10px;
    row-gap: 12px;
    align-items: end;
  }

  /* Allow controls to shrink inside their cells (prevents spill) */
  .beats-controls .row > .ctrl,
  .beats-controls .row > .btn-reset { min-width: 0; }

  /* Map to grid areas */
  label.ctrl[for="q"]     { grid-area: q; }
  label.ctrl[for="genre"] { grid-area: genre; }
  label.ctrl[for="mood"]  { grid-area: mood; }
  label.ctrl[for="key"]   { grid-area: key; }
  .ctrl.bpm               { grid-area: bpm; }
  label.ctrl[for="sort"]  { grid-area: sort; justify-self: end; }
  .btn-reset              { grid-area: reset; justify-self: start; }

  /* BPM inputs: tighter (3 digits max) */
  .ctrl.bpm .bpm-range{ gap: 6px; }
  .ctrl.bpm .bpm-range input{
    width: 84px;
    max-width: 90px;
  }

  /* Make all inputs/selects fill their grid cell cleanly */
  .beats-controls .row .ctrl > input,
  .beats-controls .row .ctrl > select{
    width: 100%;
    min-width: 0;
  }
}

/* Mobile: extra space before the Reset row */
@media (max-width: 768px) and (orientation: portrait){
  .beats-controls .row .btn-reset{
    margin-top: 16px; /* tweak to taste: 12–20px */
  }
}

/* Mobile: center the Reset button and give it breathing room */
@media (max-width: 768px) and (orientation: portrait){
  .beats-controls .row{
    justify-content: center; /* doesn’t affect other rows because items are full-width except Reset */
  }
  .beats-controls .row .btn-reset{
    margin-top: 18px;   /* space above */
    align-self: center; /* center in its row */
  }
}

/* ===== Mobile: center the Reset button and add breathing room ===== */
@media (max-width: 768px){
  /* Make sure the Reset button is treated as a grid item we can center */
  .beats-controls .row .btn-reset{
    display: inline-flex;          /* keep its pill look */
    justify-self: center !important;
    margin: 18px auto 0 !important;/* space above + centered horizontally */
    text-decoration: none;         /* no underline, in case a UA adds it */
  }
}

/* ===== Wave progress: force neutral grey (#bbbbbb) on all rows/devices ===== */
:root{
  --wave-gray: #bbbbbb;
  --wave-gray-rgb: 187, 187, 187;
}

#tracks .track .wave-progress{
  background: linear-gradient(
    90deg,
    rgba(var(--wave-gray-rgb), .35),
    rgba(var(--wave-gray-rgb), .15)
  ) !important;
  border-right: 2px solid var(--wave-gray) !important;
}

/* === Results alignment & casing (desktop + mobile) === */
.results-bar{
  display: flex;
  align-items: center;
  gap: 12px;                 /* small breathing room */
}

/* Force the "X RESULTS" text to uppercase */
.results-bar > span:nth-of-type(2){
  text-transform: uppercase;
  letter-spacing: .04em;     /* optional: reads better in all-caps */
}

/* Keep pager on the far right */
#pager-top{
  margin-left: auto;
}

/* (Optional) make sure the pager lays out nicely */
#pager-top .pager-nav{
  display: inline-flex;
  gap: 4px;
}

/* === Results + Pager (desktop & mobile) =============================== */
/* Keep "X RESULTS" on the left, pager on the right, and force ALL CAPS */
.results-bar{
  display:flex;
  align-items:center;
  gap:12px;
}
.results-bar > span:nth-of-type(2){
  text-transform:uppercase;
  letter-spacing:.04em;
}
#pager-top{ margin-left:auto; }

/* Pager container */
#pager-top .pager-nav{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Pager buttons */
#pager-top .pager-nav button{
  appearance:none;
  border:1px solid var(--panelBorder, #2a2a30);
  background:#191a1f;
  color:#e4e4ec;
  height:34px;
  min-width:36px;             /* squareish touch target */
  padding:0 10px;
  border-radius:8px;
  font:600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .06s ease;
}
#pager-top .pager-nav button:hover{
  background:#21222a;
  border-color:#34343c;
}
#pager-top .pager-nav button:active{
  transform:translateY(1px);
}

/* Active page */
#pager-top .pager-nav button.is-active{
  background:var(--accent, #7d5fff);
  border-color:var(--accent, #7d5fff);
  color:#000;
}

/* Disabled states (first/prev on page 1, next/last on final page) */
#pager-top .pager-nav button.is-disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}

/* Icon-only chevrons (» « ‹ ›) keep same width for tidy alignment */
#pager-top .pager-nav button.icon{
  min-width:34px;
  padding:0 8px;
}

/* Mobile tweaks: slightly larger tap targets, tighter type */
@media (max-width:560px){
  #pager-top .pager-nav{ gap:4px; }
  #pager-top .pager-nav button{
    height:36px;
    min-width:34px;
    font-size:13px;
    border-radius:9px;
  }
}

/* === Results + Pager (desktop & mobile) =============================== */
/* Keep "X RESULTS" on the left, pager on the right, and force ALL CAPS */
.results-bar{
  display:flex;
  align-items:center;
  gap:12px;
}
.results-bar > span:nth-of-type(2){
  text-transform:uppercase;
  letter-spacing:.04em;
}
#pager-top{ margin-left:auto; }

/* Align the bottom pager to the right so it matches the top’s position */
#pager-bottom{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}

/* Shared pager layout */
#pager-top .pager-nav,
#pager-bottom .pager-nav{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Pager buttons (shared) */
#pager-top .pager-nav button,
#pager-bottom .pager-nav button{
  appearance:none;
  border:1px solid var(--panelBorder, #2a2a30);
  background:#191a1f;
  color:#e4e4ec;
  height:34px;
  min-width:36px;             /* squareish touch target */
  padding:0 10px;
  border-radius:8px;
  font:600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .06s ease;
}
#pager-top .pager-nav button:hover,
#pager-bottom .pager-nav button:hover{
  background:#21222a;
  border-color:#34343c;
}
#pager-top .pager-nav button:active,
#pager-bottom .pager-nav button:active{
  transform:translateY(1px);
}

/* Active page */
#pager-top .pager-nav button.is-active,
#pager-bottom .pager-nav button.is-active{
  background:var(--accent, #7d5fff);
  border-color:var(--accent, #7d5fff);
  color:#000;
}

/* Disabled */
#pager-top .pager-nav button.is-disabled,
#pager-bottom .pager-nav button.is-disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}

/* Icon-only chevrons keep same width */
#pager-top .pager-nav button.icon,
#pager-bottom .pager-nav button.icon{
  min-width:34px;
  padding:0 8px;
}

/* Mobile tweaks */
@media (max-width:560px){
  #pager-top .pager-nav,
  #pager-bottom .pager-nav{ gap:4px; }
  #pager-top .pager-nav button,
  #pager-bottom .pager-nav button{
    height:36px;
    min-width:34px;
    font-size:13px;
    border-radius:9px;
  }
}

/* === Results + Pager =================================================== */
/* "X RESULTS" on the left; top pager on the right; bottom pager on the left */
.results-bar{
  display:flex;
  align-items:center;
  gap:12px;
}
.results-bar > span:nth-of-type(2){
  text-transform:uppercase;
  letter-spacing:.04em;
}
#pager-top{ margin-left:auto; }   /* right-align top pager */
#pager-bottom{ margin-top:10px; } /* bottom pager stays left by default */

/* Shared pager layout (both top & bottom) */
#pager-top .pager-nav,
#pager-bottom .pager-nav{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Buttons */
#pager-top .pager-nav button,
#pager-bottom .pager-nav button{
  appearance:none;
  border:1px solid var(--panelBorder, #2a2a30);
  background:#191a1f;
  color:#e4e4ec;
  height:34px;
  min-width:36px;
  padding:0 10px;
  border-radius:8px;
  font:600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
#pager-top .pager-nav button:hover,
#pager-bottom .pager-nav button:hover{
  background:#21222a;
  border-color:#34343c;
}
#pager-top .pager-nav button:active,
#pager-bottom .pager-nav button:active{
  transform:translateY(1px);
}

/* Active page */
#pager-top .pager-nav button.is-active,
#pager-bottom .pager-nav button.is-active{
  background:var(--accent, #7d5fff);
  border-color:var(--accent, #7d5fff);
  color:#000;
}

/* Disabled */
#pager-top .pager-nav button.is-disabled,
#pager-bottom .pager-nav button.is-disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}

/* Icon-only chevrons */
#pager-top .pager-nav button.icon,
#pager-bottom .pager-nav button.icon{
  min-width:34px;
  padding:0 8px;
}

/* Mobile tweaks */
@media (max-width:560px){
  #pager-top .pager-nav,
  #pager-bottom .pager-nav{ gap:4px; }
  #pager-top .pager-nav button,
  #pager-bottom .pager-nav button{
    height:36px;
    min-width:34px;
    font-size:13px;
    border-radius:9px;
  }
}

/* === TWOFACE Cart (button + drawer) ===================================== */
/* Uses existing tokens from this file: --modalBg, --modalBorder, --btnBg, --btnHover, etc. */

/* Floating Cart button */
.cart-btn{
  position: fixed;
  right: 18px; top: 18px;
  z-index: 1000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--btnBg); color:#eaeaf2; border:1px solid #2e2e34;
  cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition: background .15s ease, border-color .15s ease, transform .08s ease-in-out;
}
.cart-btn:hover{ background: var(--btnHover); }
.cart-btn:active{ transform: translateY(1px); }
.cart-btn .icon{ line-height: 1; }
.cart-btn .label{ font-weight: 600; letter-spacing: .02em; }
.cart-btn .cart-badge{
  min-width: 20px; height: 20px; padding: 0 6px;
  display:inline-grid; place-items:center;
  border-radius: 999px;
  background: var(--accent); color:#000; font-weight:700; font-size:12px;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb, 245,192,72), .25);
}

/* Drawer shell */
.cart-drawer{ position: fixed; inset:0; z-index: 999; display:none; }
.cart-drawer.open{ display:block; }
.cart-open { overflow: hidden; }

.cart-drawer .cart-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.55);
  backdrop-filter: saturate(1) blur(2px);
  opacity:0; transition: opacity .15s ease;
}
.cart-drawer.open .cart-backdrop{ opacity:1; }

.cart-drawer .cart-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(420px, 92vw);
  background: var(--modalBg); border-left: 1px solid var(--modalBorder);
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
  transform: translateX(100%); opacity:.98;
  display:flex; flex-direction:column;
  transition: transform .18s ease;
}
.cart-drawer.open .cart-panel{ transform: translateX(0); }

/* Header */
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 12px 16px; border-bottom:1px solid var(--modalBorder);
}
.cart-head h4{ margin:0; color:#fff; letter-spacing:.02em; }
.cart-close{
  width:32px;height:32px;border-radius:50%;border:1px solid #2a2b33;
  background:#181920;color:#eaeaf2;cursor:pointer;
}
.cart-close:hover{ background:#1f2028; }

/* Body */
.cart-body{ padding: 10px 10px 6px; overflow:auto; flex:1; }
.cart-empty{ color:#bbb; padding: 18px 8px; }

/* Item row */
.cart-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.cart-item{
  display:grid; grid-template-columns: 1fr auto auto auto; gap:10px; align-items:center;
  padding:10px; border:1px solid #2a2a30; border-radius:12px; background:#121216;
}
.ci-main{ min-width: 0; display:flex; flex-direction:column; gap:4px; }
.ci-title{ color:#fff; font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-sub{ color:#c3c3cc; font-size:12.5px; opacity:.9; }

/* qty */
.ci-qty{ display:inline-flex; align-items:center; gap:6px; }
.ci-qty .qty-dec, .ci-qty .qty-inc{
  width:28px; height:28px; border-radius:8px; border:1px solid #2a2a30; background:#1a1a1f; color:#eaeaf2;
  cursor:pointer;
}
.ci-qty .qty-dec:hover, .ci-qty .qty-inc:hover{ background:#222226; }
.ci-qty .qty-input{
  width:50px; text-align:center; background:#101013; color:#eaeaf2; border:1px solid #24242a; border-radius:8px; padding:6px 4px;
}

/* price + remove */
.ci-price{ color:#fff; font-weight:700; }
.ci-remove{
  width:32px; height:32px; border-radius:8px; border:1px solid #2a2a30; background:#1a1a1f; color:#eaeaf2; cursor:pointer;
}
.ci-remove:hover{ background:#222226; }

/* Footer */
.cart-foot{
  border-top:1px solid var(--modalBorder);
  padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cart-total{ display:flex; align-items:baseline; gap:10px; }
.cart-total span{ color:#c9c9d2; }
.cart-total .total-val{ color:#fff; letter-spacing:.02em; font-size:18px; }

.btn-checkout{
  appearance:none; border:1px solid #2e2e34; cursor:pointer; font:inherit;
  background: var(--btnBg); color:#eaeaf2; padding:10px 14px; border-radius:999px;
  white-space:nowrap; transition: background .15s ease, border-color .15s ease;
}
.btn-checkout:hover{ background: var(--btnHover); }

/* Mobile tweaks */
@media (max-width: 520px){
  .cart-btn{ right: 14px; top: 14px; }
  .cart-item{ grid-template-columns: 1fr auto auto; }
  .ci-price{ justify-self: end; }
  .ci-remove{ grid-column: 3; }
}

/* ===== Results + Pager (revert to compact theme) ===== */

/* Results row: keep count on the left, pager can live on the right if present */
.results-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;           /* <- hug left */
  flex-wrap: wrap;
}

/* Uppercase “X RESULTS” for continuity */
.results-bar,
.results-bar strong,
.results-bar #count,
.results-bar #count-s {
  text-transform: uppercase;
}

/* If the pager is in the same row, push it to the right on wide screens */
.results-bar .pager{ margin-left: auto; }

/* Pager look & feel (matches your darker UI) */
.pager{
  display: flex;
  align-items: center;
  gap: 6px;
}

.pager button,
.pager a[role="button"]{
  appearance: none;
  border: 1px solid #2a2a30;
  background: #202025;
  color: #e6e6eb;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;                     /* compact rounded */
  cursor: pointer;
  line-height: 30px;
  text-align: center;
}

.pager button:hover,
.pager a[role="button"]:hover{
  background: #26262c;
  border-color: #34343a;
}

.pager button[aria-current="true"],
.pager .is-active{
  background: #2a2a30;
  color: #fff;
  border-color: #3a3a40;
}

/* Bottom pager should hug the left */
.pager--bottom{
  justify-content: flex-start;            /* <- left aligned */
  margin-top: 12px;
}

/* Mobile niceties */
@media (max-width: 560px){
  .results-bar{
    gap: 8px;
  }
  .results-bar .pager{
    margin-left: 0;                        /* keep them stacked left on phones */
  }
  .pager button,
  .pager a[role="button"]{
    min-width: 32px;
    height: 28px;
    line-height: 28px;
  }
}

/* ===== Results row with inline pager ===== */
.results-bar{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* make sure the count text hugs the left */
.results-bar > span:first-child{
  margin-right: 8px;
}

/* push the top pager all the way to the right */
.results-bar .pager{
  margin-left: auto;
}

/* optional: ensure the top pager uses same compact spacing as your theme */
.results-bar .pager .pg{
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #2a2a30;
  background: #1a1a1f;
}
.results-bar .pager .pg.current{
  background: #2a2a30;
}
.results-bar .pager .pg.disabled{
  opacity:.5;
  pointer-events:none;
}

/* === Mobile portrait: compact track cards === */
@media (max-width: 560px) and (orientation: portrait){
  /* Card spacing */
  .tracks{ gap: 10px; }

  .track{
    padding: 10px;
    gap: 8px;
    border-radius: 10px;
  }

  /* Play button + art a bit smaller */
  .t-ctrl button{ width: 32px; height: 32px; }
  .t-art{ width: 48px; height: 48px; border-radius: 8px; }

  /* Title + chips more compact */
  .t-title h4{
    font-size: 16px;         /* was larger */
    margin: 0 0 2px;
  }
  .meta{
    gap: 6px;
    font-size: 12px;
  }
  .meta .chip{
    padding: 2px 6px;
    font-size: 11px;
  }

  /* Waveform shorter */
  .t-wave{
    height: 32px;            /* was 44px */
    border-radius: 6px;
  }
  .t-time{
    right: 6px;
    bottom: 4px;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
  }

  /* Action buttons tighter */
  .t-actions{ gap: 8px; }
  .buy-btn{
    padding: 8px 10px;       /* was ~10px 14px */
    font-size: 13px;
    border-radius: 999px;
  }

  /* Keep menus usable on phones */
  .buy-menu{
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  /* Minor touch: consistent separators */
  .ctrl .sep{ margin: 0 4px; }
}

/* === Mobile portrait: right-align action buttons === */
@media (max-width: 560px) and (orientation: portrait){
  .t-actions{
    justify-content: flex-end;   /* push buttons to the right */
    gap: 8px;
  }
}

/* === Phase 4 — Buy menu: disabled/unavailable + busy state (append to end) === */

/* Visually disable items that have neither priceId nor URL */
.buy-menu .item.disabled,
.buy-menu .item[aria-disabled="true"]{
  opacity: .45;
  pointer-events: none;           /* no clicks */
  cursor: not-allowed;
}

/* “Coming soon” hint styling in the subtext */
.buy-menu .item .sub .coming{
  color: #cfd0d8;
  opacity: .9;
  font-style: italic;
}

/* Busy state while starting checkout (prevents double clicks) */
.buy-menu .item.busy,
.buy-menu .item[aria-busy="true"]{
  position: relative;
  opacity: .7;
  pointer-events: none;
}

/* Minimal spinner anchored on the right edge of the row */
.buy-menu .item.busy::after,
.buy-menu .item[aria-busy="true"]::after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #303038;                  /* neutral ring */
  border-top-color: var(--accent, #f5c048);   /* accent sweep */
  animation: twf-spin .8s linear infinite;
}

@keyframes twf-spin { 
  to { transform: translateY(-50%) rotate(360deg); } 
}

/* --- Red theme override for MP3 vs WAV info pill --- */
#mp3wav-trigger.info-link{
  /* border + outer glow ring */
  border-color: rgba(255, 77, 79, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(255, 77, 79, 0.18),
    inset 0 0 0 1px rgba(255, 77, 79, 0.22) !important;
}

#mp3wav-trigger.info-link:hover,
#mp3wav-trigger.info-link:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255, 77, 79, 0.26),
    inset 0 0 0 1px rgba(255, 77, 79, 0.28) !important;
  border-color: rgba(255, 77, 79, 0.65) !important;
}

#mp3wav-trigger .qmark{
  /* badge background, border, and subtle glow */
  background: rgba(255, 77, 79, 0.16) !important;
  border: 1px solid rgba(255, 77, 79, 0.55) !important;
  color: #ffe7e7 !important;
  text-shadow: 0 0 8px rgba(255, 77, 79, 0.55);
  box-shadow:
    0 0 18px rgba(255, 77, 79, 0.35),
    inset 0 0 0 1px rgba(255, 77, 79, 0.15) !important;
}