joe-radio{--radio-ink:#0a4834;--radio-paper:#fff9ef;position:fixed;left:auto;right:20px;bottom:20px;z-index:40;display:block;width:340px;max-width:calc(100vw - 32px);color:var(--radio-ink);font:14px/1.3 var(--font-body-family,Arial,sans-serif)}
joe-radio [hidden]{display:none!important}joe-radio *{box-sizing:border-box}
.joe-radio__bar{display:flex;align-items:center;gap:10px;background:var(--radio-paper);border:1px solid #0a483426;border-radius:16px;padding:10px;box-shadow:0 5px 24px #082e2526}
.joe-radio__cover{position:relative;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border-radius:8px;background:#0a4834;display:grid;place-items:center}
.joe-radio__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.joe-radio__record{width:34px;height:34px;border-radius:50%;background:repeating-radial-gradient(circle,#183f32 0 3px,#37614f 4px 5px);border:1px solid #73927d;display:grid;place-items:center}.joe-radio__record:after{content:'';width:11px;height:11px;background:#f8c600;border-radius:50%;border:3px solid #e8bd1d}
.joe-radio__meta{flex:1;min-width:0}.joe-radio__brand{display:block;font-size:9px;letter-spacing:1.6px;font-weight:700;margin-bottom:3px}.joe-radio__title,.joe-radio__artist{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe-radio__title{font-size:13px;font-weight:700}.joe-radio__artist{font-size:11px;opacity:.75;margin-top:2px}
joe-radio button{cursor:pointer;appearance:none;border:0;background:transparent;color:inherit;font:inherit;display:grid;place-items:center;flex-shrink:0;padding:0;width:36px;height:44px;border-radius:50%}joe-radio button:hover{background:#0a48340d}joe-radio button:focus-visible,joe-radio input:focus-visible{outline:2px solid #0a4834;outline-offset:3px}joe-radio button:disabled{cursor:default;opacity:.4}joe-radio svg{width:18px;height:18px;fill:currentColor;display:block}.joe-radio__play{background:#f8c600!important;width:44px!important;height:44px!important}.joe-radio__play:hover{background:#e9ba00!important}.joe-radio__more{width:24px!important}
.joe-radio__panel{background:var(--radio-paper);border:1px solid #0a483426;border-radius:16px;padding:16px;margin-bottom:8px;box-shadow:0 5px 24px #082e2526;max-height:min(420px,65vh);overflow:auto}.joe-radio__panel-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:16px}.joe-radio__list{list-style:none!important;margin:8px 0!important;padding:0!important}.joe-radio__list li{margin:0;padding:0}.joe-radio__list button{width:100%;height:auto;min-height:48px;text-align:left;display:flex;gap:10px;padding:9px 6px;border-radius:8px}.joe-radio__list button[aria-current=true]{background:#0a48340d}.joe-radio__number{font-size:11px;opacity:.65;width:16px}.joe-radio__track-label{min-width:0;flex:1}.joe-radio__track-label strong,.joe-radio__track-label small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe-radio__track-label strong{font-size:12px}.joe-radio__track-label small{font-size:11px;opacity:.75}
.joe-radio__volume{display:flex;align-items:center;gap:12px;border-top:1px solid #0a48341a;padding-top:12px;font-size:11px}.joe-radio__volume input{min-width:0;flex:1;accent-color:#0a4834}.joe-radio__status{font-size:11px;margin:8px 0 0}.joe-radio__mini{margin-left:auto;width:auto!important;padding:0 14px!important;border:1px solid #0a483426!important;background:var(--radio-paper)!important;border-radius:30px!important;box-shadow:0 5px 24px #082e2526;display:flex!important;gap:8px;font-size:12px!important}.joe-radio__editor{margin:8px 0 0;padding:10px;background:#fff9ef;border-radius:8px;font-size:11px;color:#0a4834}
@media(max-width:749px){joe-radio{left:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:310px;max-width:calc(100vw - 24px)}.template-product joe-radio{bottom:calc(86px + env(safe-area-inset-bottom))}.joe-radio__bar{gap:8px}.joe-radio__cover{flex-basis:42px;width:42px;height:42px}}
@media(prefers-reduced-motion:no-preference){joe-radio button{transition:background .15s ease}}

/* Mobile starts with one compact play/pause button. */
joe-radio .joe-radio__collapse{display:none}
@media(max-width:749px){
 joe-radio:not([data-mobile-expanded="true"]){width:48px}
 joe-radio:not([data-mobile-expanded="true"]) .joe-radio__bar{padding:0;gap:0;border:0;border-radius:50%;background:transparent}
 joe-radio:not([data-mobile-expanded="true"]) .joe-radio__play{width:48px!important;height:48px!important}
 joe-radio:not([data-mobile-expanded="true"]) .joe-radio__bar > :not([data-play]),
 joe-radio:not([data-mobile-expanded="true"]) .joe-radio__panel,
 joe-radio:not([data-mobile-expanded="true"]) .joe-radio__editor{display:none!important}
 joe-radio[data-mobile-expanded="true"] .joe-radio__collapse{display:grid;position:absolute;right:0;top:-44px;width:44px;height:40px;border:1px solid #0a483426;border-radius:12px;background:var(--radio-paper);box-shadow:0 3px 12px #082e251a}
}