/* Payment artwork stays in its original colors and is 20% smaller. */
#globalFooter .payment-methods li{height:24px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#globalFooter .payment-methods img{width:36.8px;height:24px;filter:none;opacity:1;transition:none;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
@media(min-width:701px) and (max-width:980px){#globalFooter .payment-methods img{width:29.6px;height:20px}#globalFooter .payment-methods li{height:20px}}

/* Keep the clear action inside the search field, without moving its text. */
.hero-search #globalSearch{min-width:0;padding-right:38px}
.hero-search .search-clear{position:absolute;right:10px;top:50%;width:32px;height:32px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#b2b5ba;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%) scale(.9);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.hero-search .search-clear.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) scale(1);transition:opacity .18s ease,transform .18s ease,visibility 0s}
.hero-search .search-clear svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.hero-search .search-clear:hover{color:#fff;background:#ffffff0c}
.hero-search .search-clear:focus-visible{outline:1px solid #a7abb1;outline-offset:1px}

/* Tablet only: every item has an explicit cell; playback never overlaps art. */
@media(min-width:701px) and (max-width:1180px){
  #beatList .beat-row{display:grid!important;grid-template-columns:22px 52px 36px minmax(120px,1fr) minmax(130px,1fr) 30px 78px!important;grid-template-rows:40px 28px;gap:5px 9px!important;padding:12px!important;min-height:96px;align-items:center}
  #beatList .beat-number{grid-column:1;grid-row:1/3;font-size:10px}
  #beatList .beat-cover{grid-column:2;grid-row:1/3;width:52px;height:52px;aspect-ratio:1;object-fit:cover;align-self:center}
  #beatList .row-play{grid-column:3;grid-row:1/3;position:relative;inset:auto;margin:0!important;justify-self:center;align-self:center;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  #beatList .beat-copy{grid-column:4;grid-row:1;min-width:0;padding-left:3px}
  #beatList .beat-title{display:block;max-width:100%;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #beatList .beat-producer{display:block;max-width:100%;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #beatList .beat-metadata{grid-column:5;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0}
  #beatList .beat-spec{display:flex!important;align-items:center;gap:7px;margin:0;padding:0;border:0;min-width:0;white-space:nowrap}
  #beatList .beat-spec b,#beatList .beat-spec small{display:block;margin:0;font:400 9px/16px Inter,sans-serif;color:#b5b8be}
  #beatList .beat-genres{display:flex!important;min-width:0;min-height:0;max-width:100%;width:100%;padding:0!important;margin:0;border:0;gap:0;overflow:hidden;white-space:nowrap}
  #beatList .beat-genres>span{display:block;flex:0 1 auto;min-width:0;font:400 9px/1.3 Inter,sans-serif;overflow:hidden;text-overflow:ellipsis}
  #beatList .beat-genres>span[hidden]{display:none!important}
  #beatList .beat-genres.genres-measuring>span{flex:0 0 auto;overflow:visible}
  #beatList .beat-genres>span+span:before{content:'·';margin:0 4px;color:#74777c}
  #beatList .heart{grid-column:6;grid-row:1;display:grid;place-items:center;width:30px;height:32px;margin:0}
  #beatList .row-buy{grid-column:7;grid-row:1;width:78px;min-width:0;font-size:13px;height:34px}
  #beatList .waveform{grid-column:4/7;grid-row:2;display:block!important;width:100%!important;height:28px;margin:0;min-width:0}
  #beatList .duration{grid-column:7;grid-row:2;display:block!important;justify-self:end;padding-right:2px;font-size:10px}

  #playerBar{height:auto!important;grid-template-columns:44px minmax(140px,1fr) minmax(140px,1fr) 70px 78px!important;grid-template-rows:44px 34px;gap:9px!important;padding:12px!important;background:#090a0b;backdrop-filter:none;-webkit-backdrop-filter:none}
  #playerCover{grid-column:1;grid-row:1;width:44px!important;height:44px!important;aspect-ratio:1;object-fit:cover}
  #playerBar .player-info{display:contents!important}
  #playerBar .player-meta{grid-column:2;grid-row:1;width:auto!important;min-width:0!important;max-width:none!important;padding-left:3px}
  #playerTitle{display:block;font:500 17px/1.3 Oswald,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #playerProducer{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #playerBar .player-mobile-metadata{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0;overflow:hidden}
  #playerBar .player-info .player-spec-mini{display:flex!important;flex-direction:row;align-self:auto;align-items:center;justify-content:flex-start;gap:7px;width:auto!important;min-width:0!important;padding:0!important;margin:0!important;border:0}
  #playerBar .player-spec-mini b,#playerBar .player-spec-mini small{margin:0;font:400 10px/1.4 Inter,sans-serif;color:#b5b8be;white-space:nowrap}
  #playerGenres{display:flex;min-width:0;width:100%;overflow:hidden;white-space:nowrap}
  #playerGenres>span{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 9px/1.3 Inter,sans-serif;color:#a6a9af}
  #playerGenres.genres-measuring>span{flex:0 0 auto;overflow:visible}
  #playerGenres>span+span:before{content:'·';margin:0 4px;color:#74777c}
  #playerBar .player-tools{grid-column:4;grid-row:1;display:flex!important;justify-content:center;min-width:0}
  #playerBar .player-tools button[hidden]{display:none!important}
  #playerBuy{grid-column:5;grid-row:1;width:78px!important;height:36px!important;font-size:13px;padding:0 5px}
  #playerBar .player-transport{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:150px minmax(0,1fr) 74px;gap:10px;align-items:center;min-width:0}
  #playerBar .player-controls{justify-content:flex-start!important;min-width:0!important;gap:6px!important}
  #playerBar .player-skip,#playerBar .player-repeat{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
  #playerBar .player-toggle{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  #playerBar #masterWaveform{display:block!important;width:100%!important;height:32px!important;min-width:0}
  #playerBar .time{display:flex!important;justify-content:flex-end;gap:4px;margin:0!important;font-size:10px}
  body:has(#playerBar:not(.hidden)) #globalFooter{margin-bottom:155px}
}

/* A touch leaves :hover/:focus behind in Safari. Keep repeat readable there. */
@media(max-width:700px){
  #playerBar #playerRepeat,#playerBar #playerRepeat:hover,#playerBar #playerRepeat:focus,#playerBar #playerRepeat:active{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#090909!important;filter:none!important;-webkit-tap-highlight-color:transparent}
  #playerBar #playerRepeat .control-icon,#playerBar #playerRepeat:hover .control-icon,#playerBar #playerRepeat:focus .control-icon,#playerBar #playerRepeat:active .control-icon{filter:none!important;opacity:1!important;animation:none!important;transform:none!important}
  #playerBar #playerRepeat.active,#playerBar #playerRepeat.active:hover,#playerBar #playerRepeat.active:focus,#playerBar #playerRepeat.active:active{background:#f1f1f1!important;box-shadow:0 0 0 2px #85898e!important}
  #playerBar #playerRepeat:not(.active){box-shadow:none!important}
  #playerBar #playerRepeat:focus-visible{outline:1px solid #fff!important;outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.hero-search .search-clear{transition:none}}