/* ==========================================================================
   Desktop refresh: PRODUCT PAGE, theme-bahai (bahaimusicstore.com). 2026-10-25.
   Spec: docs/DESKTOP-REFRESH-BMS.md section 7 (7A player, 7B track list, 7C rows).

   Covers the product page centre column (#productmusicinfoBody: music, audio book,
   video and document products): category label, title, artist link, cover and
   thumbnails, price and Add to Cart row, THE PREVIEW PLAYER (fancyMusicPlayer markup,
   restyled as the mobile card: round Phosphor transport, brand play button, full
   width bar), THE TRACK LIST (hairline rows, play glyph, brand price pill, brand
   accent checkbox), description and Read More, segmented Previous / List / Next,
   review pills, "Other Products" covers and the video sample card. The gift
   certificate page (#productfreeshippinginfoBody) only shares the label and title.

   DESKTOP ONLY: every rule sits in a min-width: 1024px query; phones and tablets
   (1023px and below) never see this file. Tokens are the var(--d-*) of
   stylesheet_zzz_d_tokens.css (they exist only at 1024px and up).

   Specificity: the body id leads every selector, because the fancyMusicPlayer skin,
   ninestar-player.css and the template's three inline <style> blocks load after this
   sheet. !important appears only against inline style="" attributes (track rows,
   their cells, the checkbox wrapper, the price wrapper) and the elapsed time's
   script-set left; each one says so. The generic button and field look belongs to
   stylesheet_zzz_d_base.css; this file only sizes and places those, except the
   segmented Previous / List / Next and the review pills, whose look is product's.
   The Phosphor glyph masks (regular weight, MIT) are copied from
   stylesheet_zz_9star_m_product.css; the speaker is the path given in the spec.
   ========================================================================== */

@media (min-width: 1024px) {
  /* ---------------------------------------------------------- category heading
     Owner, 2026-10-25: the big category heading over both columns stays exactly as the
     site draws it (template <style>, p_147.css / p_233.css). No desktop rule here. */

  /* ------------------------------------------------------------------- title */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #h1 {
    margin: 0;
    padding: 0;
    font: 700 var(--d-fs-h1-product) / 1.2 var(--d-font);
    letter-spacing: -0.3px;
    text-transform: none;
    text-align: left;
    color: var(--d-ink);
  }

  /* rules: the UA's two-tone grey bevel becomes the hairline used everywhere else */
  #productmusicinfoBody :is(#cnt, .music_info_left_part, #wrap) > hr,
  #productmusicinfoBody #productDescription hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--d-line);
    background: none;
    color: transparent;
  }
  /* right column: title, rule, share row, rule. The two <br> after the share row
     made a 30px hole; the second rule clears the floated row instead (its inline
     -7px top margin is absorbed by the clearance). */
  #productmusicinfoBody #cnt > br {
    display: none;
  }
  #productmusicinfoBody #cnt > hr {
    clear: both;
    margin: 12px 0 0;
  }
  /* the share row: X in a fixed 90px slot, Save 10px after it, then an empty Like
     box (stylesheet.css forces 280px with !important, plus a 30px margin) that
     wrapped to a second, blank line in the 1024-1139 tier. One flex row: the slots
     size to their buttons and the Like box shrinks instead of wrapping (flex-shrink
     wins over the forced width, so no !important is needed). */
  #productmusicinfoBody #socials {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 12px;
    padding: 12px 0;
  }
  #productmusicinfoBody #socials > div {
    margin: 0;
    line-height: 0;
  }
  #productmusicinfoBody #social_twitter {
    width: auto;
  }
  #productmusicinfoBody #social_facebook {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* ---------------------------------------------------- artist link, rating
     The artist link was a 12px underlined grey link in the left column. */
  #productmusicinfoBody .music_info_left_part {
    font-size: var(--d-fs-ui);
    color: var(--d-ink-2);
  }
  #productmusicinfoBody .music_info_left_part > strong {
    color: var(--d-ink);
  }
  #productmusicinfoBody .music_info_left_part > hr {
    margin: 10px 0 8px;
  }
  /* the artist link keeps the site's near-black colour and underline (owner, 2026-10-25) */
  #productmusicinfoBody .music_info_left_part .aut a {
    color: #414141;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ------------------------------------------------------- cover, thumbnails
     The cover kept its 3px slot (so nothing shifts) but loses the grey frame for the
     6px corner and hairline ring the listings use. The thumbnails were four 65px
     pictures in a bordered strip; they are one row of four equal squares exactly as
     wide as the cover, 8px apart (video products have eight: two rows). */
  #productmusicinfoBody #productMainImage .image {
    border: 0;
    padding: 3px;
  }
  #productmusicinfoBody #productMainImage .image a {
    border-radius: var(--d-radius-cover);
  }
  #productmusicinfoBody #productMainImage img {
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  #productmusicinfoBody #productAdditionalImages {
    box-sizing: border-box;
    width: 281px;
    margin: 8px 0 12px;
    padding: 0 3px;
    border: 0;
  }
  #productmusicinfoBody #productAdditionalImages .wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: auto;
    overflow: visible; /* theme clearfix clipped the focus ring; grid needs no clearing */
  }
  #productmusicinfoBody #productAdditionalImages .wrapper > br {
    display: none;
  }
  #productmusicinfoBody #productAdditionalImages .additionalImages {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
  }
  #productmusicinfoBody #productAdditionalImages .additionalImages > a {
    display: block;
    border-radius: var(--d-radius-cover);
  }
  /* the theme floats the img right, which left its link 0px tall: the focus ring
     drew as a flat line instead of around the picture */
  #productmusicinfoBody #productAdditionalImages .additionalImages img {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    object-fit: cover;
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }

  /* ------------------------------------------------- price and Add to Cart
     One buy row (owner, 2026-10-25): "Starting at: $1.29" on one line at the left,
     quantity and the large primary button at the right. The price
     sits in a div with an inline float and a 10px left margin (!important on the
     margin only); #cartAdd is a flex box, so it lays out beside that float. */
  /* flow-root: #cartAdd's top margin no longer collapses through the form (which
     pushed the floated price 16px below the button row) */
  #productmusicinfoBody #cnt > form {
    display: flow-root;
  }
  #productmusicinfoBody #cnt form > br {
    display: none;
  }
  #productmusicinfoBody #cnt form > div:has(> #productPrices) {
    float: left;
    display: flex;
    align-items: center;
    min-height: var(--d-btn-h-lg);
    margin: 16px 24px 0 0 !important; /* inline style: margin-left:10px */
  }
  #productmusicinfoBody #productPrices {
    margin: 0;
    padding: 0;
    font: 400 var(--d-fs-ui) / 1.3 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-ink-2);
  }
  #productmusicinfoBody #productPrices {
    white-space: nowrap;
  }
  #productmusicinfoBody
    #productPrices
    :is(.productBasePrice, .productSpecialPrice, .productSalePrice) {
    margin-left: 4px;
    font: 700 24px/1.15 var(--d-font);
    letter-spacing: -0.2px;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
  }
  #productmusicinfoBody #productPrices .normalprice {
    text-decoration: line-through;
    color: var(--d-ink-2);
  }
  #productmusicinfoBody #cartAdd {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    clear: none;
    white-space: nowrap;
    height: auto;
    min-height: var(--d-btn-h-lg);
    margin: 16px 0 0;
    padding: 0;
    overflow: visible;
    font: 600 var(--d-fs-ui) / 1.3 var(--d-font);
    color: var(--d-ink);
  }
  #productmusicinfoBody #cartAdd input[type="text"] {
    box-sizing: border-box;
    width: 56px;
    height: var(--d-field-h);
    margin: 0;
    padding: 0 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  #productmusicinfoBody #cartAdd :is(input[type="submit"], .ns-btn) {
    float: none;
    flex: 0 0 auto;
    min-height: var(--d-btn-h-lg);
    height: auto;
    margin: 0;
    padding: var(--d-btn-pad-lg);
    font-size: var(--d-fs-btn-lg);
  }
  #productmusicinfoBody #cartAdd input[type="image"] {
    float: none;
    margin: 0;
  }

  /* ------------------------------------------------------------------ player
     Mobile is the model: the sprite row (22-32px buttons, a grey 5px bar, a tooltip
     clock, -68px bottom margin, 480px wide so it overhung the column) becomes the
     pale card: previous and next 40px round ghost buttons, play a 52px brand circle
     with the mobile shadow, Phosphor glyphs drawn as masks in the current colour. The
     layout stays the desktop one (owner, 2026-10-25): one row, the transport at the
     left, the progress bar filling the row to the right, the volume button at the
     row's end, the elapsed time under the bar's left end. Same markup, same script
     (ninestar-audio.js). */
  #productmusicinfoBody #column-center .fmp-container {
    box-sizing: border-box;
    position: relative;
    clear: both;
    width: auto;
    max-width: none;
    margin: 20px 0 0;
    padding: var(--d-player-pad);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
    font: 400 13px/1.4 var(--d-font);
    color: var(--d-ink);
  }
  #productmusicinfoBody #column-center .fmp-container > .clearfix:first-child {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
  }
  #productmusicinfoBody #column-center .fmp-container .clearfix::before,
  #productmusicinfoBody #column-center .fmp-container .clearfix::after {
    content: none;
    display: none;
  }

  /* transport: the background shorthand also removes every -normal/-hover/-press
     sprite state class the script toggles */
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    float: none;
    position: relative;
    top: 0;
    box-sizing: border-box;
    width: var(--d-transport);
    height: var(--d-transport);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--d-ink);
    text-decoration: none;
    cursor: pointer;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button {
    width: var(--d-play);
    height: var(--d-play);
    background: var(--d-brand);
    color: var(--d-brand-ink);
    box-shadow: var(--d-shadow-play);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button):active {
    background: var(--d-ghost-press);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:active {
    background: var(--d-brand-press);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous, .fmp-next, .fmp-play, .fmp-pause) {
    position: static;
    width: var(--d-glyph);
    height: var(--d-glyph);
    margin: 0;
    background: currentColor;
    -webkit-mask: var(--ns-glyph) center / contain no-repeat;
    mask: var(--ns-glyph) center / contain no-repeat;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-play, .fmp-pause) {
    width: var(--d-glyph-play);
    height: var(--d-glyph-play);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-previous {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M199.81,34a16,16,0,0,0-16.24.43L64,109.23V40a8,8,0,0,0-16,0V216a8,8,0,0,0,16,0V146.77l119.57,74.78A15.95,15.95,0,0,0,208,208.12V47.88A15.86,15.86,0,0,0,199.81,34ZM192,208,64.16,128,192,48.07Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-next {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,32a8,8,0,0,0-8,8v69.23L72.43,34.45A15.95,15.95,0,0,0,48,47.88V208.12a16,16,0,0,0,24.43,13.43L192,146.77V216a8,8,0,0,0,16,0V40A8,8,0,0,0,200,32ZM64,207.93V48.05l127.84,80Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-play {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pause {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,32H160a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm0,176H160V48h40ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Zm0,176H56V48H96Z'/%3E%3C/svg%3E");
  }

  /* progress bar: right of the transport, filling the row. The script measures the
     bar's box to place fill, handle and time, so no padding. The ::before band makes
     the 6px bar a 26px tall mouse target. */
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar {
    flex: 1 1 auto;
    min-width: 0;
    float: none;
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: var(--d-bar-h);
    margin: 0 0 0 14px;
    padding: 0;
    border-radius: 3px;
    background: var(--d-bar-track);
    box-shadow: none;
    cursor: pointer;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar::before {
    content: "";
    position: absolute;
    inset: -10px 0;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-loading-bar {
    display: none;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-progress-bar {
    top: 0;
    height: var(--d-bar-h);
    border-radius: 3px;
    background: var(--d-brand);
    box-shadow: none;
  }
  /* the handle: a 14px brand dot with a white ring on the fill's end (the script
     sets left = fill - 6px for the old 18px sprite, so -1px centres 14px) */
  #productmusicinfoBody #column-center .fmp-container .fmp-time-slider {
    top: -4px;
    box-sizing: border-box;
    width: var(--d-handle);
    height: var(--d-handle);
    margin-left: -1px;
    border: 2px solid var(--d-surface);
    border-radius: 50%;
    background: var(--d-brand);
    box-shadow: 0 1px 3px rgb(54 66 59 / 0.3);
  }
  /* elapsed time: the bubble that rode above the handle sits under the bar's left
     end. The script sets its left inline on every tick, hence !important. */
  #productmusicinfoBody #column-center .fmp-container .fmp-time {
    top: 14px;
    left: 0 !important; /* inline style set by ninestar-audio.js */
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: 400 var(--d-fs-small) / 16px var(--d-font);
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
    text-align: left;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-time
    :is(.fmp-time-arrow, .fmp-time-arrow-border) {
    display: none;
  }

  /* volume: phones hide it; a mouse user expects it, so it stays as a quiet 32px
     speaker button at the row's end, where the old player had it */
  #productmusicinfoBody #column-center .fmp-container .fmp-sound-control {
    position: static;
    flex: 0 0 auto;
    float: none;
    margin: 0 0 0 6px;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-sound-control
    .fmp-volume-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--d-ink-2);
    cursor: pointer;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-sound-control
    .fmp-volume-button::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm54-106.08a40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.58,24,24,0,0,0,0-31.72,8,8,0,0,1,12-10.58ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z'/%3E%3C/svg%3E")
      center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm54-106.08a40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.58,24,24,0,0,0,0-31.72,8,8,0,0,1,12-10.58ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }
  /* the level popup is never opened by ninestar-audio.js; it stays hidden */
  #productmusicinfoBody #column-center .fmp-container .fmp-volume-bar {
    display: none;
  }

  /* now playing: centred under the bar, clear of the elapsed time; no room taken
     before a preview plays. The 16px sprite playlist chip goes: the track list
     below is the playlist. */
  #productmusicinfoBody #column-center .fmp-container .fmp-tracks-container {
    margin: 26px 0 0;
    min-height: 0;
    text-align: center;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-tracks-container:has(.fmp-current-title:empty) {
    display: none;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-playlist-button {
    display: none;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title {
    padding: 0;
    font: 600 14px/1.4 var(--d-font);
    color: var(--d-ink);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title:empty {
    display: none;
  }

  /* video products: the sample player gets the same card, 20px under the buy row like
     the audio card (it sat flush against it); its own controls are untouched */
  #productmusicinfoBody #mediaplayer {
    clear: both;
    margin: 20px 0 0;
  }
  #productmusicinfoBody #mediaplayer .nsv {
    padding: 12px;
    border: 0;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #productmusicinfoBody #mediaplayer .nsv-video {
    border-radius: var(--d-radius-cover);
  }

  /* -------------------------------------------------------------- track list
     Three floats in a 35px cell on grey zebra rows with a boxy.jpg price image. Now
     one row per track on hairlines: the name (a small play glyph before a track with
     a preview), the price as the mobile brand pill, then a 20px checkbox in the same
     brand colour, so tick and pill read as one. The template pulls the list up 50px;
     rows and cells carry inline border, background, padding, size and alignment,
     hence !important on exactly those. DOM order is name, checkbox, price. */
  #productmusicinfoBody #head_attr {
    margin: 0;
  }
  #productmusicinfoBody #productAttributes {
    margin: 20px 0 0;
  }
  #productmusicinfoBody #productAttributes br,
  #productmusicinfoBody
    #productAttributes
    :is(#attribsOptionsText, .optionName):empty {
    display: none;
  }
  #productmusicinfoBody #productAttributes .wrapperAttribsOptions {
    margin: 0;
  }
  #productmusicinfoBody #productAttributes :is(table, tbody, tr) {
    display: block;
    width: 100%;
  }
  #productmusicinfoBody #productAttributes tr {
    border-bottom: 1px solid var(--d-line) !important; /* inline #c0c0c0 */
  }
  /* the table opens with an empty spacer row; the first real row closes the top */
  #productmusicinfoBody #productAttributes tr:not(:has(.namez)) {
    display: none;
  }
  #productmusicinfoBody #productAttributes tr:not(:has(.namez)) + tr {
    border-top: 1px solid var(--d-line);
  }
  #productmusicinfoBody #productAttributes td {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: var(--d-row-h);
    padding: 6px 8px !important; /* inline padding-top:2px */
    background-color: transparent !important; /* inline #efefef zebra */
    font-size: 14px !important; /* inline 13px */
    text-align: left !important; /* inline centre */
  }
  #productmusicinfoBody #productAttributes .namez {
    order: 1;
    flex: 1 1 auto;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    font: 400 14px/1.35 var(--d-font);
    color: var(--d-ink);
    text-align: left;
    overflow-wrap: anywhere;
  }
  /* the whole-album row (no preview link) reads as the main option */
  #productmusicinfoBody #productAttributes .namez:not(:has(a)) {
    font-weight: 700;
  }
  #productmusicinfoBody #productAttributes .namez a.linky {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
  }
  /* an explicit width, not flex-basis: WebKit sizes the inline-flex link from the
     glyph's width (0 with only a basis), which wrapped every name 24px early */
  #productmusicinfoBody #productAttributes .namez a.linky::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background: var(--d-brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z'/%3E%3C/svg%3E")
      center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }
  /* the price pill, as on phones: brand fill, white bold tabular figures; the min
     width keeps $1.29 and $12.99 on one right edge. A label, not a control: no hover. */
  #productmusicinfoBody #productAttributes .prizy {
    order: 2;
    flex: 0 0 auto;
    float: none;
    box-sizing: border-box;
    width: auto;
    min-width: 52px;
    height: auto;
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--d-radius);
    background: var(--d-brand);
    font: 700 13px/1.3 var(--d-font);
    color: var(--d-brand-ink);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  /* the checkbox's div carries an inline float and 20px / 4px margins */
  #productmusicinfoBody #productAttributes .namez ~ div:not(.prizy) {
    order: 3;
    display: flex;
    flex: 0 0 auto;
    float: none !important; /* inline style */
    margin: 0 !important; /* inline style */
  }
  /* drawn, not native: WebKit paints an unchecked native box with a very pale edge
     (under 3:1 on white) where Chromium draws a dark one. A 1.5px field-grey edge on a
     white fill reads the same in both, and the checked box is the pill's brand fill
     with a white tick, so tick and pill stay one colour. */
  #productmusicinfoBody
    #column-center
    #productAttributes
    input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: none;
    width: var(--d-check-track);
    height: var(--d-check-track);
    margin: 0;
    border: 1.5px solid var(--d-field);
    border-radius: 5px;
    background: var(--d-surface) center / 14px 14px no-repeat;
    accent-color: var(--d-brand);
    cursor: pointer;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    input[type="checkbox"]:checked {
    border-color: var(--d-brand);
    background-color: var(--d-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.6l3 3 6-7'/%3E%3C/svg%3E");
  }
  /* Windows high contrast drops author backgrounds, which would lose the tick */
  @media (forced-colors: active) {
    #productmusicinfoBody
      #column-center
      #productAttributes
      input[type="checkbox"] {
      -webkit-appearance: auto;
      appearance: auto;
    }
  }

  /* ----------------------------------------------------------- description
     Release facts, description and credits: 14px body type in ink. */
  #productmusicinfoBody #column-center #productDescription {
    font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font);
    color: var(--d-ink);
  }
  #productmusicinfoBody #productDescription b {
    color: var(--d-ink);
  }
  #productmusicinfoBody #productDescription hr {
    margin: 10px 0;
  }
  #productmusicinfoBody #wrap > hr {
    margin: 8px 0 10px;
  }
  #productmusicinfoBody #read-more {
    margin: 10px 0 0;
  }
  #productmusicinfoBody #read-more a {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 32px;
    font: 600 var(--d-fs-body) / 1.3 var(--d-font);
    color: var(--d-brand);
    text-decoration: none;
  }

  /* ------------------------------------------------ Previous / List / Next
     Three olive GIFs (Next filled, so it looked selected) become one segmented
     control: three joined outline segments, all alike, 36px, the full labels kept
     (Phosphor carets on the ends, a list glyph in the middle). In the 1024-1139
     tier the cover column (a float) runs past the details column and the row was
     squeezed beside it into two lines; clearing puts it under both columns, where
     it already sits from 1140px. */
  #productmusicinfoBody #column-center #bottom_content {
    clear: both;
  }
  #productmusicinfoBody #bottom_content .navNextPrevWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 8px 10px 20px;
    padding: 12px 0;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevCounter {
    display: block;
    margin: 0 16px 0 0;
    padding: 0;
    font: 400 var(--d-fs-ui) / 1.3 var(--d-font);
    color: var(--d-ink-2);
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList {
    display: flex;
    margin: 0;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 36px;
    height: auto;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--d-field);
    border-radius: 0;
    background: var(--d-surface);
    box-shadow: none;
    color: var(--d-brand);
    font: 600 var(--d-fs-btn-sm) / 1.2 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList
    + .navNextPrevList
    > a.ns-btn {
    margin-left: -1px;
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:first-of-type
    > a.ns-btn {
    border-top-left-radius: var(--d-radius);
    border-bottom-left-radius: var(--d-radius);
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-of-type
    > a.ns-btn {
    border-top-right-radius: var(--d-radius);
    border-bottom-right-radius: var(--d-radius);
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:active {
    background: var(--d-surface-3);
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList
    > a.ns-btn:focus-visible {
    z-index: 2;
  }

  /* link buttons keep their GIF inside the <a>; the label span carries the text */
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn
    > img {
    display: none;
  }
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn
    > .ns-btn__label {
    display: inline;
  }

  /* glyphs: an empty box masked with a Phosphor icon in the current colour */
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:not(:last-of-type)
    > a.ns-btn::before,
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-of-type
    > a.ns-btn::after,
  #productmusicinfoBody #productReviewLink > a.ns-btn::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--ns-glyph) center / contain no-repeat;
    mask: var(--ns-glyph) center / contain no-repeat;
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:first-of-type:not(:last-of-type)
    > a.ns-btn {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:not(:first-of-type):not(:last-of-type)
    > a.ns-btn {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-of-type
    > a.ns-btn {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
  }

  /* -------------------------------------------------------------- reviews
     Two olive GIFs become two quiet pale pills (no outline), each with its glyph.
     The first link's inline 6px right margin plus 2px here makes an 8px gap. */
  /* still floated right (theme); the bottom margin keeps the cleared "Other
     Products" heading off the pills (clearance swallows the heading's own margin) */
  #productmusicinfoBody #productReviewLink {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
  }
  #productmusicinfoBody #productReviewLink:not(:has(a)) {
    display: none;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 36px;
    height: auto;
    padding: 0 14px;
    border: 0;
    border-radius: var(--d-radius);
    background: var(--d-surface-2);
    box-shadow: none;
    color: var(--d-brand);
    font: 600 var(--d-fs-btn-sm) / 1.2 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn + a.ns-btn {
    margin-left: 2px;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:active {
    background: var(--d-line);
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:first-child {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:nth-child(2) {
    --ns-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H80a8,8,0,0,0-5.23,1.95L40,224V64H216ZM88,112a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,112Zm0,32a8,8,0,0,1,8-8h64a8,8,0,1,1,0,16H96A8,8,0,0,1,88,144Z'/%3E%3C/svg%3E");
  }
  #productmusicinfoBody #bottom_content .reviewCount:empty {
    display: none;
  }

  /* -------------------------------------------------------- "Other Products"
     An 18px heading with a 5px line height; covers with a warm 15px blur. Now the
     page's h2 and the hairline-ringed 6px covers of the listings. */
  #productmusicinfoBody #alsoPurchased {
    margin-top: 24px;
  }
  #productmusicinfoBody #alsoPurchased > br {
    display: none;
  }
  #productmusicinfoBody #alsoPurchased h2.centerBoxHeading {
    margin: 0 0 14px;
    padding: 0;
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-transform: none;
    text-align: left;
    color: var(--d-ink);
  }
  #productmusicinfoBody #alsoPurchased .image a {
    display: inline-block;
    border-radius: var(--d-radius-cover);
  }
  #productmusicinfoBody #alsoPurchased .image img {
    display: block;
    border: 0;
    border-radius: var(--d-radius-cover);
    background: var(--d-surface-2);
    box-shadow: var(--d-cover-edge);
  }

  /* ------------------------------------------------------------------ focus */
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(
      .fmp-previous-button,
      .fmp-next-button,
      .fmp-pp-button,
      .fmp-volume-button
    ):focus-visible,
  #productmusicinfoBody
    #productAttributes
    :is(a.linky, input[type="checkbox"]):focus-visible,
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn:focus-visible,
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #categoryIcon
    .aligncenter
    a:focus-visible,
  #productmusicinfoBody
    :is(
      .bah .aut a,
      #read-more a,
      #productMainImage .image a,
      #productAdditionalImages a,
      #alsoPurchased .image a
    ):focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-time-bar:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 6px;
  }
}

/* --------------------------------------------------------------- hover (mouse) */
@media (min-width: 1024px) and (hover: hover) {
  #productmusicinfoBody :is(.bah .aut a, #read-more a):hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #productmusicinfoBody #read-more a:hover {
    color: var(--d-brand-hover);
  }

  /* player */
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button, .fmp-volume-button):hover {
    background: var(--d-ghost-hover);
    color: var(--d-brand);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button):active {
    background: var(--d-ghost-press);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:hover {
    background: var(--d-brand-hover);
    box-shadow: var(--d-shadow-play-hover);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:active {
    background: var(--d-brand-press);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-time-bar:hover
    .fmp-time-slider {
    box-shadow:
      0 0 0 4px var(--d-brand-ring),
      0 1px 3px rgb(54 66 59 / 0.3);
  }

  /* track rows: a pale band under the hovered row; a previewable name turns brand */
  #productmusicinfoBody #productAttributes tr:hover td {
    background-color: var(
      --d-surface-2
    ) !important; /* beats the inline zebra */
  }
  #productmusicinfoBody #productAttributes tr:hover .namez a.linky {
    color: var(--d-brand);
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    input[type="checkbox"]:not(:checked):hover {
    border-color: var(--d-field-hover);
  }
  #productmusicinfoBody #productAttributes .namez a.linky:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* thumbnails and "Other Products" covers lift a little */
  #productmusicinfoBody #productAdditionalImages .additionalImages a:hover img,
  #productmusicinfoBody #alsoPurchased .image a:hover img {
    box-shadow: var(--d-cover-edge), var(--d-shadow-2);
  }

  /* segmented control and review pills */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:hover {
    z-index: 1;
    background: var(--d-surface-2);
    border-color: var(--d-field-hover);
    color: var(--d-brand);
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:active {
    background: var(--d-surface-3);
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:hover {
    background: var(--d-surface-3);
    color: var(--d-brand);
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:active {
    background: var(--d-line);
  }
}

/* --------------------------------------------------- motion (dial 3, opt-in) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button) {
    transition:
      transform var(--d-dur) var(--d-ease),
      background-color var(--d-dur) linear,
      box-shadow var(--d-dur) linear,
      color var(--d-dur) linear;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):active {
    transform: scale(0.96);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-volume-button {
    transition:
      background-color var(--d-dur) linear,
      color var(--d-dur) linear;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-time-slider {
    transition: box-shadow var(--d-dur) linear;
  }
  #productmusicinfoBody #productAttributes td {
    transition: background-color var(--d-dur) linear;
  }
  #productmusicinfoBody #productAttributes .namez a.linky {
    transition: color var(--d-dur) linear;
  }
  #productmusicinfoBody
    :is(
      #productAdditionalImages .additionalImages img,
      #alsoPurchased .image img
    ) {
    transition: box-shadow var(--d-dur) linear;
  }
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn {
    transition:
      transform var(--d-dur) var(--d-ease),
      background-color var(--d-dur) linear,
      border-color var(--d-dur) linear;
  }
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn:active {
    transform: scale(0.98);
  }
}