/* shop.css — the ReggaeStems shop (reggaestems.com), 5 Oct 2026. Step 3b of the ReggaeStems
   rebuild. Joe chose this look on the Claude design canvas "ReggaeStems rebrand".
   Same black and text colours as riddimBank (theme-black.css) so nothing new to read; GOLD is
   the one accent. Gold is for buttons (with dark text), prices, kickers and highlights: never
   for long paragraphs. Contrast: gold #E3B341 on #0B0B0C about 10:1; #16120A on gold about 9.6:1. */
:root {
  --rs-bg: #0B0B0C;
  --rs-black: #000000;
  --rs-card: #141416;
  --rs-card-2: #1A1A1D;
  --rs-line: #26262A;
  --rs-line-2: #2C2C31;
  --rs-text: #F5F2EA;
  --rs-text-2: #C8C8C8;
  --rs-muted: #9A9AA0;
  --rs-gold: #E3B341;
  --rs-gold-hi: #F2CC6B;
  --rs-on-gold: #16120A;
  --rs-head: 'Archivo Black', sans-serif;
  --rs-body: Manrope, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.rs { margin: 0; background: var(--rs-bg); color: var(--rs-text); font-family: var(--rs-body); font-size: 16px; line-height: 1.6; }
.rs a { color: var(--rs-gold); }
.rs a:hover { color: var(--rs-gold-hi); }
.rs h1, .rs h2, .rs h3 { font-family: var(--rs-head); font-weight: 400; line-height: 1.1; margin: 0; }
.rs-gold { color: var(--rs-gold); }
.rs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.rs-skip { position: absolute; left: -9999px; }
.rs-skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--rs-gold); color: var(--rs-on-gold); padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 2px; }

/* ---- header ---- */
.rs-header { background: var(--rs-black); border-bottom: 1px solid #1F1F23; position: sticky; top: 0; z-index: 5; }
.rs-header-row { height: 76px; display: flex; align-items: center; gap: 28px; position: relative; }
.rs-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--rs-text) !important; flex: 0 0 auto; }
.rs-mark { width: 38px; height: 38px; display: block; }
.rs-word { font-family: var(--rs-head); font-size: 26px; letter-spacing: -0.01em; line-height: 1; display: flex; }
.rs-nav { display: flex; align-items: center; gap: 26px; flex-grow: 1; }
.rs-nav a { color: var(--rs-text-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.rs-nav a:hover { color: var(--rs-text); }
.rs-nav .rs-rb { margin-left: auto; border: 1px solid var(--rs-line-2); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; }
.rs-menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #1C1C1F; color: var(--rs-text); align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }

/* Phones and small tablets (same edge as riddimBank's phone menu, up to 1023px): ONE row,
   mark + two-row wordmark + menu button; the links open underneath. */
@media (max-width: 1023px) {
  .rs-header-row { height: 64px; gap: 12px; }
  .rs-wrap { padding: 0 16px; }
  .rs-mark { width: 34px; height: 34px; }
  .rs-word { flex-direction: column; font-size: 18px; line-height: 0.95; }
  .rs-menu-btn { display: flex; }
  .rs-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
            background: var(--rs-black); border-bottom: 1px solid #1F1F23; padding: 8px 16px 16px; }
  .rs-nav.is-open { display: flex; }
  .rs-nav a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid #1A1A1D; }
  .rs-nav .rs-rb { margin: 12px 0 0; text-align: center; border-bottom: 1px solid var(--rs-line-2); }
}

/* ---- buttons, chips, cards ---- */
.rs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px;
          background: var(--rs-gold); color: var(--rs-on-gold) !important; font-family: var(--rs-body); font-weight: 800; font-size: 15px;
          text-decoration: none; border: 0; cursor: pointer; }
.rs-btn:hover { background: var(--rs-gold-hi); }
.rs-btn-ghost { background: transparent; color: var(--rs-text) !important; border: 1px solid var(--rs-text); }
.rs-btn-ghost:hover { background: rgba(255,255,255,.06); }
.rs-btn-line { background: transparent; color: var(--rs-gold) !important; border: 1.5px solid var(--rs-gold); }
.rs-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--rs-card-2);
           border: 1px solid var(--rs-line-2); color: var(--rs-text); font-weight: 600; font-size: 14px; }
.rs-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 24px; padding: 32px; }
.rs-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-gold); }
.rs-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--rs-text-2); max-width: 560px; }
.rs-muted { color: var(--rs-muted); }

/* ---- home ---- */
.rs-hero { padding: 80px 0 40px; display: flex; flex-direction: column; gap: 20px; }
.rs-hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; max-width: 760px; }
.rs-section { padding: 40px 0 0; }
.rs-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rs-section-head h2 { font-size: 32px; }
.rs-empty { border: 1px dashed #34343A; border-radius: 20px; padding: 28px; color: var(--rs-text-2); }
.rs-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-top: 72px; }
.rs-hb { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rs-hb img { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }
.rs-hb-body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.rs-hb-body h3 { font-size: 26px; }
.rs-hb-body p { margin: 0; color: var(--rs-text-2); }
.rs-price { font-family: var(--rs-head); font-size: 24px; color: var(--rs-gold); }
.rs-buyrow { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.rs-sub { border: 1px dashed #34343A; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.rs-sub h3 { font-size: 24px; }
.rs-sub p { margin: 0; color: var(--rs-text-2); }
.rs-sub .rs-btn { align-self: flex-start; }

/* ---- footer ---- */
.rs-footer { margin-top: 96px; border-top: 1px solid #1F1F23; background: var(--rs-black); }
.rs-footer-row { padding-top: 48px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.rs-footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.rs-footer-brand p { margin: 0; color: var(--rs-text-2); }
.rs-word-inline { font-family: var(--rs-head); font-size: 22px; }
.rs-footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; }
.rs-footer-links a { color: var(--rs-text-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.rs-footer-links a:hover { color: var(--rs-text); }
.rs-copy { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--rs-muted); }

/* ---- thank-you and download pages: they keep free-riddim.css's layout (shared markup and
   js/reggaestems-download.js); only riddimBank's green becomes gold here. ---- */
.rs .fr-wrap { color: var(--rs-text); padding-top: 56px; }
.rs .fr-hero h1 { font-family: var(--rs-head); font-weight: 400; }
.rs .fr-kicker, .rs .fr-facts span, .rs .fr-cite, .rs .fr-wrap a, .rs .fr-done h2 { color: var(--rs-gold); }
.rs .fr-btn { background: var(--rs-gold); color: var(--rs-on-gold); border-radius: 999px; font-family: var(--rs-body); font-weight: 800; }
.rs .fr-btn:hover { background: var(--rs-gold-hi); }
.rs .fr-ghost { background: transparent; border-color: var(--rs-gold); color: var(--rs-gold) !important; }
.rs .fr-form input:focus { outline-color: var(--rs-gold); }
.rs .fr-box, .rs .fr-files li { background: var(--rs-card); border-color: var(--rs-line); border-radius: 16px; }
.rs .fr-done { background: #1D1A12; border-color: var(--rs-gold); }

/* ===== Release 2 (5 Oct 2026): search, featured riddim, chips, riddim list, player bar ===== */
.rs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 48px; align-items: center; }
.rs-hero-text { display: flex; flex-direction: column; gap: 20px; }
.rs-search { display: flex; align-items: center; gap: 12px; height: 60px; background: var(--rs-card); border: 1px solid var(--rs-line-2); border-radius: 16px;
             padding: 0 8px 0 18px; max-width: 580px; margin-top: 8px; color: var(--rs-muted); }
.rs-search:focus-within { border-color: var(--rs-gold); }
.rs-search input { flex-grow: 1; min-width: 0; background: transparent; border: 0; color: var(--rs-text); font-family: var(--rs-body); font-size: 17px; outline: none; }
.rs-search .rs-btn { min-height: 44px; border-radius: 12px; padding: 0 20px; }
.rs-featured { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.rs-feat-cover { aspect-ratio: 1 / 1; max-height: 360px; border-radius: 16px; overflow: hidden; background: #1D1A12; }
.rs-feat-cover img, .rs-cover img, .rs-player-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-feat-row { display: flex; align-items: center; gap: 14px; }
.rs-feat-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-feat-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-muted); }
.rs-feat-name { font-family: var(--rs-head); font-size: 22px; color: var(--rs-text) !important; text-decoration: none; }
.rs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-chips .rs-chip { cursor: pointer; font-family: var(--rs-body); }
.rs-chips .rs-chip[aria-pressed="true"] { background: var(--rs-gold); color: var(--rs-on-gold); border-color: var(--rs-gold); }
.rs-list { list-style: none; margin: 0; padding: 0; }
.rs-row { display: grid; grid-template-columns: 44px 56px minmax(0, 1fr) 90px 110px auto; align-items: center; gap: 18px; padding: 8px 10px;
          border-bottom: 1px solid #1F1F23; border-radius: 12px; }
.rs-row:hover { background: rgba(255,255,255,.025); }
.rs-row.is-playing { background: rgba(227,179,65,.10); }
.rs-play { width: 44px; height: 44px; border: 0; border-radius: 999px; background: #1C1C1F; color: var(--rs-text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.rs-play:hover { background: #26262A; }
.rs-play:disabled { opacity: .35; cursor: default; }
.rs-row.is-playing .rs-play, .rs-play-gold, .rs-play-lg { background: var(--rs-gold); color: var(--rs-on-gold); }
.rs-play-lg { width: 52px; height: 52px; }
.rs-cover { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #1D1A12; }
.rs-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-name { font-weight: 700; font-size: 16px; color: var(--rs-text) !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-name:hover { text-decoration: underline; }
/* .rs-meta, not .rs-sub: .rs-sub is the dashed subscription box (Release 1). Using it here put a
   dashed, padded box inside every riddim row that had styles (fixed 5 Oct 2026). */
.rs-meta { font-size: 13px; color: var(--rs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-bpm { font-size: 14px; color: var(--rs-muted); }
.rs-from { font-size: 15px; color: var(--rs-text-2); }
.rs-from strong { color: var(--rs-gold); }
.rs-view { min-height: 40px; padding: 0 20px; font-size: 14px; }
.rs-linkbtn { background: none; border: 0; padding: 0; color: var(--rs-gold); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.rs-work { display: flex; flex-direction: column; gap: 12px; }
.rs-work h3 { font-size: 24px; }
.rs-work p { margin: 0; color: var(--rs-text-2); }
.rs-work .rs-btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 800px) {
  .rs-row { grid-template-columns: 44px 52px minmax(0, 1fr) auto; gap: 12px; padding: 10px 4px; }
  .rs-bpm, .rs-from { display: none; }
  .rs-view { padding: 0 14px; }
  .rs-hero { padding-top: 40px; }
  .rs-search .rs-btn { display: none; }
}

/* The player bar: appears on the first play and stays at the bottom while browsing. */
.rs-player { position: fixed; left: 0; right: 0; bottom: 14px; z-index: 6; pointer-events: none; }
.rs-player-inner { pointer-events: auto; height: 72px; border-radius: 18px; background: var(--rs-card-2); border: 1px solid var(--rs-line-2);
                   box-shadow: 0 14px 40px rgba(0,0,0,.6); display: flex; align-items: center; gap: 14px; padding: 0 12px; }
.rs-player-cover { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #1D1A12; flex: 0 0 auto; }
.rs-player-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rs-player-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-player-track { height: 4px; border-radius: 4px; background: #34343A; overflow: hidden; }
.rs-player-fill { display: block; height: 4px; width: 0; background: var(--rs-gold); }
.rs-player-buy { min-height: 42px; padding: 0 18px; flex: 0 0 auto; }
body.rs-has-player .rs-footer-row { padding-bottom: 120px; }
@media (max-width: 600px) { .rs-player-buy { display: none; } .rs-player { bottom: 10px; } }
.rs-h1-sub { display: block; color: var(--rs-gold); font-size: .62em; margin-top: .25em; }

/* ===== Compact riddim rows (Joe, 5 Oct 2026: "much less vertical space") — overrides the rules above ===== */
.rs-section { padding-top: 24px; }
.rs-section-head { margin-bottom: 10px; }
.rs-row { grid-template-columns: 36px 44px minmax(0, 1fr) 70px 90px auto; gap: 14px; padding: 5px 8px; border-radius: 10px; }
.rs-play { width: 36px; height: 36px; }
.rs-play svg { width: 14px; height: 14px; }
.rs-play-lg { width: 52px; height: 52px; }
.rs-play-lg svg { width: 18px; height: 18px; }
.rs-cover { width: 44px; height: 44px; border-radius: 8px; }
.rs-info { gap: 0; }
.rs-name { font-size: 15px; line-height: 1.3; }
.rs-meta { font-size: 12.5px; line-height: 1.35; }
.rs-bpm { font-size: 13px; }
.rs-from { font-size: 14px; }
.rs-view { min-height: 34px; padding: 0 16px; font-size: 13px; }
@media (max-width: 800px) {
  .rs-row { grid-template-columns: 36px 44px minmax(0, 1fr) auto; gap: 10px; padding: 5px 2px; }
  .rs-view { padding: 0 12px; }
}

/* ===== Compact hero and sections (Joe, 5 Oct 2026: less space under the menu, smaller featured
   riddim and headline, less space around "Riddims") — overrides the rules above ===== */
.rs-hero { padding: 28px 0 8px; gap: 12px; }
.rs-hero-grid { gap: 32px; align-items: center; }
.rs-hero-text { gap: 12px; }
.rs-hero h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; }
.rs-h1-sub { font-size: .6em; margin-top: .3em; }
.rs-lead { font-size: 16px; line-height: 1.5; }
.rs-search { height: 50px; margin-top: 4px; }
.rs-search input { font-size: 16px; }
.rs-search .rs-btn { min-height: 38px; }
/* Featured riddim: one compact card, cover on the left */
.rs-featured { flex-direction: row; align-items: center; gap: 16px; padding: 14px; border-radius: 18px; }
.rs-feat-cover { width: 120px; height: 120px; max-height: none; aspect-ratio: auto; flex: 0 0 auto; border-radius: 12px; }
.rs-feat-row { flex-grow: 1; min-width: 0; flex-wrap: wrap; gap: 10px 12px; }
.rs-feat-name { font-size: 19px; }
.rs-featured .rs-price { font-size: 18px; }
.rs-play-lg { width: 44px; height: 44px; }
/* "Riddims" heading and the list */
.rs-section { padding-top: 20px; }
.rs-section-head { margin-bottom: 6px; align-items: center; }
.rs-section-head h2 { font-size: 24px; }
.rs-chips .rs-chip { height: 34px; padding: 0 14px; font-size: 13px; }
.rs-duo { padding-top: 40px; }
@media (max-width: 800px) {
  .rs-hero { padding-top: 20px; }
  .rs-feat-cover { width: 88px; height: 88px; }
}

/* ===== Featured riddim as tall as the left side, shorter search bar (Joe, 5 Oct 2026) ===== */
.rs-hero-grid { align-items: stretch; }
.rs-featured { align-self: stretch; align-items: center; gap: 22px; padding: 18px; }
.rs-feat-cover { width: clamp(180px, 20vw, 300px); height: clamp(180px, 20vw, 300px); }
.rs-feat-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.rs-feat-name { font-size: 24px; }
.rs-featured .rs-price { font-size: 20px; }
.rs-play-lg { width: 52px; height: 52px; }
.rs-search { height: 44px; padding: 0 6px 0 14px; gap: 10px; }
.rs-search input { font-size: 15px; }
.rs-search .rs-btn { min-height: 34px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
@media (max-width: 800px) {
  .rs-feat-cover { width: 96px; height: 96px; }
  .rs-feat-name { font-size: 19px; }
  .rs-feat-row { gap: 8px; }
}

/* ===== Featured card EXACTLY as tall as the left side (Joe, 5 Oct 2026). `contain: size` stops the
   card's own contents from setting the row height, so the left side alone decides it and the card
   stretches to match; the cover then fills the card's height as a square. Computers only: on narrow
   screens the card sits under the search bar at its natural size. ===== */
@media (min-width: 900px) {
  .rs-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .rs-featured { contain: size; align-self: stretch; align-items: stretch; padding: 14px; }
  .rs-feat-cover { height: 100%; width: auto; aspect-ratio: 1 / 1; max-width: 58%; }
  .rs-feat-row { justify-content: center; }
}

/* ===== Loading placeholders (no jump while the list loads) and three matching cards (Joe, 5 Oct 2026) ===== */
@keyframes rs-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.rs-skel-box { background: #1E1E22 !important; animation: rs-pulse 1.4s ease-in-out infinite; }
.rs-skel-line { display: block; height: 12px; border-radius: 6px; background: #1E1E22; margin: 4px 0; animation: rs-pulse 1.4s ease-in-out infinite; }
.rs-skel-sm { height: 9px; }
.rs-row.rs-skel { grid-template-columns: 36px 44px minmax(0, 1fr); }
.rs-row.rs-skel .rs-play { cursor: default; }
.rs-trio { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.rs-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-style: solid; }
.rs-promo-tile { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; margin-bottom: 6px; }
.rs-promo-icon { display: flex; align-items: center; justify-content: center; background: rgba(227,179,65,.12); color: var(--rs-gold); }
.rs-promo h3 { font-size: 22px; line-height: 1.15; }
.rs-promo p { margin: 0; color: var(--rs-text-2); }
.rs-promo .rs-kicker { font-size: 12px; color: var(--rs-gold); }
.rs-promo-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 16px; }
.rs-promo-foot .rs-btn { min-height: 44px; }
.rs-promo-foot .rs-price { font-size: 22px; }

/* Featured card: price + View side by side (5 Oct 2026) */
.rs-feat-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ===== Favorite hearts (Joe, 5 Oct 2026; like riddimBank's browse page) ===== */
.rs-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }
.rs-heart { width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--rs-muted);
            display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.rs-heart:hover { color: var(--rs-text); background: rgba(255,255,255,.06); }
.rs-heart.is-on { color: var(--rs-gold); }

/* ===== Fixes 5 Oct 2026 (Joe) =====
   1. Outlined gold buttons (View) turned gold-on-gold on hover: unreadable. Hover now fills gold
      with dark text, like the solid buttons.
   2. The featured card's text column was allowed to WRAP into a second column when the riddim
      name took two lines, which pushed the price, View and heart outside the card. It now stays
      one column, the name shrinks a little, and anything extra is clipped inside the card. */
.rs-btn-line:hover { background: var(--rs-gold); color: var(--rs-on-gold) !important; border-color: var(--rs-gold); }
.rs-feat-row { flex-wrap: nowrap; min-width: 0; }
.rs-featured { overflow: hidden; }
.rs-feat-text { width: 100%; }
.rs-feat-name { font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .rs-feat-cover { max-width: 50%; }
  .rs-feat-row { gap: 10px; }
}

/* ===== Key column instead of "from $69"; prices said once at the top; featured heart + View on one
   line (Joe, 5 Oct 2026) ===== */
.rs-row { grid-template-columns: 36px 44px minmax(0, 1fr) 120px 70px auto; }
.rs-key { font-size: 13px; color: var(--rs-text-2); white-space: nowrap; }
.rs-prices { margin: 0; font-size: 15px; color: var(--rs-text-2); }
.rs-prices strong { color: var(--rs-gold); font-weight: 800; }
.rs-feat-buy { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 800px) {
  .rs-row { grid-template-columns: 36px 44px minmax(0, 1fr) auto; }
  .rs-key { display: none; }
}

/* ===== Hover outlines (Joe, 5 Oct 2026): the gold play buttons (featured card, player bar, the
   playing row) turned DARK GREY on hover (the plain play-button rule won) and vanished into the
   card. Gold buttons now stay gold on hover and gain a light ring; filled-on-hover View buttons get
   the same ring so their edge never disappears. ===== */
.rs-play-lg:hover, .rs-play-gold:hover, .rs-row.is-playing .rs-play:hover {
  background: var(--rs-gold-hi); color: var(--rs-on-gold);
  box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 4px var(--rs-gold-hi);
}
.rs-btn-line:hover, .rs-btn:hover { box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 4px var(--rs-gold-hi); }
.rs-btn-ghost:hover { box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 4px var(--rs-text); }
.rs-heart:hover { box-shadow: 0 0 0 1px var(--rs-line-2); }

/* Gold play buttons on hover (Joe, 5 Oct 2026): the gold centre DIMS and a gold outline appears. */
.rs-play-lg:hover, .rs-play-gold:hover, .rs-row.is-playing .rs-play:hover {
  background: rgba(227,179,65,.22); color: var(--rs-gold-hi);
  box-shadow: inset 0 0 0 2px var(--rs-gold);
}

/* Every play button uses the same hover (Joe, 5 Oct 2026): dim gold centre, gold outline, gold icon. */
.rs-play:not(:disabled):hover {
  background: rgba(227,179,65,.22); color: var(--rs-gold-hi);
  box-shadow: inset 0 0 0 2px var(--rs-gold);
}

/* Category chips hover (Joe, 5 Oct 2026): the same scheme as the play buttons. */
.rs-chips .rs-chip:hover { background: rgba(227,179,65,.18); color: var(--rs-gold-hi); border-color: var(--rs-gold); }
.rs-chips .rs-chip[aria-pressed="true"]:hover { background: var(--rs-gold-hi); color: var(--rs-on-gold); box-shadow: 0 0 0 2px var(--rs-bg), 0 0 0 4px var(--rs-gold-hi); }

/* ===== Release 3a (6 Oct 2026): cart icon + count badge, riddim page, cart page ===== */
.rs-cart-link { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--rs-text) !important; flex: 0 0 auto; }
.rs-cart-link:hover { background: rgba(227,179,65,.12); color: var(--rs-gold-hi) !important; }
.rs-cart-count { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--rs-gold); color: var(--rs-on-gold);
                 font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; box-sizing: border-box; }
@media (min-width: 1024px) { .rs-cart-link { order: 3; } .rs-nav { order: 2; } }
@media (max-width: 1023px) { .rs-cart-link { margin-left: auto; } .rs-menu-btn { margin-left: 0; } }

.rs-crumbs { padding-top: 20px; font-size: 14px; color: var(--rs-muted); }
.rs-crumbs a { color: var(--rs-text-2); text-decoration: none; }
.rs-crumbs a:hover { color: var(--rs-gold-hi); }
.rs-rd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; padding: 20px 0 8px; align-items: start; }
.rs-rd-cover { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #1D1A12; }
.rs-rd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-rd-info { display: flex; flex-direction: column; gap: 12px; }
.rs-rd-info h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; }
.rs-rd-meta { margin: 0; color: var(--rs-text-2); font-size: 16px; }
.rs-rd-play { display: flex; align-items: center; gap: 14px; background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 16px; padding: 10px 14px; }
.rs-rd-track { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.rs-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.rs-pkg { position: relative; background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.rs-pkg-main { border: 1.5px solid var(--rs-gold); }
.rs-pkg-flag { position: absolute; top: -11px; left: 16px; background: var(--rs-gold); color: var(--rs-on-gold); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.rs-pkg-name { font-family: var(--rs-body); font-weight: 800; font-size: 18px; }
.rs-pkg-text { margin: 0; color: var(--rs-text-2); font-size: 14px; line-height: 1.5; }
.rs-pkg-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rs-pkg-price { font-family: var(--rs-head); font-size: 26px; }
.rs-pkg-main .rs-pkg-price { color: var(--rs-gold); }
.rs-pkg .rs-btn { min-height: 42px; }
.rs-pkg .rs-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.rs-pkg .rs-btn-line:disabled { background: transparent; color: var(--rs-text-2) !important; border-color: var(--rs-line-2); }
.rs-rd-msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; color: var(--rs-gold-hi); font-size: 14px; }
.rs-rd-note { margin: 0; font-size: 13px; color: var(--rs-muted); }
.rs-rd-sub { margin: 0; font-size: 15px; }
.rs-rd-sub a { color: var(--rs-text-2); font-weight: 600; }
.rs-rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding-top: 32px; }
.rs-rd-box { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rs-rd-box h2 { font-size: 20px; }
.rs-rd-box p { margin: 0; }
.rs-rd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--rs-text-2); }
.rs-rd-role { display: inline-block; min-width: 110px; color: var(--rs-muted); font-size: 14px; }
.rs-rd-tracks { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; color: var(--rs-text-2); font-size: 14px; line-height: 1.7; }
.rs-rd-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--rs-text-2); }
.rs-rd-small { font-size: 13px; }
.rs-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.rs-more-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--rs-text) !important; }
.rs-more-cover { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #1D1A12; }
.rs-more-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.rs-more-card:hover .rs-more-cover img { transform: scale(1.03); }
.rs-more-name { font-weight: 700; }
.rs-more-meta { font-size: 13px; color: var(--rs-muted); }
@media (max-width: 800px) { .rs-rd-top { grid-template-columns: 1fr; gap: 20px; } .rs-rd-tracks { columns: 1; } }

.rs-cp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.rs-cp-list { list-style: none; margin: 0; padding: 0; }
.rs-cp-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #1F1F23; }
.rs-cp-item .rs-cover { width: 56px; height: 56px; }
.rs-cp-price { font-weight: 800; color: var(--rs-gold); }
.rs-cp-sum { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rs-cp-sum h2 { font-size: 20px; }
.rs-cp-sum p { margin: 0; }
.rs-cp-line { display: flex; justify-content: space-between; font-size: 18px; }
.rs-cp-line strong { font-family: var(--rs-head); font-weight: 400; font-size: 26px; color: var(--rs-gold); }
.rs-cp-go { width: 100%; }
.rs-cp-go:disabled { opacity: .55; cursor: default; box-shadow: none; }
@media (max-width: 800px) { .rs-cp { grid-template-columns: 1fr; } .rs-cp-item { grid-template-columns: 48px minmax(0, 1fr) auto; } .rs-cp-rm { grid-column: 2 / -1; justify-self: start; } }

/* ===== Cart button on every row + featured card, with its small package menu (Joe, 6 Oct 2026) ===== */
.rs-cartbtn.is-on { color: var(--rs-gold); background: rgba(227,179,65,.14); }
.rs-cartmenu { position: absolute; z-index: 20; width: 270px; background: var(--rs-card-2); border: 1px solid var(--rs-line-2); border-radius: 14px;
               box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.rs-cartmenu-title { margin: 4px 8px 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-muted); }
.rs-cartmenu-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px;
                   background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--rs-text); font-family: var(--rs-body); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.rs-cartmenu-opt small { display: block; font-size: 12px; font-weight: 500; color: var(--rs-muted); }
.rs-cartmenu-opt:not(:disabled):hover, .rs-cartmenu-opt:focus-visible { background: rgba(227,179,65,.14); border-color: var(--rs-gold); }
.rs-cartmenu-opt:disabled { opacity: .55; cursor: default; }
.rs-cartmenu-price { color: var(--rs-gold); font-weight: 800; white-space: nowrap; }
.rs-cartmenu-go { margin: 4px 8px 4px; font-size: 14px; font-weight: 700; }
.rs-feat-meta { font-size: 14px; color: var(--rs-text-2); }

/* ===== 6 Oct 2026 (Joe): "Add to cart" text button, Remove in the menu, active menu item, menu
   links that land below the sticky header ===== */
.rs-addcart { min-height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.rs-addcart.is-on { background: transparent; color: var(--rs-gold) !important; box-shadow: inset 0 0 0 1.5px var(--rs-gold); }
.rs-addcart.is-on:hover { background: rgba(227,179,65,.14); }
.rs-cartmenu-opt.is-in { border-color: var(--rs-line-2); }
.rs-cartmenu-opt.is-in .rs-cartmenu-price { color: var(--rs-text-2); font-weight: 700; font-size: 13px; }
.rs-cartmenu-opt.is-in:hover .rs-cartmenu-price { color: var(--rs-gold-hi); }
/* The page you are on: gold with a short gold rule under the word, like riddimBank's menu. */
.rs-nav a.is-active { color: var(--rs-gold) !important; position: relative; }
.rs-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--rs-gold); border-radius: 2px; }
.rs-cart-link.is-active { color: var(--rs-gold) !important; }
@media (max-width: 1023px) { .rs-nav a.is-active::after { display: none; } }
/* Menu links to #riddims / #heartbeat land BELOW the sticky header (it used to cover the first rows). */
#riddims, #heartbeat { scroll-margin-top: 92px; }
@media (max-width: 1023px) { #riddims, #heartbeat { scroll-margin-top: 78px; } }
/* Phones (7 Oct 2026, Joe: no favorites on a phone unless you rotate it): the list row keeps the heart
   and drops the View button instead; tapping the riddim's name opens it. Computers keep View. */
@media (max-width: 800px) { .rs-addcart { padding: 0 10px; } .rs-row .rs-view { display: none; } }

/* ===== The word "Cart" with a bigger, readable count badge instead of the bag icon (Joe, 6 Oct 2026) ===== */
.rs-cart-link { width: auto; height: 44px; padding: 0 14px; gap: 8px; border: 1px solid var(--rs-line-2); border-radius: 999px;
                font-weight: 800; font-size: 16px; text-decoration: none; }
.rs-cart-link:hover { border-color: var(--rs-gold); }
.rs-cart-link.is-active { border-color: var(--rs-gold); }
.rs-cart-count { position: static; min-width: 26px; height: 26px; padding: 0 7px; line-height: 26px; font-size: 15px; font-weight: 800; }
.rs-pkg-foot { flex-wrap: wrap; }
.rs-pkg-viewcart { flex-basis: 100%; font-size: 14px; font-weight: 700; }

/* ===== Menu in CAPITALS like riddimBank's (Joe, 6 Oct 2026) ===== */
.rs-nav a { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 700; }
.rs-nav .rs-rb { text-transform: none; letter-spacing: 0; }
.rs-cart-word { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
@media (max-width: 1023px) { .rs-nav a { font-size: 15px; } }

/* ===== Riddim page layout (Joe, 6 Oct 2026) =====
   - [hidden] must win over the display rules above: the Credits / tracks / More boxes were showing
     EMPTY when a riddim had nothing to put in them.
   - A shorter top section (smaller cover) so the cards below peek above the fold.
   - Credits, tracks and "after you pay" side by side; the license as one short full-width strip. */
.rs [hidden] { display: none !important; }
@media (min-width: 801px) {
  .rs-rd-top { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; padding-top: 14px; }
  .rs-rd-info { gap: 10px; }
  .rs-rd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 24px; }
  .rs-rd-tracks { columns: 1; }
}
.rs-rd-lic { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 16px 24px; }
.rs-rd-lic h2 { font-size: 16px; }
.rs-rd-lic .rs-rd-list { flex-direction: row; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; flex: 1 1 400px; }
.rs-rd-lic p { font-size: 14px; }

/* ===== Riddim page, take 2 (Joe, 6 Oct 2026) =====
   Left: the cover with the player full width under it. Right: name, details, the two price cards
   filling the width. Below: Credits | Track List | After you pay; license as one short paragraph;
   5 "More riddims" across. */
.rs-rd-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rs-rd-left .rs-rd-play { padding: 10px 12px; gap: 12px; }
.rs-rd-credits { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.rs-rd-credits li { display: contents; }
.rs-rd-credits .rs-rd-role { min-width: 0; color: var(--rs-muted); font-size: 14px; }
.rs-rd-names { color: var(--rs-text); }
.rs-rd-lic { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 24px; padding: 18px 24px; }
.rs-rd-lic h2 { flex: 0 0 auto; white-space: nowrap; }
.rs-rd-lictext { flex: 1 1 auto; font-size: 14px; line-height: 1.6; color: var(--rs-text-2); max-width: 980px; }
.rs-rd-lictext a { white-space: nowrap; }
@media (min-width: 801px) {
  .rs-rd-info { padding-top: 2px; }
  .rs-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-rd-tracks { columns: 2; column-gap: 20px; }
  .rs-more { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .rs-rd-left { max-width: 460px; }
  .rs-rd-lic { flex-direction: column; gap: 8px; }
  .rs-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-more-card:nth-child(5) { display: none; }   /* 2 across on a phone: show 4 */
}

/* ===== Riddim page, take 3 (Joe, 6 Oct 2026) =====
   Name and details on top; cover + Stereo Mix + Multitrack Stems in one row as three equal cards;
   the player full width under them. (Overrides the take-2 two-column top above.) */
.rs-rd-top { display: flex !important; flex-direction: column; gap: 16px; padding-top: 14px; }
.rs-rd-head { display: flex; flex-direction: column; gap: 8px; }
.rs-rd-head h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; }
.rs-rd-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.rs-rd-row .rs-pkgs { display: contents; }
.rs-rd-row .rs-rd-cover { border-radius: 18px; }
.rs-rd-row .rs-pkg { margin-top: 0; }
.rs-rd-row .rs-rd-msg { grid-column: 1 / -1; }
.rs-rd-top > .rs-rd-play { width: 100%; box-sizing: border-box; padding: 12px 18px; }
@media (max-width: 800px) {
  .rs-rd-row { grid-template-columns: 1fr; }
  .rs-rd-row .rs-rd-cover { max-width: 460px; }
}

/* ===== Riddim page, take 4 (Joe, 6 Oct 2026): smaller row =====
   Cover fixed at 300px square; the two price cards share the rest at the same height.
   The empty "added to cart" line no longer adds space above the player. */
@media (min-width: 801px) {
  .rs-rd-row { grid-template-columns: 300px repeat(2, minmax(0, 1fr)); }
  .rs-rd-row .rs-rd-cover { width: 300px; height: 300px; align-self: start; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .rs-rd-row { grid-template-columns: 240px repeat(2, minmax(0, 1fr)); }
  .rs-rd-row .rs-rd-cover { width: 240px; height: 240px; }
}
.rs-rd-row .rs-rd-msg:empty { display: none; }
.rs-pkg-spec { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--rs-muted); }

/* ===== Cart button: gold outline by default (Joe, 6 Oct 2026: "it feels hidden") ===== */
.rs-cart-link { border: 1.5px solid var(--rs-gold); }
.rs-cart-link:hover, .rs-cart-link.is-active { border-color: var(--rs-gold-hi); background: rgba(227,179,65,.12); }

/* ===== License and Help pages (Joe, 6 Oct 2026): in the shop's look, linked from the footer ===== */
.rs-footer-links a[aria-current="page"] { color: var(--rs-gold) !important; }
/* License: riddimBank's text, one readable column */
.rs .rb-licence { max-width: 760px; margin: 0 auto; padding: 40px 24px 64px; }
.rs .licence-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--rs-line); }
.rs .rb-licence h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.rs .licence-intro { color: var(--rs-muted); font-size: 17px; margin: 0; }
.rs .clause { margin-bottom: 28px; scroll-margin-top: 90px; }
.rs .clause h2 { font-family: var(--rs-body); color: var(--rs-gold); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.rs .clause p { color: var(--rs-text-2); line-height: 1.75; margin: 0; }
.rs .clause:target p { border-left: 2px solid var(--rs-gold); padding-left: 16px; margin-left: -18px; }
.rs .licence-faq, .rs .licence-gets, .rs .licence-contact { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rs-line); }
.rs .faq-head, .rs .licence-gets > h2, .rs .licence-contact > h2 { font-size: 24px; margin-bottom: 20px; }
.rs .faq { margin-bottom: 22px; }
.rs .faq h3 { font-family: var(--rs-body); font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.rs .faq p, .rs .faq-closing, .rs .licence-contact p { color: var(--rs-text-2); line-height: 1.7; margin: 0 0 10px; }
.rs .compare { margin: 24px 0 22px; display: grid; gap: 14px; }
.rs .compare-item { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 16px; padding: 18px 20px; }
.rs .compare-def { color: var(--rs-text); margin: 0 0 12px; line-height: 1.6; font-size: 15px; }
.rs .compare-item ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rs .compare-item li { color: var(--rs-text-2); font-size: 15px; line-height: 1.5; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; }
.rs .compare-item li span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rs .compare-item li.pro span { color: var(--rs-gold); }
.rs .compare-item li.con span { color: var(--rs-muted); }
.rs .gets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
.rs .get h3 { font-family: var(--rs-body); font-weight: 800; font-size: 15px; margin-bottom: 5px; }
.rs .get p { color: var(--rs-muted); font-size: 15px; line-height: 1.6; margin: 0; }
/* Help */
.rs-doc { max-width: 820px; padding-top: 40px; padding-bottom: 64px; }
.rs-doc-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.rs-doc-head h1 { font-size: clamp(30px, 4vw, 44px); }
.rs-doc-lede { margin: 0; color: var(--rs-text-2); font-size: 17px; }
.rs-help-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rs-help-jump .rs-chip { text-decoration: none; color: var(--rs-text) !important; }
.rs-help-jump .rs-chip:hover { border-color: var(--rs-gold); }
.rs-help-section { padding-top: 26px; scroll-margin-top: 90px; }
.rs-help-section h2 { font-size: 22px; margin-bottom: 12px; }
.rs-help-item { border-bottom: 1px solid var(--rs-line); }
.rs-help-item summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 700; font-size: 16px; position: relative; }
.rs-help-item summary::-webkit-details-marker { display: none; }
.rs-help-item summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--rs-gold); }
.rs-help-item[open] summary::after { content: '\2212'; }
.rs-help-item summary:hover { color: var(--rs-gold-hi); }
.rs-help-answer p { margin: 0 0 16px; color: var(--rs-text-2); line-height: 1.7; }
.rs-help-contact { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.rs-help-contact p { margin: 0; color: var(--rs-text-2); }
@media (max-width: 640px) {
  .rs .gets-grid { grid-template-columns: 1fr; }
  .rs .clause:target p { margin-left: 0; }
}

/* ===== Contact page (6 Oct 2026): riddimBank's form (_contact-form.njk) in the shop's look ===== */
.rs-contact { max-width: 680px; }
.rs .rb-contact-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 24px; padding: 28px; }
.rs .rb-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rs .rb-website-field { display: none !important; }
.rs .rb-contact-card [hidden], .rs .rb-hidden { display: none !important; }
.rs .rb-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.rs .rb-form-label { font-weight: 700; font-size: 14px; color: var(--rs-text); }
.rs .rb-form-input, .rs .rb-form-select, .rs .rb-form-textarea { width: 100%; box-sizing: border-box; background: #0F0F11; border: 1px solid var(--rs-line-2); border-radius: 12px; color: var(--rs-text); font-family: var(--rs-body); font-size: 16px; padding: 12px 14px; }
.rs .rb-form-textarea { min-height: 150px; resize: vertical; }
.rs .rb-form-input:focus, .rs .rb-form-select:focus, .rs .rb-form-textarea:focus { outline: none; border-color: var(--rs-gold); }
.rs .rb-form-hint a { color: var(--rs-gold) !important; }
.rs .rb-checkbox-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; }
.rs .rb-checkbox-input { width: 18px; height: 18px; accent-color: var(--rs-gold); }
.rs .rb-checkbox-label { color: var(--rs-text-2); font-size: 15px; }
.rs .rb-submit-btn { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--rs-gold); color: var(--rs-on-gold); font-family: var(--rs-body); font-weight: 800; font-size: 16px; cursor: pointer; position: relative; }
.rs .rb-submit-btn:hover { background: var(--rs-gold-hi); }
.rs .rb-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.rs .rb-submit-btn.rb-loading { color: transparent !important; }
.rs .rb-submit-btn.rb-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--rs-on-gold); border-top-color: transparent; border-radius: 50%; animation: rs-spin .8s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs .rb-error-message { display: none; background: rgba(231,76,60,.1); border: 1px solid #E74C3C; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; }
.rs .rb-error-message.rb-visible { display: block; }
.rs .rb-error-text { margin: 0; color: #FF8A7A; font-size: 14px; }
.rs .rb-success-message { display: none; text-align: center; padding: 32px 8px; }
.rs .rb-success-message.rb-visible { display: block; }
.rs .rb-success-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--rs-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rs .rb-success-icon svg { width: 32px; height: 32px; stroke: var(--rs-on-gold); }
.rs .rb-success-title { font-size: 24px; margin-bottom: 10px; }
.rs .rb-success-text { color: var(--rs-text-2); margin: 0 0 24px; }
.rs .rb-success-link { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border: 1.5px solid var(--rs-gold); border-radius: 999px; color: var(--rs-gold) !important; font-weight: 800; text-decoration: none; }
@media (max-width: 640px) { .rs .rb-contact-card { padding: 20px; } }

/* ===== Packs (Joe, 6 Oct 2026): /packs/ list and /pack/<id> ===== */
.rs-packs { padding-top: 40px; padding-bottom: 64px; }
.rs-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 8px; }
.rs-pack-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.rs-pack-cover { position: relative; display: block; aspect-ratio: 1 / 1; background: #1D1A12; overflow: hidden; }
.rs-pack-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.rs-pack-card:hover .rs-pack-cover img { transform: scale(1.03); }
.rs-pack-play { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.rs-pack-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.rs-pack-name { font-size: 20px; }
.rs-pack-name a { color: var(--rs-text) !important; text-decoration: none; }
.rs-pack-name a:hover { color: var(--rs-gold-hi) !important; }
.rs-pack-text { margin: 0; color: var(--rs-text-2); font-size: 14px; line-height: 1.5; }
.rs-pack-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-pack-price { font-family: var(--rs-head); font-size: 24px; color: var(--rs-gold); margin-right: auto; }
.rs-pack-foot .rs-btn { min-height: 42px; padding: 0 18px; }
.rs-pack-skel { padding-bottom: 18px; }
.rs-pack-skel .rs-skel-line { margin: 10px 20px 0; }
.rs-pk-more { display: flex; flex-direction: column; gap: 8px; }
.rs-pk-more-link { font-weight: 700; }
@media (min-width: 801px) {
  .rs-pk-row { grid-template-columns: 300px minmax(0, 1fr) !important; }
  .rs-pk-row .rs-pkg { max-width: 560px; }
}

/* ===== Packs: one button row on every card; Heartbeat Sessions page (Joe, 6 Oct 2026) ===== */
.rs-pack-foot { flex-wrap: nowrap; gap: 8px; }
.rs-pack-foot .rs-btn { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.rs-pack-price { font-size: 22px; }
.rs-hb-points { margin: 0; padding-left: 18px; color: var(--rs-text-2); font-size: 15px; line-height: 1.6; }
.rs-hbp .rs-pkg-name { font-family: var(--rs-head); font-weight: 400; font-size: 22px; line-height: 1.15; }
.rs-hb-listen { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.rs-hb-listen h2, .rs-hb-faq h2 { font-size: 22px; }
.rs-hb-listen p { margin: 0; }
.rs-hb-listen iframe { border-radius: 12px; margin-top: 6px; }
.rs-hb-who { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rs-hb-who li { display: flex; flex-direction: column; gap: 2px; }
.rs-hb-who span { color: var(--rs-muted); font-size: 14px; }
.rs-hbp .rs-rd-box p { color: var(--rs-text-2); line-height: 1.6; }
.rs-hb-features { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding: 28px; }
.rs-hb-features h3 { font-family: var(--rs-body); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.rs-hb-features p { margin: 0; color: var(--rs-muted); font-size: 15px; line-height: 1.6; }
.rs-hb-faq { max-width: 820px; padding-top: 32px; }
.rs-hb-buy { text-align: center; margin: 32px 0 0; }
@media (max-width: 900px) { .rs-hb-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rs-hb-features { grid-template-columns: 1fr; } }

/* ===== Pack Track List (Joe, 6 Oct 2026) ===== */
.rs-pk-files { margin-top: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rs-pk-files-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rs-pk-files-head h2 { font-size: 22px; }
.rs-pk-files-head p { margin: 0; }
.rs-pk-files-list { margin: 0; padding-left: 0; list-style: none; columns: 4 200px; column-gap: 24px; color: var(--rs-text-2); font-size: 13px; line-height: 1.8; counter-reset: none; }
.rs-pk-files-list li { break-inside: avoid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pk-files-list.is-short { max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.rs-pk-files-more { align-self: flex-start; min-height: 40px; padding: 0 18px; font-size: 14px; }
.rs-pk-groups { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rs-pk-groups li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--rs-card-2); border: 1px solid var(--rs-line-2); border-radius: 12px; padding: 12px 14px; }
.rs-pk-group-name { font-weight: 700; }
.rs-pk-group-count { color: var(--rs-gold); font-size: 14px; font-weight: 700; white-space: nowrap; }
.rs-pk-files-list.is-hidden { display: none; }

/* ===== Services (Joe, 6 Oct 2026): riddimBank's /services in the gold theme ===== */
.rs-svc { padding-top: 40px; padding-bottom: 64px; }
.rs-svc-intro { color: var(--rs-text-2); font-size: 18px; line-height: 1.7; margin: 0 0 32px; }
.rs-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rs-svc-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; transition: transform .15s, border-color .15s; }
.rs-svc-card:hover { transform: translateY(-3px); border-color: var(--rs-gold); }
.rs-svc-card h2 { font-size: 22px; }
.rs-svc-card p { margin: 0; color: var(--rs-text-2); font-size: 15px; line-height: 1.6; flex: 1; }
.rs-svc-card .rs-btn { align-self: flex-start; min-height: 44px; padding: 0 20px; }
.rs-svc-ask { margin: 32px 0 0; font-size: 17px; color: var(--rs-text-2); }
.rs-svc-ask a { font-weight: 700; }
@media (max-width: 900px) { .rs-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rs-svc-grid { grid-template-columns: 1fr; } }
.rs-pack-foot .rs-pack-view-wide { flex: 0 0 auto; min-width: 140px; justify-content: center; }

/* ===== Heartbeat page: tall, narrower player with the cards beside it (Joe, 6 Oct 2026) ===== */
.rs-hbp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 24px; }
.rs-hbp-split .rs-hb-listen { margin-top: 0; }
.rs-hbp-side { display: flex; flex-direction: column; gap: 18px; }
.rs-hbp-side .rs-hb-features { margin-top: 0; grid-template-columns: 1fr; gap: 16px; }
@media (max-width: 900px) {
  .rs-hbp-split { grid-template-columns: 1fr; }
  .rs-hb-listen iframe { height: 620px; }   /* on a phone the list scrolls inside the player instead */
}
/* Instrument tiles (Joe, 6 Oct 2026: name and count read as separate words): the count sits right
   UNDER its instrument name, in one block, so each tile reads "Snares / 685 files". */
.rs-pk-groups li { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2px; padding: 12px 16px; }
.rs-pk-group-count { font-size: 13px; }

/* ---------- Release 3b (7 Oct 2026): quantity discount + checkout ---------- */
.rs-toast { position: fixed; left: 50%; bottom: 100px; z-index: 20; transform: translate(-50%, 12px); max-width: min(560px, calc(100vw - 32px));
  margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--rs-card-2); border: 1px solid var(--rs-gold); color: var(--rs-text);
  font-size: 15px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.rs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.rs-cp-hint { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rs-gold); color: var(--rs-gold-hi); font-weight: 700; }
.rs-cp-line.rs-cp-save { color: var(--rs-gold-hi); }
.rs-cp-line.rs-cp-total { border-top: 1px solid var(--rs-line-2); padding-top: 10px; margin-top: 4px; font-size: 18px; }
.rs-cp-err { color: #FF8A80; margin: 10px 0 0; }

/* ===== FREE RIDDIM sign-up above the footer (Joe, 7 Oct 2026) ===== */
.rs-signup { margin-top: 96px; border-top: 1px solid #1F1F23; padding: 48px 0; }
.rs-signup + .rs-footer { margin-top: 0; }
.rs-signup-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rs-signup h2 { font-size: 28px; line-height: 1.2; margin: 6px 0 10px; }
.rs-signup-text p:last-child { color: var(--rs-text-2); margin: 0; }
.rs-signup-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rs-signup-form input[type=text], .rs-signup-form input[type=email] { height: 48px; min-width: 0; padding: 0 14px; background: var(--rs-card);
  border: 1px solid var(--rs-line-2); border-radius: 12px; color: var(--rs-text); font: inherit; font-size: 16px; }
.rs-signup-form input:focus { outline: 2px solid var(--rs-gold); outline-offset: 1px; }
.rs-signup-form > *:not(input) { grid-column: 1 / -1; }
.rs-signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-signup-msg { margin: 0; min-height: 1em; color: var(--rs-gold); font-size: 14px; }
.rs-signup-msg:empty { display: none; }
.rs-signup-small { margin: 0; font-size: 13px; color: var(--rs-muted); }
.rs-signup-small a { color: var(--rs-gold); }
.rs-signup-done h3 { margin: 0 0 6px; font-size: 22px; }
.rs-signup-done p { margin: 0; color: var(--rs-text-2); }
@media (max-width: 800px) { .rs-signup { padding: 36px 0; } .rs-signup-row { grid-template-columns: 1fr; gap: 20px; } .rs-signup-form { grid-template-columns: 1fr; } }
.rs .rb-email-hint button { color: var(--rs-gold) !important; }   /* riddimBank's "Did you mean" link, in the shop's gold */

/* ===== "Make an Offer" (Oct 2026, Joe): a quiet gold text link under the Add to cart buttons ===== */
.rs-offer { grid-column: 1 / -1; }
@media (min-width: 801px) { .rs-rd-row .rs-offer { grid-column: 2 / -1; } }
.rs-offer-link { background: none; border: 0; padding: 2px 0; color: var(--rs-gold); font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rs-offer-link:hover { color: var(--rs-gold-hi); }
.rs-offer-link:disabled { color: var(--rs-muted); cursor: default; text-decoration: none; }
.rs-offer-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; padding: 18px; background: var(--rs-card); border: 1px solid var(--rs-line-2); border-radius: 14px; max-width: 640px; }
.rs-offer-form > * { grid-column: 1 / -1; }
.rs-offer-form > .rs-offer-field:nth-of-type(2), .rs-offer-form > .rs-offer-field:nth-of-type(3) { grid-column: auto; }
.rs-offer-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--rs-text-2); }
.rs-offer-form input[type=text], .rs-offer-form input[type=email], .rs-offer-form textarea { min-width: 0; width: 100%; padding: 12px 14px; background: var(--rs-bg); border: 1px solid var(--rs-line-2); border-radius: 12px; color: var(--rs-text); font: inherit; font-size: 16px; font-weight: 400; }
.rs-offer-form input:focus, .rs-offer-form textarea:focus { outline: 2px solid var(--rs-gold); outline-offset: 1px; }
.rs-offer-amount { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--rs-text); max-width: 200px; }
.rs-offer-pkgs { border: 0; margin: 0; padding: 0; }
.rs-offer-pkgs legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--rs-text-2); }
.rs-offer-pkg { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; cursor: pointer; }
.rs-offer-pkg input { accent-color: var(--rs-gold); width: 18px; height: 18px; }
.rs-offer-form .rs-btn { justify-self: start; }
.rs-offer-msg { margin: 0; color: var(--rs-gold-hi); font-size: 14px; }
.rs-offer-msg:empty { display: none; }
.rs-offer-small { margin: 0; font-size: 13px; color: var(--rs-muted); }
.rs-offer-done { margin: 10px 0 0; padding: 14px 18px; max-width: 640px; background: var(--rs-card); border: 1px solid var(--rs-gold); border-radius: 14px; color: var(--rs-text); }
@media (max-width: 800px) { .rs-offer-form { grid-template-columns: 1fr; } .rs-offer-form > .rs-offer-field { grid-column: 1 / -1 !important; } }

/* ===== /offer/ page (Make an Offer release 2, Oct 2026): Accept green, Counter gold, Decline red (Reggae colours) ===== */
.rs-oa { max-width: 720px; padding-top: 32px; padding-bottom: 32px; }
.rs-oa h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
.rs-oa-box { padding: 20px; margin: 0 0 16px; display: grid; gap: 14px; }
.rs-oa-box h2 { font-size: 20px; }
.rs-oa-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.rs-oa-facts dt { color: var(--rs-muted); }
.rs-oa-facts dd { margin: 0; color: var(--rs-text); overflow-wrap: anywhere; }
.rs-oa-note { margin: 0; padding: 12px 14px; border-left: 3px solid var(--rs-gold); background: var(--rs-bg); color: var(--rs-text-2); }
.rs-oa-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-oa-choice { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; font-weight: 800; font-size: 17px; cursor: pointer; border: 2px solid; }
.rs-oa-choice input { width: 18px; height: 18px; }
.rs-oa-accept { border-color: #1DB954; color: #1DB954; } .rs-oa-accept input { accent-color: #1DB954; }
.rs-oa-counter { border-color: var(--rs-gold); color: var(--rs-gold); } .rs-oa-counter input { accent-color: var(--rs-gold); }
.rs-oa-decline { border-color: #E5534B; color: #E5534B; } .rs-oa-decline input { accent-color: #E5534B; }
.rs-oa-accept:has(input:checked) { background: #1DB954; color: #fff; }
.rs-oa-counter:has(input:checked) { background: var(--rs-gold); color: var(--rs-on-gold); }
.rs-oa-decline:has(input:checked) { background: #E5534B; color: #fff; }
.rs-oa-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--rs-text-2); }
.rs-oa-field textarea { width: 100%; padding: 12px 14px; background: var(--rs-bg); border: 1px solid var(--rs-line-2); border-radius: 12px; color: var(--rs-text); font: inherit; font-size: 16px; font-weight: 400; }
.rs-oa-field input[type=text] { width: 100%; padding: 12px 14px; background: var(--rs-bg); border: 1px solid var(--rs-line-2); border-radius: 12px; color: var(--rs-text); font: inherit; font-size: 16px; }
.rs-oa-hint { font-weight: 400; font-size: 13px; }
.rs-oa .rs-btn { justify-self: start; }
.rs-oa-small { margin: 0; font-size: 13px; color: var(--rs-muted); }
.rs-oa-lead { margin: 0; font-size: 18px; color: var(--rs-text); }
.rs-oa-msg { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--rs-card); border: 1px solid var(--rs-gold); color: var(--rs-text); }
#oaError { border-color: #E5534B; }
@media (max-width: 560px) { .rs-oa-choices { grid-template-columns: 1fr; } .rs-oa-facts { grid-template-columns: 1fr; } .rs-oa-facts dd { margin-bottom: 8px; } }

/* ===== Speed work (10 Oct 2026): no jumping while loading =====
   The placeholder list is at least a screen tall, so the cards below it never show and then get pushed away;
   the riddim/pack page holds two grey price cards until the real ones arrive. */
.rs-list[aria-busy="true"] { min-height: 100vh; }
.rs-pkg-skel { min-height: 176px; }
@media (min-width: 801px) { .rs-pkg-skel { min-height: 0; } }

/* ===== Services: the 7th card (11 Oct 2026, Joe): Artwork & Graphics, Coming soon, full width under the six ===== */
.rs-svc-wide { grid-column: 1 / -1; align-items: center; text-align: center; }
.rs-svc-wide .rs-btn { align-self: center; }
.rs-soon-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(227,179,65,.15); color: var(--rs-gold); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ===== Free-riddim sign-up INSIDE the footer, right side (Joe, 11 Oct 2026: smaller, no wasted space;
   round 2: less height, heading lines up with the ReggaeStems wordmark, links on one line, small print on one line) ===== */
.rs-footer { margin-top: 48px; }
.rs-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 450px); gap: 32px; align-items: start; padding-top: 32px; padding-bottom: 32px; }
.rs-footer-left { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; }  /* 40px = box padding + "Free for you" line, so the wordmark sits level with the heading */
.rs-footer-grid .rs-footer-links { gap: 12px 18px; }
.rs-signup.rs-signup-mini { margin: 0; border: 1px solid #1F1F23; border-radius: 16px; padding: 20px; background: transparent; }
.rs-signup-mini .rs-signup-done h3 { font-size: 18px; }
.rs-signup-mini h2 { font-size: 19px; margin: 4px 0 6px; }
.rs-signup-mini .rs-signup-blurb { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--rs-text-2); }
.rs-signup-mini .rs-signup-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rs-signup-mini .rs-signup-form input[type=text], .rs-signup-mini .rs-signup-form input[type=email] { height: 42px; }
.rs-signup-mini .rs-btn { min-height: 42px; font-size: 15px; }
.rs-signup-mini .rs-signup-small { font-size: 12px; }
body.rs-has-player .rs-footer-grid { padding-bottom: 120px; }
@media (max-width: 800px) { .rs-footer-grid { grid-template-columns: 1fr; gap: 28px; } .rs-footer-left { padding-top: 0; } .rs-signup-mini .rs-signup-form { grid-template-columns: 1fr; } }

/* ===== Heartbeat Sessions page: "In cart · View cart" sat right against the Remove from cart button (Joe, 12 Oct 2026).
         The link goes on its own line under the button, with space, like the other Pack pages. ===== */
.rs-hb-cart { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rs-hb-cart .rs-pkg-viewcart { order: 2; flex-basis: auto; }
.rs-hb-buy .rs-hb-cart { align-items: center; }

/* ===== Shorter top of the home page (Joe, 12 Oct 2026: "the banner and the featured riddim take a huge amount
   of space; on smaller devices you don't even see the list of riddims"). Overrides the hero rules above.
   Computers: smaller headline and text, so the featured card (which follows the left side's height) shrinks too.
   Phones and tablets (under 900px): no lead paragraph, a small headline, and the featured riddim as one slim row
   with a 64px cover, so the riddim list starts on the first screen. ===== */
.rs-hero { padding: 18px 0 4px; gap: 10px; }
.rs-hero-text { gap: 10px; }
.rs-hero h1 { font-size: clamp(26px, 2.8vw, 36px); }
.rs-lead { font-size: 15px; line-height: 1.45; }
.rs-section { padding-top: 14px; }
@media (max-width: 899px) {
  .rs-hero { padding: 10px 0 0; gap: 8px; }
  .rs-hero-grid { gap: 10px; }
  .rs-hero-text { gap: 8px; }
  .rs-hero .rs-kicker { display: none; }
  .rs-hero h1 { font-size: 22px; line-height: 1.1; }
  .rs-h1-sub { display: block; font-size: .68em; margin-top: .2em; }
  .rs-lead { display: none; }
  .rs-prices { font-size: 14px; margin: 0; }
  .rs-search { height: 42px; margin-top: 0; }
  .rs-featured { padding: 8px 10px; gap: 12px; border-radius: 14px; }
  .rs-feat-cover { width: 64px; height: 64px; border-radius: 10px; }
  .rs-feat-row { flex-direction: row; align-items: center; gap: 10px; }
  .rs-feat-kicker { display: none; }
  .rs-feat-name { font-size: 17px; }
  .rs-featured .rs-price { font-size: 16px; }
  .rs-play-lg { width: 40px; height: 40px; }
  .rs-section { padding-top: 10px; }
}

/* ===== Even shorter (Joe, 12 Oct 2026, second pass): the lead paragraph is gone (Joe: redundant, and not every
   riddim is fully live), less space above the small line and inside the search bar. The featured card follows
   the left side's height on computers, so its cover shrinks with it. ===== */
.rs-hero { padding-top: 10px; }
.rs-search { height: 40px; padding: 0 4px 0 12px; gap: 8px; }
.rs-search .rs-btn { min-height: 32px; padding: 0 14px; }
@media (max-width: 899px) {
  .rs-hero { padding-top: 6px; }
  .rs-search { height: 38px; }
}

/* ===== Featured riddim on phones (Joe, 12 Oct 2026: the name and BPM/key were squeezed into a narrow
   column, one word per line). Phones and tablets: line 1 = play, name and BPM · key (full width);
   line 2 = heart and Add to cart. No View button, the same as every riddim row on a phone (the name opens it). ===== */
@media (max-width: 899px) {
  .rs-feat-row { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .rs-feat-text { flex: 1 1 0; width: auto; min-width: 0; }
  .rs-feat-name { font-size: 17px; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .rs-feat-meta { white-space: nowrap; font-size: 14px; }
  .rs-feat-buy { flex: 1 1 100%; gap: 10px; }
  .rs-feat-buy .rs-view { display: none; }
  .rs-feat-buy .rs-btn { min-height: 36px; }
}

/* ===== The video box on riddim and Pack pages (Joe, 12 Oct 2026: YouTube or Vadoo), under the cover and prices ===== */
.rs-rd-video { margin-top: 18px; padding: 18px; }
.rs-rd-video h2 { font-size: 20px; margin-bottom: 12px; }
.rs-rd-video-frame { max-width: 820px; }
.rs-rd-video-frame iframe, .rs-rd-video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; background: #111; }
/* Click-to-play video box (12 Oct 2026): picture + gold play button; the player loads on the click. */
.rs-vid-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #111; cursor: pointer; }
.rs-vid-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-vid-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--rs-gold); box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.rs-vid-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #16120A; }
.rs-vid-facade:hover .rs-vid-play, .rs-vid-facade:focus-visible .rs-vid-play { transform: scale(1.06); }