/* ==========================================================================
   MOBILE REDESIGN: CONTENT PAGES (spec v1, 2026-10-24, "content" part), theme9star
   About, FAQ, contact, EZ pages, legal, site map, 404, the artists page, reviews,
   ask a question, visitors cart. Phones and tablets only: every rule sits inside a
   max-width:1023px query (or a narrower one), so desktop (>=1024px) cannot change.

   Ported from theme-bahai's stylesheet_zz_9star_m_content.css (sha256 4ca1d321...268a,
   which moved the contact labels to 24px lines) with 9 Star's own markup and colours:
   - stylesheet_zz_shop.css loads AFTER this sheet and styles the legal pages, the artist
     grid and the three rebuilt review pages with one- and two-id selectors. Rules here
     that must beat it carry #column-center (and #contentMainWrapper) after the body id.
   - The product review pages are 9 Star's own (.reviewPage > .reviewLayout >
     .reviewProduct + .reviewMain), so their rules are written for that markup, not for
     the stock ids BMS prints. The All Reviews list is stock on both, so it is ported.
   - The "Our artists" EZ page (pages_id 23) prints 9 Star's #artistGrid.
   - The brand amber (#e8a900) is a fill colour: as text, an outline or an icon on
     white it is 2.1:1, so those use var(--m-brand-text) (#8a6400, 5.4:1).
   - 9 Star marks a few panels with a 4px amber left stripe (legal summary, review cards,
     "no reviews yet"); on phones they become the spec's 14px cards instead, the amber
     kept in the wash and the stars.
   Body ids (checked in the page HTML): EZ pages (about, faq, blog, giveaway,
   bicentennial, gc, registration-complete, our-artists, page&id=N) all use #pageBody.
   The gift certificate FAQ (#gvfaqBody) is styled by the account sheet, as on BMS.
   ========================================================================== */
@media (max-width: 1023px) {
  /* ------------------------------------------------------------ running text
     Body copy read as a 12-14px block hugging the left edge. It now fills the content
     width (centred, capped at the tablet measure) at 15px / 1.6 with the spec's
     heading scale. Text stays left-aligned inside the centred block. The #column-center
     step outranks stylesheet_zz_shop.css (legal pages, review pages). */
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody) #column-center .centerColumn {
    width: auto;
    max-width: var(--m-measure, 720px);
    margin-left: auto;
    margin-right: auto;
    float: none;
    font-size: 15px;
    line-height: 1.6;
    color: var(--m-ink, #2d2d2d);
    overflow-wrap: break-word;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) #column-center .centerColumn :is(p, li, td, div) {
    line-height: 1.6;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) #column-center .centerColumn p { margin: 0 0 12px; }
  /* the shell sets the h1 size (26px, 30px on tablets); here only its spacing */
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody) #column-center .centerColumn h1 {
    line-height: 1.2;
    margin: 8px 0 16px;
  }
  /* the visitors cart popup has no shell and no centre column */
  #infoShoppingCart h1 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: normal;
    margin: 8px 0 16px;
  }
  #infoShoppingCart > div { font-size: 15px; line-height: 1.6; color: var(--m-ink, #2d2d2d); }
  #infoShoppingCart h2 { font-size: 17px; line-height: 1.35; margin: 16px 0 4px; }
  #infoShoppingCart p { margin: 0 0 12px; }
  #infoShoppingCart p > a[href^="javascript"] { display: inline-block; padding: 10px 0; }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) #column-center .centerColumn h2 {
    font-size: 20px; line-height: 1.3; letter-spacing: normal; margin: 24px 0 8px;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) #column-center .centerColumn :is(h3, h4) {
    font-size: 17px; line-height: 1.35; letter-spacing: normal; margin: 16px 0 8px;
  }
  /* embedded images and tables (newsletter EZ pages) never push the page sideways */
  :is(#pageBody, #aboutusBody, #page2Body, #page3Body, #page4Body) #column-center .centerColumn img {
    max-width: 100%; height: auto;
  }

  /* ------------------------------------------------- legal pages (9 Star only)
     Privacy, terms and refunds print a .legalPage block (stylesheet_zz_shop.css): 14px
     text in a 680px column, uppercase section heads, an amber-striped summary box. The
     text takes the running-text size and the content width; the heads keep 9 Star's
     uppercase at the h2 size; the summary is a 14px card in the amber wash. */
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .centerColumn .legalPage {
    max-width: none;
    font-size: inherit;
    line-height: 1.6;
    color: inherit;
  }
  /* "Last updated" belongs to the title above it */
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .centerColumn h1:has(+ .legalPage) { margin-bottom: 4px; }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .legalPage .legalUpdated {
    margin: 0 0 20px; font-size: 13px; color: var(--m-ink-2, #5f6264);
  }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .centerColumn .legalPage h2 {
    letter-spacing: .02em; /* uppercase, as on desktop: a little air between the capitals */
    margin: 28px 0 8px;
  }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .legalPage ul { padding-left: 20px; margin: 0 0 16px; }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .legalPage li { margin: 0 0 8px; }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .legalPage .legalShort {
    margin: 0 0 8px;
    padding: 16px 16px 4px;
    background: var(--m-brand-soft, #fff8e1);
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
  }
  :is(#privacyBody, #conditionsBody, #shippinginfoBody) #column-center .centerColumn .legalPage .legalShort h2 { margin-top: 0; }

  /* ------------------------------------------------------------- FAQ accordion
     Questions were bold 13px lines with a tiny marker. Each is now a 48px row with a
     hairline, the question at 16px and a chevron on the right that turns when open.
     An open question is the brand as text (the desktop's amber is 2.1:1 on white). */
  #pageBody details.faq-item {
    border-bottom: 1px solid var(--m-line, #e4e2df);
    padding: 0;
  }
  #pageBody details.faq-item:first-of-type { border-top: 1px solid var(--m-line, #e4e2df); }
  #pageBody details.faq-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--m-ink, #2d2d2d);
    -webkit-tap-highlight-color: transparent;
  }
  #pageBody details.faq-item > summary::-webkit-details-marker { display: none; }
  #pageBody details.faq-item > summary::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--m-ink-2, #5f6264);
    border-bottom: 2px solid var(--m-ink-2, #5f6264);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  }
  #pageBody details.faq-item > summary:focus-visible {
    outline: 2px solid var(--m-brand-text, var(--m-brand, #8a6400));
    outline-offset: 2px;
    border-radius: var(--m-radius, 10px);
  }
  #pageBody details.faq-item[open] > summary { color: var(--m-brand-text, var(--m-brand, #8a6400)); }
  #pageBody details.faq-item[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
    border-color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
  #pageBody details.faq-item .faq-answer { padding: 0 0 16px; }

  /* ------------------------------------------- site map and EZ contents: link rows
     Underlined links in a bulleted, deeply indented list. Each link is now a 48px row
     with a hairline and a chevron; group names ("Information") become small headings.
     stylesheet.css floats the list right at 90%, which left a 34px empty strip beside it. */
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList { float: none; width: auto; }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList ul,
  #pageBody #navEZPagesTOC ul.list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
  }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList ul ul { padding: 0; margin: 0; }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li,
  #pageBody #navEZPagesTOC li {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--m-ink-2, #5f6264);
  }
  /* a group label: the li's own text sits above its nested list */
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li:has(> ul) { padding-top: 16px; }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li:has(> ul) > ul { margin-top: 4px; }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li a,
  #pageBody #navEZPagesTOC ul.list li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px 12px 0;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid var(--m-line, #e4e2df);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--m-ink, #2d2d2d);
    text-decoration: none;
  }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li a::after,
  #pageBody #navEZPagesTOC ul.list li a::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--m-ink-2, #5f6264);
    border-top: 2px solid var(--m-ink-2, #5f6264);
    transform: translateY(-50%) rotate(45deg);
  }
  :is(#sitemapBody, #pagenotfoundBody) #siteMapList li a:active,
  #pageBody #navEZPagesTOC ul.list li a:active { background: var(--m-surface-2, #f7f6f3); }
  /* the EZ contents print " * " / " - " markers as text: hide them, keep the link */
  #pageBody #navEZPagesTOC ul.list li { font-size: 0; }
  #pageBody #navEZPagesTOC ul.list li a[href] { font-size: 16px; }
  #pageBody #navEZPagesTOCWrapper {
    margin: 0 0 24px;
    padding: 4px 16px;
    background: var(--m-surface-2, #f7f6f3);
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
    float: none;
    width: auto;
  }
  #pageBody #column-center #navEZPagesTOCWrapper #ezPagesTOCHeading { font-size: 17px; margin: 12px 0 0; }
  #pageBody #navEZPagesTOC ul.list li:last-child a { border-bottom: 0; }
  /* prev / continue / next: one centred row */
  #pageBody #navEZPageNextPrev {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
  }

  /* ------------------------------------------------------------ contact forms
     Labels floated beside fields; fields were ~30px with small text. Label above,
     48px full-width field, 10px radius, 16px text (no iOS zoom). The ask-a-question
     page reuses the same form. Buttons: layout only (the shell styles them). The
     #column-center step outranks the phone layer's two-id field rules. */
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    min-width: 0;
    background: none;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset legend {
    font-size: 20px; line-height: 1.3; font-weight: 600; padding: 0; margin: 0 0 8px;
    color: var(--m-ink, #2d2d2d); background: none; border: 0;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset > .alert:is(.alignright, .forward, :first-of-type) {
    float: none; text-align: left; font-size: 13px; margin: 0 0 8px; color: var(--m-ink-2, #5f6264);
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn :is(label.inputLabel, fieldset label) {
    display: block;
    float: none;
    width: auto;
    height: auto;
    margin: 14px 0 6px;
    padding: 0;
    font-size: 15px;
    line-height: 24px; /* labels are tap targets for their field: 24px tall */
    font-weight: 600;
    color: var(--m-ink, #2d2d2d);
    text-align: left;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--m-ink, #2d2d2d);
    background: var(--m-surface, #fff);
    border: 1px solid #928f8a; /* 3:1 against white: the field's edge is visible */
    border-radius: var(--m-radius, 10px);
    box-shadow: none;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset textarea { min-height: 160px; resize: vertical; }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset :is(input, select, textarea):focus {
    outline: 2px solid var(--m-brand-text, var(--m-brand, #8a6400));
    outline-offset: 1px;
    border-color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn fieldset br.clearBoth { display: none; }
  /* the white "tie" box around the form adds a second inset on a phone, and the
     introduction above the form a rule and a 7px indent of its own */
  #contactusBody #column-center .centerColumn :is(.tie, .tie-indent) {
    padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  }
  :is(#contactusBody, #askaquestionBody) #column-center #contactUsNoticeContent {
    margin: 0 0 16px; padding: 0; border: 0;
  }
  /* error messages above the form (contact error): a soft card in 9 Star's rust */
  :is(#contactusBody, #askaquestionBody) #column-center :is(.messageStackError, .messageStackWarning) {
    border-radius: var(--m-radius, 10px);
    padding: 12px 14px;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .messageStackError {
    background: #fbefec;
    border: 1px solid #efcfc6;
    color: #8f3a27; /* 6.6:1 on the wash */
  }
  :is(#contactusBody, #askaquestionBody) #column-center .messageStackError img { vertical-align: -3px; margin-right: 4px; }
  /* Send (primary) full width on top, Back below: the floats put them in two corners */
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn form {
    display: flex;
    flex-direction: column;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn form > * { order: 0; }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn form > .buttonRow {
    float: none;
    margin: 0 0 12px;
    padding: 0; /* the theme's 7px kept Send and Back 26px apart */
    text-align: center;
  }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn form > .buttonRow.back { order: 2; }
  :is(#contactusBody, #askaquestionBody) #column-center .centerColumn form > .buttonRow :is(input[type=submit], .ns-btn) {
    width: 100%;
  }
  /* ask a question: the product's cover under the title, centred like the product page */
  #askaquestionBody #column-center .centerColumn form > a:has(> img) { align-self: center; margin: 0 0 16px; }
  #askaquestionBody #column-center .centerColumn form > a > img {
    display: block; max-width: 100%; height: auto; border-radius: var(--m-radius-cover, 6px);
  }

  /* -------------------------------------------------------------- cookie usage
     The theme's tabbed fieldset frame around one paragraph: a 14px card, its legend a
     heading inside it (a floated legend joins the card's flow). */
  #cookieusageBody #column-center .centerColumn fieldset {
    margin: 16px 0;
    padding: 16px;
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface-2, #f7f6f3);
    min-width: 0;
  }
  #cookieusageBody #column-center .centerColumn fieldset > legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    line-height: 1.35;
    color: var(--m-ink, #2d2d2d);
  }
  #cookieusageBody #column-center .centerColumn fieldset > legend + * { clear: both; }
  #cookieusageBody #column-center .centerColumn > .content { margin: 0 0 12px; }

  /* -------------------------------------------------- artists page (9 Star only)
     "Our artists" (EZ page 23) printed one 270x400px portrait per row on a phone: some
     70 screens of scrolling. The grid follows the listing cards: 2-up, 3-up from 600px,
     4-up from 860px; portrait at the card's width with the cover radius, the name in
     15px, and "View" as a quiet 44px row pinned to the card's bottom (its white text on
     amber was 2.1:1). Three ids outrank stylesheet_zz_shop.css's #ezPageDefault #artistGrid. */
  #pageBody #column-center #artistGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
    margin: 8px 0 24px;
  }
  #pageBody #column-center #artistGrid .artistwrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: auto;
    margin: 0;
    float: none;
  }
  #pageBody #column-center #artistGrid .artistwrap > a:first-child { display: block; }
  #pageBody #column-center #artistGrid .artistwrap img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 215 / 320;
    object-fit: cover;
    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);
  }
  #pageBody #column-center #artistGrid .artistwrap strong {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px; /* as on bahaimusicstore.com */
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: bold;
    color: var(--m-ink, #2d2d2d);
  }
  #pageBody #column-center #artistGrid .artistwrap strong a {
    display: block;
    padding: 3px 0; /* a 26px tap band without moving the text */
    color: inherit;
    text-decoration: none;
  }
  /* View: a 44px button pinned to the card's bottom, as on bahaimusicstore.com, drawn
     like the shell's secondary buttons (dark amber outline and text on white) */
  #pageBody #column-center #artistGrid .artistwrap a.v {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--m-tap, 44px);
    margin: auto 0 0;
    padding: 0 14px;
    border: 1.5px solid var(--m-brand-text, var(--m-brand, #8a6400));
    border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    color: var(--m-brand-text, var(--m-brand, #8a6400));
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  /* ------------------------------------------------------------- review cards
     All Reviews (stock markup on both stores): each review a card with a hairline and
     14px radius; cover 88px beside title, stars and date; excerpt and buttons full width
     underneath. */
  #reviewsBody #reviewsDefault .tie {
    display: block;
    margin: 0 0 16px;
    padding: 16px;
    background: var(--m-surface, #fff);
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
    box-shadow: none;
    height: auto;
  }
  #reviewsBody #reviewsDefault .tie-indent {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 0;
    align-items: start;
  }
  #reviewsBody #reviewsDefault .tie-indent > .smallProductImage {
    grid-column: 1; grid-row: 1 / span 3; float: none; margin: 0; padding: 0; width: auto; /* stylesheet_main.css pads it 40px right */
  }
  #reviewsBody #reviewsDefault .smallProductImage :is(span, a) { display: block; }
  #reviewsBody #reviewsDefault .smallProductImage img {
    width: 88px; height: auto; border-radius: var(--m-radius-cover, 6px); display: block;
  }
  #reviewsBody #reviewsDefault .tie-indent > :is(.name-type, .rating, .date-added) { grid-column: 2; margin: 0; }
  #reviewsBody #reviewsDefault .name-type { font-size: 17px; line-height: 1.3; font-weight: 600; }
  #reviewsBody #reviewsDefault .date-added { font-size: 13px; line-height: 1.4; color: var(--m-ink-2, #5f6264); }
  #reviewsBody #reviewsDefault .tie-indent > :is(.content, .rev-but) { grid-column: 1 / -1; margin: 8px 0 0; }
  #reviewsBody #reviewsDefault .content { font-size: 15px; line-height: 1.6; }
  #reviewsBody #reviewsDefault .tie-indent > .clear { display: none; }
  #reviewsBody #reviewsDefault .rev-but { display: flex; flex-wrap: wrap; gap: 8px; }
  #reviewsBody #reviewsDefault .rev-but > * { float: none; margin: 0; flex: 1 1 100%; height: auto; padding: 0; }
  #reviewsBody #reviewsDefault .rev-but .ns-btn { width: 100%; box-sizing: border-box; }

  /* pagination (All Reviews and a product's reviews): a centred row of 44px chips, the
     current page an amber chip with charcoal text */
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) .navSplitPagesResult {
    float: none; margin: 0 0 4px; text-align: center; font-size: 13px; color: var(--m-ink-2, #5f6264);
  }
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) .navSplitPagesLinks {
    float: none; text-align: center; margin: 8px 0 16px;
  }
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) ul.pagination {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0;
  }
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) ul.pagination li { list-style: none; margin: 0; }
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) ul.pagination li > a,
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) ul.pagination li.current {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--m-line, #e4e2df); border-radius: var(--m-radius, 10px);
    background: var(--m-surface, #fff);
    font-size: 15px; text-decoration: none; color: var(--m-ink, #2d2d2d);
  }
  :is(#reviewsBody #reviewsDefault, #contentMainWrapper #column-center .reviewPage) ul.pagination li.current {
    background: var(--m-brand, #e8a900); border-color: var(--m-brand, #e8a900);
    color: var(--m-brand-ink, #2d2d2d); font-weight: 600;
  }

  /* ---------------------------------------- product reviews (9 Star's own pages)
     A product's reviews, one review and write a review share .reviewLayout (cover,
     price and product links in a 230px column; eyebrow, title and the reviews or the
     form beside it), laid out by stylesheet_zz_shop.css. Here: the type scale, 14px
     cards without the amber stripe, 44px tap rows and full-width buttons. The
     #contentMainWrapper #column-center prefix outranks zz_shop (one id, two for the
     textarea). The phone stacking is in the max-width:767px block below. */
  #contentMainWrapper #column-center .reviewPage .reviewProductImage #productMainImage {
    float: none; width: auto; margin: 0; padding: 0; /* .back's theme-wide 33px / -30px margins */
  }
  #contentMainWrapper #column-center .reviewPage .reviewProductImage img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: var(--m-radius-cover, 6px);
    box-shadow: 0 0 0 1px var(--m-line, #e4e2df), 0 6px 18px rgb(45 45 45 / .12);
  }
  #contentMainWrapper #column-center .reviewPage .reviewProductPrice {
    margin: 0 0 16px; font-size: 20px; line-height: 1.3; font-weight: bold; color: var(--m-ink, #2d2d2d);
  }
  #contentMainWrapper #column-center .reviewPage .reviewProductLinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 24px;
  }
  #contentMainWrapper #column-center .reviewPage .reviewProductLinks > :is(a, .buttonRow) { float: none; margin: 0; }
  #contentMainWrapper #column-center .reviewPage :is(.reviewProductLinks, .reviewActions) .ns-btn { width: 100%; }
  /* the small amber label: the brand as text (#c99300 on white is 2.4:1) */
  #contentMainWrapper #column-center .reviewPage .reviewEyebrow {
    margin: 0 0 4px; font-size: 13px; line-height: 1.4; color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
  #contentMainWrapper #column-center .reviewPage .reviewMain > h1 { margin: 0 0 16px; line-height: 1.2; }
  #contentMainWrapper #column-center .reviewPage .reviewMeta { font-size: 13px; line-height: 1.5; color: var(--m-ink-2, #5f6264); }
  #contentMainWrapper #column-center .reviewPage .reviewMain > .reviewMeta { margin: 0 0 8px; }
  #contentMainWrapper #column-center .reviewPage .reviewNote { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--m-ink-2, #5f6264); }
  #contentMainWrapper #column-center .reviewPage .reviewPaging { display: block; margin: 0 0 8px; }
  /* one review per card: hairline, 14px radius; the stars carry the amber */
  #contentMainWrapper #column-center .reviewPage .reviewCard {
    margin: 0 0 12px;
    padding: 16px;
    background: var(--m-surface, #fff);
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius-lg, 14px);
  }
  #contentMainWrapper #column-center .reviewPage .reviewStars { margin: 0 0 8px; gap: 8px; }
  #contentMainWrapper #column-center .reviewPage .reviewStars span { font-size: 13px; color: var(--m-ink-2, #5f6264); }
  #contentMainWrapper #column-center .reviewPage .reviewText { font-size: 15px; line-height: 1.6; color: var(--m-ink, #2d2d2d); }
  #contentMainWrapper #column-center .reviewPage .reviewCardFoot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0 12px; margin: 12px 0 0; padding: 4px 0 0;
    border-top: 1px solid var(--m-line, #e4e2df);
  }
  #contentMainWrapper #column-center .reviewPage .reviewCardFoot > .reviewMeta { padding: 8px 0; }
  /* "Read the full review": a 12px link becomes a 44px tap row in the brand text colour */
  #contentMainWrapper #column-center .reviewPage .reviewReadLink {
    display: inline-flex; align-items: center; min-height: var(--m-tap, 44px);
    font-size: 15px; font-weight: 600; text-decoration: none;
    color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
  /* "No reviews yet": the amber wash as a 14px card */
  #contentMainWrapper #column-center .reviewPage .reviewEmpty {
    margin: 0 0 16px;
    padding: 16px;
    background: var(--m-brand-soft, #fff8e1);
    border: 0;
    border-radius: var(--m-radius-lg, 14px);
    font-size: 15px;
    line-height: 1.6;
    color: var(--m-ink, #2d2d2d);
  }
  #contentMainWrapper #column-center .reviewPage .reviewEmpty .reviewNote { margin: 4px 0 0; }
  #contentMainWrapper #column-center .reviewPage .reviewActions {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 16px 0 0;
  }
  #contentMainWrapper #column-center .reviewPage .reviewActions .buttonRow { float: none; margin: 0; }

  /* write a review: the five ratings as 48px rows (one per line, 10px radius, the
     checked one in the amber wash), a 24px radio, a 160px text box at 16px */
  #contentMainWrapper #column-center #reviewsWrite .ratingRow {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  }
  #contentMainWrapper #column-center #reviewsWrite .ratingOption {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 8px 14px;
    background: var(--m-surface, #fff);
    border: 1px solid var(--m-line, #e4e2df);
    border-radius: var(--m-radius, 10px);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #contentMainWrapper #column-center #reviewsWrite .ratingOption:has(input:checked) {
    background: var(--m-brand-soft, #fff8e1);
    border-color: var(--m-brand, #e8a900);
    box-shadow: inset 0 0 0 1px var(--m-brand, #e8a900);
  }
  #contentMainWrapper #column-center #reviewsWrite .ratingOption:has(input:focus-visible) {
    outline: 2px solid var(--m-brand-text, var(--m-brand, #8a6400));
    outline-offset: 2px;
  }
  #contentMainWrapper #column-center #reviewsWrite .ratingOption input[type=radio] {
    flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
  /* "Your review" was a 20px-tall label right on the hint: a 24px line */
  #contentMainWrapper #column-center #reviewsWrite .reviewTextLabel { line-height: 24px; }
  #contentMainWrapper #column-center #reviewsWrite textarea#review-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    margin: 0 0 8px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--m-ink, #2d2d2d);
    background: var(--m-surface, #fff);
    border: 1px solid #928f8a; /* 3:1 against white */
    border-radius: var(--m-radius, 10px);
    resize: vertical;
  }
  #contentMainWrapper #column-center #reviewsWrite textarea#review-text:focus {
    outline: 2px solid var(--m-brand-text, var(--m-brand, #8a6400));
    outline-offset: 1px;
    border-color: var(--m-brand-text, var(--m-brand, #8a6400));
  }
}

/* ------------------------------------------------- phones (and phones on their side)
   The review pages' 230px product column leaves the reviews a sliver next to it below
   768px. They stack as the product page does: eyebrow, cover (centred), title, price,
   product links, then the reviews or the form. The two columns become display:contents
   so their children can be ordered in one column; the order of the links is unchanged. */
@media (max-width: 767px) {
  #contentMainWrapper #column-center .reviewPage .reviewLayout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #contentMainWrapper #column-center .reviewPage :is(.reviewProduct, .reviewMain) { display: contents; }
  #contentMainWrapper #column-center .reviewPage .reviewEyebrow { order: -4; }
  #contentMainWrapper #column-center .reviewPage .reviewProductImage {
    order: -3;
    align-self: center;
    width: min(100%, 280px);
    max-width: none;
    margin: 4px 0 16px;
    text-align: center;
  }
  #contentMainWrapper #column-center .reviewPage .reviewMain > h1 { order: -2; margin: 0 0 4px; }
  #contentMainWrapper #column-center .reviewPage .reviewProductPrice { order: -1; }
}

/* the narrowest phones: All Reviews cards give 4px of their inset back, so "Go To This
   Product's Details" keeps its button to one line at 320px */
@media (max-width: 359px) {
  #reviewsBody #reviewsDefault .tie { padding: 14px 12px; }
}

/* tablets and phones on their side: 3-up artist grid; an All Reviews card's two
   buttons side by side instead of two 600px-wide bars */
@media (min-width: 600px) and (max-width: 1023px) {
  #pageBody #column-center #artistGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  #reviewsBody #reviewsDefault .rev-but > * { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 860px) and (max-width: 1023px) {
  #pageBody #column-center #artistGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* tablets: body copy 16px and a 30px h1 per the type scale */
@media (min-width: 768px) and (max-width: 1023px) {
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody) #column-center .centerColumn { font-size: 16px; }
  #infoShoppingCart h1 { font-size: 30px; }
  #infoShoppingCart > div { font-size: 16px; }
  /* the review pages keep their two columns here; the product column is 34px wider so
     "Go To This Product's Details" fits its full-width button on one line */
  #contentMainWrapper #column-center .reviewPage .reviewLayout { grid-template-columns: 264px minmax(0, 1fr); gap: 32px; }
  #contentMainWrapper #column-center .reviewPage .reviewText { font-size: 16px; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #pageBody details.faq-item > summary::after { transition: none; }
}