.trd-catbar{--trdcb-w:260px;--trdcb-h:128px;--trdcb-r:18px;--trdcb-gap:12px;--trdcb-font:15px;--trdcb-lines:1;--trdcb-off:0px;
  --trdcb-bg:transparent;--trdcb-surface:rgba(12,14,22,.04);--trdcb-text:#111;--trdcb-muted:rgba(0,0,0,.48);--trdcb-accent:#ffd400;--trdcb-border:rgba(0,0,0,.08);--trdcb-shadow:0 10px 30px rgba(0,0,0,.08);
  position:relative;display:block;margin:var(--trdcb-off) auto 0; padding:0; background:var(--trdcb-bg);}
.trd-catbar.full{width:100vw; margin-left:50%; transform:translateX(-50%);} /* full bleed */
.trdcb-track{display:flex; gap:var(--trdcb-gap); overflow:auto; scroll-snap-type:x mandatory; padding:8px 16px;}
.trdcb-track::-webkit-scrollbar{height:8px}
.trdcb-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1); border-radius:4px}
.trdcb-tile{flex:0 0 auto; width:var(--trdcb-w); height:var(--trdcb-h); border-radius:var(--trdcb-r); background:var(--trdcb-surface); position:relative;
  box-shadow:var(--trdcb-shadow); text-decoration:none; color:var(--trdcb-text); overflow:hidden; display:flex; align-items:flex-end; justify-content:flex-start}
.trdcb-media{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1) contrast(1); opacity:.92; transition:transform .35s ease, opacity .35s ease;}
.trdcb-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); opacity:.85}
.trdcb-title{position:relative; padding:10px 14px; font-size:var(--trdcb-font); line-height:1.2; color:#fff; display:-webkit-box; -webkit-line-clamp:var(--trdcb-lines); -webkit-box-orient:vertical; overflow:hidden; font-weight:600}
.trdcb-tile:hover .trdcb-media{transform:scale(1.035); opacity:1}
@media (max-width: 600px){
  .trdcb-track{padding:6px 10px}
  .trdcb-tile{width:calc(var(--trdcb-w) * .78); height:calc(var(--trdcb-h) * .82)}
}