/* ============================================================
   JNRIROHA — BEAT TAPES
   Design tokens — dark editorial / amber-glow system
   ============================================================ */
:root{
  --ink:        #0B0A09;   /* page background — near black, warm */
  --panel:      #131110;   /* card / panel surface */
  --panel-2:    #1B1714;   /* hover surface */
  --line:       #29241F;   /* hairline borders */
  --paper:      #F5F1E9;   /* primary text — warm white */
  --paper-dim:  #8C8781;   /* secondary / meta text */
  --amber:      #DD7A2E;   /* primary accent */
  --amber-dim:  #A85C1E;   /* darker amber, subtle */
  --rec:        #C1443B;
  --violet:     #8C7CF0;   /* Trackout/Stems tier accent in the license picker — kept distinct from amber so the three tiers read at a glance */

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius: 18px;
  --radius-sm: 8px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  overflow-x:hidden;
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode:overlay;
  background-attachment:fixed;
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px; /* space for fixed player */
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:1320px; margin:0 auto; }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:100%; z-index:60;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .08s linear;
  box-shadow:0 0 8px rgba(221,122,46,.6);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,10,9,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:1320px; margin:0 auto;
}
.brand{
  display:flex; align-items:center;
}
.brand-logo{
  height:34px; width:auto; display:block;
  transition:filter .2s ease, transform .2s ease;
}
.brand:hover .brand-logo{ filter:drop-shadow(0 0 10px rgba(221,122,46,.45)); transform:scale(1.03); }

.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{
  position:relative;
  font-family:var(--font-display);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim);
  padding-bottom:2px;
  transition:color .15s;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--amber);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.16,.8,.3,1);
}
.nav-links a:hover{ color:var(--amber); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.active{ color:var(--amber); }

.nav-toggle{
  display:none; position:relative;
  width:38px; height:38px;
  background:none; border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .2s ease;
}
.nav-toggle:hover{ border-color:var(--amber-dim); }
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:1.5px; background:var(--paper);
  border-radius:1px;
  transition:transform .25s cubic-bezier(.16,.8,.3,1), opacity .2s ease, background .2s ease;
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:18.5px; }
.nav-toggle span:nth-child(3){ top:23px; }
.nav-toggle.open span{ background:var(--amber); }
.nav-toggle.open span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width:720px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; z-index:39;
    background:var(--ink); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition:max-height .2s ease;
  }
  .nav-links.open{ max-height:320px; }
  .nav-links a{ width:100%; padding:16px 24px; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; }
}

/* ============================================================
   GENRE BAR — sticky horizontal filter chips below the main nav
   ============================================================ */
.genre-bar{
  position:sticky; top:71px; z-index:38;
  background:rgba(11,10,9,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.genre-bar-inner{
  max-width:1320px; margin:0 auto;
  display:flex; gap:30px; align-items:center;
  padding:16px 32px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.genre-bar-inner::-webkit-scrollbar{ display:none; }
.genre-bar-inner .tag{ flex:0 0 auto; }
.genre-bar-inner .tag{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 1px 10px; margin-bottom:-1px;
  border:none; border-bottom:1.5px solid transparent; border-radius:0;
  background:transparent; color:var(--paper-dim); font-weight:500;
}
.genre-bar-inner .tag:hover{
  background:transparent; color:var(--paper); border-bottom-color:var(--line); transform:none;
}
.genre-bar-inner .tag.active{
  background:transparent; color:var(--amber); font-weight:600;
  border-bottom-color:var(--amber);
}
@media (max-width:720px){
  .genre-bar-inner{ padding:14px 20px; gap:22px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1;
  min-height:92vh;
  display:flex; align-items:center;
  padding:140px 24px 96px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-20%; left:50%; width:1280px; height:620px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(221,122,46,.19) 0%, rgba(221,122,46,0) 68%);
  pointer-events:none;
  animation:heroDrift 12s ease-in-out infinite;
  z-index:0;
}
@keyframes heroDrift{
  0%, 100%{ transform:translateX(-50%) translateY(0) scale(1); opacity:.85; }
  50%{ transform:translateX(-46%) translateY(18px) scale(1.06); opacity:1; }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 60% at 50% 100%, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 70%);
  pointer-events:none;
  z-index:1;
}
.hero-inner{ max-width:1320px; width:100%; margin:0 auto; position:relative; z-index:2; }
.hero-copy{ max-width:640px; }

/* Cinematic studio background image — fills the entire hero section */
.hero-bg{
  position:absolute;
  top:-70px; left:0; right:0; bottom:-70px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  will-change:transform;
}
.hero-bg-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
  transform:scale(1.14);
  animation:heroImgSettle 2.2s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes heroImgSettle{
  from{ transform:scale(1.14); opacity:.75; }
  to{ transform:scale(1.05); opacity:1; }
}
.hero-bg-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,10,9,.92) 0%, rgba(11,10,9,.8) 38%, rgba(11,10,9,.68) 68%, rgba(11,10,9,.84) 100%),
    linear-gradient(180deg, rgba(11,10,9,.4) 0%, rgba(11,10,9,0) 32%, rgba(11,10,9,.3) 78%, rgba(11,10,9,.7) 100%);
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-img{ animation:none; transform:scale(1.02); opacity:1; }
}
@media (max-width:900px){
  .hero-bg-img{ object-position:78% 50%; animation-name:heroImgSettleMobile; }
}
@keyframes heroImgSettleMobile{
  from{ transform:scale(1.05); opacity:.75; }
  to{ transform:scale(1.01); opacity:1; }
}
@media (max-width:720px){
  .hero{ min-height:82vh; padding:120px 20px 72px; }
  .hero-copy{ max-width:100%; }
}

/* Drifting tape-dust particles behind the hero copy */
.hero-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-particles i{
  position:absolute; bottom:-10%; display:block; border-radius:50%;
  background:var(--amber); opacity:0; filter:blur(.3px);
  animation:particleUp linear infinite;
}
@keyframes particleUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.55; }
  90%{ opacity:.35; }
  100%{ transform:translateY(-620px) translateX(var(--drift, 30px)); opacity:0; }
}
.eyebrow{
  font-family:var(--font-display); font-style:italic; font-size:14px;
  color:var(--amber); margin-bottom:16px;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--rec); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(193,68,59,.18);
  animation:recBlink 2.4s ease-in-out infinite;
}
@keyframes recBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(48px, 9vw, 92px);
  line-height:1; letter-spacing:.01em;
  color:var(--paper);
}
.hero h1 span{ color:var(--amber); }

.hero-sub{
  margin-top:20px; max-width:520px;
  color:var(--paper-dim); font-size:16px;
}

/* Unified spec card — catalog stats + pricing, one coherent surface */
.specs-card{
  margin-top:36px;
  max-width:440px;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, rgba(19,17,16,.97), rgba(11,10,9,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
  isolation:isolate; /* keep hero particles from bleeding through */
}
.specs-card::before{
  content:""; display:block; height:2px;
  background:linear-gradient(90deg, transparent, var(--amber-dim) 20%, var(--amber) 50%, var(--amber-dim) 80%, transparent);
  opacity:.6;
}
.specs-row{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 22px;
  border-bottom:1px solid var(--line);
}
.specs-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(245,241,233,.4); flex-shrink:0;
}
.specs-value{
  font-family:var(--font-mono); font-size:14px; font-weight:500;
  color:var(--amber); letter-spacing:.02em; text-align:right;
  font-variant-numeric:tabular-nums;
}
.specs-tags{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px;
}
.tag{
  font-family:var(--font-mono);
  font-size:11px; line-height:1; padding:6px 13px;
  border:1px solid var(--amber-dim); border-radius:999px;
  background:rgba(221,122,46,.07); color:var(--amber);
  white-space:nowrap; cursor:pointer; letter-spacing:.02em;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tag:hover{ background:rgba(221,122,46,.18); transform:translateY(-1px); }
.tag.active{ background:var(--amber); color:var(--ink); font-weight:600; border-color:var(--amber); }

.genre-filter-status{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-12px 0 24px;
  font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);
}
.genre-filter-status strong{ color:var(--amber); font-weight:600; }
.genre-filter-status button{
  font-family:var(--font-mono); font-size:11px; color:var(--paper-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.genre-filter-status button:hover{ color:var(--paper); border-color:var(--amber-dim); }

.specs-divider{ height:1px; background:var(--line); }
.specs-currency{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px;
  background:rgba(0,0,0,.22);
}
.currency-note{
  margin:0; padding:0 22px 18px;
  font-family:var(--font-mono); font-size:11px; color:rgba(245,241,233,.4);
  background:rgba(0,0,0,.22);
}

@media (max-width:480px){
  .specs-card{ max-width:100%; }
  .specs-row{ flex-direction:column; align-items:flex-start; gap:9px; }
  .specs-value{ text-align:left; }
  .specs-tags{ justify-content:flex-start; }
  .specs-currency{ flex-direction:column; align-items:flex-start; gap:12px; }
}

.currency-toggle{
  display:inline-flex; gap:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:3px;
}
.currency-option{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em;
  color:var(--paper-dim); background:transparent; border:none; cursor:pointer;
  padding:8px 18px; border-radius:999px; transition:background .15s ease, color .15s ease;
}
.currency-option:hover{ color:var(--paper); }
.currency-option.active{ background:var(--amber); color:var(--ink); font-weight:600; }

/* ============================================================
   TICKER — scrolling marquee band
   ============================================================ */
.ticker{
  border-bottom:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
  white-space:nowrap;
  position:relative; z-index:1;
}
.ticker-track{
  display:inline-flex; gap:0;
  animation:tickerScroll 26s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-dim); padding:12px 28px; border-right:1px solid var(--line);
}
.ticker-track span::before{ content:"●"; color:var(--amber); font-size:7px; }
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
}

/* ============================================================
   BEATS SECTION — glow cards
   ============================================================ */
.section{ padding:64px 24px; position:relative; z-index:1; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:32px; flex-wrap:wrap; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:18px;
}
.section-head h2{
  font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:.01em;
}
.section-head p{ font-family:var(--font-body); font-size:12px; color:var(--paper-dim); }

.beat-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap:32px 28px;
  max-width:1320px; margin:0 auto;
  align-items:start;
}

.beat-card{ position:relative; }

.beat-thumb{
  position:relative;
  aspect-ratio:16/8;
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 90% at 30% 100%, rgba(221,122,46,.55) 0%, rgba(221,122,46,0) 60%),
    var(--panel);
  border:1px solid var(--line);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.65), inset 0 0 0 1px rgba(245,241,233,.03);
  overflow:hidden;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
/* When a beat has cover art, it sits behind the same gradient/scanline/spotlight
   treatment (now partially transparent) so every card keeps the tape-deck look
   while still showing the actual artwork. */
.beat-thumb.has-cover{
  background:
    linear-gradient(180deg, rgba(11,10,9,.15) 0%, rgba(11,10,9,.75) 100%),
    radial-gradient(ellipse 70% 90% at 30% 100%, rgba(221,122,46,.28) 0%, rgba(221,122,46,0) 60%),
    var(--cover-url) center/cover no-repeat,
    var(--panel);
}
.beat-thumb.has-cover::before{ mix-blend-mode:multiply; opacity:.6; }
.beat-thumb::before{
  /* faint scanline grain — the tape-hiss texture behind every thumb */
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
/* Spotlight that tracks the cursor — position set via --mx/--my by JS */
.beat-thumb{ --mx:50%; --my:50%; }
.beat-thumb .spotlight{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(245,241,233,.14) 0%, rgba(245,241,233,0) 45%);
  opacity:0; transition:opacity .3s ease;
}
.beat-thumb:hover .spotlight{ opacity:1; }
.beat-thumb::after{
  /* static waveform silhouette along the base of the thumb — idle when nothing plays */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background-image:repeating-linear-gradient(90deg,
    rgba(245,241,233,.16) 0px, rgba(245,241,233,.16) 2px,
    transparent 2px, transparent 5px);
  -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.9));
  mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.9));
  opacity:.5;
  pointer-events:none;
}
.beat-card:nth-child(3n+2) .beat-thumb{
  background:
    radial-gradient(ellipse 70% 90% at 70% 100%, rgba(139,90,220,.42) 0%, rgba(139,90,220,0) 60%),
    var(--panel);
}
.beat-card:nth-child(3n) .beat-thumb{
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(221,122,46,.4) 0%, rgba(221,122,46,0) 60%),
    var(--panel);
}

.play-btn{
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(245,241,233,.35); background:rgba(11,10,9,.55);
  backdrop-filter:blur(4px);
  color:var(--paper); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, border-color .15s, transform .15s;
}
.play-btn:hover{ border-color:var(--amber); transform:scale(1.05); }
.beat-card.playing .play-btn{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

.icon-btn{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(245,241,233,.25); background:rgba(11,10,9,.5);
  color:var(--paper-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{ border-color:var(--amber); color:var(--amber); }

.beat-badges{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; flex-wrap:wrap; gap:6px;
}
.beat-badge{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; font-weight:600;
  background:rgba(11,10,9,.65); backdrop-filter:blur(3px);
  border:1px solid rgba(245,241,233,.18); color:var(--paper);
}
.beat-badge.featured{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.beat-badge.new{ background:rgba(60,217,160,.85); border-color:rgba(60,217,160,.85); color:var(--ink); }
.beat-badge.trending{ background:rgba(139,90,220,.85); border-color:rgba(139,90,220,.85); color:var(--paper); }
.beat-badge.sold{ background:var(--rec); border-color:var(--rec); color:var(--paper); }

.beat-card.is-sold .beat-thumb{ filter:grayscale(.65) brightness(.75); }
.beat-card.is-sold .play-btn{ opacity:.6; }
.beat-card.is-sold .beat-title{ color:var(--paper-dim); }
.buy-btn:disabled{ opacity:.5; cursor:not-allowed; }
.buy-btn:disabled:hover{ transform:none; }

.beat-info{ padding:18px 4px 0; }
.beat-genre{ font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--paper-dim); }
.beat-title{
  font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:.02em; margin-top:2px; color:var(--paper);
  text-transform:uppercase;
}
.beat-card.playing .beat-title{ color:var(--amber); }
.beat-tags{
  font-family:var(--font-body); font-size:12px; letter-spacing:.06em; color:var(--paper-dim);
  margin-top:6px; text-transform:uppercase;
}

.beat-footer{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:16px; gap:16px;
}
.beat-price{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--paper); }
.beat-price .from{ font-style:italic; font-weight:400; font-size:14px; color:var(--paper-dim); margin-right:4px; }
.beat-license-label{
  font-family:var(--font-body); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-dim); margin-top:2px; font-weight:400;
}

.buy-btn{
  position:relative; overflow:hidden;
  font-family:var(--font-display); font-style:italic; font-size:15px;
  border:1.5px solid var(--amber); color:var(--amber); background:transparent;
  padding:11px 26px; border-radius:999px; cursor:pointer;
  transition:background .15s, color .15s, box-shadow .2s;
  white-space:nowrap;
}
.buy-btn::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.buy-btn:hover::before{ left:130%; }
.buy-btn:hover{ background:var(--amber); color:var(--ink); box-shadow:0 8px 22px -8px rgba(221,122,46,.55); }
.buy-btn:active{ transform:scale(.97); }

/* Checkout status line — pulses on every update so a state change (e.g.
   "Setting up payment…" -> "Payment received…") actually gets noticed
   instead of quietly swapping small gray text. */
.checkout-status.status-flash{ animation:statusFlash .7s ease; }
@keyframes statusFlash{
  0%{ transform:scale(1.05); text-shadow:0 0 10px rgba(221,122,46,.6); }
  100%{ transform:scale(1); text-shadow:none; }
}
.checkout-status::before{
  content:"";
  display:none;
}
.checkout-status.is-loading::before{
  content:"";
  display:inline-block;
  width:11px; height:11px; margin-right:7px;
  border:2px solid rgba(221,122,46,.35); border-top-color:var(--amber);
  border-radius:50%; vertical-align:-1px;
  animation:statusSpin .7s linear infinite;
}
@keyframes statusSpin{ to{ transform:rotate(360deg); } }

/* ---------------- Form fields (contact form, checkout modal) ---------------- */
.field-input, .field-textarea, .field-select{
  width:100%; background:rgba(0,0,0,.28); border:1px solid var(--line); color:var(--paper);
  padding:12px 14px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14px;
  transition:border-color .15s, background .15s;
}
.field-input::placeholder, .field-textarea::placeholder{ color:var(--paper-dim); }
.field-textarea{ resize:vertical; }
.field-input:focus, .field-textarea:focus, .field-select:focus{
  outline:none; border-color:var(--amber); background:rgba(0,0,0,.4);
}
.field-note{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--paper-dim);
  display:block; margin-bottom:6px;
}
.checkout-overlay{
  position:fixed; inset:0; z-index:70;
  background:rgba(13,12,11,.85);
  display:none; /* JS flips this to flex on open */
  align-items:center; justify-content:center;
  padding:20px;
}

.modal-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  max-width:420px; width:100%; padding:28px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}

/* Below ~640px the license modal stops being a floating card and becomes
   a full-screen sheet instead: edge-to-edge, no backdrop margin, no gap
   for the page behind it to show through. This is a deliberate design
   choice, not just a scroll-lock patch — on a phone there's no reason to
   render this as a "dialog floating over a page" at all; the checkout
   *is* the page for as long as it's open. */
@media (max-width:640px){
  .checkout-overlay{ padding:0; align-items:stretch; justify-content:stretch; }
}

/* ---------------- License picker (checkout modal) ----------------
   Restyled from a row of bright button-pills into something closer to a
   certificate / boarding pass: hairline list rows with a radio dot, serif
   italic prices, a wax-seal monogram in the header (this is, literally,
   the start of the license certificate the buyer receives by email), and
   a perforated "tear line" ahead of the total — a nod to the tape-deck /
   physical-release language used everywhere else on the site. */
.license-modal{
  /* min() against the real viewport (not a % of whatever the flex parent
     resolves to) so the panel can never be wider than the screen, even on
     mobile browsers that miscalculate the flex parent's box. */
  width:min(440px, calc(100vw - 32px));
  max-width:440px;
  max-height:min(88vh, 88dvh);
  overflow-y:auto;
  overflow-x:hidden;
  touch-action:pan-y;
  overscroll-behavior:contain;
  padding:0 20px 22px;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--amber-dim);
}
@media (max-width:640px){
  .license-modal{
    width:100vw;
    max-width:100vw;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    border-radius:0;
    border-top:none;
    box-shadow:none;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
  .license-modal-head{
    padding-top:calc(22px + env(safe-area-inset-top));
  }
}
.license-modal-head{
  /* Sticky so the title + close button are always reachable, even once
     the picker/terms below have been scrolled past on a short screen. */
  position:sticky; top:0; z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin:0 -20px 18px; padding:22px 20px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.license-modal-title{ display:flex; align-items:center; gap:12px; min-width:0; }
.license-modal-title-text{ min-width:0; }
.license-seal{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--amber-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.03em;
  color:var(--amber);
  background:radial-gradient(circle at 35% 30%, rgba(221,122,46,.16), rgba(221,122,46,.02));
  box-shadow:inset 0 0 0 1px rgba(221,122,46,.15);
}
.license-modal-eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-dim); margin-bottom:3px;
}
.license-modal-head h3{
  font-family:var(--font-display); font-size:19px; font-weight:700;
  min-width:0; overflow-wrap:break-word;
}
.license-modal-x{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--paper-dim); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;
}
.license-modal-x:hover{ border-color:var(--amber-dim); color:var(--amber); }

.license-modal-sub{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:13px; color:var(--paper-dim); margin-bottom:14px;
}
.license-modal-trust{
  display:flex; align-items:center; gap:6px; flex:none;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-dim);
}
.license-modal-trust svg{ width:14px; height:14px; flex:none; color:var(--amber-dim); }

.license-picker{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.license-pick-card{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:12px;
  width:100%; text-align:left; cursor:pointer;
  background:rgba(245,241,233,.015); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px; transition:background .15s, border-color .15s;
  font-family:var(--font-body); color:var(--paper);
}
.license-pick-card:hover{ border-color:var(--amber-dim); }
.license-pick-card.selected{
  background:rgba(221,122,46,.06); border-color:var(--amber);
  box-shadow:0 0 0 1px var(--amber);
}
/* Radio dot */
.license-pick-card::before{
  content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--paper-dim); background:transparent;
  transition:background .15s, border-color .15s, box-shadow .2s;
}
.license-pick-card.selected::before{
  border-color:var(--amber); background:var(--amber);
  box-shadow:0 0 0 3px rgba(221,122,46,.16), inset 0 0 0 3px var(--panel);
}
/* Corner checkmark ribbon on the selected tier */
.license-pick-card.selected::after{
  content:"✓"; position:absolute; top:0; right:0;
  width:0; height:0;
  border-style:solid; border-width:0 30px 30px 0; border-color:transparent var(--amber) transparent transparent;
  color:var(--ink); font-size:11px; font-weight:700; line-height:1;
  text-align:right; padding:3px 3px 0 0;
}
.license-pick-icon{
  flex:none; width:38px; height:38px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--amber-dim); background:rgba(221,122,46,.08); color:var(--amber);
}
.license-pick-icon svg{ width:18px; height:18px; }
.license-pick-icon.accent-violet{ border-color:var(--violet); background:rgba(140,124,240,.1); color:var(--violet); }
.license-pick-icon.accent-fill{ border:none; background:var(--amber); color:var(--ink); }
.license-pick-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.license-pick-badge{
  display:inline-flex; align-items:center; gap:4px; margin-bottom:2px;
  padding:2px 9px; border-radius:999px; width:fit-content;
  border:1px solid var(--amber-dim); background:rgba(221,122,46,.12);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); font-weight:700;
}
.license-pick-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.license-pick-name{
  overflow-wrap:break-word; font-size:13.5px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--paper);
}
.license-pick-flag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--amber-dim); font-family:var(--font-mono); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber); vertical-align:1px;
}
.license-pick-sub{ font-family:var(--font-body); font-size:12px; color:var(--paper-dim); line-height:1.4; }
.license-pick-blurb{ font-family:var(--font-body); font-size:12px; color:var(--paper-dim); line-height:1.4; }
.license-pick-price{
  flex:none; align-self:flex-start; margin-left:8px;
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:17px; color:var(--amber); white-space:nowrap;
}
/* Most phones (iPhone/Android) render at ~360-430px CSS width, and a long
   title like "Trackout / Stems License" plus a 6-digit price is genuinely
   tight at that size — trim the price further rather than let it force the
   name column down to an uncomfortable width. */
@media (max-width:430px){
  .license-pick-price{ font-size:14.5px; }
}
.license-pick-card.accent-violet .license-pick-price{ color:var(--violet); }

/* ---------------- Two-step checkout (pick license -> form) ---------------- */
.checkout-back-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; padding:0; margin-bottom:14px; cursor:pointer;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper-dim); transition:color .15s;
}
.checkout-back-btn svg{ width:14px; height:14px; flex:none; }
.checkout-back-btn:hover{ color:var(--amber); }
.checkout-selected-summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border:1px solid var(--amber-dim); border-radius:var(--radius-sm);
  background:rgba(221,122,46,.06); padding:12px 14px; margin-bottom:14px;
}
.checkout-selected-name{
  font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--paper);
}
.checkout-selected-price{
  font-family:var(--font-display); font-style:italic; font-weight:700; font-size:17px;
  color:var(--amber); white-space:nowrap;
}

/* ---------------- Trust box (Korapay / Heleket / Free) ---------------- */
.checkout-trust-box{
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;
  margin-bottom:14px; background:rgba(245,241,233,.015);
}
.checkout-trust-icon{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--amber-dim); background:rgba(221,122,46,.08); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.checkout-trust-icon svg{ width:17px; height:17px; }
.checkout-trust-text{ flex:1 1 auto; min-width:0; }
.checkout-trust-text strong{ display:block; font-size:13px; color:var(--paper); margin-bottom:3px; }
.checkout-trust-text span{ display:block; font-family:var(--font-body); font-size:12px; color:var(--paper-dim); line-height:1.4; }
.checkout-trust-wordmark{
  flex:none; align-self:center; font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:13px; color:var(--amber-dim); white-space:nowrap;
}

.usage-terms{
  border:1px solid var(--line); border-radius:var(--radius-sm); margin:0 0 16px; overflow:hidden;
}
.usage-terms-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border:none; padding:13px 16px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--paper-dim);
}
.usage-terms-toggle-label{ display:flex; align-items:center; gap:8px; }
.usage-terms-toggle-label svg{ width:15px; height:15px; flex:none; color:var(--amber-dim); }
.usage-terms-chevron{ color:var(--paper-dim); font-size:12px; }
.usage-terms-body{ padding:18px 16px 16px; }
.usage-terms-tier{
  font-family:var(--font-display); font-style:italic; font-size:15px; font-weight:700; color:var(--amber);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.usage-terms-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
}
.term-item{ display:flex; align-items:flex-start; gap:9px; }
.term-icon{
  flex:none; width:16px; height:16px; margin-top:1px; color:var(--amber-dim);
}
.term-icon svg{ width:100%; height:100%; }
.term-text{ font-family:var(--font-body); font-size:12.5px; color:var(--paper-dim); line-height:1.35; }
@media (max-width:420px){ .usage-terms-grid{ grid-template-columns:1fr; } }

/* ---------------- Name / email fields ---------------- */
.checkout-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.checkout-field{ display:flex; flex-direction:column; gap:6px; }
.checkout-field-label{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--paper-dim);
}
.checkout-field-label svg{ width:13px; height:13px; flex:none; color:var(--amber-dim); }
@media (max-width:460px){ .checkout-field-grid{ grid-template-columns:1fr; } }

.checkout-privacy-note{
  display:flex; align-items:flex-start; gap:7px;
  font-family:var(--font-body); font-size:11.5px; color:var(--paper-dim); line-height:1.4; margin-bottom:2px;
}
.checkout-privacy-note svg{ width:13px; height:13px; flex:none; margin-top:1.5px; color:var(--paper-dim); }

/* Perforated "tear line" ahead of the total — same idea as a boarding
   pass or ticket stub, appropriate for a checkout that's about to hand
   over a license certificate. */
.checkout-footer-row{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:18px; margin-top:4px;
}
.checkout-footer-row::before{
  content:"";
  position:absolute; top:0; left:-20px; right:-20px; height:1px;
  background-image:radial-gradient(circle, var(--line) 1.4px, transparent 1.6px);
  background-size:9px 1px; background-repeat:repeat-x;
}
.checkout-total-block{ flex:1 1 auto; min-width:0; }
.checkout-total-label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim);
}
.checkout-total-amount{
  display:block; font-family:var(--font-display); font-style:italic; font-size:26px; font-weight:700; color:var(--amber); line-height:1.3;
}
.checkout-total-sub{ font-family:var(--font-body); font-size:11.5px; color:var(--paper-dim); }
.checkout-footer-actions{ flex:1 1 220px; display:flex; flex-direction:column; gap:8px; }
.checkout-pay-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--panel-2); border-color:var(--amber-dim);
  white-space:normal; width:100%;
}
.checkout-pay-btn:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.checkout-pay-btn svg{ width:15px; height:15px; }
.checkout-cancel-btn{
  position:static; width:100%; height:auto; padding:11px 16px; border-radius:999px; border-color:var(--line);
}

.checkout-trust-footer{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
}
.checkout-trust-footer span{
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--paper-dim);
}
.checkout-trust-footer svg{ width:11px; height:11px; flex:none; color:var(--amber-dim); }

/* Sticks the total/buttons/status to the bottom of the modal's scroll area,
   the same way .license-modal-head sticks to the top — so the pay button
   is always reachable on a short mobile screen without scrolling all the
   way down past the picker and usage terms. */
.license-modal-footer{
  position:sticky; bottom:0; z-index:3;
  margin:0 -20px -22px; padding:10px 20px 16px;
  background:var(--panel);
  border-top:1px solid var(--line);
}
.license-modal-footer .icon-btn{ border-color:var(--line); }

/* Still used by the simpler sample-pack checkout modal (sample-packs.php),
   which wasn't part of the beat-license-modal redesign above. */
.license-gateway-note{
  font-family:var(--font-display); font-style:italic; font-size:12.5px; color:var(--paper-dim); margin-bottom:16px; line-height:1.5;
}
.license-total-row{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:18px; margin-top:4px;
}
.license-total-row::before{
  content:"";
  position:absolute; top:0; left:-20px; right:-20px; height:1px;
  background-image:radial-gradient(circle, var(--line) 1.4px, transparent 1.6px);
  background-size:9px 1px; background-repeat:repeat-x;
}
.license-total-row span:first-child{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim);
}
.license-total-row span:last-child{
  font-family:var(--font-display); font-style:italic; font-size:22px; font-weight:700; color:var(--amber);
}
.license-modal-footer .buy-btn{
  background:var(--panel-2); border-color:var(--amber-dim);
}
.license-modal-footer .buy-btn:hover{
  background:var(--amber); border-color:var(--amber); color:var(--ink);
}

/* ---------------- Success / receipt panel (checkout modal) ----------------
   Shown in place of the picker + form once payment is confirmed. Mirrors the
   modal header's seal motif at a larger scale and reuses the perforated
   "tear line" from the total row, so the whole purchase — pick, pay,
   receive — reads as one continuous certificate rather than a form that
   quietly grows a link underneath the button. */
.license-success{
  text-align:center;
  padding:8px 2px 4px;
}
.success-seal{
  width:56px; height:56px; margin:6px auto 18px; border-radius:50%;
  border:1px solid var(--amber);
  background:radial-gradient(circle at 35% 30%, rgba(221,122,46,.2), rgba(221,122,46,.03));
  box-shadow:inset 0 0 0 1px rgba(221,122,46,.18), 0 0 24px -6px rgba(221,122,46,.45);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:22px; color:var(--amber);
}
.success-heading{
  font-family:var(--font-display); font-style:italic; font-weight:700; font-size:21px;
  color:var(--paper); margin-bottom:8px;
}
.success-sub{
  font-family:var(--font-body); font-size:13px; color:var(--paper-dim); line-height:1.5;
  max-width:320px; margin:0 auto 22px;
}
.success-sub strong{ color:var(--paper); font-weight:600; }

.receipt{
  text-align:left;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 2px; margin-bottom:22px;
}
.receipt-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:5px 0;
}
.receipt-row span:first-child{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim);
}
.receipt-row span:last-child{
  font-family:var(--font-display); font-style:italic; font-size:14.5px; font-weight:700; color:var(--paper);
  text-align:right; overflow-wrap:break-word; margin-left:auto;
}

.success-actions{ display:flex; gap:10px; margin-bottom:18px; }
.success-btn{
  flex:1; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:14px;
  padding:12px 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--amber); background:var(--amber); color:var(--ink);
  transition:opacity .15s;
}
.success-btn:hover{ opacity:.88; }
.success-btn-ghost{
  background:transparent; color:var(--amber);
}
.success-btn-ghost:hover{ background:rgba(221,122,46,.08); opacity:1; }

.success-note{
  font-family:var(--font-mono); font-size:10.5px; line-height:1.6; color:var(--paper-dim);
  margin-bottom:18px;
}
.success-note a{ color:var(--amber); }

.success-close-btn{
  display:block; margin:0 auto; background:transparent; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); padding:6px; transition:color .15s;
}
.success-close-btn:hover{ color:var(--amber); }

.counter{ display:none; } /* not used in card layout, kept for JS compatibility */

@media (max-width:600px){
  .beat-title{ font-size:22px; }
  .beat-price{ font-size:19px; }
}

/* ============================================================
   FIXED PLAYER (tape deck)
   ============================================================ */
.deck{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(19,17,16,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  box-shadow:0 -24px 50px -20px rgba(0,0,0,.55);
  transform:translateY(100%); transition:transform .25s ease;
}
.deck.active{ transform:translateY(0); }

.deck-inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:20px; padding:14px 24px;
}
.deck-track{ min-width:0; }
.deck-track .t{ font-family:var(--font-display); font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deck-track .m{ font-family:var(--font-body); font-size:11px; color:var(--paper-dim); margin-top:2px; }

.deck-controls{ display:flex; align-items:center; gap:14px; }
.deck-btn{
  background:none; border:none; color:var(--paper); cursor:pointer;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  transition:background .15s, color .15s;
}
.deck-btn:hover{ background:var(--panel-2); color:var(--amber); }
.deck-btn.stop:hover{ background:var(--panel-2); color:var(--rec); }
.deck-btn.rewind.spin i{ display:inline-block; animation:spin .5s linear; }
@keyframes spin{ to{ transform:rotate(-180deg); } }
.deck-play{
  width:44px; height:44px; border-radius:50%;
  background:var(--amber); color:var(--ink); border:none; cursor:pointer;
  font-size:15px;
}

.deck-progress{ display:flex; align-items:center; gap:10px; justify-self:end; width:100%; }
.deck-time{ font-family:var(--font-body); font-size:11px; color:var(--paper-dim); width:38px; }
.deck-time.total{ text-align:right; }
.deck-bar{
  flex:1; height:3px; background:var(--line); border-radius:2px;
  position:relative; cursor:pointer;
}
.deck-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--amber); border-radius:2px; }
.deck-bar-knob{
  position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--amber); transform:translate(-50%,-50%); left:0%;
}

@media (max-width:720px){
  .deck-inner{ grid-template-columns:auto 1fr; }
  .deck-progress{ grid-column:1 / -1; order:3; }
  .deck-track{ order:1; }
  .deck-controls{ order:2; }
}

/* ============================================================
   SHARE TOAST
   ============================================================ */
.toast{
  position:fixed; bottom:112px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--amber); color:var(--ink); font-family:var(--font-body); font-size:12px; font-weight:600;
  padding:10px 18px; border-radius:999px; z-index:60;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   GENERIC PAGE (legal pages)
   ============================================================ */
.page-hero{ padding:80px 24px 40px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,6vw,56px); }
.page-hero p{ color:var(--paper-dim); margin-top:12px; font-family:var(--font-body); font-size:13px; }

.legal-body{ max-width:800px; margin:0 auto; padding:56px 24px 100px; }
.legal-body h2{
  font-family:var(--font-display); font-size:21px; font-weight:700; letter-spacing:.01em;
  margin-top:40px; margin-bottom:14px; color:var(--amber);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--paper-dim); font-size:15px; margin-bottom:12px; }
.legal-body ul{ padding-left:20px; }
.legal-body strong{ color:var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative; z-index:1;
  padding:56px 24px 32px;
}
.footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--amber-dim) 50%, transparent);
  opacity:.5;
}
.footer-inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr 1.1fr; gap:32px;
}
.footer-logo{ height:38px; width:auto; margin-bottom:14px; }
.footer p{ color:var(--paper-dim); font-size:13px; max-width:280px; }
.footer-col h4{
  font-family:var(--font-body); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:14px;
}
.footer-col a{
  display:block; font-size:13px; color:var(--paper); padding:6px 0;
  border-bottom:1px solid transparent;
}
.footer-col a:hover{ color:var(--amber); }
.footer-newsletter p{ font-size:12.5px; color:var(--paper-dim); max-width:none; }
.newsletter-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.newsletter-form{ display:flex; gap:8px; flex-wrap:wrap; }
.newsletter-input{
  flex:1 1 140px; min-width:0;
  background:var(--panel-2, #1c1712); border:1px solid var(--line); border-radius:999px;
  padding:9px 14px; font-family:var(--font-body); font-size:13px; color:var(--paper);
}
.newsletter-input::placeholder{ color:var(--paper-faint, #8a8175); }
.newsletter-input:focus{ outline:none; border-color:var(--amber-dim); }
.newsletter-btn{
  flex:0 0 auto;
  background:transparent; border:1px solid var(--amber-dim); border-radius:999px;
  padding:9px 18px; font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:var(--amber); cursor:pointer; white-space:nowrap;
}
.newsletter-btn:hover{ background:var(--amber); color:var(--ink); }
.newsletter-btn:disabled{ opacity:.6; cursor:default; }
.newsletter-msg{ margin:8px 0 0; font-size:12px; min-height:1.4em; }
.newsletter-msg.is-ok{ color:var(--ok, #3fae63); }
.newsletter-msg.is-error{ color:var(--rec, #e2574c); }
.footer-bottom{
  max-width:1320px; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-body); font-size:11px; color:var(--paper-dim);
}
@media (max-width:720px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* focus states */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}

/* ============================================================
   MOTION
   ============================================================ */

/* Hero — staged entrance, quietest thing that could still feel deliberate */
@keyframes fadeRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-copy > *{ opacity:0; animation:fadeRise .7s cubic-bezier(.16,.8,.3,1) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.15s; }
.hero-copy > *:nth-child(2){ animation-delay:.28s; }
.hero-copy > *:nth-child(3){ animation-delay:.42s; }
.hero-copy > *:nth-child(4){ animation-delay:.56s; }
.hero-copy > *:nth-child(5){ animation-delay:.7s; }

/* Scroll reveal — applied via JS (IntersectionObserver adds .is-visible) */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Beat cards — lift + gentle 3D tilt on hover, thumb glow follows */
.beat-thumb{ transition:box-shadow .25s ease, transform .2s ease; transform-style:preserve-3d; }
.beat-card{ --rx:0deg; --ry:0deg; perspective:900px; transition:transform .25s cubic-bezier(.16,.8,.3,1); }
.beat-card:hover{ transform:translateY(-4px); }
.beat-card:hover .beat-thumb{
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 0 0 1px var(--amber-dim), 0 24px 50px -22px rgba(0,0,0,.65), 0 18px 40px -18px rgba(221,122,46,.4);
}

/* Signature: a small amber VU meter standing in for the pause icon while a tape plays —
   the tape-deck idea made literal and kinetic, tucked in the thumb like a real meter light. */
.eq-bars{
  position:absolute; left:14px; bottom:14px; z-index:1;
  display:flex; align-items:flex-end; gap:3px; height:16px;
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.beat-card.audio-playing .eq-bars{ opacity:1; }
.eq-bars i{
  display:block; width:3px; height:20%; border-radius:1px;
  background:var(--amber);
  animation:eqBounce 1s ease-in-out infinite; animation-play-state:paused;
}
.beat-card.audio-playing .eq-bars i{ animation-play-state:running; }
.eq-bars i:nth-child(1){ animation-duration:.82s; animation-delay:-.1s; }
.eq-bars i:nth-child(2){ animation-duration:.6s;  animation-delay:-.32s; }
.eq-bars i:nth-child(3){ animation-duration:.94s; animation-delay:-.52s; }
.eq-bars i:nth-child(4){ animation-duration:.7s;  animation-delay:-.06s; }
@keyframes eqBounce{ 0%, 100%{ height:22%; } 50%{ height:100%; } }

/* A quiet pulse ring on the play button while its track is actually sounding */
.beat-card.audio-playing .play-btn{ animation:pulseRing 1.8s ease-out infinite; }
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(221,122,46,.45); }
  70%{ box-shadow:0 0 0 12px rgba(221,122,46,0); }
  100%{ box-shadow:0 0 0 0 rgba(221,122,46,0); }
}

/* Deck knob glows faintly while the deck is active, like a lit VU indicator */
.deck-bar-knob{ transition:box-shadow .2s ease; }
.deck.active .deck-bar-knob{ box-shadow:0 0 0 4px rgba(221,122,46,.16); }

/* Shared-link landing — a brief amber pulse so the visitor can find the
   exact beat that was shared with them, before it fades back to normal. */
.beat-card.shared-highlight .beat-thumb{
  animation:sharedPulse 1.1s ease-out 2;
}
@keyframes sharedPulse{
  0%{ box-shadow:0 0 0 0 rgba(221,122,46,.6), 0 20px 44px -26px rgba(0,0,0,.65); }
  60%{ box-shadow:0 0 0 10px rgba(221,122,46,0), 0 20px 44px -26px rgba(0,0,0,.65); }
  100%{ box-shadow:0 0 0 0 rgba(221,122,46,0), 0 20px 44px -26px rgba(0,0,0,.65); }
}

/* Checkout modal — restarts automatically each time display flips from none, no JS needed */
#checkoutModal{ animation:modalBgIn .2s ease; overscroll-behavior:contain; }
#checkoutModal > div{ animation:modalPanelIn .25s cubic-bezier(.16,.8,.3,1); }
@keyframes modalBgIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalPanelIn{
  from{ opacity:0; transform:translateY(12px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   HERO — full-bleed cinematic layout, content centered over image
   ============================================================ */
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn-primary{
  position:relative; overflow:hidden;
  font-family:var(--font-display); font-style:italic; font-size:16px;
  background:var(--amber); color:var(--ink); border:1.5px solid var(--amber);
  padding:14px 30px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(221,122,46,.6); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-secondary{
  font-family:var(--font-display); font-style:italic; font-size:16px;
  background:transparent; color:var(--paper); border:1.5px solid var(--line);
  padding:14px 30px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-secondary:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar{
  border-bottom:1px solid var(--line);
  background:var(--panel);
  padding:22px 24px;
  position:relative; z-index:1;
}
.trust-bar-inner{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.trust-item{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--paper-dim);
  text-align:center;
}
.trust-item .ic{ font-size:17px; flex-shrink:0; }
.trust-item strong{ color:var(--paper); font-weight:600; }
@media (max-width:900px){
  .trust-bar-inner{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .trust-bar-inner{ grid-template-columns:1fr; }
}

/* ============================================================
   FEATURE CARDS ("Why JNRIROHA")
   ============================================================ */
.feature-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
  max-width:1320px; margin:0 auto;
}
.feature-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,17,16,.9), rgba(11,10,9,.96));
  padding:26px 22px;
  box-shadow:0 16px 34px -26px rgba(0,0,0,.6);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
  transform:translateY(-4px); border-color:var(--amber-dim);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.65), 0 14px 32px -18px rgba(221,122,46,.3);
}
.feature-icon{ font-size:28px; margin-bottom:16px; }
.feature-card h3{
  font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:8px; color:var(--paper);
}
.feature-card p{ font-family:var(--font-body); font-size:13.5px; color:var(--paper-dim); }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .feature-grid{ grid-template-columns:1fr; } }


/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
  max-width:1320px; margin:0 auto;
}
.testimonial-card{
  flex:0 1 380px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,17,16,.9), rgba(11,10,9,.96));
  padding:26px; box-shadow:0 16px 34px -26px rgba(0,0,0,.6);
}
.testimonial-stars{ color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:14px; }
.testimonial-quote{ font-family:var(--font-display); font-style:italic; font-size:15.5px; color:var(--paper); line-height:1.55; }
.testimonial-author{ margin-top:16px; font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); }
@media (max-width:480px){ .testimonial-card{ flex-basis:100%; } }

/* ---- Review summary + submission form ---- */
.review-summary{
  display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap;
  max-width:1320px; margin:0 auto 34px; padding:22px 26px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,17,16,.9), rgba(11,10,9,.96));
}
.review-summary-score{ font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--paper); line-height:1; }
.review-summary-stars{ color:var(--amber); font-size:16px; letter-spacing:2px; }
.review-summary-count{ font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); margin-top:4px; }
.review-cta{ margin-left:auto; }
@media (max-width:640px){ .review-cta{ margin-left:0; width:100%; } }

.review-form-wrap{
  max-width:560px; margin:0 auto 40px; padding:26px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(19,17,16,.9), rgba(11,10,9,.96));
}
.review-field{ margin-bottom:18px; }
.review-field label{ display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--paper-dim); margin-bottom:8px; }
.review-field input[type="text"], .review-field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:10px;
  color:var(--paper); font-family:var(--font-body); font-size:14px; padding:11px 14px; resize:vertical;
}
.review-field input[type="text"]:focus, .review-field textarea:focus{ outline:none; border-color:var(--amber-dim); }
.star-input{ display:flex; gap:6px; }
.star-input-btn{
  background:none; border:none; cursor:pointer; font-size:26px; line-height:1;
  color:var(--paper-dim); padding:2px; transition:color .12s ease, transform .12s ease;
}
.star-input-btn:hover{ transform:scale(1.1); }
.star-input-btn.active{ color:var(--amber); }
.review-form-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.review-form-msg{ font-family:var(--font-mono); font-size:12px; color:var(--paper-dim); }
.review-form-note{ margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--paper-dim); }

/* ============================================================
   LICENSE / PRICING CARDS
   ============================================================ */
.license-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;
  max-width:1320px; margin:0 auto;
}
.license-card{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
  padding:26px 22px; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease;
}
.license-card:hover{ transform:translateY(-4px); border-color:var(--amber-dim); }
.license-card.is-exclusive{ border-color:var(--amber-dim); background:linear-gradient(180deg, rgba(221,122,46,.08), var(--panel) 60%); }
.license-badge{
  position:absolute; top:-11px; right:20px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--amber); color:var(--ink); padding:4px 10px; border-radius:999px; font-weight:600;
}
.license-card h3{ font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:10px; }
.license-card p{ font-family:var(--font-body); font-size:13px; color:var(--paper-dim); flex:1; margin-bottom:16px; }
.license-card a{
  font-family:var(--font-mono); font-size:12px; color:var(--amber);
  border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; gap:6px;
}
.license-card a:hover{ text-decoration:underline; }
@media (max-width:1100px){ .license-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:900px){ .license-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .license-grid{ grid-template-columns:1fr; } }

/* ============================================================
   LATEST RELEASES — horizontal slider
   ============================================================ */
.slider{
  display:flex; gap:20px; overflow-x:auto; padding:6px 4px 20px;
  scroll-snap-type:x proximity;
  max-width:1320px; margin:0 auto;
  scrollbar-width:thin; scrollbar-color:var(--amber-dim) transparent;
}
.slider::-webkit-scrollbar{ height:6px; }
.slider::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:3px; }
.slide-card{
  scroll-snap-align:start; flex:0 0 260px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden; cursor:pointer;
  transition:transform .2s ease, border-color .2s ease;
}
.slide-card:hover{ transform:translateY(-4px); border-color:var(--amber-dim); }
.slide-thumb{
  aspect-ratio:1/1; position:relative;
  background:radial-gradient(ellipse 70% 90% at 30% 100%, rgba(221,122,46,.5) 0%, rgba(221,122,46,0) 60%), var(--panel-2);
  display:flex; align-items:center; justify-content:center;
}
.slide-card:nth-child(3n+2) .slide-thumb{ background:radial-gradient(ellipse 70% 90% at 70% 100%, rgba(139,90,220,.4) 0%, rgba(139,90,220,0) 60%), var(--panel-2); }
.slide-card:nth-child(3n) .slide-thumb{ background:radial-gradient(ellipse 70% 90% at 50% 0%, rgba(221,122,46,.35) 0%, rgba(221,122,46,0) 60%), var(--panel-2); }
.slide-play{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,241,233,.35);
  background:rgba(11,10,9,.55); color:var(--paper); display:flex; align-items:center; justify-content:center;
}
.slide-new{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--amber); color:var(--ink); padding:3px 9px; border-radius:999px; font-weight:600;
}
.slide-info{ padding:14px; }
.slide-info .g{ font-family:var(--font-display); font-style:italic; font-size:11.5px; color:var(--paper-dim); }
.slide-info .t{ font-family:var(--font-display); font-weight:700; font-size:16px; margin-top:2px; }
.slide-info .p{ font-family:var(--font-mono); font-size:12px; color:var(--amber); margin-top:8px; }

/* ============================================================
   PRODUCER SECTION
   ============================================================ */
.producer-grid{
  display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:center;
  max-width:1320px; margin:0 auto;
}
.producer-portrait{
  aspect-ratio:4/5; border-radius:var(--radius);
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(221,122,46,.3) 0%, rgba(221,122,46,0) 65%),
    var(--panel);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:64px; font-weight:700; color:var(--amber-dim);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.65);
  overflow:hidden;
}
.producer-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;
}
.producer-copy p{ color:var(--paper-dim); font-size:15px; margin-bottom:14px; max-width:640px; }
.producer-copy p:last-child{ margin-bottom:0; }
@media (max-width:800px){
  .producer-grid{ grid-template-columns:1fr; }
  .producer-portrait{ max-width:220px; margin:0 auto; }
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter{
  max-width:1320px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(221,122,46,.16) 0%, rgba(221,122,46,0) 60%),
    linear-gradient(180deg, rgba(19,17,16,.95), rgba(11,10,9,.98));
  padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.newsletter-copy h2{ font-family:var(--font-display); font-size:26px; font-weight:700; margin-bottom:8px; }
.newsletter-copy p{ color:var(--paper-dim); font-size:13.5px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto; }
.newsletter-form input{ min-width:240px; }
@media (max-width:720px){
  .newsletter{ flex-direction:column; align-items:stretch; text-align:center; }
  .newsletter-form{ justify-content:center; }
  .newsletter-form input{ min-width:0; flex:1; }
}

/* ============================================================
   FOOTER SOCIAL
   ============================================================ */
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper-dim); padding:0 !important;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
.footer-social a svg{ display:block; }

/* ============================================================
   CART
   Nav button + slide-in drawer, injected by cart.js. Reuses existing
   tokens/components (--panel, --line, --amber, .buy-btn, .field-input,
   .currency-toggle, .license-success/.receipt) so it reads as part of the
   same certificate-styled checkout rather than a bolted-on widget.
   ============================================================ */
.cart-nav-btn{
  position:relative; flex:none;
  width:38px; height:38px; margin-left:auto; margin-right:18px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--paper-dim); cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.cart-nav-btn:hover{ border-color:var(--amber-dim); color:var(--amber); }
.cart-nav-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--amber); color:var(--ink);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--ink);
}
@media (max-width:720px){ .cart-nav-btn{ margin-right:10px; } }

.cart-overlay{
  position:fixed; inset:0; z-index:75; background:rgba(13,12,11,.72);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:76;
  width:min(400px, 100vw);
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-30px 0 70px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.16,.8,.3,1);
}
.cart-drawer.open{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:20px 20px 16px; border-bottom:1px solid var(--line);
}
.cart-drawer-head h3{
  font-family:var(--font-display); font-size:19px; font-weight:700; flex:1 1 auto;
}
.cart-currency-toggle{ flex:none; }

.cart-drawer-body{ flex:1 1 auto; overflow-y:auto; padding:6px 20px; }
.cart-empty{
  color:var(--paper-dim); font-family:var(--font-body); font-size:13.5px;
  padding:28px 4px; text-align:center;
}
.cart-row{
  display:flex; align-items:center; gap:10px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.cart-row-info{ flex:1 1 auto; min-width:0; }
.cart-row-title{
  font-family:var(--font-display); font-size:14.5px; font-weight:700;
  overflow-wrap:break-word;
}
.cart-row-sub{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--paper-dim); margin-top:2px;
}
.cart-row-price{
  flex:none; font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--amber);
}
.cart-row-remove{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:none; color:var(--paper-dim); font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.cart-row-remove:hover{ border-color:#c94b4b; color:#e07a7a; }

.cart-drawer-foot{ padding:14px 20px 22px; border-top:1px solid var(--line); }
.cart-total-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper-dim);
}
.cart-total-row span:last-child{
  font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--paper); text-transform:none;
}
.cart-clear-btn{
  width:100%; margin-top:10px; background:none; border:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--paper-dim); cursor:pointer; padding:6px 0; text-align:center;
  transition:color .15s ease;
}
.cart-clear-btn:hover{ color:#e07a7a; }

/* "+ Add to cart" text-link buttons used in the beat license modal and on
   sample-pack cards, styled lighter than the primary .buy-btn so they never
   compete with "Confirm purchase" / "Buy now" for attention. */
.cart-add-link{
  background:none; border:none; padding:0; margin-top:8px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--paper-dim); cursor:pointer; text-align:center; width:100%;
  transition:color .15s ease;
}
.cart-add-link:hover{ color:var(--amber); }
.cart-add-hint{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em;
  color:var(--paper-dim); text-align:center; margin-top:8px; opacity:.8;
}
.pack-btn-group{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.pack-cart-add{ width:auto; margin-top:4px; }

@media (max-width:480px){
  .cart-drawer{ width:100vw; }
}