/* ==========================================================================
   MOBILE REDESIGN: PRODUCT PAGES (2026-10-24). Spec: MOBILE-REDESIGN-SPEC.md,
   "Product page". Music, video, audio book and document products share
   #productmusicinfoBody; the gift certificate is #productfreeshippinginfoBody; the
   artist page is #indexBody and is always qualified by #artist_holder / #artist-links.

   Loads after stylesheet_zz_9star.css and the shell sheet (filename order) and
   overrides the phone layer there where the redesign differs. Every rule sits inside
   max-width: 1023px (or narrower), so desktop (1024px and up) cannot change.

   Three layers:
   - up to 1023px: the pieces (cover, thumbnails, buy box, player, track rows,
     description, Prev / Listing / Next, reviews, "Other products", artist page);
   - up to 767px: one column, in buying order: category, cover, thumbnails, title,
     artist, price, Add to Cart, player, tracks, rating, description, share row;
   - 768-1023px: two columns, the cover column (42%) left and the details right.

   Tokens come from the shell sheet; each var() carries the BMS value as fallback.
   Buttons (.ns-btn, or the theme's image buttons without JavaScript) are only laid
   out here; their look belongs to the shell sheet. The player is restyled through
   its existing .fmp-* markup only (ninestar-audio.js is not touched). The template's
   inline <style> blocks come later in the page than this sheet, hence the body id in
   front of every selector, and !important only where an inline style attribute or
   one of those blocks forces it (each one says so).
   ========================================================================== */

@media (max-width: 1023px) {

  /* ---------------------------------------------------------- category label
     The category name was a 19-32px bold heading above the cover, competing with the
     product title. It is a small label now. The <br> inside the link printed an empty
     line above it. p_147.css / p_233.css set 60px !important on the link, hence
     !important on the size. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #categoryIcon { margin: 0; padding: 0 0 12px; text-align: center; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #categoryIcon .wrapper,
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #categoryIcon .aligncenter { float: none; display: block; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #categoryIcon .aligncenter a {
    float: none;
    display: inline-block;
    padding: 6px 0;
    font-size: var(--m-fs-small, 13px) !important;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--m-brand, #4f665a);
    text-decoration: none;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #categoryIcon .aligncenter a br { display: none; }

  /* ------------------------------------------------------------------- cover
     The cover was a fixed 275px picture in a 281px grey frame. It now takes the
     column's width (90% of a phone screen, at most 520px), centred, 6px corners, a
     hairline instead of the frame so a white cover still has an edge. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productMainImage {
    float: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productMainImage .image {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productMainImage .image a {
    display: block;
    width: auto;
    height: auto;
    border-radius: var(--m-radius-cover, 6px);
    overflow: hidden;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productMainImage img {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: var(--m-radius-cover, 6px);
    box-shadow: inset 0 0 0 1px var(--m-line, #e3e4dd);
    outline: 1px solid rgb(0 0 0 / .06);
    outline-offset: -1px;
  }
  /* the magnifying-glass badge sat on the artwork (owner: "remove the magnifying glass").
     Tapping the cover still opens the zoom: the darkbox script listens on the cover's link. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productMainImage .zoom { display: none; }

  /* -------------------------------------------------------------- thumbnails
     Four 65px pictures floated in a 281px bordered strip. They are one centred row
     of four equal cells, gaps included, exactly as wide as the cover (video products
     have eight: two rows). The row-ending <br> would be a fifth cell. */
  #productmusicinfoBody #productAdditionalImages {
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    margin: 8px auto 0;
    padding: 0;
    border: 0;
  }
  #productmusicinfoBody #productAdditionalImages .wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: auto;
  }
  #productmusicinfoBody #productAdditionalImages .wrapper > br { display: none; }
  #productmusicinfoBody #productAdditionalImages .additionalImages {
    float: none;
    width: auto !important; /* the phone layer's calc((100% - 15px) / 4) !important, for the old 285px strip */
    max-width: none;
    height: auto;
    margin: 0;
  }
  #productmusicinfoBody #productAdditionalImages .additionalImages > a { display: block; }
  #productmusicinfoBody #productAdditionalImages .additionalImages img {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    object-fit: cover;
    border-radius: var(--m-radius-cover, 6px);
    outline: 1px solid rgb(0 0 0 / .06);
    outline-offset: -1px;
  }

  /* ------------------------------------------------------------ title, price */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #h1 {
    margin: 20px 0 4px;
    padding: 0;
    font-size: var(--m-fs-h1, 26px);
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--m-ink, #363636);
    overflow-wrap: anywhere;
  }
  /* the artist was named twice, in the title ("Ali Youssefi - Ordain for Me") and in the
     link under it. When the link shows that same name, the template prints the title
     whole (.ns-name-full) and without the "Artist - " prefix (.ns-name-short, created
     hidden so desktop never shows it): here the short one shows, and the link stays. */
  #productmusicinfoBody #h1 .ns-name-full { display: none; }
  #productmusicinfoBody #h1 .ns-name-short[hidden] { display: inline; }
  /* the price block sits in a div with an inline float and 10px left margin, hence
     !important; "Starting at:" reads as a quiet label, the amount as the figure */
  #productmusicinfoBody #cnt form > div:has(> #productPrices) { float: none !important; margin: 0 !important; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productPrices {
    margin: 12px 0 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--m-ink-2, #6b6e6f);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productPrices .productBasePrice {
    font-size: 22px;
    font-weight: 700;
    color: var(--m-ink, #363636);
    font-variant-numeric: tabular-nums;
  }

  /* artist link: the name was a 12px link at the end of the left column; it sits under
     the title (the Like box beside it keeps its 82px slot and shows if Facebook draws it) */
  #productmusicinfoBody :is(.bah, #bahw) {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }
  #productmusicinfoBody .bah {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  #productmusicinfoBody .bah .aut { float: none; flex: 0 1 auto; width: auto; margin: 0; }
  #productmusicinfoBody .bah .aut a {
    display: inline-block;
    padding: 6px 0; /* a 33px tall tap target on one line */
    font-size: 16px;
    font-weight: 600;
    color: var(--m-brand, #4f665a);
    text-decoration: none;
  }
  #productmusicinfoBody .bah .fb { float: none; margin-left: auto; }
  #productmusicinfoBody .bah .tw { margin: 0 !important; } /* inline margin */

  /* ------------------------------------------------------------- Add to Cart
     "Add to Cart: [1] [button]" was one 44px line with the button floated right. Now
     the quantity sits beside its label and the button takes the full width under them
     (the shell's upgraded submit or link). Without JavaScript the image button keeps
     its own size, centred. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #cartAdd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    height: auto;
    margin: 16px 0 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--m-ink-2, #6b6e6f);
    text-align: left;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #cartAdd input[type="text"] {
    box-sizing: border-box;
    width: 64px;
    height: var(--m-tap, 44px);
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    font-size: 16px; /* under 16px, iOS zooms on focus */
    text-align: center;
    color: var(--m-ink, #363636);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #cartAdd :is(input[type="submit"], button, .ns-btn) {
    float: none;
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #cartAdd input[type="image"] {
    float: none;
    flex: 0 0 auto;
    margin: 0 auto 0 0;
  }
  /* the gift certificate wraps label and quantity in their own div */
  #productfreeshippinginfoBody #cartAdd > div { display: flex; align-items: center; gap: 12px; }

  /* ------------------------------------------------- buy row (music products)
     Owner: "starting at and add to cart in the same row", then (no favourites system
     exists: the wishlist plugin was not ported) a share icon right of the button. The
     price is the row's left cell, "Starting at:" a small label over the figure; #cartAdd
     is the rest: the full-height button, then the 48px share button (jscript_ns_mobile.js;
     a favourite button can go between them later). The store sells downloads only, so
     the bare "Add to Cart:" text (font-size 0: a text node cannot be selected) and the
     quantity field are hidden; the field stays in the form and still sends its 1.
     The row itself is set per layer below (phones: the page's flex row; tablets: the
     form as a flex row). */
  #productmusicinfoBody #productPrices { margin: 0; font-size: var(--m-fs-small, 13px); line-height: 1.3; }
  #productmusicinfoBody #productPrices > span { display: block; }
  #productmusicinfoBody #productPrices .productBasePrice { display: block; font-size: 24px; line-height: 1.15; }
  #productmusicinfoBody #cartAdd {
    position: relative;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    overflow: visible; /* stylesheet_main.css clips it, which hid the "Link copied" note */
    font-size: 0;
  }
  #productmusicinfoBody #cartAdd input[type="text"] { display: none; }
  #productmusicinfoBody #cartAdd :is(input[type="submit"], .ns-btn) { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 12px; }
  #productmusicinfoBody #cartAdd input[type="image"] { margin: 0; }
  /* the share button is created with the hidden attribute, so it never shows on desktop */
  #productmusicinfoBody #cartAdd .ns-share[hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--m-btn-h, 48px);
    box-sizing: border-box;
    width: var(--m-btn-h, 48px);
    height: var(--m-btn-h, 48px);
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--m-brand, #4f665a);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    color: var(--m-brand, #4f665a);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 120ms var(--m-ease, cubic-bezier(.2,.8,.2,1)), background-color 120ms linear;
  }
  #productmusicinfoBody #cartAdd .ns-share svg { width: 22px; height: 22px; }
  #productmusicinfoBody #cartAdd .ns-share:active { transform: scale(.96); background: var(--m-surface-2, #f4f5ef); }
  #productmusicinfoBody #cartAdd .ns-share:focus-visible { outline: 2px solid var(--m-brand, #4f665a); outline-offset: 2px; }
  /* "Link copied": a small dark note over the share button; empty (and invisible) between uses */
  #productmusicinfoBody #cartAdd .ns-share__note {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 2;
    font-size: var(--m-fs-small, 13px);
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
  }
  #productmusicinfoBody #cartAdd .ns-share__note:not(:empty) {
    padding: 6px 10px;
    border-radius: var(--m-radius, 10px);
    background: var(--m-ink, #363636);
    color: #fff;
    box-shadow: 0 4px 12px rgb(0 0 0 / .15);
  }

  /* ------------------------------------------------------------------ player
     The fancyMusicPlayer row was 22-32px sprite buttons, a 6px bar and a volume
     button on one line, 480px wide, with a -68px bottom margin. On a pale card: the
     transport centred (previous, play 56px in brand colour, next, Phosphor icons in
     place of the sprite), the progress bar the card's full width under it, and the
     elapsed time under the bar's left end. Same markup, same script. */
  #productmusicinfoBody #column-center .fmp-container {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 24px 0 0;
    padding: 16px 16px 14px;
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
    font-size: 13px;
    line-height: 1.4;
    color: var(--m-ink, #363636);
  }
  #productmusicinfoBody #column-center .fmp-container > .clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 24px;
  }
  #productmusicinfoBody #column-center .fmp-container .clearfix::before,
  #productmusicinfoBody #column-center .fmp-container .clearfix::after { content: none; display: none; }

  /* transport buttons: 44px targets (play 56px); the sprite backgrounds go, each glyph
     is a Phosphor icon (regular weight, MIT) drawn as a mask in the current colour */
  #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;
    width: var(--m-tap, 44px);
    height: var(--m-tap, 44px);
    margin: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--m-ink, #363636);
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms var(--m-ease, cubic-bezier(.2,.8,.2,1)), background-color 120ms linear;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button {
    width: 56px;
    height: 56px;
    background: var(--m-brand, #4f665a);
    color: var(--m-brand-ink, #fff);
    box-shadow: 0 1px 2px rgb(54 66 59 / .12), 0 6px 16px rgb(54 66 59 / .18);
  }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button):active { background: rgb(54 66 59 / .08); }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):active { transform: scale(.96); }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):focus-visible {
    outline: 2px solid var(--m-brand, #4f665a);
    outline-offset: 2px;
  }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous, .fmp-next, .fmp-play, .fmp-pause) {
    position: static;
    width: 24px;
    height: 24px;
    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: 26px; height: 26px; }
  #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: the card's full width, its own row under the transport. The script
     measures the bar's box to place the fill, handle and time, so the bar has no
     padding: the fill then starts at its left edge. The ::before band makes the
     6px bar a 34px tall touch target without moving anything. */
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar {
    flex: 1 1 100%;
    float: none;
    box-sizing: border-box;
    width: auto;
    height: 6px;
    margin: 20px 0 0;
    padding: 0;
    border-radius: 3px;
    /* the track was --m-line (#e3e4dd) on the #f4f5ef card: almost invisible (owner: "the
       progress bar isnt visible"). --m-line darkened, so the whole length reads */
    background: #b9bdb0;
    background: color-mix(in srgb, var(--m-line, #e3e4dd), #000 22%);
    box-shadow: none;
    cursor: pointer;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar::before {
    content: "";
    position: absolute;
    inset: -14px 0;
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-time-bar:focus-visible { outline: 2px solid var(--m-brand, #4f665a); outline-offset: 6px; }
  #productmusicinfoBody #column-center .fmp-container .fmp-loading-bar { display: none; }
  #productmusicinfoBody #column-center .fmp-container .fmp-progress-bar {
    top: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--m-brand, #4f665a);
    box-shadow: none;
  }
  /* the handle: a 16px brand dot with a white ring, centred on the fill's end (the
     script sets left = fill - 6px for the old 18px sprite, hence the -2px margin) */
  #productmusicinfoBody #column-center .fmp-container .fmp-time-slider {
    top: -5px;
    width: 16px;
    height: 16px;
    margin-left: -2px;
    box-sizing: border-box;
    border: 2px solid var(--m-surface, #fff);
    border-radius: 50%;
    background: var(--m-brand, #4f665a);
    box-shadow: 0 1px 3px rgb(54 66 59 / .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. Empty until a
     preview plays, when it takes no room. */
  #productmusicinfoBody #column-center .fmp-container .fmp-time {
    top: 14px;
    left: 0 !important;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--m-ink-2, #6b6e6f);
    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 and tablets have hardware buttons (and iOS ignores page volume) */
  #productmusicinfoBody #column-center .fmp-container .fmp-sound-control { display: none; }

  /* now playing: centred under the bar, clear of the elapsed time */
  #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::before,
  #productmusicinfoBody #column-center .fmp-container .fmp-tracks-container::after { content: none; }
  #productmusicinfoBody #column-center .fmp-container .fmp-playlist-button { box-shadow: none; }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title {
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--m-ink, #363636);
  }
  #productmusicinfoBody #column-center .fmp-container .fmp-current-title:empty { display: none; }

  /* video products: the sample player takes the column width with the same card */
  #productmusicinfoBody #mediaplayer { margin: 24px 0 0; }
  #productmusicinfoBody #mediaplayer .nsv {
    max-width: none;
    padding: 12px;
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f4f5ef);
  }
  #productmusicinfoBody #mediaplayer .nsv-video { border-radius: var(--m-radius-cover, 6px); }
  #productmusicinfoBody #mediaplayer .nsv-title { margin: 10px 0 2px; font-size: var(--m-fs-h3, 17px); }
  #productmusicinfoBody #mediaplayer .nsv-status { margin: 0; font-size: 13px; color: var(--m-ink-2, #6b6e6f); }

  /* -------------------------------------------------------------- track list
     Three floats per 35px cell (name left, price box and checkbox right) on grey
     zebra rows. Now one row per track: the name, a price chip in brand colour and a
     24px checkbox, on hairlines. A track's name plays its preview (the script's own
     link), marked with a small play icon. The template's inline <style> pulls the
     list up 50px and the rows carry inline border / background / padding, hence
     !important there. */
  #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(--m-line, #e3e4dd) !important; }
  #productmusicinfoBody #productAttributes tr:first-child:has(.namez) { border-top: 1px solid var(--m-line, #e3e4dd); }
  /* the table starts with an empty spacer row */
  #productmusicinfoBody #productAttributes tr:not(:has(.namez)) { display: none; }
  #productmusicinfoBody #productAttributes td {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 52px;
    padding: 8px 0 !important;
    background-color: transparent !important;
    font-size: 15px !important;
    text-align: left !important;
  }
  #productmusicinfoBody #productAttributes .namez {
    order: 1;
    flex: 1 1 auto;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--m-ink, #363636);
    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: 4px 0;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
  }
  #productmusicinfoBody #productAttributes .namez a.linky::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--m-brand, #4f665a);
    -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 #productAttributes .prizy {
    order: 2;
    flex: 0 0 auto;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--m-radius, 10px);
    background: var(--m-brand, #4f665a);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--m-brand-ink, #fff);
    font-variant-numeric: tabular-nums;
  }
  /* 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;
    margin: 0 !important;
  }
  #productmusicinfoBody #column-center #productAttributes input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--m-brand, #4f665a);
    cursor: pointer;
  }

  /* gift certificate: the value select and its label */
  /* the gift certificate's buy box (.gcr) floated, so its column had no height and the
     description below slid up against the share row; the description's 1px top rule
     (stylesheet.css) is the divider, with room under it */
  #productfreeshippinginfoBody .gcr { float: none; width: auto; }
  #productfreeshippinginfoBody .gcr > strong { display: block; margin: 20px 0 6px; font-size: 15px; color: var(--m-ink, #363636); }
  #productfreeshippinginfoBody #productAttributes { margin: 0; }
  #productfreeshippinginfoBody #productAttributes :is(br, #attribsOptionsText:empty, .optionName, table) { display: none; }
  #productfreeshippinginfoBody #productAttributes .wrapperAttribsOptions { margin: 0; }
  #productfreeshippinginfoBody #column-center #productAttributes select {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #fff);
    font-size: 16px;
    color: var(--m-ink, #363636);
  }
  #productfreeshippinginfoBody #gcbanner { margin: 16px 0 0; }
  #productfreeshippinginfoBody #gcbanner img { display: block; width: 100%; max-width: 450px; height: auto; border-radius: var(--m-radius-cover, 6px); }

  /* ----------------------------------------------------------- description
     Release facts, description and credits: the content width, body type. */
  #productmusicinfoBody #wrap { width: auto; }
  #productmusicinfoBody #wrap > hr,
  #productmusicinfoBody #productDetailsList:not(:has(li)) { display: none; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #productDescription {
    width: auto;
    margin: 0;
    padding: 0 !important; /* the template's inline <style> sets padding-top !important */
    font-size: var(--m-fs-body, 15px);
    line-height: 1.55;
    color: var(--m-ink, #363636);
  }
  /* the gift certificate's description: its top rule (stylesheet.css) divides it from the
     buy box, with room under it. After the rule above: same weight, so it must come later
     (it sat before it and lost, so the text touched the line). */
  #productfreeshippinginfoBody #column-center #productDescription {
    padding-top: 20px !important;
    border-top: 1px solid var(--m-line, #e3e4dd);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productDescription hr {
    height: 0;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--m-line, #e3e4dd);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productDescription b { color: var(--m-ink, #363636); }
  /* "Click to Read More": a quiet text button, 44px tall */
  #productmusicinfoBody #read-more { margin: 4px 0 0; }
  #productmusicinfoBody #read-more a {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: var(--m-tap, 44px);
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--m-brand, #4f665a);
    text-decoration: none;
  }

  /* rating line: small and quiet */
  #productmusicinfoBody .music_info_left_part { font-size: var(--m-fs-small, 13px); color: var(--m-ink-2, #6b6e6f); }
  #productmusicinfoBody .music_info_left_part > strong { color: var(--m-ink, #363636); }
  #productmusicinfoBody .music_info_left_part > img[src*="stars_"] { float: none; width: 88px; height: auto; }

  /* --------------------------------------------- Prev / Listing / Next, reviews
     Owner: the lower area was messy. The counter is a small line; under it one row of
     three equal segments that never wraps ("Return to the Product List" took 2 lines,
     and Next was filled, so it looked selected): short labels with Phosphor carets and
     a list icon, all three alike. The full names stay as the links' accessible names
     (the label spans are visually hidden; the short text is CSS content with an empty
     alternative, so it is not read twice). Write a Review / Reviews are two quiet
     buttons side by side. Without JavaScript the image buttons stay as they were. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #bottom_content {
    float: none !important; /* inline float */
    width: auto;
    margin: 0;
    padding: 16px 0 0;
  }
  /* the video / document box: when it is empty it was a 15px gap under Read More */
  #productmusicinfoBody #mediaManager:not(:has(*)) { display: none; }
  #productmusicinfoBody .navNextPrevWrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    margin: 0 0 12px;
    padding: 0;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevCounter {
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--m-fs-small, 13px);
    line-height: 1.4;
    color: var(--m-ink-2, #6b6e6f);
    text-align: center;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList {
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a { display: flex; align-items: center; justify-content: center; }
  /* all three segments the same quiet outline (the shell's rule made Next primary) */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn {
    position: relative;
    gap: 6px;
    width: 100%;
    min-height: var(--m-tap, 44px);
    padding: 0 8px;
    border: 1px solid #cfd2c6; /* --m-line is too pale for a control's edge */
    border-radius: 0;
    background: var(--m-surface, #fff);
    color: var(--m-brand, #4f665a);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:active { background: var(--m-surface-2, #f4f5ef); }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList:nth-child(2) > a.ns-btn { border-radius: var(--m-radius, 10px) 0 0 var(--m-radius, 10px); }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList:last-child > a.ns-btn { border-radius: 0 var(--m-radius, 10px) var(--m-radius, 10px) 0; }
  /* neighbouring segments share one border line */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList + .navNextPrevList > a.ns-btn { width: calc(100% + 1px); margin-left: -1px; }
  /* the long labels, kept for screen readers only */
  #productmusicinfoBody :is(.navNextPrevWrapper .navNextPrevList, #productReviewLink) > a.ns-btn > .ns-btn__label {
    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: 18px;
    height: 18px;
    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;
  }

  #productmusicinfoBody #productReviewLink {
    float: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
  }
  #productmusicinfoBody #productReviewLink > a { display: flex; justify-content: center; align-items: center; margin: 0 !important; line-height: normal; } /* the first link's inline 6px right margin */
  /* quiet: a pale fill, no outline, 44px, 15px (they were 48px outline buttons, 2 lines each) */
  #productmusicinfoBody #productReviewLink > a.ns-btn {
    position: relative;
    gap: 6px;
    min-height: var(--m-tap, 44px);
    padding: 0 8px;
    border-color: transparent;
    background: var(--m-surface-2, #f4f5ef);
    color: var(--m-brand, #4f665a);
    font-size: 15px;
    white-space: nowrap;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:active { background: var(--m-line, #e3e4dd); }
  #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; }
  #productmusicinfoBody #bottom_content .reviewCount:empty { display: none; }

  /* -------------------------------------------------------- "Other products"
     The four covers as the listing grid: square at the card's width, 6px corners, a
     hairline; 2 across on phones, 4 from 600px. The items carry an inline 25% width,
     the phone layer a !important one, and .margin_col an inline float, hence !important. */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    width: auto;
    margin: 24px 0 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased::before,
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased::after { content: none; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased > :not(.centerBoxContentsAlsoPurch) { grid-column: 1 / -1; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased > br { display: none; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased h2.centerBoxHeading {
    margin: 0 0 4px;
    padding: 0;
    font-size: var(--m-fs-h2, 20px);
    line-height: 1.3;
    letter-spacing: -.2px;
    text-align: left;
    color: var(--m-ink, #363636);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased .centerBoxContentsAlsoPurch {
    display: block;
    float: none;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased .centerBoxContentsAlsoPurch :is(.product, .margin_col) {
    float: none !important;
    width: auto;
    margin: 0 !important;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased .centerBoxContentsAlsoPurch :is(br, a:empty) { display: none; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased .centerBoxContentsAlsoPurch :is(.image, .image a) { display: block; margin: 0; padding: 0; border: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased .centerBoxContentsAlsoPurch img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    object-fit: contain;
    border: 0;
    border-radius: var(--m-radius-cover, 6px);
    background: var(--m-surface-2, #f4f5ef);
    box-shadow: 0 0 0 1px var(--m-line, #e3e4dd);
  }

  /* ------------------------------------------------------- share row (all)
     X / Pinterest / Like as one quiet row, sized by its buttons (as on phones). */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #socials {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #social_twitter { float: none; width: auto; margin: 0; line-height: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #pin { float: none; margin: 0; line-height: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #social_facebook {
    float: none;
    flex: 1 1 200px;
    width: auto !important; /* stylesheet.css */
    height: auto;
    max-height: 25px;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  /* music products: the X Post / Pinterest Save / Like widgets go; the share button next
     to Add to Cart replaces them (after the row rule above, which has the same weight) */
  #productmusicinfoBody #socials { display: none; }

  /* ---------------------------------------------------------- artist page
     A banner photo, the bio, the artist's websites, "Other Albums Featuring ..." and
     "Albums by ...". The bio at the content width in body type; the websites as
     link chips; both album lists as the store's listing grid (2 across on phones,
     3 from 600px, 4 from 860px). */
  #indexBody #artist_holder {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  #indexBody #artist_holder .tie3-indent { padding: 0; }
  #indexBody #artist_holder .artist-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 4px 0 0;
    border-radius: var(--m-radius-cover, 6px);
  }
  #indexBody #artist_holder #wrap {
    margin: 16px 0 0;
    font-size: var(--m-fs-body, 15px);
    line-height: 1.55;
    color: var(--m-ink, #363636);
  }
  #indexBody #artist_holder #read-more { margin: 4px 0 0; }
  #indexBody #artist_holder #read-more a {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap, 44px);
    font-size: 15px !important; /* the script sets 1.2em and a yellow colour inline */
    font-weight: 600;
    color: var(--m-brand, #4f665a) !important;
    text-decoration: none;
  }
  #indexBody #artist_holder #artist-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
  }
  #indexBody #artist_holder #artist-links > strong {
    flex: 1 1 100%;
    font-size: var(--m-fs-small, 13px);
    line-height: 1.4;
    font-weight: 600;
    color: var(--m-ink-2, #6b6e6f);
  }
  #indexBody #artist_holder #artist-links a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--m-tap, 44px);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    font-size: 15px;
    font-weight: 600;
    color: var(--m-brand, #4f665a);
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #indexBody #artist_holder #artist_other_title,
  #indexBody #indexProductList:has(#artist_holder) #artist_primary_title {
    margin: 32px 0 12px;
    padding: 0;
    font-size: var(--m-fs-h2, 20px);
    line-height: 1.3;
    letter-spacing: -.2px;
    color: var(--m-ink, #363636);
    text-transform: none;
  }

  /* between "Other Albums Featuring ..." and "Albums by ..." three <br>s (17px each) and the
     heading's 32px margin left about 130px of white. The cards' own 28px bottom margin is
     the section gap now; the heading keeps 4px. The <br>s cleared desktop floats; nothing
     floats here (both lists are grids). */
  #indexBody #indexProductList:has(#artist_holder) > br,
  #indexBody #artist_holder #artist_other_products ~ br { display: none; }
  #indexBody #indexProductList:has(#artist_other_products > *) #artist_primary_title { margin-top: 4px; }

  /* both album grids */
  #indexBody #artist_holder #artist_other_products,
  #indexBody #indexProductList:has(#artist_holder) #productListing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: stretch;
    margin: 0;
  }
  #indexBody #artist_holder #artist_other_products::before,
  #indexBody #artist_holder #artist_other_products::after,
  #indexBody #indexProductList:has(#artist_holder) #productListing::before,
  #indexBody #indexProductList:has(#artist_holder) #productListing::after { content: none; }
  #indexBody #indexProductList:has(#artist_holder) #productListing > :not(.centerBoxContentsProducts) { grid-column: 1 / -1; }
  #indexBody #indexProductList:has(#artist_holder) #productListing > br,
  #indexBody #indexProductList:has(#artist_holder) #productListing > :is(.navSplitPagesResult, .navSplitPagesLinks):not(:has(*)) { display: none; }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts {
    display: flex;
    flex-direction: column;
    float: none;
    width: auto !important;  /* inline 32.5% and the phone layer's 49% !important */
    height: auto !important; /* the equal-height script's inline px height */
    min-width: 0;
    min-height: 0;
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
  }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > br { display: none; }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > :is(.ng200, a:first-child) {
    display: block;
    width: 100% !important; /* responsive.css: width auto !important */
    height: auto;
    max-width: none;
    margin: 0 0 10px;
    float: none;
  }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > .ng200 a { display: block; width: auto; height: auto; }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > :is(.ng200, a:first-child) img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: 0;
    border-radius: var(--m-radius-cover, 6px);
    background: var(--m-surface-2, #f4f5ef);
    box-shadow: 0 0 0 1px var(--m-line, #e3e4dd);
  }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > h3.itemTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0 0 2px;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: bold;
    color: var(--m-ink, #363636);
    overflow-wrap: anywhere;
  }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > h3.itemTitle a { color: inherit; }
  #indexBody :is(#artist_holder #artist_other_products, #indexProductList:has(#artist_holder) #productListing) > .centerBoxContentsProducts > .plart {
    display: block;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.45;
    color: var(--m-ink-2, #6b6e6f);
  }
  #indexBody #indexProductList:has(#artist_holder) #productListing > .centerBoxContentsProducts > .listingDescription:empty { display: none; }
  #indexBody #indexProductList:has(#artist_holder) #productListing > .centerBoxContentsProducts > h3 ~ a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    line-height: normal;
  }
  #indexBody #indexProductList:has(#artist_holder) #productListing > .centerBoxContentsProducts > h3 ~ a:not(h3 ~ a ~ a) { margin-top: auto; }
  #indexBody #indexProductList:has(#artist_holder) #productListing > .centerBoxContentsProducts > h3 ~ a.ns-btn { justify-content: center; }
  #indexBody #indexProductList:has(#artist_holder) #productListing > .centerBoxContentsProducts > h3 ~ a > img {
    display: block;
    width: 95px;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
}

/* --------------------------------------------------- 600px up: wider grids */
@media (min-width: 600px) and (max-width: 1023px) {
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #alsoPurchased { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #indexBody #artist_holder #artist_other_products,
  #indexBody #indexProductList:has(#artist_holder) #productListing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) and (max-width: 1023px) {
  #indexBody #artist_holder #artist_other_products,
  #indexBody #indexProductList:has(#artist_holder) #productListing { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
}

/* ==========================================================================
   PHONES (up to 767px): one column, in buying order.
   The phone layer did this up to 599px with the left column unwrapped; from 600px
   it floated a 285px cover column beside the details. Here the cover column, the
   details column (#cnt) and its form are all unwrapped (display: contents), so their
   children are items of one wrapping flex row, each a full-width line, and can be
   put in order. The left column's bare "Average Rating:" text becomes an anonymous
   item that cannot be ordered: it keeps order 0, so everything before it has a
   negative order and everything after it a positive one, and it shares its line
   with the score and the stars as before.
   On a large phone (600-767) the column is capped at 520px, the cover's size, so
   the text lines up with the cover's edges.
   "Click to Read More" sizes the description from #cnt's height; unwrapped, that
   height is 0, so the script uses its own 190px minimum: an 8-line preview.
   ========================================================================== */
@media (max-width: 767px) {
  #productmusicinfoBody .column-center-padding {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: max(var(--m-gutter, max(16px, 5vw)), calc((100% - 520px) / 2));
    padding-right: max(var(--m-gutter, max(16px, 5vw)), calc((100% - 520px) / 2));
  }
  #productmusicinfoBody :is(.music_info_left_part, #cnt, #cnt > form) {
    display: contents;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  /* :where keeps this at the body id's weight, under the per-item rules that follow */
  #productmusicinfoBody :where(.column-center-padding, .music_info_left_part, #cnt, #cnt > form) > * { flex: 1 1 100%; min-width: 0; }
  #productmusicinfoBody :is(.music_info_left_part, #cnt, #cnt > form) > :is(br, hr),
  #productmusicinfoBody #cnt > form > div:not([id]):not(:has(*)) { display: none; }

  #productmusicinfoBody #categoryIcon { order: -20; }
  #productmusicinfoBody #productMainImage { order: -19; }
  #productmusicinfoBody #productAdditionalImages { order: -18; flex: 1 1 100%; }
  #productmusicinfoBody #h1 { order: -17; }
  #productmusicinfoBody :is(.bah, #bahw) { order: -16; }
  #productmusicinfoBody #cnt > form > div:has(> #productPrices) { order: -15; }
  #productmusicinfoBody #cartAdd { order: -14; }
  /* the buy row: price at its own width, #cartAdd takes the rest of the same line */
  #productmusicinfoBody #cnt > form > div:has(> #productPrices) { flex: 0 1 auto; max-width: 45%; margin: 20px 16px 0 0 !important; } /* inline margin */
  #productmusicinfoBody #cartAdd { flex: 1 1 0; margin-top: 20px; }
  #productmusicinfoBody :is(.fmp-container, #mediaplayer) { order: -13; }
  #productmusicinfoBody #head_attr { order: -12; }
  /* order 0: the rating line (text, score, stars) */
  #productmusicinfoBody .music_info_left_part > strong { flex: 0 0 auto; margin: 0 0 0 4px; }
  #productmusicinfoBody .music_info_left_part > img[src*="stars_"] { flex: 0 0 auto; margin: 0 0 0 auto; }
  #productmusicinfoBody #wrap { order: 2; margin: 16px 0 0; }
  #productmusicinfoBody #read-more { order: 3; }
  #productmusicinfoBody #socials { order: 4; margin: 16px 0 0; }
  #productmusicinfoBody #mediaManager { order: 5; margin: 0; }
  #productmusicinfoBody #bottom_content { order: 6; }
  /* the rating line opens the "about" part, under the track list */
  #productmusicinfoBody #head_attr { margin-bottom: 24px; }
  #productmusicinfoBody .music_info_left_part > img[src*="stars_"] { align-self: center; }

  /* the artist link straight under the title */
  #productmusicinfoBody #h1 { margin-bottom: 0; }

  /* gift certificate: the same order in plain flow; the share row goes last */
  #productfreeshippinginfoBody .column-center-padding {
    padding-left: max(var(--m-gutter, max(16px, 5vw)), calc((100% - 520px) / 2));
    padding-right: max(var(--m-gutter, max(16px, 5vw)), calc((100% - 520px) / 2));
  }
  #productfreeshippinginfoBody :is(.music_info_left_part, .music_info_right_part) { float: none; width: auto; min-height: 0; padding: 0; }
  #productfreeshippinginfoBody .gcr { display: flex; flex-direction: column; }
  #productfreeshippinginfoBody .gcr > * { min-width: 0; }
  #productfreeshippinginfoBody .gcr > :is(hr, br) { display: none; }
  #productfreeshippinginfoBody .gcr > #socials { order: 1; margin: 20px 0 0; }
  #productfreeshippinginfoBody .gcr > #cartAdd { align-items: center; }
  #productfreeshippinginfoBody #column-center #productDescription { margin: 24px 0 0; }
}

/* ==========================================================================
   TABLETS (768-1023px): two columns. The cover column (42%) holds the cover,
   thumbnails, rating, artist and description; the details column the title, price,
   Add to Cart, player and track list. Prev / Next, reviews and "Other products" span
   both under them. The phone layer floated a fixed 285px cover column here.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(.column-center-padding, form[name="cart_quantity"]):has(> .music_info_left_part) {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: 32px;
    align-items: start;
  }
  /* :where keeps this under the two column rules that follow */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) :where(#column-center .column-center-padding, #column-center form[name="cart_quantity"]):has(> .music_info_left_part) > * { grid-column: 1 / -1; min-width: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center .music_info_left_part {
    grid-column: 1;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center .music_info_right_part {
    grid-column: 2;
    float: none;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #h1 { margin-top: 0; font-size: 30px; }
  #productmusicinfoBody .music_info_right_part > :is(hr, br),
  #productmusicinfoBody #cnt > form > br,
  #productmusicinfoBody #cnt > form > div:not([id]):not(:has(*)) { display: none; }
  #productmusicinfoBody #cnt #socials { margin: 12px 0 0; }
  /* the buy row: the form is a wrapping flex row, every item a full line except the
     price (its own width) and #cartAdd (the rest of the price's line) */
  #productmusicinfoBody #cnt > form { display: flex; flex-wrap: wrap; align-items: center; }
  #productmusicinfoBody #cnt > form > * { flex: 1 1 100%; min-width: 0; }
  #productmusicinfoBody #cnt > form > div:has(> #productPrices) { flex: 0 1 auto; max-width: 45%; margin: 16px 16px 0 0 !important; } /* inline margin */
  #productmusicinfoBody #cnt > form > #cartAdd { flex: 1 1 0; margin-top: 16px; }

  /* cover column: rating line, artist and description under the thumbnails */
  #productmusicinfoBody .music_info_left_part > br { display: none; }
  /* the stars float right on desktop, which dropped them under the text here: inline after the score */
  #productmusicinfoBody .music_info_left_part > img[src*="stars_"] { float: none; margin: 0 0 0 8px; vertical-align: -3px; }
  #productmusicinfoBody .music_info_left_part > hr { margin: 8px 0 12px !important; border: 0; border-top: 1px solid var(--m-line, #e3e4dd); } /* inline margin-top */
  #productmusicinfoBody .music_info_left_part { padding-top: 0; line-height: 1.4; }
  #productmusicinfoBody .music_info_left_part::first-line { line-height: 1.4; }
  #productmusicinfoBody #wrap { clear: both; margin: 12px 0 0; }
  #productmusicinfoBody #column-center #productDescription { font-size: 15px; }
  /* the rating text node needs space above it */
  #productmusicinfoBody #productAdditionalImages,
  #productmusicinfoBody #productMainImage:last-of-type { margin-bottom: 18px; }

  /* The description and credits sat inside the cover column (about 300px), squeezed
     under the cover. The cover column is unwrapped (display: contents) so the
     description and Read More can span both columns under them. Its bare
     "Average Rating:" text becomes an anonymous grid item that cannot be targeted,
     so the cover column is split into three tracks (text, score, rest) and every
     other item is placed explicitly: the text auto-places into the one free cell,
     row 4 track 1, next to the score and stars. The details column takes the gap as
     padding (a column-gap would also open between the rating's tracks). Row 7 (1fr)
     absorbs the details column's extra height so the cover-column items stay packed.
     Specificity: div.column-center-padding beats the shared two-column rule above. */
  #productmusicinfoBody #column-center div.column-center-padding:has(> .music_info_left_part) {
    grid-template-columns: [full-start] max-content max-content minmax(0, 1fr) [left-end] calc((100% - 32px) * 0.58 + 32px) [full-end];
    grid-template-rows: auto auto auto auto auto auto 1fr;
    column-gap: 0;
  }
  #productmusicinfoBody #column-center .music_info_left_part { display: contents; }
  #productmusicinfoBody #column-center #categoryIcon { grid-area: 1 / full-start / 2 / full-end; }
  #productmusicinfoBody #column-center #cnt { grid-area: 2 / 4 / 8 / 5; padding-left: 32px; }
  #productmusicinfoBody #column-center .music_info_left_part > #productMainImage { grid-area: 2 / full-start / 3 / left-end; }
  /* no thumbnails (audio books): the cover takes row 3 too, so the rating text cannot fall into it */
  #productmusicinfoBody #column-center .music_info_left_part:not(:has(> #productAdditionalImages)) > #productMainImage { grid-row: 2 / 4; }
  #productmusicinfoBody #column-center .music_info_left_part > #productAdditionalImages { grid-area: 3 / full-start / 4 / left-end; }
  #productmusicinfoBody #column-center .music_info_left_part > strong { grid-area: 4 / 2; align-self: center; margin-left: 4px; }
  #productmusicinfoBody #column-center .music_info_left_part > img[src*="stars_"] { grid-area: 4 / 3; justify-self: start; align-self: center; }
  #productmusicinfoBody #column-center .music_info_left_part > hr { grid-area: 5 / full-start / 6 / left-end; }
  #productmusicinfoBody #column-center .music_info_left_part > :is(.bah, #bahw) { grid-area: 6 / full-start / 7 / left-end; }
  #productmusicinfoBody #column-center .music_info_left_part > #wrap { grid-area: 8 / full-start / 9 / full-end; max-width: var(--m-measure, 720px); margin: 32px 0 0; }
  #productmusicinfoBody #column-center .music_info_left_part > #read-more { grid-area: 9 / full-start / 10 / full-end; }
  #productmusicinfoBody #column-center #bottom_content { grid-area: 10 / full-start / 11 / full-end; }
  #productmusicinfoBody #column-center div.column-center-padding > .clear { grid-area: 11 / full-start / 12 / full-end; }

  /* gift certificate */
  #productfreeshippinginfoBody .gcr > :is(hr, br) { display: none; }
  #productfreeshippinginfoBody .gcr #socials { margin: 12px 0 4px; }
  #productfreeshippinginfoBody #column-center #productDescription { margin: 32px auto 0; max-width: var(--m-measure, 720px); font-size: 16px; }
  #productfreeshippinginfoBody #alsoPurchased { margin-top: 32px; }

  /* the bottom block: the segmented control at a comfortable width, centred */
  #productmusicinfoBody .navNextPrevWrapper { max-width: 520px; margin-left: auto; margin-right: auto; }
  #productmusicinfoBody #productReviewLink { max-width: 520px; margin-left: auto; margin-right: auto; }

  /* artist page: the bio at the tablet measure */
  #indexBody #artist_holder #wrap { max-width: var(--m-measure, 720px); font-size: 16px; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button) { transition: none; }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):active { transform: none; }
}