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

   Ported from bahaimusicstore.com (theme-bahai/css/stylesheet_zz_9star_m_product.css,
   sha256 0f92ad14..., the owner's round 1; earlier ebd9b1cf... and 8472b5aa...) with 9 Star's
   tokens and markup. Same selectors and layout; what differs on 9 Star:
   - the brand is amber, a FILL colour (play button, progress, price chips, checkboxes).
     Wherever the brand is text, an icon, a border or a focus ring on white it is
     --m-brand-text (#8a6400): amber text on white is only 2.1:1.
   - share: plain links (span.shareLabel + a.shareLink Facebook / X / Pinterest) where
     BMS has the Tweet / Pin It / Like widgets; artist follow: a.artistSocial (X,
     Facebook) where BMS has the .tw / .fb widgets. Both restyled here as chips; their
     desktop look (10px charcoal tags) is stylesheet_zz_shop.css, which loads AFTER this
     sheet, hence two ids on every rule that touches them.
   - Prev / Listing / Next and the review buttons sit in div.productActionRow, a
     wrapping flex row from zz_shop that sized the nav to its content and pushed the page
     20px sideways at 375px. Unwrapped here so the segmented control fits its column.

   Loads after stylesheet_zz_9star.css and before the shell sheet and zz_shop (filename
   order); overrides the phone layer where the redesign differs, and the body id in
   front of every selector keeps it over the shell's and zz_shop's class rules. 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", share and follow
     chips, 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 9 Star 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). Icons are Phosphor (regular
   weight, MIT, @phosphor-icons/core 2.1.1), drawn as masks in the current colour.
   ========================================================================== */

@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. Brand as text: the dark amber. */
  :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-text, #8a6400);
    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, #e4e2df);
    outline: 1px solid rgb(0 0 0 / .06);
    outline-offset: -1px;
  }
  /* the magnifying-glass badge sat on the artwork (owner, round 1: "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, #2d2d2d);
    overflow-wrap: anywhere;
  }
  /* the artist was named twice, in the title ("Shidan Toloui-Wallace - Phoenix of Love")
     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, #5f6264);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productPrices .productBasePrice {
    font-size: 22px;
    font-weight: 700;
    color: var(--m-ink, #2d2d2d);
    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. 9 Star: the X / Facebook follow links beside it (a.artistSocial, 10px
     charcoal tags from zz_shop) are 44px outline squares at the line's right end,
     showing the network's logo; the link text stays in the page for screen readers
     (font-size 0), so each keeps its name ("X", "Facebook"). */
  #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 8px;
  }
  #productmusicinfoBody .bah .aut { float: none; flex: 0 1 auto; min-width: 0; 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-text, #8a6400);
    text-decoration: none;
  }
  #productmusicinfoBody #column-center .bah a.artistSocial {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--m-tap, 44px);
    height: var(--m-tap, 44px);
    margin: 0;
    padding: 0;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    color: var(--m-ink, #2d2d2d);
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* the first follow square takes the line's free room, so the pair sits at its right */
  #productmusicinfoBody #column-center .bah .aut + a.artistSocial { margin-left: auto; }

  /* ------------------------------------------------------------- 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, #5f6264);
    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, #e4e2df);
    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, #2d2d2d);
  }
  :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 (round 1): "starting at and add to cart in the same row", then a share icon
     right of the button (9 Star's owner asked for that too; no favourites system exists).
     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 could 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). 9 Star: the share button's outline and icon are the
     dark amber (the brand as a line on white), like the shell's secondary buttons. */
  #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-text, #8a6400);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    color: var(--m-brand-text, #8a6400);
    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-brand-soft, #fff8e1); }
  #productmusicinfoBody #cartAdd .ns-share:focus-visible { outline: 2px solid var(--m-brand-text, #8a6400); 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, #2d2d2d);
    color: #fff;
    box-shadow: 0 4px 12px rgb(45 45 45 / .18);
  }

  /* ------------------------------------------------------------------ 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 amber, 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, #f7f6f3);
    font-size: 13px;
    line-height: 1.4;
    color: var(--m-ink, #2d2d2d);
  }
  #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 drawn as a mask in the current colour. Play is the amber fill
     with a charcoal glyph (8.3:1; white on amber would be 2.1:1). */
  #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, #2d2d2d);
    -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, #e8a900);
    color: var(--m-brand-ink, #2d2d2d);
    box-shadow: 0 1px 2px rgb(45 45 45 / .14), 0 6px 16px rgb(138 100 0 / .22);
  }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button):active { background: rgb(45 45 45 / .08); }
  #productmusicinfoBody #column-center .fmp-container .fmp-pp-button:active { background: var(--m-brand-hover, #d39a00); }
  #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-text, #8a6400);
    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 (#e4e2df) on the #f7f6f3 card: almost invisible (owner: "the
       progress bar isnt visible"). --m-line darkened, so the whole length reads */
    background: #b2b0ae;
    background: color-mix(in srgb, var(--m-line, #e4e2df), #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-text, #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: 6px;
    border-radius: 3px;
    background: var(--m-brand, #e8a900);
    box-shadow: none;
  }
  /* the handle: a 16px amber 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). Amber
     is pale on the pale card, so a charcoal shadow gives the dot its edge. */
  #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, #e8a900);
    box-shadow: 0 0 0 1px rgb(45 45 45 / .16), 0 1px 3px rgb(45 45 45 / .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, #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: 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, #2d2d2d);
  }
  #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, #f7f6f3);
  }
  #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, #5f6264); }

  /* -------------------------------------------------------------- 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 and a 24px checkbox, on
     hairlines. The chip is the amber fill with charcoal text (stylesheet.css draws a
     boxy.jpg picture behind white text; the background shorthand drops it). A track's
     name plays its preview (the script's own link), marked with a small play icon in
     the dark amber. 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, #e4e2df) !important; }
  #productmusicinfoBody #productAttributes tr:first-child:has(.namez) { border-top: 1px solid var(--m-line, #e4e2df); }
  /* 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, #2d2d2d);
    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-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 #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, #e8a900);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--m-brand-ink, #2d2d2d);
    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, #e8a900);
    cursor: pointer;
  }

  /* gift certificate: the value select and its label */
  #productfreeshippinginfoBody .gcr > strong { display: block; margin: 20px 0 6px; font-size: 15px; color: var(--m-ink, #2d2d2d); }
  #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, #e4e2df);
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #fff);
    font-size: 16px;
    color: var(--m-ink, #2d2d2d);
  }
  #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, #2d2d2d);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productDescription hr {
    height: 0;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--m-line, #e4e2df);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #productDescription b { color: var(--m-ink, #2d2d2d); }
  /* 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. After the rule above: same
     weight, both !important, so the later one wins. */
  #productfreeshippinginfoBody .gcr { float: none; width: auto; }
  #productfreeshippinginfoBody #column-center #productDescription {
    padding-top: 20px !important;
    border-top: 1px solid var(--m-line, #e4e2df);
  }
  /* "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-text, #8a6400);
    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, #5f6264); }
  #productmusicinfoBody .music_info_left_part > strong { color: var(--m-ink, #2d2d2d); }
  #productmusicinfoBody .music_info_left_part > img[src*="stars_"] { float: none; width: 88px; height: auto; }

  /* --------------------------------------------- Prev / Listing / Next, reviews
     Owner (round 1): 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.
     9 Star: zz_shop sets the bottom block as one wrapping flex row (div.productActionRow,
     nav left, reviews right, a hairline above). As a flex item the nav took its content's
     width, 376px at 375px, and pushed the page sideways. Here it is a plain block, each
     part the column's full width; zz_shop's selectors carry no id, so one is enough. */
  :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 #bottom_content .productActionRow {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #productmusicinfoBody .navNextPrevWrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; /* zz_shop's 6px flex gap would part the segments */
    width: auto;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0;
  }
  /* zz_shop sets the counter as a 12px bold uppercase label beside the buttons */
  #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;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-ink-2, #5f6264);
    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, an
     amber fill on 9 Star). 9 Star: the warm grey edge zz_shop uses for fields (#cfcdca;
     --m-line is too pale for a control's edge) and the dark amber for text and icons. */
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn {
    position: relative;
    gap: 6px;
    width: 100%;
    min-height: var(--m-tap, 44px);
    padding: 0 8px;
    border: 1px solid #cfcdca;
    border-radius: 0;
    background: var(--m-surface, #fff);
    color: var(--m-brand-text, #8a6400);
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }
  #productmusicinfoBody .navNextPrevWrapper .navNextPrevList > a.ns-btn:active { background: var(--m-surface-2, #f7f6f3); }
  #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, #f7f6f3);
    color: var(--m-brand-text, #8a6400);
    font-size: 15px;
    white-space: nowrap;
  }
  #productmusicinfoBody #productReviewLink > a.ns-btn:active { background: var(--m-line, #e4e2df); }
  #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, #2d2d2d);
  }
  :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, #f7f6f3);
    box-shadow: 0 0 0 1px var(--m-line, #e4e2df);
  }

  /* ------------------------------------------------------- share row (all)
     9 Star: "Share" and three plain links (Facebook, X, Pinterest), 10px charcoal tags
     on desktop (zz_shop, one id: `#socials a.shareLink`; these rules carry two). On a
     phone or tablet they are 44px outline chips, each with its network's logo before the
     name, quieter than the page's real buttons; "Share" a small label. One row here (the
     tablets' details column, under the title); phones lay them out as three equal
     chips under the label (below). */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 0;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials .shareLabel {
    margin: 0 4px 0 0;
    font-size: var(--m-fs-small, 13px);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-ink-2, #5f6264);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: var(--m-tap, 44px);
    min-height: var(--m-tap, 44px);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--m-ink, #2d2d2d);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms var(--m-ease, cubic-bezier(.2,.8,.2,1)), background-color 120ms linear, border-color 120ms linear;
  }

  /* share and follow logos (Phosphor facebook-logo, x-logo, pinterest-logo) */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial):is([href*="facebook.com"], [href*="twitter.com"], [href*="pinterest.com"])::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ns-logo) center / contain no-repeat;
    mask: var(--ns-logo) center / contain no-repeat;
  }
  #productmusicinfoBody #column-center .bah a.artistSocial::before { width: 20px; height: 20px; }
  /* "X" beside the X logo read "X X": that chip shows the logo alone (its name stays
     in the page for screen readers) */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink[href*="twitter.com"] { font-size: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial)[href*="facebook.com"] {
    --ns-logo: 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,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z'/%3E%3C/svg%3E");
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial)[href*="twitter.com"] {
    --ns-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z'/%3E%3C/svg%3E");
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink[href*="pinterest.com"] {
    --ns-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,112c0,22.57-7.9,43.2-22.23,58.11C188.39,184,170.25,192,152,192c-17.88,0-29.82-5.86-37.43-12l-10.78,45.82A8,8,0,0,1,96,232a8.24,8.24,0,0,1-1.84-.21,8,8,0,0,1-6-9.62l32-136a8,8,0,0,1,15.58,3.66l-16.9,71.8C122,166,131.3,176,152,176c27.53,0,56-23.94,56-64A72,72,0,1,0,73.63,148a8,8,0,0,1-13.85,8A88,88,0,1,1,224,112Z'/%3E%3C/svg%3E");
  }

  /* Music products (owner, round 1): the share button beside Add to Cart replaces the
     share row on phones and tablets, as BMS hides its X / Pinterest / Like widgets there.
     On 9 Star the row is "Share" + Facebook / X / Pinterest links, the same job as the
     button (whose system sheet offers those apps, or copies the link), so the whole row
     goes, not some of its links. The artist's own follow squares (.bah a.artistSocial)
     stay, like BMS's artist Like box. The gift certificate keeps its row: the share
     button is only made for music products. Four ids: over the row's own display rules
     here and in the phone layer below, whatever their order. */
  #productmusicinfoBody #column-center #cnt #socials { display: none; }

  /* chip states: zz_shop turns them amber with white text on hover (2.1:1); here a grey
     wash on hover, the amber wash under a finger, the dark amber focus ring */
  @media (hover: hover) {
    :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial):hover {
      background: var(--m-surface-2, #f7f6f3);
      color: var(--m-ink, #2d2d2d);
    }
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial):active {
    background: var(--m-brand-soft, #fff8e1);
    border-color: var(--m-brand, #e8a900);
    color: var(--m-ink, #2d2d2d);
    transform: scale(.98);
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial):focus-visible {
    background: var(--m-surface, #fff);
    color: var(--m-ink, #2d2d2d);
    outline: 2px solid var(--m-brand-text, #8a6400);
    outline-offset: 2px;
  }

  /* ---------------------------------------------------------- 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, #2d2d2d);
  }
  #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-text, #8a6400) !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, #5f6264);
  }
  #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, #e4e2df);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    font-size: 15px;
    font-weight: 600;
    color: var(--m-brand-text, #8a6400);
    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, #2d2d2d);
    text-transform: none;
  }

  /* 9 Star: the template's own <style> hides the artist page's filter form
     (`.tie2-indent form {display:none}`), leaving an empty 30px amber bar between the two
     album lists. BMS's phone layer removes it (stylesheet_zz_9star.css, "artist page
     filter bar"); 9 Star's phone layer has no such rule yet, so the artist page's half
     of it is here: the bar goes when the form is all it holds. */
  #indexBody #indexProductList:has(#artist_holder) .tie2:not(:has(.tie2-indent > :not(form))) { display: 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, #f7f6f3);
    box-shadow: 0 0 0 1px var(--m-line, #e4e2df);
  }
  #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, #2d2d2d);
    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, #5f6264);
  }
  #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; }
  #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; }
  #productmusicinfoBody #column-center #socials { 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; }

  /* 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; }

  /* share row on a phone: "Share" on its own line, the three chips equal thirds of the
     column under it, so the row has one width at every phone size */
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials .shareLabel { grid-column: 1 / -1; margin: 0; }
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink { min-width: 0; padding: 0 6px; }

  /* 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; }
  #productfreeshippinginfoBody #column-center .gcr > #socials { margin: 20px 0 0; }
  #productfreeshippinginfoBody .gcr > #cartAdd { align-items: center; }
  #productfreeshippinginfoBody #column-center #productDescription { margin: 24px 0 0; }
}

/* the narrowest phones: a third of a 288px column (90px) cannot hold a logo beside
   "Facebook" or "Pinterest"; the names alone (X keeps its logo, its only content) */
@media (max-width: 359px) {
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink:not([href*="twitter.com"])::before { content: none; }
}

/* ==========================================================================
   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 #column-center #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, #e4e2df); } /* 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 #column-center .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),
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center #socials a.shareLink { transition: none; }
  #productmusicinfoBody #column-center .fmp-container :is(.fmp-previous-button, .fmp-next-button, .fmp-pp-button):active,
  :is(#productmusicinfoBody, #productfreeshippinginfoBody) #column-center :is(#socials a.shareLink, .bah a.artistSocial):active { transform: none; }
}