/* 6.14.11 audio fit (Nov 11): players shrink to their container on phone and tablet.
   Root cause on category cards: .card-body is content-box with width equal to the card
   plus 12px left/right padding, so the body is 24px wider than the card. The card's
   overflow:hidden then clips the right 12px — waveforms and duration times are cut off. */

/* 1) Keep the card body (and therefore the player) inside the card. */
html body.dtc-c .card .card-body:not(#a):not(#b){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

/* 2) Every player layout can shrink; waves never paint past their box. */
html body.dtc-c .c9p-list,
html body.dtc-c .c9p,
html body.dtc-c .c9p-mid,
html body.dtc-c .c9p-top,
html body.dtc-c .c9p-wave,
html body.dtc-c .sp,
html body.dtc-c .sp-row,
html body.dtc-c .sp-wave,
html body.dtc-c .ssp,
html body.dtc-c .ssp-i,
html body.dtc-c .ssp-mid,
html body.dtc-c .ssp-wv,
html body.dtc-c .cb-c9p,
html body.dtc-c .h5-hear-card .c9p-list{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
html body.dtc-c .c9p-list,
html body.dtc-c .c9p,
html body.dtc-c .sp,
html body.dtc-c .sp-row,
html body.dtc-c .ssp{
  width:100%;
}
html body.dtc-c .c9p-wave,
html body.dtc-c .c9p-bars,
html body.dtc-c .sp-wave,
html body.dtc-c .sp-bars,
html body.dtc-c .ssp-wv{
  overflow:hidden;
  min-width:0;
  max-width:100%;
}
html body.dtc-c .c9p-bars i,
html body.dtc-c .sp-bars i,
html body.dtc-c .ssp-wv i{
  min-width:0!important;
  flex:1 1 0%!important;
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:800px){
  html body.dtc-c .card .c9p-bars{gap:1px}
}

/* 3) Duration/time stays on the row and stays fully visible. */
html body.dtc-c .c9p-dur,
html body.dtc-c .sp-times,
html body.dtc-c .ssp-st{
  flex:0 0 auto;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
html body.dtc-c .card .c9p .c9p-top:not(#a){
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
html body.dtc-c .card .c9p .c9p-dur:not(#a){
  min-width:3ch!important;
  flex:0 0 auto!important;
}

/* 4) Legacy Play Sound / meta-container players (compare, leftover markup). */
html body .meta-container,
html body .sample-audio,
html body .sample-audio--timeline,
html body .sample-audio--wrap{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
html body .sample-audio--timeline,
html body .sample-audio .progress,
html body .sample-audio .progress-bar{
  max-width:100%;
  overflow:hidden;
}

/* 6.14.11 carousel gold frame (Nov 11):
   The slide art (3000×1120) has a thin gold frame inset ~27px from each edge.
   .c8-car used aspect-ratio:3000/1120 with max-height:620px. Past ~1661px that
   cap makes the box wider than the art, and object-fit:cover crops the top and
   bottom of the frame (laptop widths stay intact). Drop the height cap so the
   ratio holds at every width, and use contain so the frame cannot be clipped. */
@media (min-width: 801px){
  html body.dtc-c .c8-car:not(#a){
    max-height:none!important;
    aspect-ratio:3000/1120;
    width:100%;
    height:auto;
  }
}
html body.dtc-c .c8-slide picture,
html body.dtc-c .c8-slide img{
  object-fit:contain;
  object-position:center center;
}