/* ==========================================================================
   Desktop refresh, listings group: theme9star (9starmedia.com). 2026-10-25.
   docs/DESKTOP-REFRESH-9STAR.md section 6 (L.*) and the global rules of section 0.

   Covers: the home slider dots and banner corners, the Popular strip, product tiles
   (category, /new-products, search, featured, the empty cart's "new products"), the
   filter / sort bar, the Featured / Specials rows, the category description, the artist
   detail page's headings, links and bio, pagination chips, /our-artists, and the left
   column (category tiles, Connect tiles, sidebox headings and selects, the hidden "Go"
   buttons, the newsletter box).

   Owner direction, 2026-10-25: the artist names and the category names ("Devotional
   Music") are black (ink), never brown: tile artists, tile titles (also on hover), the
   artist and category links, the newsletter's privacy link. Brown (--d-brand-text) stays
   on buttons, pagination chips, prices and the View button only.

   DESKTOP ONLY. Every rule sits inside @media (min-width: 1024px): phones and tablets
   (1023px and below) are untouched. Values come from stylesheet_zzz_d_tokens.css (var(--d-*)).
   The generic button and field looks (.ns-btn, text inputs, selects) belong to
   stylesheet_zzz_d_base.css; this sheet only sizes and places them, and draws the
   controls that are not .ns-btn (pagination, View, Subscribe, tiles).

   Amber is a fill only: text on it is charcoal; the brand as text or ring on white is
   --d-brand-text. The five category colours are identity (tiles), never actions.
   Every transition and :active transform is inside prefers-reduced-motion: no-preference;
   hover rules that could stick on a touch laptop are inside (hover: hover).
   !important appears in two places (the olive .bg0 tile and the newsletter field width),
   each commented where it is used.
   ========================================================================== */

@media (min-width: 1024px) {
  /* =======================================================================
     HOME: slider dots and banner corners
     (the slider stylesheet is linked in the body and loads late: #indexBody wins)
     ======================================================================= */
  #indexBody .jquery-slider-wrapper {
    border-radius: var(--d-radius);
    overflow: hidden;
  }

  /* the 16px sprite squares become 10px round dots, white with a charcoal hairline, so
     they show on the grey frame, on pale and on dark pictures. The row is a flex box with
     a little padding so the current dot's ring is not clipped by overflow: hidden. */
  #indexBody .jquery-slider-wrapper .jquery-slider-selectors {
    display: flex;
    gap: 6px;
    padding: 4px;
    right: 8px;
    bottom: 6px;
    overflow: visible;
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector {
    position: relative;
    flex: none;
    float: none;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #fff none;
    box-shadow: 0 0 0 1px rgb(45 45 45 / 0.55);
  }
  /* the dot is small; its link reaches 3px further each way (16px box, no overlap) */
  #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) none;
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 3px rgb(45 45 45 / 0.55);
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector:focus-visible {
    outline: var(--d-focus-w) solid var(--d-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
  }
  @media (hover: hover) {
    #indexBody
      .jquery-slider-wrapper
      .jquery-slider-selector:not(.jquery-slider-selector-current):hover {
      background: var(--d-brand-soft) none;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #indexBody .jquery-slider-wrapper .jquery-slider-selector {
      transition:
        background-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }
  }

  /* the Luminous Journey banner; the label tiles and promo graphics are raster, untouched */
  #indexBody .banners > center img {
    border-radius: var(--d-radius);
  }

  /* =======================================================================
     HOME: Popular products strip
     ninestar_carousel.js pins each <li> to its measured size and the strip to 8 x the
     li's outer width, so the card keeps its 150px footprint (134px cover + 8px each side).
     ======================================================================= */
  .popular .carousel-box h2 {
    padding: 0 0 16px;
    color: var(--d-ink);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.4px;
  }
  /* arrows: the heading is smaller now, so they move up with it */
  .popular .carousel-box .prev,
  .popular .carousel-box .next {
    top: 5px;
  }
  .popular .carousel-box .prev:focus-visible,
  .popular .carousel-box .next:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    .popular .carousel-box .prev:hover,
    .popular .carousel-box .next:hover {
      opacity: 0.8;
    }
  }

  .popular .carousel ul,
  .popular .carousel ul li {
    height: 218px;
  }
  .popular .carousel ul {
    height: 232px;
  }
  .popular .carousel .product-col {
    width: 150px;
  }
  .popular .carousel .product-col .img img {
    display: block;
    width: 134px;
    height: 134px;
    margin: 0 8px;
    border: 0;
    border-radius: var(--d-radius-cover);
    background: var(--d-surface);
    box-shadow: var(--d-cover-edge);
  }
  /* price: text, not an olive block (and no yellow block for a special price) */
  .popular .carousel .product-col .price {
    float: none;
    display: block;
    width: auto;
    min-height: 0;
    padding: 10px 8px 0;
    background: none;
    color: var(--d-brand-text);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    cursor: default;
  }
  .popular .carousel .product-col .price strong {
    padding: 0;
  }
  .popular .carousel .product-col .price .normalprice {
    margin-right: 6px;
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: line-through;
  }
  .popular .carousel .product-col .price .productSpecialPrice {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--d-brand-text);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
    cursor: default;
  }
  .popular .carousel .product-col .button {
    padding: 8px 8px 0;
  }
  .popular .carousel .product-col .button a.ns-btn {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }
  @media (hover: hover) {
    .popular .carousel .product-col:hover .img img {
      box-shadow: var(--d-cover-edge), var(--d-shadow-2);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .popular .carousel .product-col .img img {
      transition: box-shadow var(--d-dur) var(--d-ease);
    }
  }

  /* =======================================================================
     LISTING TILES: category, genre, artist, search, /new-products (.newgrid),
     featured, specials and the empty cart's "new products".
     The three-up floats, the inline 32.5% widths and br.clearBoth stay; matchHeight
     (jscript_responsive_framework.php) still equalises each row.
     ======================================================================= */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    ) {
    min-height: 0;
    margin-bottom: 20px;
  }
  /* box fit: Zen Cart gives every tile an inline width of 32.5% and .back (stylesheet.css:474)
     adds a 33px left and a -30px right margin. The rows of three then end 19px past the
     listing's content box and 4-7px past #column-center, the last box's empty right gutter
     hanging into the page padding (also on the live site; nothing visible is clipped).
     Trim 24px off each box and take it back from the negative right margin: the 33px lead-in
     and the pitch (32.5% + 3px) are unchanged, so every cover, title and button stays exactly
     where it was, and the third box now ends inside the listing at every width from 1024 to
     1920. At 1024px (a 691px listing) a trimmed box is still 200.6px, the cover's own width.
     max-width, not width, so no !important is needed against the inline style. */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    ).back {
    max-width: calc(32.5% - 24px);
    margin-right: -6px;
    margin-left: 33px;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    br,
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    .listingDescription:empty {
    display: none;
  }
  /* cover: 6px corners and a hairline ring instead of the warm 15px shadow */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    .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);
  }
  @media (hover: hover) {
    #column-center
      :is(
        .centerBoxContentsProducts,
        .newgrid,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials
      ):hover
      .ng200
      img {
      box-shadow: var(--d-cover-edge), var(--d-shadow-2);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #column-center
      :is(
        .centerBoxContentsProducts,
        .newgrid,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials
      )
      .ng200
      img {
      transition: box-shadow var(--d-dur) var(--d-ease);
    }
  }
  /* title: one line (the store already shortens long names), ink, underline on hover (no
     brown: owner, 2026-10-25, artist names and category names are black) */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    h3.itemTitle {
    max-width: 200px;
    margin: 14px 0 0;
    padding: 0;
    overflow: hidden;
    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    h3.itemTitle
    a {
    color: var(--d-ink);
    text-decoration: none;
  }
  @media (hover: hover) {
    #column-center
      :is(
        .centerBoxContentsProducts,
        .newgrid,
        .centerBoxContentsNew,
        .centerBoxContentsFeatured,
        .centerBoxContentsSpecials
      )
      h3.itemTitle
      a:hover {
      color: var(--d-ink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
  /* artist: one line with an ellipsis (a long credit such as "Do'a - Randy Armstrong
     and Ken..." otherwise wraps and drops that tile's buttons below its neighbours') */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    .plart {
    width: 200px;
    margin: 4px 0 0;
    padding: 0 0 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--d-line);
    color: var(
      --d-ink
    ); /* owner, 2026-10-25: the artist name is black (the spec's #5f6264 read grey) */
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* price, where a listing shows one */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    :is(.productBasePrice, .productSpecialPrice) {
    color: var(--d-brand-text);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* Buy Now (primary) beside More Info (secondary): two 96px buttons and an 8px gap
     are exactly the cover's 200px, one line, flush with the cover's edges */
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    a.ns-btn {
    box-sizing: border-box;
    min-width: 96px;
    min-height: var(--d-btn-h-sm);
    margin-top: 12px;
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }
  #column-center
    :is(
      .centerBoxContentsProducts,
      .newgrid,
      .centerBoxContentsNew,
      .centerBoxContentsFeatured,
      .centerBoxContentsSpecials
    )
    a.ns-btn
    + a.ns-btn {
    margin-left: 8px;
  }

  /* =======================================================================
     FEATURED PRODUCTS and SPECIALS: these two pages list products as rows (.tie cards),
     not tiles. Scoped to their body ids because the reviews list (the shell sheet's)
     shares the .tie card.
     ======================================================================= */
  :is(#featuredproductsBody, #specialsBody) #column-center .tie {
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie .image {
    padding: 0;
    border: 0;
    border-radius: var(--d-radius-cover);
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie .image img {
    display: block;
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--d-line);
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie a.name {
    font-size: var(--d-fs-h3);
    line-height: 1.35;
    text-decoration: none;
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie .price-text {
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
  }
  :is(#featuredproductsBody, #specialsBody)
    #column-center
    .tie
    :is(.price, .productSpecialPrice) {
    color: var(--d-brand-text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  :is(#featuredproductsBody, #specialsBody) #column-center .tie .description {
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.55;
  }
  :is(#featuredproductsBody, #specialsBody)
    #column-center
    .tie
    .description
    strong {
    color: var(--d-ink);
  }
  @media (hover: hover) {
    :is(#featuredproductsBody, #specialsBody) #column-center .tie a.name:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  /* =======================================================================
     FILTER / SORT BAR and CATEGORY DESCRIPTION
     ======================================================================= */
  .tie2 {
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  .tie2 .tie2-indent {
    padding: 10px 16px;
  }
  .tie2 form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .tie2 label,
  .tie2 label.inputLabel,
  #sorter label {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--d-ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
  }
  /* the select's look is the base sheet's; here only its compact height (the #ids
     out-rank the base sheet's #contentMainWrapper field rule) */
  #contentMainWrapper #column-center .tie2 select {
    width: auto;
    height: var(--d-field-h-sm);
  }
  /* room for the chevron: the base sheet's padding-right: 36px on selects is out-ranked by
     its own field rule (padding: 0 12px, one class more specific), so long option text such
     as "Date Added - New to Old" ran under the arrow */
  #contentMainWrapper
    #column-center
    :is(.tie2, #filter-wrapper, #sorter)
    select {
    padding-right: 36px;
  }
  /* search results: the "Filter by" form sits beside the sort bar, in the same panel */
  #column-center #filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 12px;
  }
  #column-center #filter-wrapper > form[name="filter"] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 16px;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #contentMainWrapper
    #column-center
    #filter-wrapper
    > form[name="filter"]
    select {
    width: auto;
    height: var(--d-field-h-sm);
  }
  #column-center #filter-wrapper > form[name="filter"] .inputLabel {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--d-ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
  }
  #column-center #filter-wrapper > #sorter {
    margin: 0;
  }

  #indexProductList > .tie3:not(#artist_holder) {
    height: auto;
    border: 0;
    border-radius: var(--d-radius-lg);
    background: var(--d-surface-2);
  }
  #indexProductList > .tie3:not(#artist_holder) .tie3-indent {
    padding: 14px 20px;
  }
  #indexProductList > .tie3:not(#artist_holder) .content_desc {
    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.55;
  }
  /* a genre or list with no description printed an empty box */
  #indexProductList
    > .tie3:not(#artist_holder):not(:has(#indexProductListCatDescription > *)) {
    display: none;
  }

  /* =======================================================================
     ARTIST PAGE (the page the Artists & Authors box leads to; it holds #artist_holder).
     No other desktop sheet covers it, and it shares the listing tiles above, so the
     parts that still wore the old theme are done here: the empty filter bar, the album
     headings, the website links and the bio text.
     ======================================================================= */
  /* the template hides the filter form on this page and leaves an empty bar (the mobile
     sheet removes it the same way); a bar with real content keeps showing */
  #indexProductList:has(#artist_holder)
    .tie2:not(:has(.tie2-indent > :not(form))),
  #indexProductList .tie2:not(:has(.tie2-indent > *)) {
    display: none;
  }
  /* an artist with no bio printed an empty box (it is transparent, so only a gap showed) */
  #artist_holder:not(:has(#indexProductListCatDescription > *)) {
    display: none;
  }
  /* "Albums by ..." (h5) and "Other Albums Featuring ..." (h6) were 30px / -1px grey, as
     big as the page title; they are section headings (the h2 step). clear: both because
     the floated website links above them made the h6 wrap around the links. */
  #column-center :is(#artist_primary_title, #artist_other_title) {
    clear: both;
    margin: 28px 0 12px;
    padding: 0;
    color: var(--d-ink);
    font-size: var(--d-fs-h2);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.2px;
  }
  /* website links: yellow (#f9bd00) text on white was 1.6:1; the brand as text is
     --d-brand-text. flow-root keeps the floated links inside their own row. */
  #artist_holder #artist-links {
    display: flow-root;
    margin: 16px 0 8px;
    font-size: 14px;
    line-height: 1.5;
  }
  #artist_holder #artist-links a {
    color: #414141; /* the site's link colour (owner, 2026-10-25: no brown links) */
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #artist_holder #artist-links a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    #artist_holder #artist-links a:hover {
      color: var(--d-ink);
    }
  }
  /* bio: 12px / 15px was smaller than the rest of the site's running text */
  #artist_holder .content_desc {
    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.55;
  }
  #artist_holder .content_desc #wrap {
    font-size: inherit;
    line-height: inherit;
  }
  #artist_holder img.artist-image {
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }

  /* =======================================================================
     PAGINATION: 32px chips (the page numbers are separated by &nbsp; text, which the
     container's font-size: 0 hides; the chips set their own size)
     ======================================================================= */
  .navSplitPagesResult {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 32px;
  }
  .navSplitPagesResult strong {
    color: var(--d-ink);
  }
  .navSplitPagesLinks {
    margin-bottom: 10px;
    font-size: 0;
  }
  .navSplitPagesLinks :is(a, strong, li.current) {
    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: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-brand-text);
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    vertical-align: top;
  }
  .navSplitPagesLinks :is(strong.current, li.current) {
    border-color: var(--d-brand);
    background: var(--d-brand);
    color: var(--d-brand-ink);
  }
  .navSplitPagesLinks a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  /* the reviews list prints its page numbers as nav.pagination > ul.pagination > li */
  .navSplitPagesLinks nav.pagination ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .navSplitPagesLinks nav.pagination ul.pagination li {
    margin: 0;
    padding: 0;
  }
  .navSplitPagesLinks nav.pagination ul.pagination :is(a, li.current) {
    margin: 0;
  }
  .navSplitPagesLinks nav.pagination ul.pagination li:not(.current) {
    display: block;
  }
  @media (hover: hover) {
    .navSplitPagesLinks a:hover {
      background: var(--d-brand-soft);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .navSplitPagesLinks :is(a, strong) {
      transition:
        background-color var(--d-dur) linear,
        border-color var(--d-dur) linear;
    }
    .navSplitPagesLinks a:active {
      transform: scale(0.98);
    }
  }

  /* =======================================================================
     /our-artists
     The 3-column grid is stylesheet_zz_shop.css's. Every selector here carries
     #contentMainWrapper because stylesheet_zzz_d_shell.css loads after this sheet and its
     EZ-page prose rules (#ezPageDefault > div:not(:has(#artistGrid))) also match the
     #artistGrid div itself: they would cap the grid at 72ch (two columns) and paint the
     artist names as underlined prose links. One extra id wins without !important.
     ======================================================================= */
  #contentMainWrapper #ezPageDefault #artistGrid {
    max-width: none;
  }
  #contentMainWrapper #ezPageDefault #artistGrid .artistwrap img {
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  #contentMainWrapper #ezPageDefault #artistGrid .artistwrap strong {
    padding: 14px 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
    color: var(--d-ink);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.2px;
  }
  /* the name is a list link: ink at rest, brand-text underline on hover */
  #contentMainWrapper #ezPageDefault #artistGrid .artistwrap strong a {
    color: var(--d-ink);
    text-decoration: none;
  }
  #contentMainWrapper
    #ezPageDefault
    #artistGrid
    .artistwrap
    strong
    a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  /* View: a small secondary button (it is a plain link, not a .ns-btn) */
  #contentMainWrapper #ezPageDefault #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-text);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-brand-text);
    font-size: var(--d-fs-btn-sm);
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  #contentMainWrapper #ezPageDefault #artistGrid .artistwrap a.v:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap strong a:hover {
      color: var(--d-ink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap a.v:hover {
      background: var(--d-brand-soft);
      color: var(--d-brand-text);
      text-decoration: none;
    }
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap:hover img {
      box-shadow: var(--d-cover-edge), var(--d-shadow-2);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap a.v {
      transition:
        background-color var(--d-dur) linear,
        transform var(--d-dur) var(--d-ease);
    }
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap a.v:active {
      background: var(--d-brand-soft-2);
      transform: scale(0.98);
    }
    #contentMainWrapper #ezPageDefault #artistGrid .artistwrap img {
      transition: box-shadow var(--d-dur) var(--d-ease);
    }
  }

  /* =======================================================================
     LEFT COLUMN: category tiles and Connect tiles
     Identity fills (--d-cat-*), charcoal text (white on rust), a charcoal edge bar for
     hover, focus and the current category (colour never carries the state alone).
     ======================================================================= */
  #column-left #categories .box-body ul,
  #column-left #fbsideboxContent ul.socialBars {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--d-radius);
    overflow: hidden;
  }
  #column-left #categories .box-body ul li,
  #column-left #fbsideboxContent ul.socialBars li {
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--d-cat-5);
  }
  #column-left #categories .box-body ul li.bg0 {
    background: var(
      --d-cat-1
    ) !important; /* boxes.css sets .bg0 with !important (same olive) */
  }
  #column-left #categories .box-body ul li.bg1 {
    background: var(--d-cat-2);
  }
  #column-left #categories .box-body ul li.bg2 {
    background: var(--d-cat-3);
  }
  #column-left #categories .box-body ul li.bg3 {
    background: var(--d-cat-4);
  }

  #column-left #categories .box-body ul li a,
  #column-left #fbsideboxContent a.socialBar {
    display: block;
    padding: 8px 12px 8px 14px;
    color: var(--d-cat-ink);
    font-family: var(--d-font);
    font-size: 19px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    filter: none;
  }
  /* the current category printed its name in #363636 (boxes.css), which fails on rust */
  #column-left #categories .box-body ul li a span {
    color: inherit;
  }
  #column-left #categories .box-body ul li.bg1 a,
  #column-left #fbsideboxContent a.socialBar-rust {
    color: var(--d-cat-ink-rust);
  }
  /* a hairline between tiles, drawn on the tile itself */
  #column-left #categories .box-body ul li + li a,
  #column-left #fbsideboxContent ul.socialBars li + li a.socialBar {
    border-top: 1px solid rgb(255 255 255 / 0.6);
  }
  /* Connect tiles: the five fills mapped to the category colours */
  #column-left #fbsideboxContent a.socialBar-sky {
    background: var(--d-cat-5);
  }
  #column-left #fbsideboxContent a.socialBar-amber {
    background: var(--d-cat-4);
  }
  #column-left #fbsideboxContent a.socialBar-rust {
    background: var(--d-cat-2);
  }
  #column-left #fbsideboxContent a.socialBar-teal {
    background: var(--d-cat-3);
  }
  #column-left #fbsideboxContent a.socialBar-olive {
    background: var(--d-cat-1);
  }
  /* current category: the bar stays on */
  #column-left
    #categories
    .box-body
    ul
    li
    a:has(.category-subs-selected, .category-subs-parent-selected) {
    box-shadow: inset 6px 0 0 rgb(45 45 45 / 0.55);
  }
  #column-left #categories .box-body ul li a:focus-visible,
  #column-left #fbsideboxContent a.socialBar:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-cat);
    outline-offset: -4px;
    filter: none;
  }
  #column-left #categories .box-body ul li.bg1 a:focus-visible,
  #column-left #fbsideboxContent a.socialBar-rust:focus-visible {
    outline-color: var(--d-cat-ink-rust);
  }
  @media (hover: hover) {
    #column-left #categories .box-body ul li a:hover,
    #column-left #fbsideboxContent a.socialBar:hover {
      box-shadow: inset 6px 0 0 rgb(45 45 45 / 0.55);
      filter: none;
    }
    #column-left #categories .box-body ul li.bg1 a:hover,
    #column-left #fbsideboxContent a.socialBar-rust:hover {
      box-shadow: inset 6px 0 0 rgb(255 255 255 / 0.7);
    }
  }
  #column-left
    #categories
    .box-body
    ul
    li.bg1
    a:has(.category-subs-selected, .category-subs-parent-selected) {
    box-shadow: inset 6px 0 0 rgb(255 255 255 / 0.7);
  }
  @media (prefers-reduced-motion: no-preference) {
    #column-left #categories .box-body ul li a,
    #column-left #fbsideboxContent a.socialBar {
      transition: box-shadow var(--d-dur) var(--d-ease);
    }
  }

  /* =======================================================================
     LEFT COLUMN: sidebox headings, selects, hidden Go buttons, newsletter
     ======================================================================= */
  #column-left .box-head {
    margin: 20px 0 8px;
    padding: 0 4px;
    color: var(--d-ink);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* the Connect box has an empty heading of its own around the real one */
  #column-left #fbsidebox .box-top-left > .box-head {
    display: none;
  }

  /* Artists & Authors, Music Genres: label above, select across the box */
  #column-left .sidebox-select-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    text-align: left;
  }
  #column-left .sidebox-select-form label {
    flex: 0 0 100%;
    margin: 0;
    padding: 0 4px;
    color: var(--d-ink-2);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
  }
  /* flex-basis 0 outranks the Artists select's inline width: 90% */
  #column-left .sidebox-select-form select {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: var(--d-field-h);
    margin: 0;
    padding-right: 36px; /* room for the chevron (see the filter bar note) */
  }
  /* Go: the keyboard's way to choose deliberately (the selects submit on change for a
     mouse). Visually hidden, never display: none; a small primary beside the select
     once it has focus. The old rule (stylesheet.css) only matched input[type=image]. */
  #column-left .sidebox-select-form input.ns-btn {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #column-left .sidebox-select-form input.ns-btn:focus,
  #column-left .sidebox-select-form input.ns-btn:focus-visible {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: var(--d-btn-h-sm);
    margin: 0;
    padding: var(--d-btn-pad-sm);
    border: var(--d-btn-border) solid var(--d-brand);
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-size: var(--d-fs-btn-sm);
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }

  /* Newsletter */
  #column-left #mailchimpsidebox #mailchimpsideboxContent {
    padding: 0;
    color: var(--d-ink-2);
    font-size: 13px;
    line-height: 1.45;
  }
  #column-left #mailchimpsidebox #mailchimpsideboxContent > .newsletterForm {
    margin-top: 10px;
  }
  #column-left #mailchimpsidebox .box-head {
    margin-left: 0;
  }
  #column-left #mailchimpsidebox .newsletterForm label:not(.newsletterConsent) {
    display: block;
    margin: 10px 0 4px;
    padding: 0 4px;
    color: var(--d-ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
  }
  /* !important: boxes.css pins this field to width: 199px !important */
  #column-left
    #mailchimpsidebox
    .newsletterForm
    :is(input[type="text"], input[type="email"]) {
    box-sizing: border-box;
    width: 100% !important;
    height: var(--d-field-h);
    margin: 0;
  }
  #column-left #mailchimpsidebox .newsletterForm label.newsletterConsent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 14px;
    padding: 0 4px;
    color: var(--d-ink-2);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
  }
  #column-left
    #mailchimpsidebox
    .newsletterForm
    label.newsletterConsent
    input[type="checkbox"] {
    flex: none;
    margin: 1px 0 0;
  }
  #column-left #mailchimpsidebox .newsletterForm label.newsletterConsent a {
    color: #414141; /* the site's link colour (owner, 2026-10-25: no brown links) */
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Subscribe is a plain submit (not a .ns-btn): a small primary across the box */
  #column-left #mailchimpsidebox .newsletterForm input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--d-btn-h-sm);
    margin: 0;
    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-family: var(--d-font);
    font-size: var(--d-fs-btn-sm);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #column-left
    #mailchimpsidebox
    .newsletterForm
    input[type="submit"]:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    #column-left #mailchimpsidebox .newsletterForm input[type="submit"]:hover {
      border-color: var(--d-brand-hover);
      background: var(--d-brand-hover);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #column-left #mailchimpsidebox .newsletterForm input[type="submit"] {
      transition:
        transform var(--d-dur) var(--d-ease),
        background-color var(--d-dur) linear,
        border-color var(--d-dur) linear;
    }
    #column-left #mailchimpsidebox .newsletterForm input[type="submit"]:active {
      border-color: var(--d-brand-press);
      background: var(--d-brand-press);
      transform: scale(0.98);
    }
  }
}