/* Update 46: chosen compact mobile layout. Desktop retains its existing grid. */
.beat-metadata,.player-mobile-metadata,.player-transport{display:contents}
.player-genres,.filter-instrument-short,.reset-icon{display:none}
.player-genres>span[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A real attachment link, styled like the supplied free-download reference. */
#detailDownload{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 8px;border:1px solid #858b90;border-radius:8px;background:linear-gradient(170deg,#2a2d2f 0%,#111314 38%,#090a0a 100%);box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 2px #ffffff18;font:600 12px Inter,sans-serif}
#detailDownload[hidden]{display:none}
#detailDownload .ui-icon{width:19px;height:19px;object-fit:contain}
#detailDownload:hover{border-color:#e4e4e4}
.license-card.active{border-color:#a8aaad;background:linear-gradient(145deg,#252729,#0d0e0f 65%);box-shadow:0 0 0 1px #ffffff15}
.license-card.active .license-dot{border-color:#e3e4e5;background:#55585c}
.primary-checkout{background:#ececed;border-color:#fff;color:#111;box-shadow:none}
.related-navigation{display:flex;gap:7px;align-items:center}
.related-navigation[hidden],.related-navigation button[hidden]{display:none}
.related-navigation button{width:36px;height:36px;border:1px solid #44474b;border-radius:7px;background:#111213;color:#eee;font:26px/1 Arial,sans-serif;cursor:pointer}
.related-navigation button:disabled{opacity:.3;cursor:default}
.related-navigation button:focus-visible,#relatedBeats:focus-visible{outline:1px solid #eee;outline-offset:4px}
#relatedBeats{touch-action:pan-y pinch-zoom;min-width:0}

/* The payment strip always occupies its own centered footer row. */
#globalFooter{display:flex;flex-direction:column;align-items:stretch;gap:24px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.payment-methods{display:flex;align-items:center;justify-content:center;gap:22px;list-style:none;margin:0;padding:2px 0 0;color:#8c8e92}
.payment-methods li{display:flex;align-items:center;justify-content:center;gap:3px;height:32px;white-space:nowrap}
.payment-methods svg{width:52px;height:34px}
.payment-visa{font:italic 800 24px Arial,sans-serif;letter-spacing:-1px}
.payment-methods .payment-apple{width:17px;height:22px}
.payment-pay{font:500 19px Arial,sans-serif;letter-spacing:-.8px}
.payment-google{font:600 21px Arial,sans-serif}
.payment-paypal{font:italic 700 20px Arial,sans-serif;letter-spacing:-.7px}

@media(max-width:700px){
  /* All seven controls fit on one line; menus remain unclipped above the rows. */
  #beats{display:flex;flex-direction:column;width:calc(100% - 28px);margin-top:-30px}
  #filters{order:-2;display:grid;grid-template-columns:1.08fr 1.08fr .94fr .92fr 1.06fr 30px 30px;gap:5px;flex-wrap:nowrap;margin:0 0 15px;padding:0;overflow:visible}
  #activeFilterChips{order:-1}
  #activeFilterChips:empty{display:none}
  #filters .multi-filter{min-width:0}
  #filters .filter-trigger{width:100%;min-width:0;height:34px;padding:0 6px;font-size:10px;gap:3px;border-radius:5px}
  #filters .filter-trigger>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #filters .filter-trigger i{flex:none;font-size:11px}
  #filters .filter-instrument-label{display:none}
  #filters .filter-instrument-short{display:inline}
  #favoriteOnlyBtn,#resetFilters{width:30px;min-width:0;height:34px;padding:0;border:1px solid #3a3c40;border-radius:5px;display:grid;place-items:center;background:#09090a}
  #favoriteOnlyBtn b,.reset-text{display:none}
  #favoriteOnlyBtn span{display:flex}
  #favoriteOnlyBtn .heart-icon{width:20px;height:20px}
  .reset-icon{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  #beats .section-heading{margin:0 0 13px}
  #beats .section-heading h2{font-size:24px}
  #beatList{display:flex;flex-direction:column;gap:10px;border:0;border-radius:0;background:transparent;backdrop-filter:none;overflow:visible}
  #beatList .beat-row{display:grid!important;grid-template-columns:14px 58px minmax(0,1fr) 26px 62px!important;grid-template-rows:36px 24px 28px;gap:4px 8px!important;min-height:112px;padding:11px 9px!important;border:1px solid #3b3d40;border-radius:7px;background:linear-gradient(135deg,#0c0d0dea,#080909e8);overflow:hidden}
  #beatList .beat-number{grid-column:1;grid-row:1/4;display:block;font-size:10px}
  #beatList .beat-cover{grid-column:2;grid-row:1/4;width:58px;height:72px;border-radius:6px}
  #beatList .row-play{grid-column:2;grid-row:1/4;position:relative;z-index:1;justify-self:center;align-self:center;margin:0!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
  #beatList .row-play .control-icon{width:15px!important;height:15px!important}
  #beatList .beat-copy{grid-column:3;grid-row:1;min-width:0;padding-left:2px}
  #beatList .beat-title{font:500 15px/1.25 Oswald,sans-serif;letter-spacing:.01em}
  #beatList .beat-producer{font-size:10px;line-height:1.25;color:#9b9da3;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #beatList .heart{grid-column:4;grid-row:1;display:grid;place-items:center;width:26px;height:30px;margin:0}
  #beatList .heart-icon{width:22px;height:22px}
  #beatList .row-buy{grid-column:5;grid-row:1;width:100%;height:30px;font-size:12px;border-radius:5px;letter-spacing:0}
  #beatList .beat-metadata{grid-column:3/-1;grid-row:2;display:flex;gap:8px;align-items:center;min-width:0;padding-left:2px}
  #beatList .beat-spec{display:flex!important;gap:4px;min-width:0;flex:0 0 auto}
  #beatList .beat-spec b,#beatList .beat-spec small{display:block;font:400 9px/18px Inter,sans-serif;padding:0 4px;border:1px solid #54575a;border-radius:3px;color:#dedfe1;margin:0;white-space:nowrap;max-width:73px;overflow:hidden;text-overflow:ellipsis}
  #beatList .beat-genres{display:flex!important;flex:1;min-width:0;gap:0;align-items:center;overflow:hidden}
  #beatList .beat-genres>span{font:400 9px/1.5 Inter,sans-serif;letter-spacing:0;color:#a4a7ae;text-transform:none}
  #beatList .beat-genres>span+span:before,.player-genres>span+span:before{content:'·';margin:0 4px;color:#74777c}
  #beatList .waveform{grid-column:3/-1;grid-row:3;display:block!important;width:calc(100% - 34px);height:29px;margin:0;min-width:0}
  #beatList .duration{grid-column:5;grid-row:3;display:block!important;justify-self:end;font:400 11px Oswald,sans-serif;color:#a1a4aa;padding-right:1px}

  /* Two cards per row, including on small phones. Exclusive stays half-width. */
  .licensing-guide{width:calc(100% - 28px)}
  .license-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0}
  .guide-license-card{min-height:292px;padding:18px 12px 12px;border:1px solid #343638;border-radius:7px;background:linear-gradient(135deg,#0c0d0d,#090a0a)}
  .guide-license-card[data-license-tier=exclusive]{grid-column:1/-1;width:calc((100% - 12px)/2);justify-self:center}
  .guide-license-card h2{font-size:clamp(16px,4.2vw,21px);white-space:normal;line-height:1.3;min-height:2.6em;margin:0 0 16px}
  .guide-license-card ul{display:flex;flex:1;flex-direction:column;gap:15px;margin:0 0 22px}
  .guide-license-card li{font-size:11px;line-height:1.55;gap:8px}
  .guide-license-card li svg{width:16px;height:16px;flex-basis:16px}
  .contract-preview-button{min-height:42px;font-size:10px;padding:8px 4px;gap:5px;line-height:1.3}
  .contract-preview-button svg{width:15px;height:15px;flex:0 0 15px}
  .license-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .license-cards .license-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 12px)/2)}

  /* Compact player: track, metadata, then left transport + waveform + elapsed time. */
  #playerBar{width:calc(100% - 16px);bottom:max(8px,env(safe-area-inset-bottom));height:auto!important;padding:10px!important;grid-template-columns:40px minmax(0,1fr) 64px!important;grid-template-rows:40px 22px 34px;gap:7px 10px!important;border-radius:10px}
  #playerCover{grid-column:1;grid-row:1;width:40px!important;height:40px!important}
  #playerBar .player-info{display:contents!important}
  #playerBar .player-meta{grid-column:2;grid-row:1;min-width:0!important;max-width:none!important;padding-left:2px}
  #playerTitle{display:block;font:500 16px/1.25 Oswald,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #playerProducer{font:400 10px/1.3 Inter,sans-serif;color:#969aa0;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #playerBuy{grid-column:3;grid-row:1;height:31px!important;font-size:12px;letter-spacing:0;border-radius:5px}
  #playerBar .player-mobile-metadata{grid-column:1/-1;grid-row:2;display:flex;gap:10px;min-width:0;align-items:center}
  #playerBar .player-info .player-spec-mini{display:flex!important;flex-direction:row;align-items:center;gap:5px;width:auto!important;height:auto;min-width:0!important;margin:0!important;padding:0!important;border:0}
  #playerBar .player-spec-mini b,#playerBar .player-spec-mini small{display:block;font:400 10px/19px Inter,sans-serif;padding:0 6px;border:1px solid #54575a;border-radius:3px;color:#dedfe1;margin:0;max-width:88px}
  #playerGenres{display:flex;flex:1;min-width:0;gap:0;overflow:hidden;white-space:nowrap;justify-content:flex-end}
  #playerGenres>span{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 10px/1.5 Inter,sans-serif;color:#a6a9af}
  #playerGenres.genres-measuring>span{flex:0 0 auto;overflow:visible}
  #playerBar .player-transport{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:122px minmax(0,1fr) 59px;gap:8px;align-items:center;min-width:0}
  #playerBar .player-controls{min-width:0!important;gap:5px!important;justify-content:flex-start!important}
  #playerBar .player-skip,#playerBar .player-repeat{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important}
  #playerBar .player-toggle{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
  #playerBar .player-controls .control-icon{width:12px!important;height:12px!important}
  #playerBar .player-toggle .control-icon{width:14px!important;height:14px!important}
  #playerBar .player-repeat.active{box-shadow:0 0 0 2px #85898e!important}
  #playerBar #masterWaveform{display:block!important;height:32px!important;min-width:0;width:100%!important}
  #playerBar .time{display:flex!important;gap:3px;justify-content:flex-end;margin:0!important;font-size:9px;color:#c3c5c9;font-variant-numeric:tabular-nums}
  #playerBar .player-tools,#audioEditorBtn,#lyricPadBtn,#savedLyricsMenuLink{display:none!important}
  #playerHide{font-size:9px;padding:0 13px;top:-25px;height:25px}
  body:has(#playerBar:not(.hidden)) #globalFooter{margin-bottom:174px}
  .footer-bottom{flex-direction:column;align-items:center;gap:12px}
  #globalFooter nav{margin:0;justify-content:center;gap:16px;font-size:9px}
  .payment-methods{gap:17px}
  .payment-methods svg{width:44px}
  .payment-visa{font-size:21px}.payment-paypal{font-size:17px}.payment-pay{font-size:17px}
  .related-head{gap:12px}.related-head h2{font-size:22px}.related-head p{font-size:10px}
}
@media(max-width:360px){
  #filters{gap:4px;grid-template-columns:1.08fr 1.04fr .88fr .86fr 1.02fr 27px 27px}
  #filters .filter-trigger{padding:0 4px;font-size:9px;gap:1px}
  #favoriteOnlyBtn,#resetFilters{width:27px}
  #beatList .beat-row{grid-template-columns:11px 44px minmax(0,1fr) 24px 54px!important;column-gap:6px!important;padding:10px 7px!important}
  #beatList .beat-cover{width:44px;height:62px}
  #beatList .beat-metadata{gap:5px}
  #beatList .beat-spec b,#beatList .beat-spec small{font-size:8px;padding:0 3px}
  #beatList .beat-genres>span{font-size:8px}
  #beatList .beat-genres>span+span:before{margin:0 3px}
  .guide-license-card{padding:15px 9px 10px}.guide-license-card li{font-size:10px;gap:6px}
  .contract-preview-button{font-size:9px;gap:3px}
  #playerBar .player-transport{grid-template-columns:118px minmax(0,1fr) 56px;gap:5px}
  #playerBar .player-controls{gap:4px!important}
  .payment-methods{gap:12px}
}