/* ==========================================================================
   Desktop refresh: PRODUCT PAGE, theme9star (9starmedia.com). 2026-10-25.
   Spec: docs/DESKTOP-REFRESH-9STAR.md sections 7, 7A and 7B (owner direction of
   2026-10-25: "Mobile is the model, but make it for desktop").

   Covers the product page centre column (#productmusicinfoBody: music, video, audio
   book and document products; #productfreeshippinginfoBody: the gift certificate):
   category label, title, share row, cover and thumbnails, artist row, price, Add to
   Cart, THE PREVIEW PLAYER (fancyMusicPlayer markup, re-created from the mobile card in
   stylesheet_zz_9star_m_product.css for a mouse), THE TRACK LIST (hairline rows, amber
   price pills, amber checkboxes), description and Read More, rating line, Prev / List /
   Next, the review pair and "Other products".

   DESKTOP ONLY: every rule sits inside @media (min-width: 1024px). Phones and tablets
   (1023px and below) keep the mobile sheets untouched.

   Reads the --d-* tokens from stylesheet_zzz_d_tokens.css (each var() carries the
   9 Star value as fallback). Local custom properties: --ns-glyph only (the mask image
   of a Phosphor icon, as on mobile). Buttons and fields get their look from the base
   sheet (stylesheet_zzz_d_base.css); this file only sizes and places them, except
   where the spec gives the product page its own look (segmented Prev / List / Next,
   the pale review pair, the player).

   Cascade: the product template prints its own <style> blocks after every sheet and
   per-product p_147.css / p_233.css load later still, hence #productmusicinfoBody
   (and #column-center where stylesheet_zz_9star.css or the player CSS compete) in front
   of every selector. !important appears only against an inline style attribute or an
   existing !important; each one says which.

   Icons: Phosphor (regular, MIT, @phosphor-icons/core 2.1.1), the data URIs copied
   verbatim from stylesheet_zz_9star_m_product.css, drawn as masks in currentColor.
   ========================================================================== */

@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. */

  /* ------------------------------------------------------------ cover, thumbs
     The theme's 1px #eceaea frame with 2px padding goes; 6px corners and the hairline
     ring instead, as every cover on the site. The magnifier badge is hidden (owner,
     mobile round 1); the cover's link still opens the zoom. Thumbnails: the bordered
     strip goes, four 65px squares in the same corners (object-fit: the 150x70 sources
     were stretched to squares). */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #productMainImage
    .image {
    padding: 0;
    border: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #productMainImage
    .image
    a {
    border-radius: var(--d-radius-cover, 6px);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #productMainImage
    img {
    display: block;
    border-radius: var(--d-radius-cover, 6px);
    box-shadow: var(--d-cover-edge, 0 0 0 1px #e4e2df);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #productMainImage
    .zoom {
    display: none;
  }
  #productmusicinfoBody #productAdditionalImages {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
  }
  /* stylesheet_tm.css gives every .wrapper overflow: hidden, which sliced the focus ring
     off the first thumbnail's top and left edges. flow-root still contains the floats. */
  #productmusicinfoBody #productAdditionalImages .wrapper {
    overflow: visible;
    display: flow-root;
  }
  #productmusicinfoBody #productAdditionalImages .additionalImages a {
    display: block;
    border-radius: var(--d-radius-cover, 6px);
  }
  /* float: none: the theme floats the img right, which left its link (display: block)
     0px high, so the focus ring drew as a flat line above the thumbnail. With the float
     gone the link wraps the image and the ring goes round it. */
  #productmusicinfoBody #productAdditionalImages img {
    display: block;
    float: none;
    object-fit: cover;
    border-radius: var(--d-radius-cover, 6px);
    box-shadow: var(--d-cover-edge, 0 0 0 1px #e4e2df);
  }

  /* --------------------------------------------------------- rating, artist
     "Average Rating: 0" and the stars: a quiet 13px line, the figure in ink. The rules
     under it and in the description are hairlines. */
  #productmusicinfoBody .music_info_left_part {
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.4;
    color: var(--d-ink-2, #5f6264);
  }
  #productmusicinfoBody .music_info_left_part > strong {
    font-weight: 600;
    color: var(--d-ink, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    :is(
      .music_info_left_part,
      .music_info_right_part,
      #wrap,
      #productDescription
    )
    hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--d-line, #e4e2df);
  }
  /* the artist row: the name and the X / Facebook follow chips, one line. Its 20px
     height (template <style>) cut the chips off, and its 300px width (with -4px margin)
     pushed the chips 11px past the 285px column, against the track list: the row takes
     the column's width instead. */
  #productmusicinfoBody .bah {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    margin-left: 0;
    padding: 8px 0;
    line-height: 1.3;
  }
  #productmusicinfoBody .bah .aut {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  /* the artist link keeps the site's own colour and underline (owner, 2026-10-25) */

  /* ------------------------------------------------------- share and follow
     zz_shop drew these as 10px charcoal uppercase tags turning amber on hover: outline
     chips now, sentence case, ink text, a warm-grey edge that passes 3:1. The gift
     certificate page prints the same share row. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #socials {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #socials
    .shareLabel {
    margin: 0 2px 0 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-small, 12px);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-ink-2, #5f6264);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #column-center
    :is(#socials a.shareLink, .bah a.artistSocial) {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--d-field, #928e88);
    border-radius: var(--d-radius, 10px);
    background: var(--d-surface, #fff);
    color: var(--d-ink, #2d2d2d);
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
  }
  #productmusicinfoBody #column-center .bah a.artistSocial {
    min-height: 30px;
    padding: 0 10px;
  }
  /* zz_shop turns them amber on :hover and :focus-visible: not here */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #column-center
    :is(#socials a.shareLink, .bah a.artistSocial):is(:hover, :focus-visible) {
    background: var(--d-surface, #fff);
    color: var(--d-ink, #2d2d2d);
  }

  /* ---------------------------------------------------------- title, price */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #h1 {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-h1-product, 28px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-transform: none;
    color: var(--d-ink, #2d2d2d);
    overflow-wrap: anywhere;
  }
  /* the rule between title and share row goes: title and share read as one group; the
     rule under the share row stays as the one divider above the buy box. The template's
     two <br> after the share row only cleared its float (gone); the second rule's
     inline margin-top: -7px, hence !important. */
  #productmusicinfoBody #cnt > #h1 + hr,
  #productmusicinfoBody #cnt > br {
    display: none;
  }
  #productmusicinfoBody #cnt > br + hr {
    margin: 0 !important;
  } /* inline style="margin-top: -7px" */
  #productmusicinfoBody #cnt form > br:first-of-type {
    display: none;
  }
  /* gift certificate: the same two rules inside .gcr (the first with an inline margin, the
     second with an inline margin-top: -8px, hence !important), the same clearing <br>s */
  #productfreeshippinginfoBody .gcr > hr:first-child,
  #productfreeshippinginfoBody .gcr > br {
    display: none;
  }
  #productfreeshippinginfoBody .gcr > br + hr {
    margin: 0 !important;
  } /* inline style="margin-top: -8px" */
  /* Keep price, quantity and purchase action in one row. The remaining form
     children span both columns so player and attributes retain their full width. */
  #productmusicinfoBody #cnt form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 16px;
  }
  #productmusicinfoBody #cnt form > * {
    grid-column: 1 / -1;
  }
  #productmusicinfoBody #cnt form > div:has(> #productPrices) {
    grid-column: 1;
    grid-row: 1;
    float: none !important; /* inline style */
    display: flex;
    align-items: center;
    min-height: var(--d-btn-h-lg, 44px);
    margin: 18px 0 0 !important; /* inline style */
  }
  #productmusicinfoBody #cnt form > #cartAdd {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 8px;
  }
  #productmusicinfoBody #cnt form #fancyMusicPlayer {
    clear: both;
  }
  #productmusicinfoBody #column-center #cartAdd input[type="text"] {
    width: 44px;
  }
  #productmusicinfoBody
    #column-center
    #cartAdd
    :is(input[type="submit"], button, a).ns-btn {
    padding: 0 14px;
    font-size: 15px;
  }
  @media (max-width: 1139px) {
    #productmusicinfoBody #cnt form {
      column-gap: 12px;
    }
    #productmusicinfoBody #column-center #productPrices .productBasePrice {
      font-size: 20px;
    }
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productPrices {
    margin: 0;
    white-space: nowrap;
    padding: 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.3;
    font-weight: 400;
    color: var(--d-ink-2, #5f6264);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #productPrices
    .productBasePrice {
    margin-left: 4px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--d-ink, #2d2d2d);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------------- Add to Cart
     One row: the "Add to Cart:" label, the quantity, and the large primary button at
     the row's right end (where the GIF sat). The template's <style> made it a 44px line
     with a 12px left pad; stylesheet_main.css clipped it (overflow), which would cut the
     button's focus ring. The mobile share button is created [hidden] and stays hidden. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #cartAdd {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    min-height: var(--d-btn-h-lg, 44px);
    clear: none; /* stylesheet_main.css clears both: that pushed it under the price */
    margin: 18px 0 0;
    padding: 0;
    overflow: visible;
    white-space: nowrap;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.3;
    font-weight: 600;
    color: var(--d-ink, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #cartAdd
    input[type="text"] {
    box-sizing: border-box;
    width: 56px;
    height: var(--d-field-h, 38px);
    margin: 0;
    padding: 0 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #cartAdd
    :is(input[type="submit"], button, a).ns-btn {
    float: none;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    min-height: var(--d-btn-h-lg, 44px);
    padding: var(--d-btn-pad-lg, 0 24px);
    color: var(--d-brand-ink, #2d2d2d);
    font-size: var(--d-fs-btn-lg, 16px);
    white-space: nowrap;
  }
  /* no JavaScript: the GIF keeps its own look, at the row's end */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #cartAdd
    input[type="image"] {
    float: none;
    margin: 0 0 0 auto;
  }
  #productfreeshippinginfoBody #cartAdd > div {
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ------------------------------------------------------------------ player
     OWNER DIRECTION. The fancyMusicPlayer row (22-32px sprite buttons, a 5px bar, a
     volume button, 480px, margin-bottom -68px) gets the mobile player's look: the pale
     card, previous and next as quiet round 40px buttons, play as the 52px amber disc with
     the charcoal glyph and its soft shadow. The layout stays the desktop one (owner,
     2026-10-25): one row, the transport at the left, the progress bar filling the rest
     of the row to the right, the elapsed time under the bar's left end. Same markup, same
     script (ninestar-audio.js); the sprite is gone in every state (the background
     shorthands beat .fmp-*-button-normal/-hover/-press). */
  #productmusicinfoBody #column-center .fmp-container {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 20px 0 0;
    padding: 16px 20px 14px;
    border-radius: var(--d-radius-lg, 14px);
    background: var(--d-surface-2, #f7f6f3);
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--d-ink, #2d2d2d);
  }
  #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;
  }

  #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-player-btn, 40px);
    height: var(--d-player-btn, 40px);
    margin: 0;
    border-radius: 50%;
    background: transparent none;
    color: var(--d-ink, #2d2d2d);
    cursor: pointer;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button {
    width: var(--d-player-play, 52px);
    height: var(--d-player-play, 52px);
    background: var(--d-brand, #e8a900) none;
    color: var(--d-brand-ink, #2d2d2d);
    /* the inset hairline gives the amber disc an edge on the pale card */
    box-shadow:
      var(
        --d-player-shadow,
        0 1px 2px rgb(45 45 45 / 0.14),
        0 6px 16px rgb(138 100 0 / 0.22)
      ),
      inset 0 0 0 1px rgb(138 100 0 / 0.25);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button):active {
    background-color: rgb(45 45 45 / 0.14);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:active {
    background-color: var(--d-brand-press, #c28d00);
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  /* the glyphs: Phosphor masks in the current colour (the shorthand drops the sprite) */
  #productmusicinfoBody
    #column-center
    .fmp-container
    :is(.fmp-previous, .fmp-next, .fmp-play, .fmp-pause) {
    position: static;
    width: var(--d-player-glyph, 22px);
    height: var(--d-player-glyph, 22px);
    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: 24px;
    height: 24px;
  }
  #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 the fill, handle and time, so no padding. The track is a shade darker
     than mobile's (#8f8c88, 3.10:1 on the card) so its whole length passes 3:1. The
     ::before band makes the 6px bar a 24px tall target without moving anything. */
  #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-player-bar-h, 6px);
    margin: 0 0 0 14px;
    padding: 0;
    border-radius: 3px;
    background: var(--d-player-bar, #8f8c88);
    box-shadow: none;
    cursor: pointer;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar::before {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-time-bar:focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: 6px;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-loading-bar {
    display: none;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-progress-bar {
    top: 0;
    height: var(--d-player-bar-h, 6px);
    border-radius: 3px;
    background: var(--d-brand, #e8a900) none;
    box-shadow: none;
  }
  /* the handle: an amber dot with a white ring and a charcoal hairline (amber alone is
     pale on the pale card), centred on the fill's end: the script sets left = fill - 6px
     for the old 18px sprite, hence the -2px margin on a 16px dot */
  #productmusicinfoBody #column-center .fmp-container .fmp-time-slider {
    top: -5px;
    box-sizing: border-box;
    width: var(--d-player-handle, 16px);
    height: var(--d-player-handle, 16px);
    margin-left: -2px;
    border: 2px solid var(--d-surface, #fff);
    border-radius: 50%;
    background: var(--d-brand, #e8a900) none;
    box-shadow:
      0 0 0 1px rgb(45 45 45 / 0.45),
      0 1px 3px rgb(45 45 45 / 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-size: var(--d-fs-small, 12px);
    line-height: 16px;
    font-weight: 400;
    color: var(--d-ink-2, #5f6264);
    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: hidden as on mobile. Its button and popup slider are sprites, no volume glyph
     ships with the site, and every desktop has system volume keys (spec proposal 12.4). */
  #productmusicinfoBody #column-center .fmp-container .fmp-sound-control {
    display: none;
  }

  /* now playing: centred under the bar, clear of the elapsed time. While nothing has
     played (title empty) it takes no room, so the card's top and bottom padding match. */
  #productmusicinfoBody #column-center .fmp-container .fmp-tracks-container {
    margin: 24px 0 0;
    min-height: 0;
    text-align: center;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-tracks-container:has(.fmp-current-title:empty) {
    margin-top: 0;
  }
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-tracks-container::before,
  #productmusicinfoBody
    #column-center
    .fmp-container
    .fmp-tracks-container::after {
    content: none;
  }
  /* the "show track list" toggle: out of the player. It is a 0px-high role=button with
     tabindex=0, i.e. an invisible tab stop between the seek bar and the first checkbox,
     and the full track list sits right below the player, so it has nothing to open. The
     collapsed list container it toggles stays closed (display: none from the player CSS). */
  #productmusicinfoBody #column-center .fmp-container .fmp-playlist-button {
    display: none;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title {
    padding: 0;
    font-size: var(--d-fs-body, 14px);
    line-height: 1.4;
    font-weight: 600;
    color: var(--d-ink, #2d2d2d);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title:empty {
    display: none;
  }

  /* video products: the sample player gets the same pale card */
  #productmusicinfoBody #mediaplayer {
    margin: 20px 0 0;
  }
  #productmusicinfoBody #mediaplayer .nsv {
    max-width: none;
    padding: 12px;
    border: 0;
    border-radius: var(--d-radius-lg, 14px);
    background: var(--d-surface-2, #f7f6f3);
    color: var(--d-ink, #2d2d2d);
  }
  #productmusicinfoBody #mediaplayer .nsv-video {
    border-radius: var(--d-radius-cover, 6px);
  }
  #productmusicinfoBody #mediaplayer .nsv-title {
    margin: 10px 0 2px;
    font-size: var(--d-fs-h3, 17px);
    line-height: 1.35;
    font-weight: 700;
    color: var(--d-ink, #2d2d2d);
  }
  #productmusicinfoBody #mediaplayer :is(.nsv-status, .nsv-description) {
    font-size: var(--d-fs-ui, 13px);
    color: var(--d-ink-2, #5f6264);
  }
  #productmusicinfoBody #mediaplayer .nsv-item-btn {
    border-color: var(--d-field, #928e88);
    border-radius: var(--d-radius, 10px);
    background: var(--d-surface, #fff);
    color: var(--d-ink, #2d2d2d);
  }
  #productmusicinfoBody #mediaplayer .nsv-item-btn.is-current {
    border-color: var(--d-brand-text, #8a6400);
    background: var(--d-brand-soft, #fff8e1);
  }
  #productmusicinfoBody #mediaplayer :focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  /* -------------------------------------------------------------- track list
     OWNER DIRECTION. Grey zebra blocks with three floats per 35px cell become one row
     per track on hairlines: the name (a small dark-amber play icon before a previewable
     track), the price as mobile's amber pill, and a 20px checkbox in that same amber, so
     tick and pill read as a pair. The whole-album row is bold. Rows wash pale on hover
     and pale amber once ticked. The template's <style> pulls the list up 50px and every
     row and cell carries inline border, padding, size, alignment and zebra colour,
     hence !important on exactly those. */
  #productmusicinfoBody #head_attr {
    margin: 0;
  }
  #productmusicinfoBody #column-center #productAttributes {
    margin: 16px 0 0;
  }
  #productmusicinfoBody #column-center #productAttributes br,
  #productmusicinfoBody
    #column-center
    #productAttributes
    :is(#attribsOptionsText, .optionName):empty {
    display: none;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    .wrapperAttribsOptions {
    margin: 0;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    :is(table, tbody, tr) {
    display: block;
    width: 100%;
  }
  #productmusicinfoBody #column-center #productAttributes table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  #productmusicinfoBody #column-center #productAttributes tr {
    border-bottom: 1px solid var(--d-line, #e4e2df) !important;
  } /* inline #c0c0c0 */
  #productmusicinfoBody #column-center #productAttributes tr:not(:has(.namez)) {
    display: none;
  } /* the empty spacer row */
  #productmusicinfoBody
    #column-center
    #productAttributes
    tr:has(.namez):first-of-type,
  #productmusicinfoBody
    #column-center
    #productAttributes
    tr:not(:has(.namez))
    + tr {
    border-top: 1px solid var(--d-line, #e4e2df);
  }
  #productmusicinfoBody #column-center #productAttributes td {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: var(--d-row-h, 44px);
    padding: 6px 8px !important; /* inline padding-top */
    background-color: transparent !important; /* inline zebra #efefef */
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-body, 14px) !important; /* inline 13px */
    text-align: left !important; /* inline centre */
  }
  #productmusicinfoBody #column-center #productAttributes .namez {
    order: 1;
    flex: 1 1 auto;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-body, 14px);
    line-height: 1.35;
    font-weight: 400;
    color: var(--d-ink, #2d2d2d);
    text-align: left;
    overflow-wrap: anywhere;
  }
  /* the whole-album row (no preview link among rows that have one) reads as the main
     option. A list with no previews at all (video formats, subtitle languages) is a set
     of equal choices: those rows stay regular instead of all turning bold. */
  #productmusicinfoBody
    #column-center
    #productAttributes
    table:has(a.linky)
    .namez:not(:has(a)) {
    font-weight: 700;
  }
  #productmusicinfoBody #column-center #productAttributes .namez a.linky {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 0;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    .namez
    a.linky::before {
    content: "";
    flex: 0 0 16px;
    width: 16px; /* WebKit leaves the flex-basis out of the link's intrinsic width, so the name wrapped early */
    height: 16px;
    margin-top: 1px;
    background: var(--d-brand-text, #8a6400);
    -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;
  }
  #productmusicinfoBody #column-center #productAttributes .namez a.linky:hover {
    color: var(--d-brand-text, #8a6400);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    .namez
    a.linky:focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
    border-radius: 2px;
  }
  /* the price pill: exactly mobile's chip, amber fill, charcoal bold figures (the
     shorthand drops stylesheet.css's boxy.jpg behind white text) */
  #productmusicinfoBody #column-center #productAttributes .prizy {
    order: 2;
    flex: 0 0 auto;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--d-radius, 10px);
    background: var(--d-brand, #e8a900) none;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--d-brand-ink, #2d2d2d);
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: none;
  }
  /* the checkbox's div carries an inline float and 20px / 4px margins */
  #productmusicinfoBody
    #column-center
    #productAttributes
    .namez
    ~ div:not(.prizy) {
    order: 3;
    display: flex;
    flex: 0 0 auto;
    float: none !important; /* inline style */
    margin: 0 !important; /* inline style */
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    input[type="checkbox"] {
    flex: none;
    width: var(--d-check-track, 20px);
    height: var(--d-check-track, 20px);
    margin: 0;
    accent-color: var(--d-brand, #e8a900);
    cursor: pointer;
  }
  #productmusicinfoBody
    #column-center
    #productAttributes
    input[type="checkbox"]:focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }
  /* ticked rows: pale amber (after the hover rule below in weight, so it wins) */
  #productmusicinfoBody
    #column-center
    #productAttributes
    tr:has(.namez):has(input:checked) {
    background-color: var(--d-brand-soft, #fff8e1);
  }

  /* gift certificate: the value select and its label */
  #productfreeshippinginfoBody .gcr > strong {
    display: block;
    margin: 18px 0 6px;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-body, 14px);
    font-weight: 700;
    color: var(--d-ink, #2d2d2d);
  }
  #productfreeshippinginfoBody #column-center #productAttributes select {
    box-sizing: border-box;
    width: min(100%, 320px);
    max-width: 100%;
    height: var(--d-field-h, 38px);
  }
  /* the description below clears the floats and draws a #ccc rule: it sat flush against
     the Add to Cart button. Room above it, and the rule as a hairline. */
  #productfreeshippinginfoBody #cartAdd {
    margin-bottom: 24px;
  }
  #productfreeshippinginfoBody #column-center #productDescription {
    padding-top: 16px;
    border-top: 1px solid var(--d-line, #e4e2df);
  }
  /* the 1024-1139px fluid tier: p_147.css / p_233.css float the buy box (shrink-to-fit
     around the 450px banner) and fix the description at 742px, which pushed the centre
     column to 1063px at 1024 (a sideways scroll, base too). Both fit their column now,
     and the description's rule ends where the buy box above it ends. */
  #productfreeshippinginfoBody .gcr {
    float: none;
    width: auto;
  }
  #productfreeshippinginfoBody #gcbanner img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  #productfreeshippinginfoBody #column-center #productDescription {
    width: auto;
  }

  /* ----------------------------------------------------------- description
     The 280px column stays (template <style>). Body type, release-fact labels in ink. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #column-center
    #productDescription {
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-body, 14px);
    line-height: var(--d-lh-body, 1.55);
    color: var(--d-ink, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #column-center
    #productDescription
    b {
    font-weight: 700;
    color: var(--d-ink, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #column-center
    #productDescription
    hr {
    margin: 10px 0;
  }
  #productmusicinfoBody #wrap > hr {
    margin: 0 0 12px;
  }
  /* "Click to Read More": the quiet text button */
  #productmusicinfoBody #read-more a {
    display: inline-block;
    width: auto;
    padding: 4px 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-body, 14px);
    line-height: 1.3;
    font-weight: 600;
    color: var(--d-brand-text, #8a6400);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #productmusicinfoBody #read-more a:hover {
    color: var(--d-ink, #2d2d2d);
  }

  /* --------------------------------------------- Prev / List / Next, reviews
     zz_shop's row stays (nav left, reviews right, a hairline above). The counter is a
     quiet line; Prev / List / Next one segmented outline control (Next forced off the
     primary fill, which made it look selected), short labels with Phosphor carets and a
     list icon as on mobile; the long names stay as the links' accessible names (label
     spans visually hidden, the short text is CSS content with an empty alternative). */
  #productmusicinfoBody .productActionRow .navNextPrevWrapper {
    gap: 0;
  }
  #productmusicinfoBody .productActionRow .navNextPrevCounter {
    margin: 0 12px 0 0;
    padding: 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-ink-2, #5f6264);
    font-variant-numeric: tabular-nums;
  }
  #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 14px;
    border: 1px solid var(--d-field, #928e88);
    border-radius: 0;
    background: var(--d-surface, #fff) none;
    color: var(--d-brand-text, #8a6400);
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-btn-sm, 13px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:nth-child(2)
    > a.ns-btn {
    border-radius: var(--d-radius, 10px) 0 0 var(--d-radius, 10px);
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-child
    > a.ns-btn {
    border-radius: 0 var(--d-radius, 10px) var(--d-radius, 10px) 0;
  }
  /* neighbouring segments share one border line */
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList
    + .navNextPrevList
    > a.ns-btn {
    margin-left: -1px;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:active {
    background-color: var(--d-brand-soft-2, #fcefc7);
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList
    > a.ns-btn:focus-visible {
    z-index: 1;
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }
  /* the GIF stays inside the link (base hides it too); the long labels for screen readers only */
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn
    > img {
    display: none;
  }
  #productmusicinfoBody
    :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
    > a.ns-btn
    > .ns-btn__label {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* the short labels (::after) and icons (::before, an empty box masked with a Phosphor glyph) */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn::before,
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-child
    > 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:nth-child(2)
    > 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:nth-child(2)
    > a.ns-btn::after {
    content: "Prev";
    content: "Prev" / "";
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:nth-child(3):not(:last-child)
    > 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:nth-child(3):not(:last-child)
    > a.ns-btn::after {
    content: "List";
    content: "List" / "";
  }
  /* Next: the text first, the caret after it */
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-child
    > 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");
  }
  #productmusicinfoBody
    .navNextPrevWrapper
    .navNextPrevList:last-child
    > a.ns-btn::before {
    content: "Next";
    content: "Next" / "";
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
  }

  /* the review pair: two pale buttons with short labels and pencil / chat glyphs */
  #productmusicinfoBody .productActionRow #productReviewLink {
    gap: 8px;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 36px;
    height: auto;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--d-radius, 10px);
    background: var(--d-surface-2, #f7f6f3) none;
    color: var(--d-brand-text, #8a6400);
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-btn-sm, 13px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:active {
    background-color: var(--d-line, #e4e2df);
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }
  #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:first-child::after {
    content: "Write a Review";
    content: "Write a Review" / "";
  }
  #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 #productReviewLink > a.ns-btn:nth-child(2)::after {
    content: "Reviews";
    content: "Reviews" / "";
  }
  #productmusicinfoBody #productReviewLink:not(:has(a)) {
    display: none;
  }

  /* -------------------------------------------------------- "Other products"
     The heading at h2 size (was 18px / -1px on a 5px line height); covers in 6px corners
     with the hairline ring instead of the warm 15px shadow. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    > br:not(.clearBoth) {
    display: none;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    h2.centerBoxHeading {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-h2, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-transform: none;
    text-align: left;
    color: var(--d-ink, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    .image
    img {
    display: block;
    border: 0;
    border-radius: var(--d-radius-cover, 6px);
    box-shadow: var(--d-cover-edge, 0 0 0 1px #e4e2df);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    .image
    a {
    display: block;
    border-radius: var(--d-radius-cover, 6px);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    .margin_col
    > a:not(:empty) {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--d-font, Arial, Helvetica, sans-serif);
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.3;
    font-weight: 600;
    color: var(--d-ink, #2d2d2d);
    text-decoration: none;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    #alsoPurchased
    :is(.image a, .margin_col > a):focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  /* ---------------------------------------------------------- focus rings
     The theme kills link outlines (stylesheet_tm.css): every control on this page gets
     the 2px dark-amber ring. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody)
    :is(
      #categoryIcon a,
      #productMainImage a,
      #productAdditionalImages a,
      .bah a,
      #socials a,
      #read-more a,
      #cartAdd input,
      #cartAdd .ns-btn
    ):focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  /* ----------------------------------------------------------- hover (mouse)
     Inside hover: hover so a touch laptop never keeps a stuck state. */
  @media (hover: hover) {
    #productmusicinfoBody
      #productAdditionalImages
      .additionalImages
      a:hover
      img,
    :is(#productmusicinfoBody, #productfreeshippinginfoBody)
      #alsoPurchased
      .image
      a:hover
      img {
      box-shadow:
        var(--d-cover-edge, 0 0 0 1px #e4e2df),
        var(
          --d-shadow-2,
          0 1px 2px rgb(45 45 45 / 0.08),
          0 8px 20px rgb(45 45 45 / 0.12)
        );
    }
    :is(#productmusicinfoBody, #productfreeshippinginfoBody)
      #alsoPurchased
      .margin_col
      > a:hover {
      color: var(--d-brand-text, #8a6400);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    :is(#productmusicinfoBody, #productfreeshippinginfoBody)
      #column-center
      :is(#socials a.shareLink, .bah a.artistSocial):hover {
      border-color: var(--d-field-hover, #6e6a65);
      background: var(--d-surface-2, #f7f6f3);
    }
    #productmusicinfoBody
      #column-center
      .fmp-container
      :is(.fmp-previous-button, .fmp-next-button):hover {
      background-color: rgb(45 45 45 / 0.08);
    }
    #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:hover {
      background-color: var(--d-brand-hover, #d39a00);
    }
    #productmusicinfoBody
      #column-center
      .fmp-container
      .fmp-time-bar:hover
      .fmp-time-slider {
      transform: scale(1.15);
    }
    #productmusicinfoBody
      #column-center
      #productAttributes
      tr:has(.namez):hover {
      background-color: var(--d-surface-2, #f7f6f3);
    }
    #productmusicinfoBody
      #column-center
      #productAttributes
      tr:has(.namez):has(input:checked):hover {
      background-color: var(--d-brand-soft-2, #fcefc7);
    }
    #productmusicinfoBody
      .navNextPrevWrapper
      .navNextPrevList
      > a.ns-btn:hover {
      background-color: var(--d-brand-soft, #fff8e1);
      color: var(--d-brand-text, #8a6400);
    }
    #productmusicinfoBody #productReviewLink > a.ns-btn:hover {
      background-color: var(--d-surface-3, #efede9);
      color: var(--d-brand-text, #8a6400);
    }
  }

  /* ----------------------------------------------------------------- motion
     Dial 3: 120ms colour changes and a small press, only when motion is welcome. */
  @media (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, 120ms)
          var(--d-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
        background-color var(--d-dur, 120ms) 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-time-slider {
      transition: transform var(--d-dur, 120ms)
        var(--d-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
    }
    #productmusicinfoBody #column-center #productAttributes tr {
      transition: background-color var(--d-dur, 120ms) linear;
    }
    :is(#productmusicinfoBody, #productfreeshippinginfoBody)
      #column-center
      :is(#socials a.shareLink, .bah a.artistSocial),
    #productmusicinfoBody
      :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
      > a.ns-btn {
      transition:
        transform var(--d-dur, 120ms)
          var(--d-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
        background-color var(--d-dur, 120ms) linear,
        border-color var(--d-dur, 120ms) linear,
        color var(--d-dur, 120ms) linear;
    }
    #productmusicinfoBody
      :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink)
      > a.ns-btn:active {
      transform: scale(0.98);
    }
    #productmusicinfoBody #productAdditionalImages img,
    :is(#productmusicinfoBody, #productfreeshippinginfoBody)
      #alsoPurchased
      .image
      img {
      transition: box-shadow var(--d-dur, 120ms) linear;
    }
  }
}