/* ==========================================================================
   MOBILE REDESIGN: LISTINGS (home, category / genre lists, search, new / all /
   featured / specials / brands). Spec: MOBILE-REDESIGN-SPEC.md, "Listings".
   Loads after stylesheet_zz_9star.css (filename order) and overrides its phone
   layer where the redesign differs. Every rule sits inside max-width: 1023px, so
   desktop (1024px and up) cannot change.

   Ported from theme-bahai's stylesheet_zz_9star_m_listings.css (bahaimusicstore.com,
   sha256 c28f1ea2...a8ba9f): same selectors, same layout. theme9star differences:
   - Colour roles. 9 Star's brand is amber (#e8a900), a FILL colour: on white it is
     only 2.1:1, so wherever the BMS sheet prints the brand as text (prices, the
     "... more info" links) this one uses --m-brand-text (#8a6400, 5.4:1). Amber is
     kept as a fill only: the current page chip, with charcoal --m-brand-ink on it.
   - Fallbacks are 9 Star's token values (charcoal ink, warm greys), not BMS's.
   - Showcase mode (STORE_STATUS != 0, checkout off): the home Popular products strip
     prints a "... more info" text link where the Add to Cart picture would be. It is
     laid out as the same 44px quiet row as the featured / all-products pages' link.
   - The home page's pictures are 9 Star's own (the Luminous Journey banner, the four
     category tiles and their label pictures, the artists / newsletter / wholesale
     promos); the markup around them is the same as BMS's, so the rules are too.
   - stylesheet_zz_shop.css (loads after this sheet) has no rules for these pages.

   Scope: the listing pages' body ids. The home page, the category pages and the
   artist page all use #indexBody; the artist page (it holds #artist_holder) belongs
   to the product sheet, so #indexBody is always qualified with :not(:has(#artist_holder)).
   Tokens come from the shell sheet (stylesheet_zz_9star_m_shell.css); each var() has
   the 9 Star value as its fallback so this sheet renders on its own.
   Buttons: only laid out here (width, order, spacing). Their look (.ns-btn, or the
   theme's image buttons without JavaScript) belongs to the shell sheet.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ------------------------------------------------------------ listing grid
     The phone layer made each grid's parent a wrapping flex row of 49% items, with
     ::before / ::after as line breaks and fixed 95px button columns inside each item.
     The redesign wants a real column grid: 2-up on phones, 3-up from 600px, 4-up from
     860px (see the steps after this block). The parent becomes a grid; whatever is not
     an item (heading, sort bar, page count and links) spans the full row, and the
     `order` values set by the phone layer still put it before or after the items.
     The <br class="clearBoth"> row breaks and the pseudo-element line breaks go.
     (stylesheet_zz_9star.css's grid rules are the bahai phone pass's, unchanged on
     9 Star, so the same overrides apply: this parent beats its flex row at 3 ids to 1,
     its ::before / ::after go, and its `order` values carry over into the grid.) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
    align-items: stretch;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid))::before,
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid))::after { content: none; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid)) > * { grid-column: 1 / -1; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid)) > br { display: none; }

  /* ------------------------------------------------------------ listing card
     One card per product: square cover at the card's width (6px radius), the title in
     at most two lines, the artist, then the buttons pinned to the card's bottom so each
     row's buttons line up. The items carry an inline width (32.5%) and the phone layer
     a 49% !important one, hence the !important on width. The phone layer's 14-row grid
     inside each item gives way to this flex column. */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid):not(.w-100) {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    width: auto !important; /* inline style="width:32.5%" and the phone layer's 49% !important */
    min-width: 0;
    height: auto !important;
    min-height: 0;
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
    float: none;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > br { display: none; }

  /* cover: the box is square at the card's width; pictures that are not square
     (some video and book covers) are shown whole on the pale surface, not cropped */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > .ng200 {
    display: block;
    width: 100% !important; /* responsive.css sets width: auto !important */
    height: auto;
    max-width: none;
    margin: 0 0 10px;
    float: none;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > .ng200 a {
    display: block;
    width: auto;
    height: auto;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > .ng200 img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1;
    object-fit: contain;
    border: 0;
    border-radius: var(--m-radius-cover, 6px);
    background: var(--m-surface-2, #f7f6f3);
    /* a hairline instead of the theme's 1px grey frame and 15px drop shadow, so white
       covers still have an edge on the white page */
    box-shadow: 0 0 0 1px var(--m-line, #e4e2df);
  }

  /* title: two lines at most (the server already shortens long ones with "...") */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > 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;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > h3.itemTitle a {
    color: inherit;
    padding-block: 4px; /* inline padding: a 24px tap height without moving the text */
  }

  /* artist: one line, no rule under it (stylesheet.css draws a 200px grey line) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > .plart {
    display: block;
    width: auto;
    margin: 0 0 12px; /* the least space above the buttons, which take the rest (margin-top: auto) */
    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);
  }
  /* price, where a listing prints one: the brand as text, so the dark amber
     (amber itself is 2.1:1 on white) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) :is(.productBasePrice, .productSpecialPrice, .price) {
    font-size: 15px;
    font-weight: bold;
    color: var(--m-brand-text, #8a6400);
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > .listingDescription:empty { display: none; }

  /* buttons: Buy Now, then More Info, each the card's full width, stacked, under the
     text and pinned to the card's bottom (margin-top: auto) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > 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;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > h3 ~ a:not(h3 ~ a ~ a) { margin-top: auto; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > h3 ~ a.ns-btn {
    justify-content: center;
    line-height: 1.2; /* the phone layer sets line-height: 0 on these links, above the shell's own */
  }
  /* without JavaScript the theme's 95x32 image buttons stay, at their natural size
     (stylesheet_zz_9star.css caps any button picture at half the item: calc(50% - 5px)) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody)
    #column-center :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid) > h3 ~ a:not(.ns-btn) > img {
    display: block;
    width: 95px;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  /* ----------------------------------------------- featured / all products
     These two pages print each product as a wide row: a small cover, then title,
     an empty "Model:" line, "Price:", "... more info" and a long description. On a
     phone that is a narrow column of text beside a thumbnail. They become the same
     cards as the other lists: cover, title, price, and the "... more info" link as a
     full-width quiet Info row. The description stays on the product page. */
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) > .wrapper:has(> .tie) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: stretch;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) > .wrapper > .tie {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 0 28px;
    border: 0;
    background: none;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) > .wrapper > .tie > .tie-indent {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent > .wrapper:first-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent > .wrapper:not(:first-child) { display: none; }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft {
    float: none;
    width: auto !important; /* inline style="width:20%" / "width:79%" */
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft:last-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft :is(br, hr),
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft > strong,
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft > .price-text { display: none; }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .image,
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .image a {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .image a { margin: 0; }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .image img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    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);
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent a.name:not(:has(img)) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 24px; /* a one-line title is still a 24px tap target */
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--m-ink, #2d2d2d);
    overflow-wrap: anywhere;
  }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent a.name strong { font-weight: bold; }
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft > .price {
    font-size: 15px;
    line-height: 1.45;
    font-weight: bold;
    color: var(--m-brand-text, #8a6400);
  }
  /* "... more info": a full-width quiet row at the card's bottom, 44px tall, the brand
     as text (dark amber) */
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) .tie-indent .fleft > a:not(.name):last-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: stretch;
    min-height: var(--m-tap, 44px);
    margin: auto 0 0;
    border-top: 12px solid transparent;
    background-clip: padding-box;
    font-size: 15px;
    font-weight: 600;
    color: var(--m-brand-text, #8a6400);
    text-decoration: none;
  }

  /* ----------------------------------------------------- filter and sort row
     Category and genre pages: the amber .tie2 bar with "Filter by:" over its select(s).
     Search results: "Filter by:" and the "Sort by:" bar. New, all, featured, specials:
     the "Sort by:" bar. They become one compact row of 44px selects; each select keeps
     its aria-label, so the visible labels can go. */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) {
    margin: 4px 0 16px;
    padding: 0;
    border: 0;
    background: none;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center #filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center #filter-wrapper > * { flex: 1 1 190px; min-width: 0; margin: 0; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .tie2 .tie2-indent { padding: 0; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) form:is([name="filter"], [name="sorter_form"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  /* visually hidden, still read out (the selects also have their own aria-label) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) form:is([name="filter"], [name="sorter_form"]) label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) form:is([name="filter"], [name="sorter_form"]) select {
    flex: 1 1 190px; /* "Items starting with ..." needs about 190px; two that narrow stack */
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: var(--m-tap, 44px);
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #fff);
    color: var(--m-ink, #2d2d2d);
    font-size: 16px; /* under 16px, iOS zooms the page on focus */
  }

  /* the bar's <br class="clearBoth"> (two on some pages) added 15-30px under the row */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) ~ br.clearBoth { display: none; }

  /* ----------------------------------------------------------- pagination
     "Displaying 1 to 18 (of 164 Products)" as a small centred line, the page links
     as a centred row of 44px chips. The links are separated by &nbsp; text, which the
     container's font-size: 0 hides. */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesResult {
    float: none;
    align-self: auto;
    width: auto;
    margin: 0 0 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--m-ink-2, #5f6264);
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    float: none;
    align-self: auto;
    width: auto;
    margin: 0 0 20px;
    font-size: 0;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesLinks > :is(a, strong) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--m-tap, 44px);
    height: var(--m-tap, 44px);
    margin: 0;
    padding: 0 12px;
    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: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  /* the current page: amber as a fill, charcoal on it (stylesheet.css prints white on
     amber there, 2.1:1) */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesLinks > strong.current {
    border-color: var(--m-brand, #e8a900);
    background: var(--m-brand, #e8a900);
    color: var(--m-brand-ink, #2d2d2d);
  }
  /* single-page lists print both boxes empty */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesLinks:not(:has(*)) { display: none; }
  /* the bottom page count sits under the last row of cards */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.centerBoxContentsProducts, .newgrid, .wrapper) ~ .navSplitPagesResult { margin-top: 4px; }

  /* ------------------------------------------------------------ empty lists
     "There are no products to list" and "No brands are currently active" read as
     body text at the content width */
  :is(#specialsBody, #indexBody:not(:has(#artist_holder)), #searchresultBody) #column-center .productListing-data,
  #brandsBody #indexBrandsList > p,
  #featuredcategoriesBody #column-center .centerBoxContentsFeatured.w-100 {
    margin: 8px 0 24px;
    text-align: left;
    font-size: 15px;
    line-height: 1.55;
    color: var(--m-ink, #2d2d2d);
  }

  /* genre lists have no description: its grey box (.tie3) showed empty under the heading */
  #indexBody:not(:has(#artist_holder)) #indexProductList > .tie3:not(:has(#indexProductListCatDescription > *)) { display: none; }

  /* ------------------------------------------------------- banner sliders
     home (.slidez) and category (.slidec) banners. stylesheet_zz_9star.css put the
     slider's 16px squares in a row of their own under the picture, on a mid-grey band
     (#6b6b6b on 9 Star): far too big for a phone. They become a row of 6px dots laid
     over the bottom centre of the picture, white with a soft dark ring and shadow so
     they show on light and dark pictures, the current dot opaque. The dots are only an
     indicator: pointer-events: none lets a tap there reach the slide's link, and a
     sideways swipe changes slide (jscript_ns_mobile.js; touch-action: pan-y keeps
     up/down swipes scrolling the page). They stay in the tab order, so a keyboard can
     still pick a slide. Specificity beats slides/jquery.slider.css, which is linked
     later in the body. (Same as theme-bahai: the dots are white, not a brand colour.) */
  #indexBody .jquery-slider-wrapper { touch-action: pan-y pinch-zoom; }
  #indexBody .jquery-slider-wrapper .jquery-slider-selectors {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 6px;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important; /* stylesheet_zz_9star.css: 8px 0 0 !important; the script may set an inline margin */
    padding: 0;
    background: none;
    pointer-events: none;
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector {
    flex: none;
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    background-clip: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .45);
  }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector.jquery-slider-selector-current { background: #fff; }
  #indexBody .jquery-slider-wrapper .jquery-slider-selector:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* the timer line goes back to the picture's lower edge, which is the box's again
     (stylesheet_zz_9star.css lifted it 36px clear of the old dot row) */
  #indexBody .jquery-slider-wrapper .jquery-slider-timer { bottom: 0; }

  /* ------------------------------------------------------- category slider
     category pages carry their own slider (.slidec): full content width */
  #indexBody:not(:has(#artist_holder)) #indexProductList #cont { margin: 0 0 16px !important; } /* inline margin-bottom: -5px */
  #indexBody:not(:has(#artist_holder)) #indexProductList #cont + br { display: none; }

  /* ===================================================================== home
     The home page has no centre column: .banners (slider, the Luminous Journey
     banner, the 2x2 category tiles and the promo column) and .popular sit in
     .main-width. */

  /* slider: the full screen width, edge to edge (dots: "banner sliders" above) */
  #indexBody .banners {
    padding: 0 0 8px; /* stylesheet_zz_9star.css: var(--ns-hang) 12px 0 */
    overflow: visible;
  }
  #indexBody .banners > #cont {
    margin: 0 !important; /* inline margin-left: 35px */
  }
  /* phones: the owner's choice (2026-10-24) is a home banner about half the screen
     tall, full width, each 980x300 picture cropped from the centre to fill it (its
     sides are cut off; at the screen width it was a 110-115px strip). The box is half
     the small viewport height (svh, so it does not jump as the address bar hides),
     never shorter than the picture's own height at that width (landscape phones, where
     half the screen is ~190px, keep the whole picture) and, upright, never under
     260px. Every slide fills the box, so nothing changes height during a transition.
     !important: stylesheet_zz_9star.css sets height: auto !important and the script
     sets an inline 300px height. Tablets (768px up) keep the whole picture at its
     natural ratio. Same structure as theme-bahai's; theme-bahai may later show the
     whole picture over a blurred copy instead, 9 Star keeps the crop. */
  @media (max-width: 767px) {
    #indexBody .banners .jquery-slider-wrapper,
    #indexBody .banners .jquery-slider-wrapper .slidez {
      height: max(50vh, calc(100vw * 300 / 980)) !important;
      height: max(50svh, calc(100vw * 300 / 980)) !important;
    }
    #indexBody .banners .jquery-slider-wrapper .jquery-slider-slide { height: 100%; }
    #indexBody .banners .jquery-slider-wrapper .jquery-slider-slide > a { display: block; height: 100%; }
    #indexBody .banners .jquery-slider-wrapper .jquery-slider-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    #indexBody .banners .jquery-slider-wrapper .jquery-slider-selectors { bottom: 12px; }
    /* the slide-down transition moves each picture by the script's fixed 300px, less
       than this box: the incoming picture slid in under the outgoing one and its lower
       part snapped into view at the end. It now comes in on top, fading in as it
       slides, so the change is smooth. */
    #indexBody .banners .slidez > .jquery-slider-slide-next {
      z-index: 3;
      animation: ns-slide-in 850ms cubic-bezier(0.37, 0, 0.63, 1);
    }
    @keyframes ns-slide-in { from { opacity: 0; } to { opacity: 1; } }
  }
  @media (max-width: 767px) and (orientation: portrait) {
    #indexBody .banners .jquery-slider-wrapper,
    #indexBody .banners .jquery-slider-wrapper .slidez {
      height: max(260px, 50vh) !important;
      height: max(260px, 50svh) !important;
    }
  }
  /* the spec turns motion off on request: the incoming slide still comes in on top,
     without the fade */
  @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #indexBody .banners .slidez > .jquery-slider-slide-next { animation: none; }
  }

  /* the Luminous Journey banner (952x105) and the promo graphics: centred at the
     content width, no wider than the tile grid below it, so their edges line up on
     tablets */
  #indexBody .banners > center {
    display: block;
    max-width: calc(720px - 2 * var(--m-gutter, max(16px, 5vw)));
    margin: 20px var(--m-gutter, max(16px, 5vw)) 0;
  }
  @media (min-width: 720px) {
    #indexBody .banners > center { margin-inline: auto; }
  }
  #indexBody .banners > center img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--m-radius, 10px);
  }
  #indexBody .banners > br,
  #indexBody .banners > center + br,
  #indexBody .banners > center + br + br { display: none; }

  /* category tiles: a real 2x2 grid at the content width instead of the desktop block
     scaled down with zoom (.45 on phones: its labels came out about 120px wide). Each
     tile keeps the desktop box's 310:222 shape; its label picture (.lbl_N, placed in px
     on desktop) is placed in % of the tile so it scales with it. 9 Star's tile pictures
     are 307, 310, 289 and 310px wide: object-fit: cover fills the narrower two (a few
     px of their grey ground at top and bottom go), so the four tiles stay one size. */
  #indexBody .banners .top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    float: none;
    box-sizing: border-box;
    width: auto;
    max-width: 720px;
    margin: 20px auto 0;
    padding: 0 var(--m-gutter, max(16px, 5vw));
    zoom: 1;
  }
  #indexBody .banners .top > :is(.banner, .banner1, .banner2, .banner3) {
    position: relative;
    float: none;
    width: auto;
    height: auto;
    aspect-ratio: 310 / 222;
    margin: 0;
    padding: 0;
    overflow: hidden; /* no radius: each picture draws its own card and shadow */
  }
  #indexBody .banners .top :is(#bannerOne, #bannerTwo, #bannerThree, #bannerFour),
  #indexBody .banners .top :is(#bannerOne, #bannerTwo, #bannerThree, #bannerFour) a {
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #indexBody .banners .top :is(#bannerOne, #bannerTwo, #bannerThree, #bannerFour) img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  /* the four labels (MUSIC FOR DEVOTIONS, MUSIC INSPIRED BY FAITH, BOOKS, VIDEO) at the
     same place on every tile: desktop's 18-21px / 20px offsets, in % */
  #indexBody .banners .top :is(.lbl_1, .lbl_2, .lbl_3, .lbl_4) {
    left: 6%;
    top: 9%;
    width: 70.6%;  /* 219 / 310 */
    height: 43.2%; /* 96 / 222 */
    background-size: contain;
  }

  /* promo column (artists, newsletter, wholesale): stacked, each centred at the
     content width */
  #indexBody .banners .right {
    float: none;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 20px auto 0;
    padding: 0 var(--m-gutter, max(16px, 5vw));
    text-align: center;
    zoom: 1;
  }
  #indexBody .banners .right > div {
    margin: 0 auto 16px !important; /* stylesheet.css: #bannerFive margin-bottom 0 !important */
    max-width: 440px;
  }
  #indexBody .banners .right > div img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* Popular products: a strip that scrolls sideways by touch (ninestar_carousel.js
     does not run at this width), snapping card by card, the heading on the type scale */
  #indexBody .popular {
    width: auto;
    padding: 16px 0 28px;
  }
  #indexBody .popular .carousel-box h2 {
    padding: 0 var(--m-gutter, max(16px, 5vw)) 12px;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0;
  }
  #indexBody .popular .carousel {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m-gutter, max(16px, 5vw));
  }
  #indexBody .popular .carousel ul {
    display: flex;
    gap: 12px;
    box-sizing: content-box;
    width: max-content;
    height: auto;
    padding: 0 var(--m-gutter, max(16px, 5vw)) 4px;
  }
  /* each product as a listing card: about two and a half show, so the strip reads as
     scrollable; the 8px grey frame (amber on hover) and the olive price block go */
  #indexBody .popular .carousel ul li.product-col {
    float: none;
    width: clamp(124px, 38vw, 200px); /* at 320 a third card peeks in, so the strip reads as swipeable */
    height: auto;
    margin: 0;
    scroll-snap-align: start;
    text-align: left;
  }
  #indexBody .popular .product-col .img img,
  #indexBody .popular .product-col:hover .img img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    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 .popular .product-col .prod-info .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #indexBody .popular .product-col .price,
  #indexBody .popular .product-col:hover .price {
    float: none;
    width: auto;
    min-height: 0;
    height: auto !important; /* stylesheet_tm.css: height: auto !important, then 100% */
    margin: 0;
    padding: 8px 0 0;
    background: none;
    color: var(--m-brand-text, #8a6400);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  #indexBody .popular .product-col .price strong { padding-left: 0; }
  /* a sale price keeps its own (desktop) amber box out: same text colour, no fill */
  #indexBody .popular .product-col .price :is(.normalprice, .productSpecialPrice) {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    letter-spacing: 0;
  }
  #indexBody .popular .product-col .price .normalprice { color: var(--m-ink-2, #5f6264); font-weight: normal; }
  #indexBody .popular .product-col .button { align-self: stretch; }
  /* 8px sides instead of the shell's 20px: in the 124px cards at 320px, "Add to Cart"
     broke over two lines */
  #indexBody .popular .product-col .button a.ns-btn { display: flex; width: 100%; padding-inline: 8px; }
  /* showcase mode (checkout off): the strip prints "... more info" as a text link
     where Add to Cart would be. A full-width 44px quiet row, as on the featured and
     all-products pages. (With the Add to Cart picture and no JavaScript the picture
     link is left as it is.) */
  #indexBody .popular .product-col .button > a:not(.ns-btn):not(:has(img)) {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--m-tap, 44px);
    font-size: 15px;
    font-weight: 600;
    color: var(--m-brand-text, #8a6400);
    text-decoration: none;
  }
}

/* ------------------------------------------------------------- 3-up, 4-up
   from 600px three cards a row, from 860px four */
@media (min-width: 600px) and (max-width: 1023px) {
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid)),
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) > .wrapper:has(> .tie) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
  }
  /* the filter and sort selects no wider than they need on a wide row */
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center :is(.tie2, #filter-wrapper) form:is([name="filter"], [name="sorter_form"]) select { flex: 0 1 260px; }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center #filter-wrapper > * { flex: 0 1 auto; }

  /* home: a little more air between the tiles; the promos go three across from 860px */
  #indexBody .banners .top { gap: 14px; }
}
@media (min-width: 860px) and (max-width: 1023px) {
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #specialsBody, #featuredproductsBody, #featuredcategoriesBody)
    #column-center :has(> :is(.centerBoxContentsProducts, .centerBoxContentsNew,
    .centerBoxContentsFeatured, .centerBoxContentsSpecials, .newgrid)),
  :is(#featuredproductsBody #featuredDefault, #productsallBody #allProductsDefault) > .wrapper:has(> .tie) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
  }
  /* the stylesheet_zz_9star.css 900px+ tier floats tiles and promos side by side,
     zoomed; here the tiles stay a 2x2 grid and the promos become one row of three */
  #indexBody .banners { display: block; }
  #indexBody .banners .right {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    max-width: 1000px;
  }
  #indexBody .banners .right > div { max-width: none; margin: 0 !important; } /* stylesheet.css: #bannerFive margin-bottom 0 !important */
}