/* VstPluginz custom music player system
- search/home cards: one-track player with PLAYER → TRACKS → DETAILS cycle
- product-details: dedicated inline dark player below image/details
*/
:root{
  --vbp-bg:#040914;
  --vbp-bg2:#071321;
  --vbp-panel:#0a1929;
  --vbp-line:rgba(56,189,248,.18);
  --vbp-line2:rgba(56,189,248,.34);
  --vbp-blue:#38bdf8;
  --vbp-blue2:#0ea5e9;
  --vbp-green:#39ff88;
  --vbp-text:#f5f9ff;
  --vbp-muted:#8aa4ba;
}

/* Original VstPluginz gold music-preview button, restored for the shared
product cards. It opens the custom inline player; no iframe/widget.
Keep this control clean: generic site icon/button hover rules must not add
the red glow that other controls may use. */
.vst-bp-card-gold-trigger,
.vst-bp-card-gold-trigger.extraiconsmall,
.single-product:hover .vst-bp-card-gold-trigger{
  appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;padding:0!important;margin:0 6px 0 0!important;
  width:30px!important;height:30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;vertical-align:middle!important;line-height:0!important;overflow:visible!important;position:relative!important;
  transform-origin:50% 50%;transition:transform .16s ease!important;
  box-shadow:none!important;text-shadow:none!important;filter:none!important;outline-color:transparent
}
.vst-bp-card-gold-trigger svg,
.vst-bp-card-gold-trigger.extraiconsmall svg,
.single-product:hover .vst-bp-card-gold-trigger svg{
  display:block!important;width:30px!important;height:30px!important;pointer-events:none!important;
  box-shadow:none!important;text-shadow:none!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42))!important
}
.vst-bp-card-gold-trigger:hover{transform:translateY(-1px) scale(1.08);box-shadow:none!important;filter:none!important}
.vst-bp-card-gold-trigger:hover svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.42))!important}
.vst-bp-card-gold-trigger:active{transform:scale(.96);box-shadow:none!important;filter:none!important}

/* Custom music tooltip.
JS controls the hover lifecycle so the tooltip can:
- fade + float up on entry
- fade + float down on exit
- disappear after 5 seconds of continuous card hover
- disappear when the gold button is clicked or the player opens
- stay dismissed until the pointer leaves the product card */
.vst-bp-card-gold-trigger[data-vst-tooltip]::before,
.vst-bp-card-gold-trigger[data-vst-tooltip]::after{
  position:absolute;
  left:100%;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  z-index:2147481000;
  transition:
  opacity .24s ease,
  transform .24s cubic-bezier(.22,.75,.28,1),
  visibility 0s linear .24s
}
.vst-bp-card-gold-trigger[data-vst-tooltip]::after{
  content:attr(data-vst-tooltip);
  bottom:calc(100% + 10px);
  transform:translate(-50%,7px);
  min-width:max-content;max-width:190px;padding:7px 10px;border-radius:7px;
  border:1px solid rgba(255,210,48,.72);background:rgba(4,9,20,.96);color:#fff;
  font:900 10px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.04em;white-space:nowrap;text-align:center;
  box-shadow:0 7px 20px rgba(0,0,0,.42)!important;text-shadow:none!important;filter:none!important
}
.vst-bp-card-gold-trigger[data-vst-tooltip]::before{
  content:"";
  bottom:calc(100% + 5px);
  transform:translate(33%,7px);
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid rgba(255,210,48,.72)
}
@media(hover:hover) and (pointer:fine){
  .single-product.vst-bp-tooltip-visible .vst-bp-card-gold-trigger[data-vst-tooltip]::before,
  .single-product.vst-bp-tooltip-visible .vst-bp-card-gold-trigger[data-vst-tooltip]::after{
    opacity:1;
    visibility:visible;
    transition-delay:0s
  }
  .single-product.vst-bp-tooltip-visible .vst-bp-card-gold-trigger[data-vst-tooltip]::after{
    transform:translate(-50%,0)
  }
  .single-product.vst-bp-tooltip-visible .vst-bp-card-gold-trigger[data-vst-tooltip]::before{
    transform:translate(33%,0)
  }
}

/* ───────────────────────────── CARD PLAYER ───────────────────────────── */
.vst-bp-preview-host{position:relative!important;overflow:hidden!important;isolation:isolate;--vst-bp-progress:0%}
.vst-bp-preview-host>a{position:relative;z-index:1}
.vst-bp-preview-host .vst-bp-preview-image{transition:filter .25s ease,opacity .25s ease,transform .25s ease!important}
.vst-bp-preview-launch{
  position:absolute;z-index:12;left:10px;bottom:10px;height:30px;padding:0 10px;border-radius:7px;
  border:1px solid rgba(255,255,255,.58);background:rgba(2,8,18,.82);color:#fff!important;
  display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:.05em;
  cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.38),inset 0 0 0 1px rgba(56,189,248,.05);backdrop-filter:blur(6px)
}
.vst-bp-preview-launch:hover{border-color:var(--vbp-blue);color:var(--vbp-blue)!important;background:rgba(4,16,31,.95);box-shadow:0 0 18px rgba(56,189,248,.18)}
.vst-bp-preview-launch .vbp-tri{font-size:10px}
.vst-bp-player audio,.vst-bp-detail-deck audio{position:absolute;width:1px;height:1px;opacity:.001;pointer-events:none}
.vst-bp-card-player{
  position:absolute;z-index:15;inset:0;display:none;color:var(--vbp-text);
  background:
  linear-gradient(180deg,rgba(1,6,13,.72),rgba(2,10,19,.88)),
  repeating-linear-gradient(90deg,rgba(56,189,248,.025) 0 1px,transparent 1px 18px);
  backdrop-filter:blur(2px)
}
.vst-bp-preview-host.vst-bp-open .vst-bp-card-player{display:block}
.vst-bp-preview-host.vst-bp-open .vst-bp-preview-launch{display:none}
.vst-bp-preview-host.vst-bp-open .vst-bp-preview-image{filter:grayscale(1)!important;opacity:.20!important;transform:scale(1.015)}
.vst-bp-card-top{position:absolute;z-index:6;left:8px;top:8px;display:flex;align-items:center;pointer-events:none}
.vst-bp-status{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:5px;background:rgba(1,7,14,.78);border:1px solid var(--vbp-line2);font-size:7px;font-weight:950;letter-spacing:.11em;color:#b9eaff;white-space:nowrap;backdrop-filter:blur(6px)}
.vst-bp-card-menu-toggle{position:absolute;z-index:7;right:38px;top:7px;height:25px;min-width:72px;padding:0 8px;border-radius:6px;border:1px solid rgba(56,189,248,.26);background:rgba(1,8,16,.78);color:#c9efff;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-size:7px;font-weight:950;letter-spacing:.08em;line-height:1;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.vst-bp-menu-svg{width:12px;height:12px;display:block;flex:0 0 auto;color:var(--vbp-green);fill:currentColor}
.vst-bp-card-menu-toggle b{font:inherit;color:inherit}
.vst-bp-card-menu-toggle:hover,.vst-bp-card-player.vst-bp-panel-tracks .vst-bp-card-menu-toggle,.vst-bp-card-player.vst-bp-panel-details .vst-bp-card-menu-toggle{border-color:rgba(57,255,136,.45);color:#fff;box-shadow:0 0 15px rgba(57,255,136,.08)}
.vst-bp-close{position:absolute;z-index:7;right:7px;top:7px;width:25px;height:25px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.62);color:#fff;cursor:pointer;font-size:16px;line-height:22px}
.vst-bp-close:hover{border-color:var(--vbp-blue);color:var(--vbp-blue)}
.vst-bp-card-player-view{position:absolute;z-index:2;inset:0;display:block;background:radial-gradient(circle at 50% 45%,rgba(14,165,233,.07),transparent 44%)}
.vst-bp-card-tracks-view,.vst-bp-card-details-view{position:absolute;z-index:3;inset:0;display:none;background:linear-gradient(180deg,rgba(2,9,18,.88),rgba(1,6,13,.96));backdrop-filter:blur(5px)}
.vst-bp-card-player.vst-bp-panel-tracks .vst-bp-card-player-view,.vst-bp-card-player.vst-bp-panel-details .vst-bp-card-player-view{display:none}
.vst-bp-card-player.vst-bp-panel-tracks .vst-bp-card-tracks-view{display:block}
.vst-bp-card-player.vst-bp-panel-details .vst-bp-card-details-view{display:block}
.vst-bp-card-player .vst-bp-spectrum{position:absolute;left:12px;right:12px;top:45px;height:54px;opacity:.48}
.vst-bp-card-now{position:absolute;left:12px;right:70px;top:104px;min-width:0}
.vst-bp-card-now .vst-bp-now-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.2;font-weight:900;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.12)}
.vst-bp-card-now .vst-bp-now-artist{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;font-size:8px;font-weight:700;color:var(--vbp-muted)}
.vst-bp-card-player .vst-bp-main{
  position:absolute;z-index:4;right:12px;top:100px;width:45px;height:36px;padding:0;border:0!important;border-radius:7px!important;
  background:rgba(2,10,19,.42)!important;color:#fff!important;font-size:19px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:none!important;text-shadow:0 0 10px rgba(255,255,255,.3)
}
.vst-bp-card-player .vst-bp-main:hover{color:#fff!important;text-shadow:0 0 14px rgba(255,255,255,.7),0 0 24px rgba(56,189,248,.22)}
.vst-bp-card-player .vst-bp-main,.vst-bp-card-player .vst-bp-main:hover,.vst-bp-card-player .vst-bp-main:focus{filter:none!important}
.vst-bp-control-svg{display:block;width:20px;height:20px;fill:currentColor;pointer-events:none}
.vst-bp-row-svg{display:inline-block;width:13px;height:13px;fill:currentColor;vertical-align:middle;pointer-events:none}
.vst-bp-launch-svg{display:block;width:13px;height:13px;fill:currentColor;pointer-events:none}
.vst-bp-preview-host.vst-bp-playing .vst-bp-main{animation:vstBpWhitePulse 1.55s ease-in-out infinite}
@keyframes vstBpWhitePulse{
  0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)!important;text-shadow:0 0 7px rgba(255,255,255,.25)}
  50%{box-shadow:0 0 17px rgba(255,255,255,.10)!important;text-shadow:0 0 14px rgba(255,255,255,.78),0 0 28px rgba(255,255,255,.18)}
}
.vst-bp-card-player .vst-bp-progress-wrap{position:absolute;z-index:4;left:12px;right:12px;top:149px}
.vst-bp-seek{width:100%;height:4px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,var(--vbp-blue) 0 var(--vst-bp-progress),rgba(255,255,255,.18) var(--vst-bp-progress) 100%);border-radius:99px;outline:0;cursor:pointer;margin:0}
.vst-bp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(56,189,248,.18),0 0 12px rgba(56,189,248,.28)}
.vst-bp-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}
.vst-bp-times{display:flex;justify-content:space-between;margin-top:5px;font-size:7px;font-weight:850;color:rgba(255,255,255,.68);font-variant-numeric:tabular-nums}
.vst-bp-card-menu-summary{position:absolute;left:8px;right:8px;top:40px;bottom:8px;height:auto;overflow-y:auto;border:1px solid rgba(56,189,248,.12);border-radius:8px;background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(57,255,136,.025));padding:9px;scrollbar-width:thin;scrollbar-color:var(--vbp-blue) rgba(255,255,255,.03)}
.vst-bp-menu-release{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px}
.vst-bp-menu-release-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:10px;font-weight:950;line-height:1.2}
.vst-bp-menu-release-count{flex:0 0 auto;color:var(--vbp-green);font-size:6px;font-weight:950;letter-spacing:.08em;padding-top:2px}
.vst-bp-menu-meta{display:flex;flex-wrap:wrap;gap:5px;max-height:none;overflow:visible}
.vst-bp-menu-meta::-webkit-scrollbar{display:none}
.vst-bp-menu-meta span{max-width:100%;padding:4px 6px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:rgba(1,8,16,.54);color:#c5d9e7;font-size:7px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vst-bp-menu-meta em{font-style:normal;color:var(--vbp-blue);font-size:5px;font-weight:950;letter-spacing:.08em;margin-right:4px}
.vst-bp-menu-empty{display:grid;place-items:center;height:100%;color:var(--vbp-muted);font-size:8px;font-weight:800;text-align:center}
.vst-bp-card-tracklist{
  position:absolute;z-index:3;left:8px;right:8px;top:40px;bottom:8px;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid rgba(56,189,248,.12);border-radius:7px;background:rgba(1,7,14,.58);scrollbar-width:thin;scrollbar-color:var(--vbp-blue) rgba(255,255,255,.03)
}

/* ───────────────────────────── SHARED TRACK LIST ───────────────────────────── */
.vst-bp-tracklist::-webkit-scrollbar{width:5px}
.vst-bp-tracklist::-webkit-scrollbar-track{background:rgba(255,255,255,.035)}
.vst-bp-tracklist::-webkit-scrollbar-thumb{background:linear-gradient(var(--vbp-blue),var(--vbp-green));border-radius:99px}
.vst-bp-track-row{
  width:100%;min-height:42px;padding:7px 8px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:#fff;
  display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:7px;align-items:center;text-align:left;cursor:pointer;transition:background .12s,box-shadow .12s
}
.vst-bp-track-row:last-child{border-bottom:0}
.vst-bp-track-row:hover{background:rgba(56,189,248,.09)}
.vst-bp-track-row.is-active{background:linear-gradient(90deg,rgba(14,165,233,.18),rgba(57,255,136,.045));box-shadow:inset 2px 0 0 var(--vbp-green)}
.vst-bp-track-row.is-disabled{opacity:.36;cursor:not-allowed}
.vst-bp-track-no{font-size:9px;font-weight:950;color:var(--vbp-muted);text-align:center;font-variant-numeric:tabular-nums}
.vst-bp-track-copy{min-width:0;display:block}
.vst-bp-track-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:900;line-height:1.25;color:var(--vbp-text)}
.vst-bp-track-mix{margin-left:4px;font-size:.9em;font-weight:650;color:#a7bdd0}
.vst-bp-track-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;font-size:8px;font-weight:650;color:var(--vbp-muted)}
.vst-bp-track-play{text-align:center;color:var(--vbp-blue);text-shadow:0 0 10px rgba(56,189,248,.2);display:grid;place-items:center}
.vst-bp-track-row.is-active .vst-bp-track-play{color:var(--vbp-green);text-shadow:0 0 12px rgba(57,255,136,.26)}
.vst-bp-track-empty{padding:20px 12px;text-align:center;font-size:10px;font-weight:750;color:var(--vbp-muted)}
.vst-bp-mini-loader{display:inline-block;width:8px;height:8px;margin-right:7px;border:1px solid rgba(255,255,255,.25);border-top-color:var(--vbp-blue);border-radius:50%;animation:vstBpSpin .7s linear infinite}
@keyframes vstBpSpin{to{transform:rotate(360deg)}}

/* ───────────────────────────── PRODUCT DETAILS DECK ───────────────────────────── */
.vst-bp-detail-section{width:100%;max-width:800px;margin:42px auto 24px;padding:0 2px}
.vst-bp-detail-heading{text-align:center;margin-bottom:14px}
.vst-bp-detail-heading .vst-bp-detail-kicker{display:block;margin-bottom:6px;color:var(--vbp-green);font-size:9px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.vst-bp-detail-heading h4{margin:0;color:#fff;font-size:24px;font-weight:900;letter-spacing:.01em;text-shadow:0 0 18px rgba(56,189,248,.13)}
.vst-bp-detail-heading p{margin:6px auto 0;max-width:560px;color:rgba(190,211,228,.68);font-size:11px;line-height:1.5}
.vst-bp-detail-mount{width:100%;--vst-bp-progress:0%}
.vst-bp-detail-deck{
  position:relative;width:100%;overflow:hidden;border:1px solid rgba(56,189,248,.22);border-radius:16px;color:var(--vbp-text);
  background:
  radial-gradient(circle at 18% -12%,rgba(14,165,233,.18),transparent 33%),
  radial-gradient(circle at 88% 0%,rgba(57,255,136,.07),transparent 28%),
  linear-gradient(180deg,#07121f 0%,#030812 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035)
}
.vst-bp-detail-deck:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.36;background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(56,189,248,.025) 23px 24px),repeating-linear-gradient(0deg,transparent 0 23px,rgba(56,189,248,.018) 23px 24px)}
.vst-bp-deck-head{position:relative;z-index:2;min-height:62px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(56,189,248,.12);background:rgba(1,7,14,.26)}
.vst-bp-deck-head strong{display:block;color:#fff;font-size:15px;font-weight:950;letter-spacing:.02em;text-shadow:0 0 14px rgba(56,189,248,.12)}
.vst-bp-detail-deck .vst-bp-status{height:25px;padding:0 9px;color:#bcecff;border-color:rgba(56,189,248,.30);background:rgba(4,14,25,.82)}
.vst-bp-detail-deck.vst-bp-playing .vst-bp-status{color:var(--vbp-green);border-color:rgba(57,255,136,.3);box-shadow:0 0 16px rgba(57,255,136,.08)}
.vst-bp-deck-visual{position:relative;z-index:2;height:142px;padding:12px 16px 10px;overflow:hidden;border-bottom:1px solid rgba(56,189,248,.11)}
.vst-bp-spectrum{display:flex;align-items:flex-end;gap:3px;height:100%;overflow:hidden;pointer-events:none}
.vst-bp-spectrum i{display:block;flex:1;min-width:2px;height:calc(18% + ((var(--i) * 17) % 62) * 1%);max-height:90%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,rgba(57,255,136,.74),rgba(56,189,248,.62) 50%,rgba(14,165,233,.16));opacity:.34;transform-origin:bottom;animation:vstBpIdleBars 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -48ms)}
.vst-bp-playing .vst-bp-spectrum i{opacity:.82;animation:vstBpBassBars .72s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -31ms)}
@keyframes vstBpIdleBars{0%,100%{transform:scaleY(.38)}50%{transform:scaleY(.58)}}
@keyframes vstBpBassBars{0%{transform:scaleY(.28)}35%{transform:scaleY(.64)}70%{transform:scaleY(1)}100%{transform:scaleY(.44)}}
.vst-bp-deck-visual>.vst-bp-spectrum{position:absolute;left:16px;right:16px;top:10px;bottom:9px;height:auto;opacity:.38}
.vst-bp-now{position:absolute;z-index:3;left:20px;right:20px;bottom:13px;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.vst-bp-now-count{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(56,189,248,.18)}
.vst-bp-now-index{font-size:28px;font-weight:950;color:#fff;line-height:1}
.vst-bp-now-count em{font-style:normal;color:rgba(255,255,255,.28);font-size:13px}
.vst-bp-now-total{font-size:12px;font-weight:900;color:var(--vbp-muted)}
.vst-bp-now-copy{min-width:0;display:block;padding-bottom:1px}
.vst-bp-now-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;font-weight:950;line-height:1.15}
.vst-bp-now-artist{display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b7cad8;font-size:10px;font-weight:800}
.vst-bp-now-meta{display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7fa0b7;font-size:8px;font-weight:750;letter-spacing:.015em}
.vst-bp-deck-transport{position:relative;z-index:2;min-height:84px;padding:12px 16px;display:grid;grid-template-columns:62px minmax(0,1fr) 142px;gap:14px;align-items:center;border-bottom:1px solid rgba(56,189,248,.11);background:rgba(1,7,14,.32)}
.vst-bp-detail-deck .vst-bp-main{
  width:58px;height:48px;padding:0;border:1px solid rgba(56,189,248,.38)!important;border-radius:9px!important;background:linear-gradient(180deg,rgba(13,33,54,.96),rgba(4,15,27,.98))!important;
  color:#fff!important;font-size:22px;font-weight:950;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)!important;text-shadow:0 0 10px rgba(255,255,255,.2)
}
.vst-bp-detail-deck .vst-bp-main:hover{border-color:var(--vbp-blue)!important;color:var(--vbp-blue)!important;box-shadow:0 0 20px rgba(56,189,248,.12)!important}
.vst-bp-detail-deck.vst-bp-playing .vst-bp-main{border-color:rgba(255,255,255,.25)!important;animation:vstBpDetailSoftPulse 2.6s ease-in-out infinite}
@keyframes vstBpDetailSoftPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;text-shadow:0 0 7px rgba(255,255,255,.16)}50%{box-shadow:0 8px 22px rgba(0,0,0,.30),0 0 8px rgba(255,255,255,.045),inset 0 1px 0 rgba(255,255,255,.05)!important;text-shadow:0 0 9px rgba(255,255,255,.25)}}
.vst-bp-transport-center{min-width:0}
.vst-bp-detail-deck .vst-bp-progress-wrap{position:relative;width:100%}
.vst-bp-detail-deck .vst-bp-times{font-size:8px;margin-top:7px;color:#8da8bd}
.vst-bp-volume{display:grid;grid-template-columns:25px minmax(0,1fr) 32px;gap:6px;align-items:center;color:var(--vbp-muted);font-size:7px;font-weight:900;letter-spacing:.05em}
.vst-bp-volume-range{width:100%;height:3px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,rgba(57,255,136,.72),rgba(56,189,248,.72));border-radius:99px;outline:0;cursor:pointer}
.vst-bp-volume-range::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.25)}
.vst-bp-volume-range::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:3px;background:#fff}
.vst-bp-volume-label{text-align:right;font-variant-numeric:tabular-nums;color:#a9bfd0}
.vst-bp-detail-tracklist{position:relative;z-index:2;max-height:310px;overflow-y:auto;overscroll-behavior:contain;background:rgba(2,8,18,.34);scrollbar-width:thin;scrollbar-color:var(--vbp-blue) rgba(255,255,255,.03)}
.vst-bp-detail-tracklist .vst-bp-track-row{min-height:48px;padding:8px 14px;grid-template-columns:34px minmax(0,1fr) 34px}
.vst-bp-detail-tracklist .vst-bp-track-title{font-size:11px}
.vst-bp-detail-tracklist .vst-bp-track-meta{font-size:9px}

@media(max-width:767px){
  .vst-bp-preview-launch{left:7px;bottom:7px;height:27px;padding:0 8px;font-size:9px}
  .vst-bp-card-menu-toggle{right:36px;min-width:66px;padding:0 6px}
  .vst-bp-card-player .vst-bp-spectrum{top:39px;height:40px}
  .vst-bp-card-now{top:84px}
  .vst-bp-card-player .vst-bp-main{top:81px;width:40px;height:32px;font-size:16px}
  .vst-bp-card-player .vst-bp-progress-wrap{top:124px}
  .vst-bp-card-menu-summary{top:38px;bottom:7px;padding:7px}
  .vst-bp-menu-release{gap:10px;margin-bottom:10px}
  .vst-bp-menu-release-title{font-size:14px;line-height:1.25}
  .vst-bp-menu-release-count{font-size:9px;line-height:1.25;padding-top:3px}
  .vst-bp-menu-meta{gap:7px}
  .vst-bp-menu-meta span{padding:7px 9px;font-size:11px;line-height:1.25;border-radius:7px}
  .vst-bp-menu-meta em{font-size:8px;margin-right:6px}
  .vst-bp-menu-empty{font-size:11px}
  .vst-bp-card-tracklist{top:38px;bottom:7px}
  .vst-bp-track-row{min-height:38px;padding:5px 5px;grid-template-columns:22px minmax(0,1fr) 23px;gap:5px}
  .vst-bp-detail-section{margin-top:34px}
  .vst-bp-detail-heading h4{font-size:20px}
  .vst-bp-detail-heading p{font-size:10px;padding:0 8px}
  .vst-bp-deck-head{padding:11px 12px;min-height:56px}
  .vst-bp-deck-head strong{font-size:11px}
  .vst-bp-deck-visual{height:128px;padding:10px 12px}
  .vst-bp-now{left:14px;right:14px;bottom:12px;gap:9px}
  .vst-bp-now-index{font-size:23px}
  .vst-bp-now-title{font-size:12px}
  .vst-bp-now-artist{font-size:9px}
  .vst-bp-now-meta{font-size:7px;margin-top:3px}
  .vst-bp-deck-transport{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 12px;min-height:76px}
  .vst-bp-detail-deck .vst-bp-main{width:50px;height:44px;font-size:19px}
  .vst-bp-detail-deck .vst-bp-control-svg{width:18px;height:18px}
  .vst-bp-volume{grid-column:1/-1;grid-template-columns:25px minmax(0,1fr) 32px;margin-top:2px}
  .vst-bp-detail-tracklist{max-height:280px}
  .vst-bp-detail-tracklist .vst-bp-track-row{min-height:44px;padding:7px 9px;grid-template-columns:28px minmax(0,1fr) 28px}
}

@media(max-width:430px){
  .vst-bp-track-title{font-size:9px}
  .vst-bp-detail-tracklist{max-height:240px}
}
@media(prefers-reduced-motion:reduce){
  .vst-bp-playing .vst-bp-spectrum i,.vst-bp-preview-host.vst-bp-playing .vst-bp-main,.vst-bp-detail-deck.vst-bp-playing .vst-bp-main{animation:none!important}
}

/* ───────────────────── PLAYER LAYOUT REFINEMENT ─────────────────────
Cards: centred poster + title stack, transport at the bottom.
Product details: information-led deck with product artwork on the right.
*/
.vst-bp-card-player-view{
  background:radial-gradient(circle at 50% 46%,rgba(14,165,233,.08),transparent 54%)
}
.vst-bp-card-art-stage{
  position:absolute;z-index:3;left:0;right:0;top:36px;height:82px;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;pointer-events:none
}
.vst-bp-card-art-stage .vst-bp-card-art{
  position:static!important;display:block!important;float:none!important;
  width:78px!important;height:78px!important;min-width:78px!important;max-width:78px!important;
  aspect-ratio:1/1!important;object-fit:cover!important;object-position:50% 50%!important;
  margin:0!important;padding:0!important;transform:none!important;
  border-radius:7px;border:1px solid rgba(56,189,248,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 18px rgba(56,189,248,.07)
}
.vst-bp-card-now{
  left:12px;
  right:12px;
  top:auto;
  bottom: 72px;
  text-align:center;
  z-index:4
}
.vst-bp-card-now .vst-bp-now-title{font-size:10px;line-height:1.2}
.vst-bp-card-now .vst-bp-now-artist{margin-top: 4px;font-size:7px}
.vst-bp-card-player .vst-bp-main{
  left:50%;right:auto;top:auto;bottom:36px;transform:translateX(-50%);
  width:36px;height:28px;font-size:16px;border-radius:6px!important
}
.vst-bp-card-player .vst-bp-main:hover{transform:translateX(-50%) scale(1.05)}
.vst-bp-preview-host.vst-bp-playing .vst-bp-main{transform:translateX(-50%)}
.vst-bp-card-player .vst-bp-progress-wrap{
  left:11px;right:11px;top:auto;bottom:7px
}
.vst-bp-card-player .vst-bp-times{margin-top:3px;font-size:6px}

/* Product-details now-playing area: number + title/details left, artwork right. */
.vst-bp-deck-visual{
  height:190px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 160px;
  gap:18px;align-items:stretch;overflow:hidden
}
.vst-bp-deck-visual>.vst-bp-spectrum{display:none!important}
.vst-bp-deck-visual .vst-bp-now{
  position:relative;inset:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:0;min-width:0;padding:4px 0;pointer-events:none
}
.vst-bp-deck-visual .vst-bp-now-count{
  margin:0 0 15px;align-self:flex-start;text-shadow:0 0 20px rgba(56,189,248,.16)
}
.vst-bp-deck-visual .vst-bp-now-index{font-size:42px;line-height:.9}
.vst-bp-deck-visual .vst-bp-now-count em{font-size:15px}
.vst-bp-deck-visual .vst-bp-now-total{font-size:13px}
.vst-bp-deck-visual .vst-bp-now-copy{width:100%;min-width:0;padding:0}
.vst-bp-deck-visual .vst-bp-now-title{
  font-size:18px;line-height:1.12;white-space:normal;overflow:visible;text-overflow:clip;margin:0 0 7px
}
.vst-bp-deck-visual .vst-bp-now-artist{
  margin:0 0 6px;font-size:10px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;color:#c1d3df
}
.vst-bp-deck-visual .vst-bp-now-meta{
  margin:0;font-size:8px;line-height:1.55;white-space:normal;overflow:visible;text-overflow:clip;color:#83a4ba
}
.vst-bp-detail-art-wrap{
  position:relative;min-width:0;display:flex;align-items:center;justify-content:center;
  border-left:1px solid rgba(56,189,248,.09);padding-left:18px;overflow:hidden
}
.vst-bp-detail-art{
  display:block!important;width:142px!important;height:142px!important;max-width:100%;margin:0!important;
  aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;background:#02060c!important;box-sizing:border-box!important;border-radius:10px;border:1px solid rgba(56,189,248,.24);
  box-shadow:0 14px 32px rgba(0,0,0,.42),0 0 26px rgba(14,165,233,.09)
}

@media(max-width:767px){
  .vst-bp-card-art-stage{top:34px;height:70px}
  .vst-bp-card-art-stage .vst-bp-card-art{width:66px!important;height:66px!important;min-width:66px!important;max-width:66px!important}
  .vst-bp-card-now{top:auto;bottom:62px}
  .vst-bp-card-player .vst-bp-main{top:auto;bottom:32px;width:34px;height:26px}
  .vst-bp-card-player .vst-bp-progress-wrap{top:auto;bottom:6px}

  .vst-bp-deck-visual{
    height:160px;padding:13px 12px;grid-template-columns:minmax(0,1fr) 108px;gap:12px
  }
  .vst-bp-deck-visual .vst-bp-now{left:auto;right:auto;bottom:auto;gap:0;padding:2px 0}
  .vst-bp-deck-visual .vst-bp-now-count{margin-bottom:10px}
  .vst-bp-deck-visual .vst-bp-now-index{font-size:30px}
  .vst-bp-deck-visual .vst-bp-now-title{font-size:13px;margin-bottom:5px}
  .vst-bp-deck-visual .vst-bp-now-artist{font-size:8px;margin-bottom:4px}
  .vst-bp-deck-visual .vst-bp-now-meta{font-size:6.5px;line-height:1.45}
  .vst-bp-detail-art-wrap{padding-left:12px}
  .vst-bp-detail-art{width:96px!important;height:96px!important;min-width:96px!important;min-height:96px!important;max-width:96px!important;max-height:96px!important;aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;border-radius:8px}
}

@media(max-width:430px){
  .vst-bp-card-art-stage{top:33px;height:64px}
  .vst-bp-card-art-stage .vst-bp-card-art{width:60px!important;height:60px!important;min-width:60px!important;max-width:60px!important}
  .vst-bp-card-now{bottom: 78px;}
  .vst-bp-deck-visual{grid-template-columns:minmax(0,1fr) 92px;gap:9px;height:148px}
  .vst-bp-detail-art-wrap{padding-left:9px}
  .vst-bp-detail-art{width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;max-width:82px!important;max-height:82px!important;aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important}
}

/* Mobile control clarity: vector controls only; no emoji glyphs. */
@media(max-width:767px){.vst-bp-card-player .vst-bp-control-svg{width:16px;height:16px}.vst-bp-track-play .vst-bp-row-svg{width:14px;height:14px}}

/* ───────────────────── MOBILE PLAYER TYPOGRAPHY BOOST ─────────────────────
Keep all custom-player copy comfortably readable on phones.  This block is
intentionally last so earlier compact mobile refinements cannot shrink it.
*/
@media(max-width:767px){
  /* Card player chrome / now playing */
  .vst-bp-status{font-size:9px;letter-spacing:.08em}
  .vst-bp-card-menu-toggle{font-size:9px;min-width:72px}
  .vst-bp-preview-launch{font-size:10px}
  .vst-bp-card-now .vst-bp-now-title{font-size: 14px;line-height:1.22}
  .vst-bp-card-now .vst-bp-now-artist{font-size: 12px;line-height:1.25}
  .vst-bp-card-player .vst-bp-times{font-size:8px}

  /* Card DETAILS panel */
  .vst-bp-menu-release-title{font-size:15px;line-height:1.3}
  .vst-bp-menu-release-count{font-size:10px;line-height:1.3}
  .vst-bp-menu-meta span{font-size:12px;line-height:1.3}
  .vst-bp-menu-meta em{font-size:9px}
  .vst-bp-menu-empty{font-size:12px;line-height:1.4}

  /* Track rows shared by card + product-details players */
  .vst-bp-track-no{font-size:10px}
  .vst-bp-track-title{font-size:12px;line-height:1.3}
  .vst-bp-track-meta{font-size:10px;line-height:1.3}
  .vst-bp-track-empty{font-size:12px;line-height:1.4}

  /* Product-details player */
  .vst-bp-detail-heading .vst-bp-detail-kicker{font-size:10px}
  .vst-bp-detail-heading h4{font-size:22px}
  .vst-bp-detail-heading p{font-size:12px;line-height:1.55}
  .vst-bp-deck-head strong{font-size:14px}
  .vst-bp-detail-deck .vst-bp-status{font-size:9px}
  .vst-bp-deck-visual .vst-bp-now-index{font-size:32px}
  .vst-bp-deck-visual .vst-bp-now-count em{font-size:13px}
  .vst-bp-deck-visual .vst-bp-now-total{font-size:12px}
  .vst-bp-deck-visual .vst-bp-now-title{font-size:15px;line-height:1.2}
  .vst-bp-deck-visual .vst-bp-now-artist{font-size:11px;line-height:1.4}
  .vst-bp-deck-visual .vst-bp-now-meta{font-size:9px;line-height:1.5}
  .vst-bp-detail-deck .vst-bp-times{font-size:9px}
  .vst-bp-volume{font-size:9px}
  .vst-bp-detail-tracklist .vst-bp-track-title{font-size:13px}
  .vst-bp-detail-tracklist .vst-bp-track-meta{font-size:10px}
}

@media(max-width:430px){
  /* Do not shrink typography again on narrower phones. */
  .vst-bp-track-title{font-size:12px}
  .vst-bp-detail-tracklist .vst-bp-track-title{font-size:13px}
  .vst-bp-deck-visual .vst-bp-now-title{font-size:14px}
  .vst-bp-deck-visual .vst-bp-now-artist{font-size:10px}
  .vst-bp-deck-visual .vst-bp-now-meta{font-size:8.5px}
}

/* ───────────────────── MOBILE MUSIC CARD AUTOPLAY ─────────────────────
MUSIC searches only: the JS creates this fixed control on mobile screens.
Card-player background taps are also treated as play/pause, while actual
buttons, track rows, seek controls and menu controls keep their own actions.
*/
.vst-bp-card-player.vst-bp-panel-player .vst-bp-card-player-view{cursor:pointer}

.vst-bp-autoplay-switch{
  appearance:none;-webkit-appearance:none;position:fixed;z-index:2147482000;
  top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;
  height:38px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(2,9,18,.92);color:#f5f9ff;box-shadow:0 8px 26px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:inline-flex;align-items:center;gap:7px;font:900 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.07em;cursor:pointer;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s
}
.vst-bp-autoplay-switch.is-visible{
  opacity:.4;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear 0s
}
.vst-bp-autoplay-switch.is-visible.is-engaged{opacity:1}
.vst-bp-autoplay-label{color:#d9edfa}
.vst-bp-autoplay-state{min-width:18px;text-align:right;color:#8aa4ba}
.vst-bp-autoplay-track{
  position:relative;display:block;width:34px;height:18px;flex:0 0 auto;border-radius:99px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.34)
}
.vst-bp-autoplay-knob{
  position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.45);transition:transform .16s ease
}
.vst-bp-autoplay-switch.is-on{border-color:rgba(57,255,136,.34)}
.vst-bp-autoplay-switch.is-on .vst-bp-autoplay-track{background:rgba(57,255,136,.24);border-color:rgba(57,255,136,.42)}
.vst-bp-autoplay-switch.is-on .vst-bp-autoplay-knob{transform:translateX(16px)}
.vst-bp-autoplay-switch.is-on .vst-bp-autoplay-state{color:var(--vbp-green)}
.vst-bp-autoplay-switch:focus-visible{outline:2px solid var(--vbp-blue);outline-offset:2px}

@media(min-width:768px){
  .vst-bp-autoplay-switch{display:none!important}
}

/* ───────────────── MUSIC CARD / LEGACY DETAILS ISOLATION ─────────────────
The site-wide light/dark themes reveal .product-image > .button on :hover.
On touch browsers that hover reveal can consume the first tap, and while the
Beatport player is open it can also interfere with player hit-testing.

buildCard() already marks ONLY playable music product images with
.vst-bp-card-host, so remove the legacy THE DETAILS layer only there.
Normal/non-player product cards keep the original theme behaviour unchanged. */
.single-product .product-image.vst-bp-card-host > .button,
.single-product .product-image.vst-bp-card-host:hover > .button,
.single-product:hover .product-image.vst-bp-card-host > .button{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Slightly larger search-card transport control. These overrides are placed
last so the earlier compact desktop/mobile refinements cannot shrink it. */
.vst-bp-card-player .vst-bp-main{
  width:42px!important;
  height:34px!important;
}
.vst-bp-card-player .vst-bp-control-svg{
  width:22px!important;
  height:22px!important;
}
@media(max-width:767px){
  .vst-bp-card-player .vst-bp-main{
    width:40px!important;
    height:32px!important;
  }
  .vst-bp-card-player .vst-bp-control-svg{
    width:20px!important;
    height:20px!important;
  }
}

/* ══ AUTOPLAY TAP SHIELD ═══════════════════════════════════════════════════
Sits over a card only while viewport autoplay is starting it, absorbing the
stray taps a scrolling finger lands on the artwork link and the player body.
Those handlers open, toggle or hard-suppress the card, which was killing
autoplay a few hundred ms before it started.

z-index 30 clears everything inside .vst-bp-preview-host (player 15, close
and menu buttons 7, artwork link 1). The host is already position:relative
with isolation:isolate, so this stays contained to its own card.

It is removed the instant playback is confirmed, and in any case after
AUTOPLAY_SHIELD_MS in beatport-preview.js — it can never trap the visitor.
═════════════════════════════════════════════════════════════════════════ */
.vst-bp-tap-shield{
  position:absolute;
  inset:0;
  z-index:30;
  display:none;
  background:transparent;
  touch-action:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.vst-bp-tap-shield.is-active{ display:block; }

/* While a card is arming, EVERY control on it is disarmed in one stroke.
The gold trigger (.vst-bp-card-gold-trigger) and the details pills
(a.imagelogo) live on .single-product, outside .product-image, so a shield
that only overlays the artwork could never cover them — tapping the gold
icon ran stop() + autoSuppressedUntilExit and killed playback outright.

pointer-events is used rather than a bigger overlay deliberately: it needs
no positioning context on .single-product, so nothing on the card shifts by
a pixel when the shield arms. */
.single-product.vst-bp-arming{ pointer-events:none !important; }
.single-product.vst-bp-arming .vst-bp-tap-shield.is-active{ pointer-events:auto !important; }

/* Faint spinner, delayed by .28s so a quick successful start shows nothing
at all — only a card that is genuinely struggling ever looks busy. */
.vst-bp-tap-shield::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:30px; height:30px;
  margin:-15px 0 0 -15px;
  border-radius:50%;
  border:2px solid rgba(56,189,248,.5);
  border-top-color:transparent;
  opacity:0;
  transition:opacity .2s ease .6s;   /* delayed past a normal start */
  animation:vstBpShieldSpin .7s linear infinite;
  pointer-events:none;
}
.vst-bp-tap-shield.is-active::after{ opacity:.85; }

@keyframes vstBpShieldSpin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .vst-bp-tap-shield::after{ animation:none; }
}

/* Desktop never raises the shield (see isAutoplayContext), but belt and
braces: if one is ever left in the DOM it must not swallow mouse clicks. */
@media (min-width:768px){
  .vst-bp-tap-shield{ display:none !important; }
}


/* ══ WHEN THE BROWSER REFUSES SOUND ════════════════════════════════════════
Safari only grants "transient user activation" for a few seconds after a
touch. A card that buffers slowly can reach its play() call after that window
shuts, and the call is refused even though tapping the same card plays it
perfectly. Two visible states cover that:

  .vst-bp-needs-tap        audible AND muted playback were both refused. The
                           deck is left OPEN — it used to snap shut, which is
                           what "the player doesn't open" actually was — with
                           a prompt so one tap starts it.

  .vst-bp-muted-fallback   muted playback was accepted but unmuting was not.
                           It IS playing, just silently, so the visitor is
                           told rather than left wondering.
═══════════════════════════════════════════════════════════════════════════ */
.vst-bp-preview-host.vst-bp-needs-tap .vst-bp-card-now::after,
.vst-bp-preview-host.vst-bp-muted-fallback .vst-bp-card-now::after{
  content:'TAP TO PLAY';
  display:block;
  margin-top:6px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
  color:#0a1420;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  border-radius:999px;
  padding:4px 10px;
  align-self:center;
  animation:vstBpTapPulse 1.9s ease-in-out infinite;
}
.vst-bp-preview-host.vst-bp-muted-fallback .vst-bp-card-now::after{
  content:'TAP FOR SOUND';
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
}

@keyframes vstBpTapPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.72; transform:scale(.97); }
}

@media (prefers-reduced-motion:reduce){
  .vst-bp-preview-host.vst-bp-needs-tap .vst-bp-card-now::after,
  .vst-bp-preview-host.vst-bp-muted-fallback .vst-bp-card-now::after{ animation:none; }
}