/* Tommy Boy commerce layer: merch shelf under the player, cart in the sidebar, in-video pop-ups. Shared by /player.html and /tommyshelf/. */
.tbf{--g:#ffd700;--a:#ffb300}
.tbf-shelf,.tbf-cart{font-family:'VT323',monospace}
/* rotating merch shelf, floating under the player */
.tbf-shelf{--g:#ffd700;--a:#ffb300;width:100%;margin:12px 0 0;
  background:linear-gradient(180deg,rgba(34,22,0,.93),rgba(0,0,0,.95));border:2px solid var(--a);border-radius:8px;
  box-shadow:0 0 18px rgba(255,179,0,.18);padding:9px 12px 11px}
.tbf-shelf.hide{display:none}
.tbf-sh-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tbf-tb{background:#fff;border-radius:4px;padding:2px 5px;display:flex;flex:0 0 auto}.tbf-tb img{height:13px;display:block}
.tbf-sh-t{font-family:'Staatliches',sans-serif;letter-spacing:.05em;color:var(--g);font-size:16px}
.tbf-sh-sub{font-size:15px;color:#c9a86a;margin-left:auto;letter-spacing:.03em}
.tbf-track{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth}
.tbf-track::-webkit-scrollbar{height:6px}.tbf-track::-webkit-scrollbar-thumb{background:#3a2f14;border-radius:6px}
.tbf-item{flex:0 0 auto;display:flex;gap:9px;align-items:center;background:rgba(0,0,0,.5);border:1px solid #3a2f14;border-radius:8px;padding:7px 9px 7px 7px;min-width:236px}
.tbf-item img{width:48px;height:48px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:#111}
.tbf-item .n{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;font-weight:600;color:#f0e6cf;line-height:1.25;max-width:150px}
.tbf-item .p{font-size:16px;color:var(--g);line-height:1}
.tbf-item .add{margin-left:auto;font-family:'Staatliches',sans-serif;letter-spacing:.03em;background:var(--g);color:#111;border:none;border-radius:12px;padding:6px 11px;font-size:14px;cursor:pointer}
.tbf-item .add:hover{box-shadow:0 0 12px var(--g)}
/* hover arrows when the record row overflows */
.tbf-track-wrap{position:relative}
.tbf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:30px;height:52px;
  background:rgba(0,0,0,.85);border:1px solid var(--a);color:var(--g);font-size:20px;cursor:pointer;border-radius:6px;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
.tbf-arrow.l{left:0}.tbf-arrow.r{right:0}
.tbf-arrow:hover{background:var(--a);color:#111}
.tbf-track-wrap.has-over:hover .tbf-arrow{opacity:1;pointer-events:auto}
/* keep the record row scrolling INSIDE its box, never widening the page */
.tbf-shelf,.tbf-track-wrap,.tbf-track{min-width:0;max-width:100%}
/* hover description modal (real copy pulled from each product page) */
.tbf-desc{position:fixed;z-index:9500;max-width:300px;background:linear-gradient(180deg,rgba(34,22,0,.98),rgba(0,0,0,.98));
  border:1px solid #ffb300;border-radius:8px;padding:10px 12px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:12px;color:#e8dcc0;line-height:1.45;box-shadow:0 0 20px rgba(255,179,0,.3),0 10px 30px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .15s}
.tbf-desc.on{opacity:1}
.tbf-desc b{color:#ffd700;display:block;margin-bottom:5px;font-family:'Staatliches',sans-serif;letter-spacing:.03em;font-size:14px}
/* cart, floating over the frame */
.tbf-cart{--g:#ffd700;--a:#ffb300;flex:0 0 auto;width:100%;margin:0 0 1rem;
  background:linear-gradient(180deg,rgba(34,22,0,.94),rgba(0,0,0,.96));border:2px solid var(--a);border-radius:8px;
  box-shadow:0 0 18px rgba(255,179,0,.18);overflow:hidden}
.tbf-cart.hide{display:none}
.tbf-cart .tbf-ch{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #3a2f14}
.tbf-cart .tbf-ch h4{font-family:'Staatliches',sans-serif;letter-spacing:.04em;font-size:17px;color:#fff;flex:1;margin:0}
.tbf-cart .tbf-ch .tbf-c{background:var(--g);color:#111;border-radius:20px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-family:-apple-system,sans-serif;font-weight:800;font-size:11px;padding:0 6px}
.tbf-cart .tbf-bd{max-height:min(46vh,300px);overflow-y:auto}
.tbf-cart .tbf-empty{padding:18px 14px;text-align:center;color:#8a7a54;font-size:16px;line-height:1.5}
.tbf-li{display:flex;gap:8px;padding:8px 11px;border-bottom:1px solid #241d0e;align-items:center}
.tbf-li img{width:34px;height:34px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.tbf-li .n{flex:1;min-width:0;font-family:-apple-system,sans-serif;font-size:11px;color:#f0e6cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbf-li .q{display:flex;align-items:center;gap:5px;margin-top:2px}
.tbf-li .q button{width:18px;height:18px;border:1px solid #3a2f14;background:#000;color:var(--g);border-radius:3px;cursor:pointer;font-size:13px;line-height:1}
.tbf-li .q span{font-size:14px;min-width:12px;text-align:center;color:#fff}
.tbf-li .lp{font-size:15px;color:var(--g);white-space:nowrap}
.tbf-li .rm{color:#8a7a54;cursor:pointer;font-size:14px}.tbf-li .rm:hover{color:#e50914}
.tbf-cart .tbf-ft{padding:11px 12px}
.tbf-cart .tbf-tot{display:flex;justify-content:space-between;font-size:17px;color:#fff;margin-bottom:8px}
.tbf-cart .tbf-tot b{color:var(--g)}
.tbf-cart .tbf-shp{font-size:13px;color:#8a7a54;margin-bottom:9px;letter-spacing:.03em}
.tbf-co{width:100%;font-family:'Staatliches',sans-serif;letter-spacing:.04em;font-size:16px;background:var(--g);color:#111;border:none;border-radius:8px;padding:11px;cursor:pointer}
.tbf-co:hover{box-shadow:0 0 16px var(--g)}
.tbf-co:disabled{opacity:.4;cursor:default;box-shadow:none}
.tbf-toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(20px);background:var(--g);color:#111;font-family:'Staatliches',sans-serif;letter-spacing:.03em;font-size:16px;padding:9px 18px;border-radius:20px;opacity:0;transition:all .25s;z-index:9002;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tbf-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* in-video merch pop-ups, over the frame, like the tommyboyrecords demo */
.tbf-bubble{position:absolute;left:16px;bottom:16px;z-index:30;width:min(300px,72%);display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,rgba(34,22,0,.96),rgba(0,0,0,.97));border:2px solid #ffb300;border-radius:10px;
  padding:10px 32px 10px 10px;box-shadow:0 0 22px rgba(255,179,0,.35),0 10px 30px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.tbf-bubble.in{opacity:1;transform:translateY(0)}
.tbf-bubble img{width:54px;height:54px;object-fit:cover;border-radius:5px;flex:0 0 auto;background:#111}
.tbf-bubble .bwrap{flex:1;min-width:0}
.tbf-bubble .bn{font-size:12px;font-weight:600;color:#f0e6cf;line-height:1.25}
.tbf-bubble .bp{font-family:'VT323',monospace;font-size:18px;color:#ffd700;line-height:1;margin-top:1px}
.tbf-bubble .badd{margin-top:5px;font-family:'Staatliches',sans-serif;letter-spacing:.03em;background:#ffd700;color:#111;border:none;border-radius:12px;padding:5px 12px;font-size:13px;cursor:pointer}
.tbf-bubble .badd:hover{box-shadow:0 0 12px #ffd700}
.tbf-bubble .bx{position:absolute;top:5px;right:8px;background:none;border:none;color:#8a7a54;font-size:15px;cursor:pointer;line-height:1}
.tbf-bubble .bx:hover{color:#e50914}
@media(max-width:900px){.tbf-shelf{padding:8px}.tbf-item{min-width:200px}}
/* Tommy Boy credit pill: under the artist/song overlay when a roster artist plays on another channel */
.tbf-credit{position:absolute;left:30px;bottom:44px;z-index:16;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(180deg,rgba(34,22,0,.95),rgba(0,0,0,.95));border:2px solid #ffb300;border-radius:30px;padding:6px 16px 6px 8px;
  box-shadow:0 0 18px rgba(255,179,0,.35);font-family:'Staatliches',sans-serif;letter-spacing:.04em;font-size:19px;color:#ffd700;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.tbf-credit.in{opacity:1;transform:translateY(0);pointer-events:auto}
.tbf-credit:hover{box-shadow:0 0 24px rgba(255,214,0,.7)}
.tbf-credit .lg{background:#000;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tbf-credit .lg img{height:24px;display:block}
@media(max-width:768px){.tbf-credit{left:20px;bottom:28px;font-size:14px;padding:4px 12px 4px 5px;gap:7px}.tbf-credit .lg{width:26px;height:26px}.tbf-credit .lg img{height:18px}}