/* ============================================================
   BIGMAN.STUDIO — Futuristic Minimal Redesign
   Load AFTER index-shelf.css
   ============================================================ */

:root {
  --bg: #f5f4f1;
  --bg2: #eeecea;
  --ink: #0a0a0a;
  --ink2: #555550;
  --ink3: #999992;
  --text-secondary: var(--ink2);
  --text-muted: var(--ink3);
  --border: rgba(10, 10, 10, 0.09);
  --border2: rgba(10, 10, 10, 0.17);
  --accent: #00ff9d;
  --accent-dk: #00c97d;
  --radius: 3px;
  --font-disp: "Space Grotesk", "DM Sans", sans-serif;
  --font-mono: "Space Mono", "DM Mono", monospace;
}

body.index-shelf {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-disp) !important;
}

/* ── NAV ── */
body.index-shelf #site-header.site-header-bar,
.site-header-bar {
  background: rgba(245, 244, 241, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.index-shelf {
  --shelf-header-stack: 4.25rem;
  --studio-header-stack: 4.25rem;
}

@media (max-width: 1180px) {
  body.index-shelf {
    --shelf-header-stack: 6.75rem;
    --studio-header-stack: 6.75rem;
  }
}

@media (max-width: 768px) {
  body.index-shelf {
    --shelf-header-stack: 7.5rem;
    --studio-header-stack: 7.5rem;
  }
}

body.index-shelf #main-content {
  padding-top: calc(
    var(--studio-header-stack, var(--shelf-header-stack, 4.25rem)) +
      env(safe-area-inset-top, 0px)
  ) !important;
}

body.index-shelf #site-header .shelf-header-inner {
  border-bottom: 1px solid var(--border) !important;
}

body.index-shelf .mobile-header-brand,
.mobile-header-brand {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
}

body.index-shelf .header-btn,
.header-btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  color: var(--ink2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 6px 12px !important;
  border-radius: var(--radius) !important;
  transition:
    color 0.15s,
    border-color 0.15s !important;
}

body.index-shelf .header-btn:hover,
.header-btn:hover {
  color: var(--ink) !important;
  border-color: var(--border2) !important;
  background: transparent !important;
}

body.index-shelf #auth-btn.header-btn {
  border: 1px solid var(--border2) !important;
  border-radius: 100px !important;
  color: var(--ink) !important;
  background: #fff !important;
}

body.index-shelf #auth-btn.header-btn:hover {
  border-color: var(--ink) !important;
  background: #fff !important;
}

.header-btn.text-green-400 {
  color: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
}

#coin-balance,
#disco-ball,
#settings-btn,
#header-tempo-toggle {
  display: none !important;
}

/* ── HERO ── */
body.index-shelf #terminal-section {
  padding-top: 0 !important;
  scroll-margin-top: var(--shelf-header-stack) !important;
}

body.index-shelf .shelf-hero-section,
.shelf-hero-section {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  max-width: none !important;
}

body.index-shelf .shelf-hero-layout,
.shelf-hero-layout {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

body.index-shelf .shelf-hero,
.shelf-hero {
  position: relative !important;
  z-index: 2 !important;
  padding: 0.75rem 0 2.5rem !important;
  max-width: none !important;
  margin: 0 !important;
  border-bottom: none !important;
}

@media (max-width: 960px) {
  body.index-shelf .shelf-hero-layout,
  .shelf-hero-layout {
    padding: 0 24px;
  }

  body.index-shelf .shelf-hero,
  .shelf-hero {
    padding: 1rem 0 2.5rem !important;
  }
}

@media (max-width: 560px) {
  body.index-shelf .shelf-hero-layout,
  .shelf-hero-layout {
    padding: 0 20px;
  }
}

#bm-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

body.index-shelf .shelf-hero-eyebrow,
.shelf-hero-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.shelf-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: bm-pulse 2.2s ease-in-out infinite;
}

@keyframes bm-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Genre whisper — trails the stats strip, not a fake metric */
body.index-shelf .shelf-stats-row,
.shelf-stats-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 1.5rem 2.5rem !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 28px !important;
  flex-wrap: wrap !important;
}

body.index-shelf .shelf-stats-row .shelf-stats,
.shelf-stats-row .shelf-stats {
  border-top: none !important;
  padding-top: 0 !important;
  flex: 1 1 auto !important;
}

body.index-shelf .shelf-hero-genres,
.shelf-hero-genres {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 9ch !important;
  height: 1em !important;
  margin: 0 0 0.15rem !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--ink3) !important;
  text-align: right !important;
}

body.index-shelf .shelf-hero-genre,
.shelf-hero-genre {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  color: var(--ink3) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease !important;
}

body.index-shelf .shelf-hero-genre.is-lit,
.shelf-hero-genre.is-lit {
  opacity: 0.72 !important;
}

body.index-shelf .shelf-hero-genre.is-egress,
.shelf-hero-genre.is-egress {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.index-shelf .shelf-hero-genres,
  .shelf-hero-genres {
    height: auto !important;
  }

  body.index-shelf .shelf-hero-genre,
  .shelf-hero-genre {
    position: static !important;
    display: none !important;
  }

  body.index-shelf .shelf-hero-genre.is-lit,
  .shelf-hero-genre.is-lit {
    display: inline !important;
    opacity: 0.72 !important;
  }
}

body.index-shelf .shelf-hero-title,
.shelf-hero-title {
  font-family: var(--font-disp) !important;
  font-size: clamp(26px, 4.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin-bottom: 16px !important;
}

body.index-shelf .shelf-hero-pitch,
.shelf-hero-pitch {
  font-size: 15px !important;
  color: var(--ink2) !important;
  line-height: 1.68 !important;
  max-width: 400px !important;
  margin-bottom: 1.5rem !important;
}

body.index-shelf .shelf-btn-primary,
.shelf-btn-primary {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.15s !important;
}

.shelf-btn-primary:hover {
  background: #222 !important;
}

body.index-shelf .shelf-btn-secondary,
.shelf-btn-secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--border2) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: border-color 0.15s !important;
}

.shelf-btn-secondary:hover {
  border-color: var(--ink) !important;
}

body.index-shelf .shelf-stats,
.shelf-stats {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 28px !important;
  margin-top: 0 !important;
  max-width: none !important;
}

body.index-shelf .shelf-stat,
.shelf-stat {
  padding: 0 32px 0 0 !important;
  margin-right: 32px !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: none !important;
}

body.index-shelf .shelf-stat:last-child,
.shelf-stat:last-child {
  border-right: none !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

body.index-shelf .shelf-stat-num,
.shelf-stat-num {
  font-family: var(--font-disp) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

body.index-shelf .shelf-stat-label,
.shelf-stat-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  margin-top: 3px !important;
}

.shelf-terminal-stub {
  display: none !important;
}

/* ── CATALOG ── */
body.index-shelf .shelf-products-section,
.shelf-products-section {
  background: var(--bg) !important;
}

body.index-shelf .section-header,
.section-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  font-weight: 400 !important;
  margin-bottom: 16px !important;
}

body.index-shelf .shelf-category-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 0.35rem !important;
}

body.index-shelf .shelf-category-header .product-category-title {
  margin-bottom: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.index-shelf .shelf-catalog-view-all,
.shelf-catalog-view-all {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 8px 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s !important;
}

body.index-shelf .shelf-catalog-view-all:hover,
.shelf-catalog-view-all:hover {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #fff !important;
}

body.index-shelf .shelf-catalog-section-more,
.shelf-catalog-section-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--ink2) !important;
  text-decoration: none !important;
}

.shelf-catalog-section-more:hover {
  color: var(--ink) !important;
}

body.index-shelf .filter-panel-sticky {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: calc(
    var(--studio-header-stack, var(--shelf-header-stack, 9.75rem)) +
      env(safe-area-inset-top, 0px)
  ) !important;
  z-index: 20 !important;
}

body.index-shelf .filter-input,
.filter-input {
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-disp) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  padding: 10px 14px !important;
}

.filter-input:focus {
  outline: none !important;
  border-color: var(--ink) !important;
}

body.index-shelf .filter-sort-reset-row,
.filter-sort-reset-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 16px !important;
  margin: 12px 0 16px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04) !important;
}

body.index-shelf .filter-sort-wrap,
.filter-sort-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
}

body.index-shelf #filter-sort-label,
.filter-inline-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  flex-shrink: 0 !important;
}

body.index-shelf .filter-sort-pill-row,
.filter-sort-pill-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.index-shelf .filter-sort-pill span,
.filter-sort-pill span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  min-height: 36px !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: 100px !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  transition: all 0.15s !important;
}

body.index-shelf .filter-sort-pill:hover span,
.filter-sort-pill:hover span {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: #fff !important;
}

body.index-shelf .filter-sort-pill input:checked + span,
.filter-sort-pill input:checked + span {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.12) !important;
}

body.index-shelf .filter-sort-pill:has(input:focus-visible) span,
.filter-sort-pill:has(input:focus-visible) span {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
}

body.index-shelf .filter-clear-all-btn,
.filter-clear-all-btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink2) !important;
  background: var(--bg) !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
}

.filter-clear-all-btn:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: #fff !important;
}

body.index-shelf .filter-extra-filters-summary,
body.index-shelf .filter-section-summary,
body.index-shelf .filter-section-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--ink) !important;
}

/* Catalog shell — drop legacy cyberpunk chrome */
body.index-shelf .catalog-link-shell::before {
  display: none !important;
}

body.index-shelf .filter-products-connector {
  display: none !important;
}

body.index-shelf .filter-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.index-shelf .filter-container::before {
  display: none !important;
}

body.index-shelf .filter-sort-reset-row {
  border-bottom: none !important;
}

body.index-shelf .filter-sort-pill,
body.index-shelf .filter-genre-pill {
  border: none !important;
  background: transparent !important;
}

body.index-shelf .filter-section-summary,
body.index-shelf .filter-section-heading {
  border-left: none !important;
  background: transparent !important;
  color: var(--ink) !important;
}

body.index-shelf .filter-pill,
.filter-pill {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  min-height: 36px !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: 100px !important;
  color: var(--ink) !important;
  background: #fff !important;
}

body.index-shelf .filter-pill:hover,
.filter-pill:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  transform: none !important;
}

body.index-shelf .filter-pill.active,
.filter-pill.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.12) !important;
}

body.index-shelf .filter-collapsible,
body.index-shelf .filter-section-static {
  border: none !important;
  background: transparent !important;
}

body.index-shelf .filter-section-body {
  border-top: none !important;
}

body.index-shelf .filter-results-count,
.filter-results-count {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}

body.index-shelf .filter-results-count .filter-results-num,
.filter-results-count .filter-results-num {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

body.index-shelf .bpm-filter-field legend.filter-row-label {
  padding: 0;
  margin: 0 0 0.5rem;
  float: none;
  width: 100%;
}

/* Upcoming drops ticker */
body.index-shelf .scheduled-beats-ticker {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 0 !important;
}

body.index-shelf .scheduled-beats-ticker-label {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink3) !important;
  padding: 0 0 0.5rem !important;
}

body.index-shelf .scheduled-beats-ticker-strip {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}

body.index-shelf .scheduled-beats-ticker-viewport {
  padding-inline: 0 !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent 100%
  ) !important;
}

body.index-shelf .scheduled-beats-ticker-track {
  padding: 10px 0 !important;
  animation: scheduled-beats-ticker-scroll 48s linear infinite;
  animation-fill-mode: backwards !important;
}

@keyframes scheduled-beats-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

body.index-shelf .scheduled-beats-ticker-viewport:hover .scheduled-beats-ticker-track {
  animation-play-state: paused;
}

body.index-shelf .scheduled-beats-ticker-meta {
  max-width: none !important;
}

body.index-shelf .scheduled-beats-ticker-title {
  overflow: visible !important;
  text-overflow: unset !important;
  color: var(--ink) !important;
}

body.index-shelf .scheduled-beats-ticker-time {
  color: var(--accent-dk) !important;
}

body.index-shelf .scheduled-beats-ticker-item:hover,
body.index-shelf .scheduled-beats-ticker-item:focus-visible {
  background: rgba(10, 10, 10, 0.04) !important;
}

body.index-shelf .scheduled-beats-ticker-thumb {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

body.index-shelf .scheduled-beats-ticker-sep {
  color: var(--ink3) !important;
}

/* Free download CTA on product cards */
body.index-shelf .product-card-price--free,
body.index-shelf .product-card-price--free-download {
  color: var(--ink) !important;
  animation: none !important;
  text-shadow: none !important;
}

body.index-shelf .product-card-free-download-link {
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body.index-shelf .product-card-free-download-link::after {
  opacity: 1 !important;
}

body.index-shelf .product-card-free-download-link:hover,
body.index-shelf .product-card-free-download-link:focus-visible {
  background: #222 !important;
  border-color: #222 !important;
  color: var(--bg) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Product grid — denser tiles so more covers fit */
body.index-shelf .products-scroll-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  border: none !important;
  padding: 0 !important;
}

body.index-shelf .product-card-minimal {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 10px !important;
  min-width: 0 !important;
  overflow: visible !important;
  transform: perspective(700px) rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg)) translateY(var(--card-lift, 0px)) !important;
  transform-style: preserve-3d !important;
  transition:
    transform 0.16s ease-out,
    box-shadow 0.2s ease !important;
}

body.index-shelf .product-card-minimal:hover {
  --card-lift: -3px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.1),
    0 4px 10px rgba(0, 0, 0, 0.05) !important;
  background: #fff !important;
}

body.index-shelf .product-card-image-wrapper {
  background: var(--bg2) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 0.55rem !important;
  transform: translateZ(0.01px);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

body.index-shelf .product-card-minimal:hover .product-card-image-wrapper {
  transform: translateZ(22px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
}

body.index-shelf .product-card-minimal:hover .product-card-name {
  transform: translateZ(12px);
}

body.index-shelf .product-card-name {
  font-family: var(--font-disp) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  text-align: center !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.35rem !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  transform: translateZ(0.01px);
  transition: transform 0.2s ease-out;
}

body.index-shelf .product-card-name .product-card-bundle-badge,
body.index-shelf .product-card-name .product-card-scheduled-badge {
  display: inline-block !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}

body.index-shelf .product-card-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

body.index-shelf .product-card-minimal:hover .product-card-image-wrapper::after {
  transform: translateX(100%) !important;
}

body.index-shelf .product-card-meta-line {
  font-family: var(--font-mono) !important;
  color: var(--ink2) !important;
  font-size: 10px !important;
}

body.index-shelf .product-card-price {
  font-family: var(--font-disp) !important;
  color: var(--ink) !important;
}

body.index-shelf .product-card-genres .product-card-genre-tag,
body.index-shelf .product-card-genres .product-card-meta-tag {
  background: var(--bg) !important;
  border-color: var(--border2) !important;
  color: var(--ink2) !important;
  font-size: 9px !important;
}

/* View more — expands category in place */
body.index-shelf .shelf-view-more-btn {
  display: block !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 13px 32px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  transition:
    border-color 0.15s,
    background 0.15s !important;
}

body.index-shelf .shelf-view-more-btn:hover {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #fff !important;
}

/* ── SPOTLIGHT (featured / hot drop) ── */
body.index-shelf .featured-product-ad,
.featured-product-ad {
  margin-bottom: 20px !important;
  color: var(--ink) !important;
}

body.index-shelf .featured-product-ad__shell,
.featured-product-ad__shell {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 2px solid #facc15 !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.4),
    0 4px 18px rgba(250, 204, 21, 0.22),
    0 0 28px rgba(251, 191, 36, 0.12) !important;
  overflow: visible !important;
}

body.index-shelf .featured-product-ad__shell::before,
.featured-product-ad__shell::before {
  display: none !important;
}

body.index-shelf .featured-product-ad__media,
.featured-product-ad__media {
  aspect-ratio: 1 !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
}

body.index-shelf .featured-product-ad__placeholder,
.featured-product-ad__placeholder {
  color: var(--ink3) !important;
  font-size: 2rem !important;
}

body.index-shelf .featured-product-ad__head,
.featured-product-ad__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

body.index-shelf .featured-product-ad__eyebrow,
.featured-product-ad__eyebrow {
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-dk) !important;
}

body.index-shelf .featured-product-ad__price,
.featured-product-ad__price {
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink2) !important;
}

body.index-shelf .featured-product-ad__title,
.featured-product-ad__title {
  margin: 0 !important;
  font-family: var(--font-disp) !important;
  font-size: clamp(1.15rem, 3vw, 1.65rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

body.index-shelf .featured-product-ad__meta-line,
.featured-product-ad__meta-line {
  margin: 6px 0 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  color: var(--ink2) !important;
}

body.index-shelf .featured-product-ad__desc,
.featured-product-ad__desc {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--ink2) !important;
  max-width: 36rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.index-shelf .featured-product-ad__actions,
.featured-product-ad__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

body.index-shelf .featured-product-ad__preview,
body.index-shelf .featured-product-ad__view,
.featured-product-ad__preview,
.featured-product-ad__view {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transform: none !important;
}

body.index-shelf .featured-product-ad__preview,
.featured-product-ad__preview {
  border: 1px solid var(--border2) !important;
  background: #fff !important;
  color: var(--ink) !important;
}

body.index-shelf .featured-product-ad__preview:hover,
.featured-product-ad__preview:hover {
  border-color: var(--ink) !important;
  background: var(--bg) !important;
}

body.index-shelf .featured-product-ad__view,
.featured-product-ad__view {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  text-decoration: none !important;
}

body.index-shelf .featured-product-ad__view:hover,
.featured-product-ad__view:hover {
  background: #222 !important;
}

@media (max-width: 560px) {
  body.index-shelf .featured-product-ad__shell,
  .featured-product-ad__shell {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
}

/* ── PRODUCT PREVIEW PANEL (turntable) ── */
.turntable-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  opacity: 0;
  background: rgba(245, 244, 241, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.25s ease;
}

.turntable-backdrop.active {
  pointer-events: auto;
  opacity: 1;
}

body.index-shelf #turntable-display,
#turntable-display {
  position: fixed;
  z-index: 1;
  left: -9999px;
  top: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: 0 !important;
  width: min(960px, calc(100vw - 2rem)) !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease !important;
}

#turntable-display .turntable-panel-body {
  position: relative;
  min-width: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.06);
  max-height: min(86vh, 900px);
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.index-shelf #turntable-display.active,
#turntable-display.active {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-rows: auto;
  align-items: center;
  gap: 10px;
  width: min(1048px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  max-height: none !important;
  z-index: 120 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: visible !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#turntable-display.active .turntable-panel-body {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: min(960px, 100%);
  justify-self: center;
  box-shadow:
    0 24px 64px rgba(10, 10, 10, 0.22),
    0 0 0 1px rgba(10, 10, 10, 0.06);
}

#turntable-display .turntable-nav-btn--prev {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

#turntable-display .turntable-nav-btn--next {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

#turntable-display .turntable-nav-btn {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto;
}

#turntable-display.active:not(:has(.turntable-nav-btn:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(960px, calc(100vw - 24px)) !important;
}

#turntable-display.active:not(:has(.turntable-nav-btn:not([hidden])))
  .turntable-panel-body {
  grid-column: 1;
  max-width: none;
}

.turntable-nav-label {
  display: none;
}

.turntable-nav-icon {
  width: 22px;
  height: 22px;
}

.turntable-nav-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.12);
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.turntable-nav-btn svg {
  width: 22px;
  height: 22px;
}

.turntable-nav-btn .turntable-nav-icon {
  width: 22px;
  height: 22px;
}

.turntable-nav-btn:hover {
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.14);
  background: #fff;
  transform: scale(1.04);
}

.turntable-nav-btn:active {
  transform: scale(0.98);
}

.turntable-nav-btn[hidden] {
  display: none !important;
}

body.index-shelf.turntable-open {
  overflow: hidden !important;
}

/* Shelf: keep genre + lease badge visible in the click panel */
body.index-shelf #td-tags-container {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.index-shelf #td-tags-container.hidden {
  display: none !important;
}

body.index-shelf .td-tags-genre-heading {
  display: none;
}

body.index-shelf .td-tags-genre-col {
  padding-bottom: 0;
  align-items: flex-start;
  text-align: left;
}

body.index-shelf .td-tags-divider {
  display: none;
}

body.index-shelf .td-tags-license-col {
  justify-content: flex-start;
}

body.index-shelf .td-license-badge {
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  letter-spacing: 0.06em;
  max-width: 100%;
  border-color: var(--border) !important;
  background: var(--bg2, #f0eee8) !important;
  color: var(--ink) !important;
}

body.index-shelf #turntable-display .td-card-inner,
#turntable-display .td-card-inner {
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
}

body.index-shelf .td-modal-close,
.td-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 50%;
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}

body.index-shelf .td-modal-close svg,
.td-modal-close svg {
  width: 16px;
  height: 16px;
}

body.index-shelf .td-modal-close:hover,
.td-modal-close:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg2, #f0eee8);
}

body.index-shelf .td-modal-top,
.td-modal-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 44px 0 16px;
  border-bottom: none;
}

body.index-shelf .td-modal-main,
.td-modal-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 18px;
  min-width: 0;
}

body.index-shelf .td-modal-main .td-header-player {
  margin-bottom: 0;
  overflow: visible !important;
}

body.index-shelf #turntable-display .td-play-wave-row,
#turntable-display .td-play-wave-row {
  overflow: visible !important;
}

body.index-shelf .td-modal-main .td-license-tier-wrap {
  margin-top: 0;
}

body.index-shelf .td-modal-purchase,
.td-modal-purchase {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
}

#turntable-display.active .td-header-player {
  overflow: visible !important;
  min-height: 56px !important;
  width: 100% !important;
}

#turntable-display.active .td-play-wave-row:not(.hidden) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  width: 100% !important;
  min-height: 52px !important;
  max-width: 100% !important;
}

#turntable-display.active .td-preview-side {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  width: auto !important;
}

#turntable-display.active .td-waveform-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#turntable-display.active #td-waveform-wrap:not(.hidden) {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#turntable-display.active #td-waveform {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  width: 100% !important;
}

#turntable-display.active .td-wave-bar {
  min-width: 2px !important;
}

#turntable-display.active .td-modal-purchase {
  display: flex !important;
  flex-shrink: 0 !important;
}

#turntable-display.active .td-license-tier-wrap:not(.hidden) {
  display: flex !important;
}

#turntable-display.active .td-add-cart-btn:not(.hidden) {
  display: block !important;
}

body.index-shelf .td-shelf-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 0;
}

body.index-shelf .td-modal-top .td-shelf-cover-col {
  flex: 0 0 120px;
  width: 120px;
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
}

body.index-shelf .td-modal-top .td-shelf-head {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

body.index-shelf .td-shelf-cover-col {
  position: relative;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}

body.index-shelf .td-modal-top .td-hero {
  width: 120px !important;
  height: 120px !important;
}

body.index-shelf .td-modal-top .td-hero-cover {
  width: 120px !important;
  height: 120px !important;
  aspect-ratio: 1 !important;
  max-height: 120px !important;
}

body.index-shelf .td-modal-top .td-shelf-cover-ph {
  min-height: 120px;
  font-size: 2rem;
}

body.index-shelf .td-shelf-detail-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  min-width: 0;
}

body.index-shelf .td-license-tier-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.index-shelf .td-license-tier-terms,
.td-license-tier-terms {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

body.index-shelf .td-license-tier-terms[hidden],
.td-license-tier-terms[hidden] {
  display: none !important;
}

body.index-shelf .td-license-tier-terms.is-open,
.td-license-tier-terms.is-open,
#turntable-display.active .td-license-tier-terms.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

body.index-shelf .td-license-tier-terms-panel,
.td-license-tier-terms-panel {
  overflow: hidden;
  min-height: 0;
}

body.index-shelf .td-license-tier-terms-body,
.td-license-tier-terms-body {
  padding: 12px 14px;
  background: var(--bg2, #f0eee8);
  border: 1px solid var(--border);
  border-radius: 8px;
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

body.index-shelf .td-license-tier-terms.is-open .td-license-tier-terms-body,
.td-license-tier-terms.is-open .td-license-tier-terms-body {
  transform: translateY(0);
  opacity: 1;
}

body.index-shelf .td-license-tier-terms-body.is-swapping,
.td-license-tier-terms-body.is-swapping {
  transform: translateY(8px);
  opacity: 0;
}

body.index-shelf .td-license-tier-terms-heading,
.td-license-tier-terms-heading {
  margin: 0 0 8px;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

body.index-shelf .td-license-tier-terms-list,
.td-license-tier-terms-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.index-shelf .td-license-tier-terms-list li,
.td-license-tier-terms-list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink2);
}

body.index-shelf .td-license-tier-terms-list li::before,
.td-license-tier-terms-list li::before {
  position: absolute;
  left: 0;
  top: 0.45em;
  font-size: 10px;
  line-height: 1;
}

body.index-shelf .td-license-tier-terms-list li.is-included::before,
.td-license-tier-terms-list li.is-included::before {
  content: "✓";
  color: #16a34a;
  font-weight: 700;
}

body.index-shelf .td-license-tier-terms-list li.is-restricted::before,
.td-license-tier-terms-list li.is-restricted::before {
  content: "–";
  color: var(--ink3);
}

body.index-shelf .td-license-tier-terms-sold,
.td-license-tier-terms-sold {
  margin: 0;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
}

body.index-shelf .td-license-tier-wrap.hidden,
.td-license-tier-wrap.hidden {
  display: none !important;
}

body.index-shelf .td-license-tier-group,
.td-license-tier-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}

body.index-shelf .td-license-tier-btn,
.td-license-tier-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: 999px !important;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

body.index-shelf .td-license-tier-btn:hover:not(:disabled),
.td-license-tier-btn:hover:not(:disabled) {
  border-color: var(--ink) !important;
}

body.index-shelf .td-license-tier-btn.is-selected,
.td-license-tier-btn.is-selected {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

body.index-shelf .td-license-tier-btn.is-sold,
.td-license-tier-btn.is-sold {
  opacity: 0.45;
  cursor: not-allowed;
}

body.index-shelf .td-license-tier-btn:disabled,
.td-license-tier-btn:disabled {
  cursor: not-allowed;
}

body.index-shelf .td-add-cart-btn,
.td-add-cart-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 20px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center;
  color: var(--bg) !important;
  background: var(--ink) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s;
}

body.index-shelf .td-add-cart-btn:hover:not(:disabled),
.td-add-cart-btn:hover:not(:disabled) {
  background: #222 !important;
}

body.index-shelf .td-add-cart-btn:disabled,
.td-add-cart-btn:disabled {
  cursor: default;
}

body.index-shelf .td-add-cart-btn.is-in-cart,
.td-add-cart-btn.is-in-cart {
  opacity: 0.72;
}

body.index-shelf .td-add-cart-btn.hidden,
.td-add-cart-btn.hidden {
  display: none !important;
}

body.index-shelf .td-kit-download-btn,
.td-kit-download-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 20px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center;
  color: var(--bg) !important;
  background: var(--ink) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

body.index-shelf .td-kit-download-btn:hover,
.td-kit-download-btn:hover {
  background: #222 !important;
  color: var(--bg) !important;
}

body.index-shelf .td-kit-download-btn.hidden,
.td-kit-download-btn.hidden {
  display: none !important;
}

#turntable-display.active .td-kit-download-btn:not(.hidden) {
  display: block !important;
}

#turntable-display.active.turntable-kit-modal .td-kit-download-btn:not(.hidden) {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 4px !important;
  flex-shrink: 0 !important;
}

#turntable-display.active.turntable-kit-modal .td-header-player {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.index-shelf .td-modal-links,
.td-modal-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.index-shelf .td-modal-text-link,
.td-modal-text-link {
  display: inline-block;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s;
}

body.index-shelf .td-modal-text-link--secondary,
.td-modal-text-link--secondary {
  color: var(--text-secondary) !important;
}

body.index-shelf .td-modal-text-link--secondary:hover,
.td-modal-text-link--secondary:hover {
  color: var(--ink) !important;
  text-decoration: underline !important;
}

body.index-shelf .td-modal-text-link--muted,
.td-modal-text-link--muted {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

body.index-shelf .td-modal-text-link--muted:hover,
.td-modal-text-link--muted:hover {
  color: var(--text-secondary) !important;
  text-decoration: underline !important;
}

body.index-shelf .td-modal-text-link.hidden,
.td-modal-text-link.hidden {
  display: none !important;
}

body.index-shelf #td-youtube-preview:not(.hidden),
body.index-shelf .td-youtube-preview:not(.hidden) {
  display: block !important;
  width: 100%;
  max-width: 420px;
  margin: 0;
}

body.index-shelf .td-youtube-embed {
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
}

body.index-shelf .td-hero {
  margin: 0 !important;
  width: 100% !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.index-shelf .td-hero-fade {
  display: none !important;
}

body.index-shelf .td-hero-cover {
  aspect-ratio: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  background: var(--bg2) !important;
  border-radius: 4px !important;
}

body.index-shelf .td-cover-wrap,
body.index-shelf #cover-area {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

body.index-shelf .td-shelf-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

body.index-shelf .td-shelf-cover-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  font-size: 2.5rem;
  color: var(--ink3);
  background: var(--bg2);
  border-radius: 4px;
}

body.index-shelf .cover-depth-ring,
body.index-shelf .cover-glare,
body.index-shelf .td-cover-3d-shine {
  display: none !important;
}

body.index-shelf .td-fav-overlay {
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink2) !important;
  font-size: 16px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
}

body.index-shelf .td-fav-overlay:hover,
body.index-shelf .td-fav-overlay.favorited {
  color: #c0392b !important;
  border-color: rgba(192, 57, 43, 0.35) !important;
  background: #fff !important;
}

body.index-shelf .td-shelf-head .td-header-row {
  margin: 0 0 4px !important;
}

body.index-shelf .td-type-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body.index-shelf .td-title-sub {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--accent-dk) !important;
  margin: 4px 0 0 !important;
}

body.index-shelf .turntable-meta-inline {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--ink2) !important;
  margin-top: 6px !important;
}

body.index-shelf .turntable-meta-inline-label {
  color: var(--ink3) !important;
}

body.index-shelf .turntable-meta-inline-value {
  color: var(--ink) !important;
}

body.index-shelf .td-header-player {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Kit preview stack (turntable click menu) */
body.index-shelf #td-kit-preview-stack {
  gap: 12px !important;
}

body.index-shelf #td-kit-preview-stack .td-index-kit-card-title {
  font-family: var(--font-mono, "Space Mono", monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: var(--ink2) !important;
  margin-bottom: 4px !important;
}

body.index-shelf #td-kit-preview-stack .audio-wrapper {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 0.65rem 0.85rem !important;
  box-shadow: none !important;
}

body.index-shelf #td-kit-preview-stack .player-visualizer {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  height: 72px !important;
  min-height: 56px !important;
}

body.index-shelf #td-kit-preview-stack .player-toggle {
  flex-shrink: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--ink) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  touch-action: manipulation;
}

body.index-shelf #td-kit-preview-stack .player-toggle:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}

body.index-shelf #td-kit-preview-stack .player-progress-track {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 10px !important;
  height: 10px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
}

body.index-shelf #td-kit-preview-stack .player-progress-fill {
  background: var(--ink) !important;
  box-shadow: none !important;
}

body.index-shelf #td-kit-preview-stack .player-time {
  flex-shrink: 0 !important;
  font-family: var(--font-mono, "Space Mono", monospace) !important;
  font-size: 11px !important;
  color: var(--ink2) !important;
  min-width: 5.5rem !important;
}

/* Turntable modal — compact kit preview players (no scroll) */
#turntable-display #td-kit-preview-stack {
  gap: 8px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .td-index-kit-card-title {
  font-family: var(--font-mono, "Space Mono", monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .audio-wrapper {
  padding: 6px 8px !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .player-controls-row {
  margin-top: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .player-toggle {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  border: 1px solid var(--ink) !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .player-progress-track {
  min-height: 6px !important;
  height: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card--compact .player-time {
  font-family: var(--font-mono, "Space Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
  min-width: 4.75rem !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

#turntable-display #td-kit-preview-stack .td-index-kit-card-title {
  font-size: 9px !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

#turntable-display #td-kit-preview-stack .audio-wrapper {
  padding: 6px 8px !important;
}

#turntable-display #td-kit-preview-stack .player-visualizer {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

#turntable-display #td-kit-preview-stack .player-controls-row {
  margin-top: 4px !important;
  gap: 6px !important;
}

#turntable-display #td-kit-preview-stack .player-toggle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 10px !important;
  border-radius: 4px !important;
}

#turntable-display #td-kit-preview-stack .player-progress-track {
  min-height: 6px !important;
  height: 6px !important;
}

#turntable-display #td-kit-preview-stack .player-time {
  font-size: 9px !important;
  min-width: 4.25rem !important;
}

body.index-shelf .td-play-wave-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* YouTube-only / no-audio products hide this row — must beat display:flex !important */
body.index-shelf .td-play-wave-row.hidden {
  display: none !important;
}

body.index-shelf .td-preview-side {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.index-shelf .td-waveform-row {
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.index-shelf .td-waveform-bar,
body.index-shelf #td-waveform-wrap {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  min-height: 52px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.index-shelf .td-waveform-bar.hidden,
body.index-shelf #td-waveform-wrap.hidden {
  display: none !important;
}

body.index-shelf .td-waveform,
.td-waveform {
  flex: 1 1 0 !important;
  height: 40px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  border-radius: 3px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
}

body.index-shelf .td-waveform-progress,
.td-waveform-progress {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 0;
  border-radius: 2px;
  background: rgba(10, 10, 10, 0.05);
  pointer-events: none;
  z-index: 0;
  transition: width 0.08s linear;
}

body.index-shelf .td-wave-bar,
.td-wave-bar {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 1px;
  max-width: 4px;
  border-radius: 1px;
  background: rgba(10, 10, 10, 0.14) !important;
  transition: background 0.12s ease, opacity 0.12s ease;
}

body.index-shelf .td-wave-bar.played,
.td-wave-bar.played {
  background: var(--ink) !important;
  opacity: 0.92;
}

body.index-shelf .td-wave-bar.playing,
.td-wave-bar.playing {
  background: rgba(10, 10, 10, 0.14) !important;
}

body.index-shelf .td-wave-bar.playing::before,
.td-wave-bar.playing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar-fill, 0%);
  border-radius: inherit;
  background: var(--ink);
  opacity: 0.92;
}

body.index-shelf .td-waveform-playhead,
.td-waveform-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

body.index-shelf .td-waveform-playhead.is-visible,
.td-waveform-playhead.is-visible {
  opacity: 1;
}

body.index-shelf .td-waveform-playhead-line,
.td-waveform-playhead-line {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(245, 244, 241, 0.85);
}

body.index-shelf .td-waveform-playhead-dot,
.td-waveform-playhead-dot {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(10, 10, 10, 0.18);
}

body.index-shelf .td-waveform-playhead.is-playing .td-waveform-playhead-dot,
.td-waveform-playhead.is-playing .td-waveform-playhead-dot {
  animation: td-shelf-playhead-pulse 1.4s ease-in-out infinite;
}

@keyframes td-shelf-playhead-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(10, 10, 10, 0.18);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.22);
  }
}

body.index-shelf .td-wave-time,
.td-wave-time {
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  min-width: 2.5rem !important;
  flex-shrink: 0 !important;
}

body.index-shelf .td-wave-time.end {
  color: var(--ink2) !important;
}

body.index-shelf .td-volume-wrap,
.td-volume-wrap {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  padding: 0 2px !important;
}

body.index-shelf .td-volume-wrap.hidden,
.td-volume-wrap.hidden {
  display: none !important;
}

body.index-shelf #td-preview-volume,
#td-preview-volume {
  width: 56px !important;
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 999px !important;
  accent-color: var(--ink) !important;
  cursor: pointer !important;
}

body.index-shelf #td-preview-volume::-webkit-slider-thumb,
#td-preview-volume::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  background: var(--ink) !important;
  border: 2px solid var(--bg) !important;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.2) !important;
}

body.index-shelf #td-preview-volume::-moz-range-thumb,
#td-preview-volume::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  background: var(--ink) !important;
  border: 2px solid var(--bg) !important;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.2) !important;
}

body.index-shelf #td-preview-volume::-moz-range-track,
#td-preview-volume::-moz-range-track {
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 999px !important;
}

body.index-shelf .td-no-preview {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: none !important;
}

body.index-shelf .td-desc-container {
  display: none !important;
}

body.index-shelf .td-shelf-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
}

body.index-shelf .td-shelf-actions .td-view-btn--solid,
body.index-shelf .td-shelf-actions .td-add-cart-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  text-align: center;
  justify-content: center;
}

body.index-shelf .td-shelf-actions .td-add-cart-btn.is-in-cart {
  opacity: 0.72;
  cursor: default;
}

@media (max-width: 720px) {
  body.index-shelf .td-shelf-grid {
    grid-template-columns: 1fr;
  }

  body.index-shelf .td-shelf-cover-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }

  body.index-shelf .td-hero-cover {
    max-width: 220px;
    margin: 0 auto;
  }
}

body.index-shelf .td-title,
.td-title {
  font-family: var(--font-disp) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  line-height: 1.2;
  word-break: break-word;
}

body.index-shelf .td-btn-play,
body.index-shelf .td-btn-play--circle,
.td-btn-play {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: transform 0.15s, background 0.15s !important;
}

body.index-shelf .td-btn-play .td-btn-play-icon,
body.index-shelf .td-btn-play--circle .td-btn-play-icon,
.td-btn-play .td-btn-play-icon {
  color: var(--bg) !important;
  fill: currentColor !important;
  width: 22px !important;
  height: 22px !important;
  filter: none !important;
  opacity: 1 !important;
}

body.index-shelf .td-btn-play.is-playing,
body.index-shelf .td-btn-play--circle.is-playing,
.td-btn-play.is-playing {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

.td-btn-play:hover,
body.index-shelf .td-btn-play:hover {
  transform: scale(1.06) !important;
  background: #222 !important;
  color: var(--bg) !important;
}

body.index-shelf .td-view-btn--solid,
.td-view-btn--solid {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.td-view-btn--solid:hover {
  background: #222 !important;
  box-shadow: none !important;
}

body.index-shelf .td-btn-back--footer,
.td-btn-back--footer {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink2) !important;
  background: transparent !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  padding: 8px 16px !important;
}

/* ── CONTACT + FOOTER ── */
body.index-shelf .shelf-contact-section,
.shelf-contact-section {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}

body.index-shelf .shelf-contact-grid {
  border-color: var(--border) !important;
}

body.index-shelf .shelf-contact-label,
.shelf-contact-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  font-weight: 400 !important;
}

body.index-shelf .shelf-contact-line a,
.shelf-contact-line a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.shelf-contact-line a:hover {
  text-decoration: underline !important;
}

body.index-shelf .shelf-contact-social,
.shelf-contact-social {
  list-style: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.index-shelf .shelf-contact-social a,
.shelf-contact-social a {
  display: inline-block !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.shelf-contact-social a:hover {
  text-decoration: underline !important;
}

body.index-shelf .shelf-email-form input,
.shelf-email-form input {
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-disp) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  padding: 9px 14px !important;
}

body.index-shelf .shelf-email-form button,
.shelf-email-form button {
  background: var(--ink) !important;
  color: var(--bg) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 9px 18px !important;
}

body.index-shelf .shelf-site-footer,
.shelf-site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink3) !important;
}

body.index-shelf .shelf-site-footer a,
.shelf-site-footer a {
  color: var(--ink2) !important;
  text-decoration: none !important;
}

.shelf-site-footer a:hover {
  color: var(--ink) !important;
}

/* ── TOOLS DROPDOWN ── */
body.index-shelf .tools-dropdown-panel,
.tools-dropdown-panel {
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}

body.index-shelf .tools-dropdown-panel a,
.tools-dropdown-panel a {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink2) !important;
  letter-spacing: 0.04em !important;
}

.tools-dropdown-panel a:hover {
  color: var(--ink) !important;
}

body.index-shelf .explore-menu-panel {
  background: #fff !important;
  border: 1px solid var(--border2) !important;
  color: var(--ink) !important;
}

body.index-shelf .explore-menu-btn-primary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg) !important;
}

.settings-modal {
  display: none !important;
}

/* ── Shelf page entry (minimal intro) ── */
html.shelf-entry-boot body.index-shelf {
  overflow: hidden;
}

html.shelf-entry-boot body.index-shelf #main-content,
html.shelf-entry-boot body.index-shelf #site-header {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.shelf-entry-boot body.index-shelf .skip-link {
  visibility: hidden !important;
}

html.shelf-entry-boot #shelf-entry {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.shelf-entry-boot #shelf-entry .shelf-entry-eyebrow {
  animation: shelf-entry-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

html.shelf-entry-boot #shelf-entry .shelf-entry-title {
  animation: shelf-entry-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

html.shelf-entry-boot #shelf-entry .shelf-entry-viz {
  animation: shelf-entry-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

html.shelf-entry-boot #shelf-entry .shelf-entry-viz-bars {
  animation: shelf-entry-viz-reveal 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.24s
    forwards;
}

html.shelf-entry-boot #shelf-entry .shelf-entry-viz-cursor {
  animation: shelf-entry-viz-cursor 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.24s
    forwards;
}

body.index-shelf.shelf-entry-active {
  overflow: hidden;
}

body.index-shelf .shelf-entry {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) 1.5rem
    max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: var(--bg, #f5f4f1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.52s;
}

body.index-shelf .shelf-entry.is-active,
body.index-shelf .shelf-entry.is-exiting {
  display: flex;
  visibility: visible;
}

body.index-shelf .shelf-entry.is-active {
  opacity: 1;
  pointer-events: auto;
}

body.index-shelf .shelf-entry.is-exiting {
  opacity: 0;
}

body.index-shelf .shelf-entry-inner {
  text-align: center;
  width: min(22rem, 88vw);
}

body.index-shelf .shelf-entry-eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  animation: shelf-entry-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

body.index-shelf .shelf-entry-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: bm-pulse 2.2s ease-in-out infinite;
}

body.index-shelf .shelf-entry-title {
  margin: 0 0 1.1rem;
  font-family: var(--font-disp) !important;
  font-size: clamp(2rem, 9vw, 2.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink) !important;
  opacity: 0;
  transform: translateY(10px);
  animation: shelf-entry-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

body.index-shelf .shelf-entry-viz {
  position: relative;
  width: 100%;
  height: 2.35rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(6px);
  animation: shelf-entry-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

body.index-shelf .shelf-entry-viz-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
  animation: shelf-entry-viz-reveal 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.24s
    forwards;
}

body.index-shelf .shelf-entry-viz-bar {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 6px;
  height: var(--bar-peak, 50%);
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.35) 0%,
    var(--ink, #0a0a0a) 55%,
    var(--ink, #0a0a0a) 100%
  );
  border-radius: 1px;
  transform-origin: bottom center;
  animation: shelf-entry-viz-bar 0.52s ease-in-out infinite alternate;
  animation-delay: var(--bar-delay, 0s);
}

body.index-shelf .shelf-entry-viz-cursor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--accent, #00ff9d);
  box-shadow:
    0 0 10px rgba(0, 255, 157, 0.45),
    0 0 2px rgba(0, 255, 157, 0.8);
  opacity: 0;
  transform: translateX(-1px);
  animation: shelf-entry-viz-cursor 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.24s
    forwards;
  pointer-events: none;
}

@keyframes shelf-entry-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shelf-entry-viz-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes shelf-entry-viz-bar {
  from {
    transform: scaleY(0.28);
    opacity: 0.5;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes shelf-entry-viz-cursor {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 2px);
    opacity: 0;
  }
}

body.index-shelf #main-content.shelf-entry-pending {
  transform: translateY(12px);
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

body.index-shelf #main-content.shelf-entry-reveal {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.index-shelf .shelf-entry {
    display: none !important;
  }

  body.index-shelf #main-content.shelf-entry-pending {
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 1200px) {
  body.index-shelf .products-scroll-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.index-shelf .products-scroll-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.index-shelf .shelf-hero,
  .shelf-hero {
    padding-top: 1rem !important;
    padding-bottom: 24px !important;
  }

  body.index-shelf .products-scroll-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.index-shelf .product-card-minimal {
    padding: 8px !important;
  }

  body.index-shelf .product-card-name {
    font-size: 0.75rem !important;
  }

  body.index-shelf .product-card-genres {
    gap: 0.3rem !important;
    margin-top: 0.4rem !important;
  }

  body.index-shelf .product-card-genres .product-card-genre-tag,
  body.index-shelf .product-card-genres .product-card-meta-tag {
    font-size: 8px !important;
    padding: 0.15rem 0.4rem !important;
  }

  body.index-shelf .shelf-stats,
  .shelf-stats {
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.index-shelf .shelf-stat,
  .shelf-stat {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    margin-right: 0 !important;
    padding: 0 0 16px !important;
  }

  body.index-shelf .shelf-stat:last-child,
  .shelf-stat:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  body.index-shelf .shelf-stats-row,
  .shelf-stats-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }

  body.index-shelf .shelf-hero-genres,
  .shelf-hero-genres {
    text-align: left !important;
    margin: 0 !important;
  }

  body.index-shelf .shelf-hero-genre,
  .shelf-hero-genre {
    right: auto !important;
    left: 0 !important;
  }
}

/* ── MOBILE (index homepage) ── */
@media (max-width: 768px) {
  body.index-shelf #site-header.site-header-bar {
    z-index: 100 !important;
  }

  body.index-shelf #site-header.site-header-scroll-hidden {
    transform: none !important;
  }

  body.index-shelf .shelf-header-inner.mobile-header-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand meta"
      "nav nav";
    align-items: center;
    gap: 8px 10px !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
  }

  body.index-shelf .mobile-header-brand {
    grid-area: brand;
    justify-self: start;
    align-self: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.index-shelf .mobile-header-actions {
    grid-area: nav;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow: visible;
    padding: 2px 0 4px;
  }

  body.index-shelf .mobile-header-meta {
    grid-area: meta;
    justify-self: end;
    align-self: center;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  html:has(body.index-shelf) {
    scroll-padding-top: calc(
      var(--studio-header-stack, var(--shelf-header-stack, 13.5rem)) +
        env(safe-area-inset-top, 0px)
    );
  }

  body.index-shelf #terminal-section {
    padding-top: 0 !important;
    scroll-margin-top: calc(
      var(--studio-header-stack, var(--shelf-header-stack, 13.5rem)) +
        env(safe-area-inset-top, 0px)
    ) !important;
  }

  body.index-shelf .mobile-header-shell {
    gap: 8px 10px !important;
    padding-bottom: 8px !important;
  }

  body.index-shelf .mobile-header-actions-track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-block: 4px !important;
  }

  body.index-shelf .shelf-header-extra,
  body.index-shelf .tools-dropdown-root {
    display: inline-flex !important;
  }

  body.index-shelf .mobile-header-actions-track > .header-btn,
  body.index-shelf
    .mobile-header-actions-track
    .tools-dropdown-root
    > .header-btn,
  body.index-shelf #auth-btn.header-btn,
  body.index-shelf .mobile-header-meta .mobile-header-auth-btn,
  body.index-shelf #cart-header-btn.header-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    border-radius: var(--radius) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ink2) !important;
    box-shadow: none !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.index-shelf #auth-btn.header-btn {
    border-color: var(--border2) !important;
    background: #fff !important;
    color: var(--ink) !important;
  }

  body.index-shelf .mobile-header-actions-track > .header-btn:active,
  body.index-shelf
    .mobile-header-actions-track
    .tools-dropdown-root
    > .header-btn:active,
  body.index-shelf #auth-btn.header-btn:active {
    transform: none !important;
    background: var(--bg2) !important;
  }

  body.index-shelf .shelf-hero-title,
  .shelf-hero-title {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  body.index-shelf .shelf-hero-pitch,
  .shelf-hero-pitch {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: none !important;
    margin-bottom: 1.25rem !important;
  }

  body.index-shelf .shelf-btn-primary,
  body.index-shelf .shelf-btn-secondary,
  .shelf-btn-primary,
  .shelf-btn-secondary {
    min-height: 48px !important;
    padding: 14px 20px !important;
    font-size: 12px !important;
  }

  body.index-shelf .shelf-products-section,
  .shelf-products-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 3rem !important;
  }

  body.index-shelf .filter-panel-sticky {
    top: calc(
      var(--studio-header-stack, var(--shelf-header-stack, 13.5rem)) +
        env(safe-area-inset-top, 0px)
    ) !important;
    padding-bottom: 0.75rem !important;
  }

  body.index-shelf .filter-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.index-shelf .shelf-catalog-nav--compact {
    align-self: flex-start;
  }

  body.index-shelf .filter-results-count {
    align-self: flex-start;
  }

  body.index-shelf .filter-sort-reset-row,
  .filter-sort-reset-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  body.index-shelf .filter-clear-all-btn,
  .filter-clear-all-btn {
    width: 100%;
    justify-content: center;
  }

  body.index-shelf .filter-input,
  .filter-input {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px !important;
    box-sizing: border-box;
  }

  body.index-shelf .product-card-minimal {
    padding: 12px !important;
  }

  body.index-shelf .product-card-name {
    font-size: 14px !important;
  }

  body.index-shelf .products-scroll-row {
    gap: 10px !important;
  }

  body.index-shelf .shelf-contact-section,
  .shelf-contact-section {
    padding: 2rem 16px 1.5rem !important;
  }

  body.index-shelf .shelf-contact-block {
    padding: 1.25rem 1rem !important;
  }

  body.index-shelf .shelf-site-footer .shelf-page-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.index-shelf .shelf-site-footer .flex.gap-6 {
    gap: 12px 16px !important;
  }

  body.index-shelf .explore-menu-panel {
    width: min(100vw - 24px, 24rem) !important;
    max-height: min(88vh, 640px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 12px !important;
  }

  body.index-shelf .explore-menu-email-input {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  body.index-shelf .explore-menu-btn,
  body.index-shelf .explore-menu-email-btn {
    min-height: 48px !important;
  }
  body.index-shelf .tools-dropdown-panel,
  .tools-dropdown-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(
      var(--studio-header-stack, var(--shelf-header-stack, 13.5rem)) +
        env(safe-area-inset-top, 0px) + 4px
    ) !important;
    min-width: 0 !important;
    max-height: min(60vh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.index-shelf .tools-dropdown-panel a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }
}

@media (max-width: 480px) {
  body.index-shelf .mobile-header-actions-track > .header-btn,
  body.index-shelf #auth-btn.header-btn,
  body.index-shelf #cart-header-btn.header-btn {
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  body.index-shelf #turntable-display .td-title-sub,
  #turntable-display .td-title-sub {
    font-size: 10px !important;
  }

  body.index-shelf .shelf-hero-layout,
  .shelf-hero-layout {
    padding: 0 16px !important;
  }

  body.index-shelf .shelf-stat-num,
  .shelf-stat-num {
    font-size: 22px !important;
  }

  body.index-shelf .td-shelf-grid {
    grid-template-columns: 1fr !important;
  }

  body.index-shelf .td-shelf-cover-col {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px !important;
  }

  body.index-shelf .td-hero-cover {
    max-width: none !important;
    width: 100% !important;
  }

  body.index-shelf .td-shelf-detail-col {
    padding: 12px 14px 16px !important;
  }

  body.index-shelf .td-play-wave-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.index-shelf .td-waveform-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.index-shelf .td-volume-wrap {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  body.index-shelf #td-preview-volume {
    width: min(120px, 100%) !important;
  }

  body.index-shelf .td-btn-play--circle {
    align-self: flex-start !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  body.index-shelf .td-shelf-actions {
    flex-direction: column !important;
    width: 100%;
  }

  body.index-shelf .td-shelf-actions .td-view-btn--solid,
  body.index-shelf .td-shelf-actions .td-add-cart-btn {
    width: 100% !important;
    min-height: 48px !important;
    flex: 1 1 auto !important;
  }

  body.index-shelf .shelf-email-form {
    flex-direction: column !important;
  }

  body.index-shelf .shelf-email-form input {
    font-size: 16px !important;
    min-height: 48px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  body.index-shelf .shelf-email-form button {
    width: 100% !important;
    min-height: 48px !important;
  }

  body.index-shelf .featured-product-ad__shell,
  .featured-product-ad__shell {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body.index-shelf .filter-sort-pill span,
  .filter-sort-pill span,
  body.index-shelf .filter-pill,
  .filter-pill {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  body.index-shelf #main-content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.index-shelf .shelf-site-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (hover: none) {
  body.index-shelf .product-card-minimal:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  body.index-shelf .product-card-minimal:active {
    transform: scale(0.98) !important;
  }
}

/* Override legacy index.css turntable mobile rules on shelf */
@media (max-width: 900px) {
  body.index-shelf #turntable-display.active,
  #turntable-display.active {
    max-height: none !important;
    overflow: visible !important;
  }

  body.index-shelf #turntable-display .td-card-inner,
  #turntable-display .td-card-inner {
    --td-inner-pad-l: 0 !important;
    --td-inner-pad-r: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.index-shelf #turntable-display .td-cover-wrap,
  #turntable-display .td-cover-wrap {
    width: 100% !important;
    height: 100% !important;
  }
}

/* ── Mobile product modal (single source of truth) ── */
@media (max-width: 720px) {
  body.index-shelf #turntable-display.active,
  #turntable-display.active {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: calc(100vw - 20px) !important;
    height: fit-content !important;
    max-height: calc(100dvh - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.index-shelf #turntable-display.active .turntable-panel-body,
  #turntable-display.active .turntable-panel-body {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: none;
  }

  body.index-shelf #turntable-display.active:not(:has(.turntable-nav-btn:not([hidden]))),
  #turntable-display.active:not(:has(.turntable-nav-btn:not([hidden]))) {
    grid-template-rows: auto;
    gap: 0 !important;
  }

  body.index-shelf #turntable-display .turntable-nav-btn--prev,
  #turntable-display .turntable-nav-btn--prev {
    grid-column: 1;
    grid-row: 2;
  }

  body.index-shelf #turntable-display .turntable-nav-btn--next,
  #turntable-display .turntable-nav-btn--next {
    grid-column: 2;
    grid-row: 2;
  }

  body.index-shelf #turntable-display .turntable-panel-body,
  #turntable-display .turntable-panel-body {
    width: 100%;
    max-height: min(88dvh, 720px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    border-radius: 10px !important;
  }

  body.index-shelf #turntable-display .td-card-inner,
  #turntable-display .td-card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.index-shelf #turntable-display .td-hero,
  #turntable-display .td-hero {
    margin: 0 !important;
    width: 80px !important;
    height: 80px !important;
  }

  body.index-shelf #turntable-display .td-modal-top,
  #turntable-display .td-modal-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 40px 10px 14px !important;
  }

  body.index-shelf #turntable-display .td-modal-top .td-shelf-cover-col,
  #turntable-display .td-modal-top .td-shelf-cover-col {
    flex: 0 0 80px !important;
    width: 80px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.index-shelf #turntable-display .td-modal-top .td-hero-cover,
  #turntable-display .td-modal-top .td-hero-cover {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }

  body.index-shelf #turntable-display .td-modal-top .td-shelf-head,
  #turntable-display .td-modal-top .td-shelf-head {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.index-shelf #turntable-display .td-title,
  #turntable-display .td-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  body.index-shelf #turntable-display .turntable-meta-inline,
  #turntable-display .turntable-meta-inline {
    font-size: 9px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }

  body.index-shelf #turntable-display .td-modal-main,
  #turntable-display .td-modal-main {
    padding: 0 14px 12px !important;
    gap: 12px !important;
  }

  body.index-shelf #turntable-display .td-header-player,
  #turntable-display .td-header-player {
    overflow: visible !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.index-shelf #turntable-display .td-play-wave-row,
  #turntable-display .td-play-wave-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body.index-shelf #turntable-display .td-waveform-row,
  #turntable-display .td-waveform-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.index-shelf #turntable-display .td-btn-play--circle,
  #turntable-display .td-btn-play--circle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  body.index-shelf #turntable-display .td-preview-side,
  #turntable-display .td-preview-side {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.index-shelf #turntable-display .td-waveform-bar,
  body.index-shelf #turntable-display #td-waveform-wrap,
  #turntable-display .td-waveform-bar,
  #turntable-display #td-waveform-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  body.index-shelf #turntable-display .turntable-tag-chip,
  #turntable-display .turntable-tag-chip {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink2) !important;
    box-shadow: none !important;
    font-size: 9px !important;
  }

  body.index-shelf #turntable-display .td-license-tier-group,
  #turntable-display .td-license-tier-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  body.index-shelf #turntable-display .td-license-tier-btn,
  #turntable-display .td-license-tier-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px 6px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }

  body.index-shelf #turntable-display .td-add-cart-btn,
  #turntable-display .td-add-cart-btn {
    min-height: 48px !important;
  }

  body.index-shelf #turntable-display .td-modal-purchase,
  #turntable-display .td-modal-purchase {
    display: flex !important;
    flex-shrink: 0 !important;
  }

  body.index-shelf #turntable-display .td-license-tier-wrap:not(.hidden),
  #turntable-display .td-license-tier-wrap:not(.hidden) {
    display: flex !important;
  }

  body.index-shelf #turntable-display .td-add-cart-btn:not(.hidden),
  #turntable-display .td-add-cart-btn:not(.hidden) {
    display: block !important;
  }

  body.index-shelf #turntable-display #td-waveform-wrap:not(.hidden),
  #turntable-display #td-waveform-wrap:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Footer prev/next — icon arrows below panel on mobile */
  body.index-shelf #turntable-display .turntable-nav-btn,
  #turntable-display .turntable-nav-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-self: center;
    align-self: center;
  }

  body.index-shelf #turntable-display .turntable-nav-btn--prev,
  #turntable-display .turntable-nav-btn--prev {
    justify-self: start;
  }

  body.index-shelf #turntable-display .turntable-nav-btn--next,
  #turntable-display .turntable-nav-btn--next {
    justify-self: end;
  }

  body.index-shelf #turntable-display .turntable-nav-label,
  #turntable-display .turntable-nav-label {
    display: none !important;
  }

  body.index-shelf #turntable-display .turntable-nav-icon,
  #turntable-display .turntable-nav-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
  }

  body.index-shelf #turntable-display .turntable-nav-btn:hover,
  body.index-shelf #turntable-display .turntable-nav-btn:active,
  #turntable-display .turntable-nav-btn:hover,
  #turntable-display .turntable-nav-btn:active {
    transform: none !important;
  }
}

/* Beat 480px shelf rules that stack the player — keep modal player horizontal */
@media (max-width: 480px) {
  body.index-shelf #turntable-display .td-play-wave-row,
  body.index-shelf #turntable-display .td-waveform-row,
  #turntable-display .td-play-wave-row,
  #turntable-display .td-waveform-row {
    flex-direction: row !important;
    align-items: center !important;
  }

  body.index-shelf #turntable-display .td-btn-play--circle,
  #turntable-display .td-btn-play--circle {
    align-self: center !important;
  }

  body.index-shelf #turntable-display #td-waveform-wrap:not(.hidden),
  #turntable-display #td-waveform-wrap:not(.hidden) {
    display: flex !important;
    min-height: 48px !important;
  }
}

/* Final turntable modal overrides — must win over shelf globals at every width */
@media (max-width: 720px) {
  #turntable-display.active .td-play-wave-row:not(.hidden),
  #turntable-display.active .td-waveform-row {
    flex-direction: row !important;
    align-items: center !important;
  }

  #turntable-display.active #td-volume-wrap {
    display: none !important;
  }

  #turntable-display.active .td-modal-main {
    padding-bottom: 16px !important;
  }

  #turntable-display.active .turntable-panel-body {
    max-height: min(78dvh, 680px) !important;
  }
}