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

   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 BMS 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. */
  :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. */
  :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, #f4f5ef);
    /* 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, #e3e4dd);
  }

  /* 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, #363636);
    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, #6b6e6f);
  }
  /* price, where a listing prints one */
  :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, #4f665a);
  }
  :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 */
  :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, #f4f5ef);
    box-shadow: 0 0 0 1px var(--m-line, #e3e4dd);
  }
  :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, #363636);
    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, #4f665a);
  }
  /* "... more info": a full-width quiet row at the card's bottom, 44px tall */
  :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, #4f665a);
    text-decoration: none;
  }

  /* ----------------------------------------------------- filter and sort row
     Category and genre pages: the olive .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, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background-color: var(--m-surface, #fff);
    color: var(--m-ink, #363636);
    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, #6b6e6f);
  }
  :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, #e3e4dd);
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    color: var(--m-ink, #363636);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
  }
  :is(#indexBody:not(:has(#artist_holder)), #searchresultBody, #advancedsearchresultBody,
    #productsnewBody, #productsallBody, #featuredproductsBody, #specialsBody)
    #column-center .navSplitPagesLinks > strong.current {
    border-color: var(--m-brand, #4f665a);
    background: var(--m-brand, #4f665a);
    color: var(--m-brand-ink, #fff);
  }
  /* 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, #363636);
  }

  /* 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. The owner found the row of 16px
     squares on its green-grey band (stylesheet_zz_9star.css) far too big: it becomes
     a row of 6px dots laid over the bottom centre of the picture, white with a soft
     dark ring and shadow so it shows 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. */
  #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 */
    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, square-cut
     corners rounded like the cards */
  #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, NEWEST RELEASES, 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;
    overflow: visible;
  }
  #indexBody .banners > #cont {
    margin: 0 !important; /* inline margin-left: 35px */
  }
  /* phones (owner, 2026-10-25): the home banner at the full screen width and its own
     980x300 ratio, the WHOLE picture showing (no crop, no half-screen box). It
     replaces the half-screen crop of 2026-10-24. 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 keep
     the natural ratio too. */
  @media (max-width: 767px) {
    #indexBody .banners .jquery-slider-wrapper,
    #indexBody .banners .jquery-slider-wrapper .slidez {
      height: 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 {
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    #indexBody .banners .jquery-slider-wrapper .jquery-slider-selectors { bottom: 6px; }
  }

  /* NEWEST RELEASES 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 picture'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. */
  #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 rounded 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;
  }
  #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 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, #f4f5ef);
    box-shadow: 0 0 0 1px var(--m-line, #e3e4dd);
  }
  #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, #4f665a);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  #indexBody .popular .product-col .price strong { padding-left: 0; }
  #indexBody .popular .product-col .button { align-self: stretch; }
  /* 8px sides: at 320 the 124px cards wrapped "Add to Cart" onto two lines */
  #indexBody .popular .product-col .button a.ns-btn { display: flex; width: 100%; padding: 0 8px; }
}

/* ------------------------------------------------------------- 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 promo column: tablets have room for the three side by side from 860px (below) */
  #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 */
}