/* ==========================================================================
   Desktop refresh, theme-bahai (bahaimusicstore.com): LISTINGS AND SIDEBOXES.
   2026-10-25. Spec: docs/DESKTOP-REFRESH-BMS.md, section 6 (group "listings").

   Covers: the home slider and banners, the Popular products strip, the product tiles
   of the category / genre, new-products, search, specials and artist-detail lists
   (cover, title, artist, Buy Now + More Info), the filter and sort bars, the category
   description panel, pagination chips, /our-artists, and the left-column sideboxes
   (the five sage category blocks, the Music Genres select and any sidebox select form,
   the newsletter box).

   DESKTOP ONLY. Every rule sits inside @media (min-width: 1024px); phones and tablets
   (1023px and below) are not touched. Tokens come from stylesheet_zzz_d_tokens.css
   (var(--d-*)). Button colours, hover and press belong to the base sheet
   (stylesheet_zzz_d_base.css); this sheet only sizes and places the .ns-btn links and
   inputs that sit in listings. Loads after every theme sheet (filename order), but the
   slider sheet (slides/jquery.slider.css) is linked later, in the body, hence #indexBody
   on the slider rules.

   Shape system (mobile's): controls 10px, panels 14px, covers 6px, round only for the
   slider dots. One accent: sage. Shadows sage-tinted. Every transition sits in
   prefers-reduced-motion: no-preference.
   ========================================================================== */

@media (min-width: 1024px) {
  /* ======================================================================
     1. HOME AND CATEGORY SLIDER, NEWEST RELEASES BANNER
     ====================================================================== */

  /* the picture gets the 10px control radius; overflow hidden clips the timer bar and the
     slide transitions to it. The wrapper's width and height stay as the script sets them. */
  #indexBody .jquery-slider-wrapper {
    border-radius: var(--d-radius);
    overflow: hidden;
  }

  /* dots: 10px rounds, white with a dark hairline, the current one sage with a white ring.
     The sprite (16px squares) goes. The row keeps its place (bottom right of the picture);
     overflow is visible so the current dot's ring is not clipped. */
  #indexBody .jquery-slider-wrapper .jquery-slider-selectors {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
    padding: 2px;
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector {
    position: relative;
    flex: none;
    float: none;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    background-image: none;
    box-shadow: 0 0 0 1px rgb(31 42 36 / 0.55);
  }
  /* a 16px hit area around each 10px dot, no overlap with its neighbours */
  #indexBody .jquery-slider-wrapper .jquery-slider-selector::before {
    content: "";
    position: absolute;
    inset: -3px;
  }
  #indexBody
    .jquery-slider-wrapper
    .jquery-slider-selector.jquery-slider-selector-current {
    background: var(--d-brand);
    background-image: none;
    box-shadow: 0 0 0 2px #fff;
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow:
      0 0 0 1px rgb(31 42 36 / 0.55),
      0 0 0 5px rgb(31 42 36 / 0.6); /* dark halo so the white ring shows on light pictures too */
  }
  #indexBody
    .jquery-slider-wrapper
    .jquery-slider-selector.jquery-slider-selector-current:focus-visible {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 5px rgb(31 42 36 / 0.6);
  }

  /* NEWEST RELEASES banner (a picture link in .banners > center) */
  #indexBody .banners > center img {
    border-radius: var(--d-radius);
  }
  #indexBody .banners > center a:focus-visible {
    display: block;
    border-radius: var(--d-radius);
  }

  /* ======================================================================
     2. POPULAR PRODUCTS STRIP (.popular > .carousel-box > .carousel > li.product-col)
     The li widths, the 250px height and the carousel script's inline sizes all stay.
     ====================================================================== */

  /* the heading: 60px at -4px tracking becomes the calm h2 scale. The -30px top margin
     existed to pull the 60px heading up; with a 24px line it is not needed. */
  #indexBody .popular .carousel-box {
    margin-top: 0;
  }
  #indexBody .popular .carousel-box h2 {
    margin: 0;
    padding: 0 0 18px;
    font: 700 24px/1.2 var(--d-font);
    letter-spacing: -0.3px;
    color: var(--d-ink);
  }

  /* arrows: the sprites stay; they line up with the smaller heading, get a ring, and dim a
     little on hover (the sprite also swaps its own hover picture) */
  #indexBody .popular .carousel-box :is(.prev, .next) {
    top: 2px;
  }
  #indexBody .popular .carousel-box :is(.prev, .next):hover {
    opacity: 0.8;
  }
  #indexBody .popular .carousel-box :is(.prev, .next):focus-visible {
    border-radius: 50%;
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* cover: the 8px grey frame (sage on hover) becomes a 6px radius and a hairline ring. The
     frame used to take 16px of the 150px column, so the picture now fills the column. */
  #indexBody .popular .product-col .img img,
  #indexBody .popular .product-col:hover .img img {
    display: block;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    max-width: 100%;
    border: 0;
    border-radius: var(--d-radius-cover);
    background: var(--d-surface-2);
    box-shadow: var(--d-cover-edge);
  }
  #indexBody .popular .product-col:hover .img img,
  #indexBody .popular .product-col:focus-within .img img {
    box-shadow: var(--d-cover-edge), var(--d-shadow-2);
  }

  /* keyboard focus on a cover: the li (inline overflow: hidden) is exactly as wide as the
     cover, so an outside ring would be cut off. A two-tone ring (white outside, sage inside)
     is drawn over the picture's edge so it reads on pale and dark covers alike. */
  #indexBody .popular .product-col .img a {
    position: relative;
    display: block;
    border-radius: var(--d-radius-cover);
  }
  #indexBody .popular .product-col .img a:focus-visible {
    outline: 2px solid transparent; /* the ring below is a shadow; this keeps one in forced-colours mode */
    outline-offset: -2px;
  }
  #indexBody .popular .product-col .img a:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--d-radius-cover);
    box-shadow:
      inset 0 0 0 2px #fff,
      inset 0 0 0 4px var(--d-focus);
    pointer-events: none;
  }

  /* price: the olive 81px box (white text, 2.48:1) is gone; the figure is 15px bold sage on
     the page, under the cover */
  #indexBody .popular .product-col .prod-info .wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #indexBody .popular .product-col .price,
  #indexBody .popular .product-col:hover .price {
    display: block;
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 0 0;
    background: none;
    color: var(--d-brand);
    font: 700 15px/1.3 var(--d-font);
    letter-spacing: 0;
    cursor: default;
    overflow: visible;
  }
  #indexBody .popular .product-col .price strong {
    padding-left: 0;
  }
  #indexBody .popular .product-col .price .normalprice {
    color: var(--d-ink-2);
    font: 400 13px/1.3 var(--d-font);
  }
  #indexBody .popular .product-col .price .productSpecialPrice {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--d-brand);
    font: 700 15px/1.3 var(--d-font);
    letter-spacing: 0;
    cursor: default;
  }

  /* Add to Cart: a small primary button, the column's width (look: base sheet) */
  #indexBody .popular .product-col .button {
    align-self: stretch;
    overflow: visible;
  }
  #indexBody .popular .product-col .button a.ns-btn {
    display: flex;
    width: 100%;
    min-height: var(--d-btn-h-sm);
    padding: 0 8px;
    font-size: var(--d-fs-btn-sm);
  }
  /* the theme clips the column (.wrapper, .prod-info and the li are all overflow: hidden) and
     the button fills it, so an outside ring would be cut off: the ring goes inside the sage
     block, white, as on the category blocks (spec C0.9) */
  #indexBody .popular .product-col .button a.ns-btn:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-brand);
    outline-offset: -4px;
  }

  /* ======================================================================
     3. PRODUCT TILES (category, genre, new products, search, specials, artist albums)
     The tile keeps its inline width (32.5%) and height (331px); .newgrid has a 330px
     minimum. Inside, a grid: cover, title, artist, a spare row, and the two buttons side
     by side pinned to the tile's bottom so every row's buttons line up.
     ====================================================================== */

  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    ) {
    display: grid;
    grid-template-columns: repeat(2, max-content) 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 8px;
    align-content: start;
    box-sizing: border-box;
    padding-bottom: 20px;
    text-align: left;
  }
  /* .newgrid tiles (new products) are floats with only a 330px minimum, and the height-match
     script does not touch them: one with a two-line title would stand taller than its row
     and the next float would snag beside it. All of them get the height a two-line title
     needs (the other tile classes are height-matched per row by the script). */
  #column-center .newgrid {
    height: 350px;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > * {
    grid-column: 1 / -1;
  }
  /* the markup's <br> line breaks and the empty description box take no part in the grid */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > br,
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .listingDescription:empty {
    display: none;
  }

  /* cover: 6px radius and a hairline ring instead of the 1px frame and the warm 15px
     shadow. The box is the 200px square the markup reserves; portrait covers stay centred
     in it, as before. */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .ng200 {
    grid-row: 1;
    margin: 0;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .ng200
    a {
    display: block;
    width: auto;
    height: auto;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .ng200
    img {
    display: block;
    margin: 0 auto;
    border: 0;
    border-radius: var(--d-radius-cover);
    background: var(--d-surface);
    box-shadow: var(--d-cover-edge);
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    ):is(:hover, :focus-within)
    > .ng200
    img {
    box-shadow: var(--d-cover-edge), var(--d-shadow-2);
  }

  /* title: 14px bold, two lines at most (the server also shortens long ones with "...").
     The box always holds two lines (2 x 1.3em), so a tile with a one-line title and its
     neighbour with a two-line one keep their artist names and rules on the same line; the
     tile's height is fixed by the markup, so the room costs nothing. */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > h3.itemTitle {
    grid-row: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
    min-height: 2.6em;
    margin: 14px 0 2px;
    padding: 0;
    font: 700 14px/1.3 var(--d-font);
    color: var(--d-ink);
    overflow-wrap: anywhere;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > h3.itemTitle
    a {
    color: inherit;
    text-decoration: none;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > h3.itemTitle
    a:hover {
    color: var(--d-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* keyboard focus: a link that wraps to two lines draws a ragged outline, so the ring goes
     on the title box instead (the link keeps a transparent one for forced-colours mode) */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > h3.itemTitle
    a:focus-visible {
    outline: 2px solid transparent;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > h3.itemTitle:has(a:focus-visible) {
    border-radius: 4px;
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* artist: 13px secondary ink on one line, the 200px rule under it a hairline */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .plart {
    grid-row: 3;
    display: block;
    box-sizing: border-box;
    width: 200px;
    max-width: 100%;
    margin: 0;
    padding: 0 0 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--d-line);
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 400 13px/1.45 var(--d-font);
    color: var(--d-ink-2);
  }
  /* Artist names remain plainly legible links, distinct from the muted metadata around
     them. The underline is present without requiring a hover-only affordance. */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > .plart
    a {
    color: #414141;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* price, where a listing prints one */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    :is(.productBasePrice, .productSpecialPrice, .productSalePrice) {
    font: 700 14px/1.3 var(--d-font);
    color: var(--d-brand);
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    .normalprice {
    padding-right: 6px;
    font: 400 13px/1.3 var(--d-font);
    color: var(--d-ink-2);
  }

  /* buttons: Buy Now (small primary) beside More Info (small secondary), on the last row,
     under the cover's left edge. Their look is the base sheet's; here only size and place. */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials,
      .newgrid
    )
    > a.ns-btn {
    grid-column: auto;
    grid-row: 5;
    align-self: end;
    min-height: var(--d-btn-h-sm);
    margin: 12px 0 0;
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }

  /* ======================================================================
     4. FILTER AND SORT BARS, CATEGORY DESCRIPTION
     ====================================================================== */

  /* the olive bar becomes a pale sage panel with a row of label and select */
  #column-center .tie2 {
    margin: 6px 0 0;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #column-center .tie2 .tie2-indent {
    padding: 0;
  }
  #column-center .tie2 form:is([name="filter"], [name="sorter_form"]),
  #column-center #filter-wrapper > form[name="filter"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
  }
  #column-center .tie2 label,
  #column-center #filter-wrapper > form[name="filter"] label {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font: 600 var(--d-fs-ui) / 1.4 var(--d-font);
    color: var(--d-ink);
  }

  /* search results: the filter form and the sort bar share one panel */
  #column-center #filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin: 6px 0 16px;
    padding: 10px 16px;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #column-center #filter-wrapper > .tie2 {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* the selects: a field (10px radius, 3.16:1 edge), 32px tall in these bars */
  #column-center :is(.tie2, #filter-wrapper) select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: var(--d-field-h-sm);
    margin: 0;
    padding: 0 34px 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--d-ink-2) 50%),
      linear-gradient(135deg, var(--d-ink-2) 50%, transparent 50%);
    background-position:
      calc(100% - 17px) 50%,
      calc(100% - 12px) 50%;
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
    color: var(--d-ink);
    font: 400 var(--d-fs-ui) / 1.3 var(--d-font);
    cursor: pointer;
  }
  #column-center :is(.tie2, #filter-wrapper) select:hover {
    border-color: var(--d-field-hover);
  }
  #column-center :is(.tie2, #filter-wrapper) select:focus-visible {
    border-color: var(--d-brand);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent; /* keeps a ring in forced-colours mode */
  }

  /* an artist's page has the filter form hidden by the page's own style block: no empty bar */
  #indexBody
    #indexProductList:has(#artist_holder)
    .tie2:not(:has(.tie2-indent > :not(form))),
  #indexBody #indexProductList .tie2:not(:has(.tie2-indent > *)) {
    display: none;
  }

  /* the list sits 15px under the bar (the bar's <br>) instead of tucked 12px up under it */
  #column-center #productListing {
    margin-top: 0;
  }

  /* category description: a pale panel, auto height (it was a fixed 40px grey box). Genre
     lists have no description and printed an empty bar; it goes. The artist page's box
     (#artist_holder) is that page's own and is left alone. */
  #column-center .tie3:not(#artist_holder) {
    height: auto;
    margin-bottom: 16px;
    border: 0;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #column-center .tie3:not(#artist_holder) .tie3-indent {
    padding: 14px 20px;
  }
  #column-center .tie3:not(#artist_holder) .content_desc {
    font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font);
    color: var(--d-ink);
  }
  #indexBody
    #indexProductList
    > .tie3:not(#artist_holder):not(:has(#indexProductListCatDescription > *)) {
    display: none;
  }

  /* ======================================================================
     5. PAGINATION ("Displaying 1 to 18 of 164" and the page chips)
     The two boxes keep their floats; the links are separated by &nbsp; text, which the
     container's font-size: 0 hides.
     ====================================================================== */

  #column-center .navSplitPagesResult {
    margin-top: 0;
    margin-bottom: 12px;
    font: 400 var(--d-fs-ui) / 32px var(--d-font);
    color: var(--d-ink-2);
  }
  #column-center .navSplitPagesResult strong {
    color: var(--d-ink);
  }
  #column-center .navSplitPagesLinks {
    margin: 0 0 12px;
    font-size: 0;
    line-height: 0;
  }
  #column-center .navSplitPagesLinks > :is(a, strong) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 32px;
    margin: 0 0 0 6px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--d-radius);
    background: var(--d-surface-2);
    color: var(--d-brand);
    font: 600 var(--d-fs-ui) / 1 var(--d-font);
    text-decoration: none;
    vertical-align: top;
  }
  #column-center .navSplitPagesLinks > a:hover {
    background: var(--d-surface-3);
  }
  #column-center
    .navSplitPagesLinks
    > :is(strong.current, strong[aria-current]) {
    background: var(--d-brand);
    color: var(--d-brand-ink);
  }
  /* single-page lists print both boxes empty */
  #column-center .navSplitPagesLinks:not(:has(*)) {
    display: none;
  }

  /* ======================================================================
     6. /our-artists (floats stay: 240px cards, 30px apart)
     ====================================================================== */

  #artistGrid .artistwrap img {
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  #artistGrid .artistwrap strong {
    padding: 16px 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    font: 700 18px/1.25 var(--d-font);
    letter-spacing: -0.2px;
    color: var(--d-ink);
  }
  #artistGrid .artistwrap strong a {
    color: inherit;
    text-decoration: none;
  }
  #artistGrid .artistwrap strong a:hover {
    color: var(--d-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* "View >" : a small secondary button (olive with white text was 2.48:1) */
  #artistGrid .artistwrap a.v {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    border: var(--d-btn-border) solid var(--d-brand);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-brand);
    font: 600 var(--d-fs-btn-sm) / 1.2 var(--d-font);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
  }
  #artistGrid .artistwrap a.v:hover {
    background: var(--d-surface-2);
  }
  #artistGrid .artistwrap a.v:active {
    background: var(--d-surface-3);
  }

  /* ======================================================================
     7. LEFT-COLUMN SIDEBOXES
     ====================================================================== */

  /* --- category blocks: five sage blocks as one rounded group --- */
  #categories .box-body ul {
    border-radius: var(--d-radius);
    overflow: hidden;
  }
  #categories .box-body ul li {
    position: relative;
    background: var(--d-brand);
    border-bottom: 1px solid rgb(255 255 255 / 0.35);
  }
  #categories .box-body ul li:last-child {
    border-bottom: 0;
  }
  #categories .box-body ul li a {
    padding: 0 14px 0 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0.02em;
    color: #fff;
  }
  #categories .box-body ul li:hover {
    background: var(--d-brand-hover);
  }
  /* the current category (and the parent of the current subcategory): a darker block with a
     white bar on its left edge; white text (olive on sage was 2.45:1) */
  #categories
    .box-body
    ul
    li:has(.category-subs-selected, .category-subs-parent-selected) {
    background: var(--d-brand-press);
  }
  /* the white bar is a short marker inside the block, not flush with its edge: flush, it
     merged with the white page and read as a notch cut out of the block */
  #categories
    .box-body
    ul
    li:has(.category-subs-selected, .category-subs-parent-selected)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: #fff;
  }
  #categories .box-body ul li .category-subs-selected,
  #categories .box-body ul li .category-subs-parent-selected {
    color: #fff;
  }
  /* stylesheet_boxes.css gives the FIRST block (li.bg0) its background with !important, so
     the three states need it again for that block */
  #categories .box-body ul li.bg0 {
    background: var(--d-brand) !important;
  }
  #categories .box-body ul li.bg0:hover {
    background: var(--d-brand-hover) !important;
  }
  #categories
    .box-body
    ul
    li.bg0:has(.category-subs-selected, .category-subs-parent-selected) {
    background: var(--d-brand-press) !important;
  }
  /* the ring sits inside the block, white on sage */
  #categories .box-body ul li a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-brand);
    outline-offset: -4px;
  }
  /* the pale rows of a subcategory list ("All products" links) */
  #categories .box-body ul li.category-products {
    background: var(--d-surface-2);
    border-bottom-color: var(--d-surface);
  }
  #categories .box-body ul li.category-products a {
    font-size: 14px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--d-brand);
  }
  #categories .box-body ul li.category-products:hover {
    background: var(--d-surface-3);
  }
  #categories .box-body ul li.category-products a:hover {
    color: var(--d-brand-hover);
  }
  #categories .box-body ul li.category-products a:focus-visible {
    outline-color: var(--d-focus);
  }

  /* --- sidebox headings --- */
  #column-left .box-head {
    margin: 16px 0 8px;
    padding: 0;
    font: 700 var(--d-fs-ui) / 1.3 var(--d-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-ink);
  }

  /* --- select forms (Music Genres, Artists & Authors, Record Companies) ---
     the box's full width, a field per the form-control spec; "Please select ..." is a
     12px secondary-ink line above it */
  #column-left .sidebox-select-form label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font: 400 var(--d-fs-small) / 1.4 var(--d-font);
    text-align: left;
    color: var(--d-ink-2);
  }
  #column-left .sidebox-select-form select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--d-field-h);
    margin: 0;
    padding: 0 36px 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--d-ink-2) 50%),
      linear-gradient(135deg, var(--d-ink-2) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
    cursor: pointer;
  }
  #column-left .sidebox-select-form select:hover {
    border-color: var(--d-field-hover);
  }
  #column-left .sidebox-select-form select:focus-visible {
    border-color: var(--d-brand);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent; /* keeps a ring in forced-colours mode */
  }
  /* Go: the script disables it (the select submits on change), so it is not shown. Enabled
     (no auto-submit), it is a small primary button under the field. The no-script
     input[type=image] keeps stylesheet.css's visually-hidden-until-focused rule. */
  #column-left .sidebox-select-form .ns-btn:disabled {
    display: none;
  }
  #column-left .sidebox-select-form .ns-btn:not(:disabled) {
    min-height: var(--d-btn-h-sm);
    margin: 8px 0 0;
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }

  /* --- newsletter box (mailchimp sidebox; not printed on the pages checked, styled so it
     matches when it is) --- */
  #mailchimpsideboxContent {
    padding: 0;
  }
  #mailchimpsideboxContent input[type="text"] {
    box-sizing: border-box;
    width: 100% !important; /* stylesheet_boxes.css: width: 199px !important */
    height: var(--d-field-h);
    margin: 0 0 8px;
    padding: 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
  }
  #mailchimpsideboxContent input[type="text"]:hover {
    border-color: var(--d-field-hover);
  }
  #mailchimpsideboxContent input[type="text"]:focus-visible {
    border-color: var(--d-brand);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent;
  }
  #mailchimpsideboxContent input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    border: var(--d-btn-border) solid var(--d-brand);
    border-radius: var(--d-radius);
    background: var(--d-brand);
    color: var(--d-brand-ink);
    font: 600 var(--d-fs-btn-sm) / 1.2 var(--d-font);
    letter-spacing: 0.01em;
    cursor: pointer;
  }
  #mailchimpsideboxContent input[type="submit"]:hover {
    border-color: var(--d-brand-hover);
    background: var(--d-brand-hover);
  }
  #mailchimpsidebox .box-head {
    margin-left: 0;
  }

  /* ======================================================================
     8. MOTION (dial 3): colour, shadow and a 2px lift, 120ms, only when the visitor has not
     asked for reduced motion
     ====================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    #indexBody .popular .product-col .img img,
    #column-center
      :is(
        .centerBoxContentsProducts,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials,
        .newgrid
      )
      > .ng200
      img {
      transition:
        box-shadow var(--d-dur) var(--d-ease),
        transform var(--d-dur) var(--d-ease);
    }
    #column-center
      :is(
        .centerBoxContentsProducts,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials,
        .newgrid
      ):is(:hover, :focus-within)
      > .ng200
      img {
      transform: translateY(-2px);
    }
    #column-center .navSplitPagesLinks > a,
    #categories .box-body ul li,
    #column-left .sidebox-select-form select,
    #column-center :is(.tie2, #filter-wrapper) select,
    #artistGrid .artistwrap a.v,
    #indexBody .jquery-slider-wrapper .jquery-slider-selector {
      transition:
        background-color var(--d-dur) linear,
        border-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }
    #artistGrid .artistwrap strong a,
    #column-center
      :is(
        .centerBoxContentsProducts,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials,
        .newgrid
      )
      > h3.itemTitle
      a {
      transition: color var(--d-dur) linear;
    }
  }
}