/* ==========================================================================
   MOBILE REDESIGN: CONTENT PAGES (spec v1, 2026-10-24, "content" part)
   About, FAQ, contact, EZ pages, legal, site map, 404, reviews, ask a question,
   visitors cart. Phones and tablets only: every rule sits inside a max-width:1023px
   query, so desktop (>=1024px) cannot change. Loads after stylesheet_zz_9star.css and
   overrides its phone layer where the redesign differs. Tokens come from the shell
   sheet; each var() carries the BMS value as a fallback.
   Body ids (checked in the page HTML): EZ pages (about, faq, blog, giveaway,
   bicentennial, gc, registration-complete, page&id=N) all use #pageBody.
   ========================================================================== */
@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. */
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody) .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, #363636);
    overflow-wrap: break-word;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) .centerColumn :is(p, li, td, div) {
    line-height: 1.6;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) .centerColumn p { margin: 0 0 12px; }
  /* the theme's 46-60px tracked headings fill the first screen on a phone */
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody, #infoShoppingCart) .centerColumn h1,
  #infoShoppingCart h1 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: normal;
    margin: 8px 0 16px;
  }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody) .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) .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) .centerColumn img {
    max-width: 100%; height: auto;
  }

  /* ------------------------------------------------------------- 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. */
  #pageBody details.faq-item {
    border-bottom: 1px solid var(--m-line, #e3e4dd);
    padding: 0;
  }
  #pageBody details.faq-item:first-of-type { border-top: 1px solid var(--m-line, #e3e4dd); }
  #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, #363636);
  }
  #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, #6b6e6f);
    border-bottom: 2px solid var(--m-ink-2, #6b6e6f);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  }
  #pageBody details.faq-item[open] > summary { color: var(--m-brand, #4f665a); }
  #pageBody details.faq-item[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
    border-color: var(--m-brand, #4f665a);
  }
  #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. */
  :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, #6b6e6f);
  }
  /* 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, #e3e4dd);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--m-ink, #363636);
    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, #6b6e6f);
    border-top: 2px solid var(--m-ink-2, #6b6e6f);
    transform: translateY(-50%) rotate(45deg);
  }
  /* 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, #f4f5ef);
    border-radius: var(--m-radius-lg, 14px);
    float: none;
    width: auto;
  }
  #pageBody #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). */
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    min-width: 0;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset legend {
    font-size: 20px; font-weight: 600; padding: 0; margin: 0 0 8px;
    color: var(--m-ink, #363636); background: none; border: 0;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset .alert.alignright,
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset > .alert:first-of-type {
    float: none; text-align: left; font-size: 13px; margin: 0 0 8px;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn label.inputLabel,
  :is(#contactusBody, #askaquestionBody) .centerColumn 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, #363636);
    text-align: left;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--m-ink, #363636);
    background: var(--m-surface, #fff);
    border: 1px solid #b9bcb2;
    border-radius: var(--m-radius, 10px);
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset textarea { min-height: 160px; resize: vertical; }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset :is(input, select, textarea):focus {
    outline: 2px solid var(--m-brand, #4f665a);
    outline-offset: 1px;
    border-color: var(--m-brand, #4f665a);
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn fieldset br.clearBoth { display: none; }
  /* the white "tie" box around the form adds a second inset on a phone */
  #contactusBody .centerColumn .tie, #contactusBody .centerColumn .tie-indent {
    padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  }
  /* error message above the form (contact error) */
  :is(#contactusBody, #askaquestionBody) .messageStackError,
  :is(#contactusBody, #askaquestionBody) .messageStackWarning {
    border-radius: var(--m-radius, 10px);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
  }
  /* Send (primary) full width on top, Back below: the floats put them in two corners */
  :is(#contactusBody, #askaquestionBody) .centerColumn form {
    display: flex;
    flex-direction: column;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn form > * { order: 0; }
  :is(#contactusBody, #askaquestionBody) .centerColumn form > .buttonRow {
    float: none;
    margin: 0 0 12px;
    text-align: center;
  }
  :is(#contactusBody, #askaquestionBody) .centerColumn form > .buttonRow.back { order: 2; }
  :is(#contactusBody, #askaquestionBody) .centerColumn form > .buttonRow :is(input[type=submit], .ns-btn) {
    width: 100%;
  }

  /* ------------------------------------------------------------- review cards
     All Reviews: 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, #e3e4dd);
    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, #6b6e6f); }
  #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%; }
  #reviewsBody #reviewsDefault .rev-but .ns-btn { width: 100%; box-sizing: border-box; }
  #reviewsBody #reviewsDefault .rev-but > * { height: auto; padding: 0; }
  /* pagination: centred chips */
  #reviewsBody #reviewsDefault .navSplitPagesResult { text-align: center; font-size: 13px; float: none; }
  #reviewsBody #reviewsDefault .navSplitPagesLinks { float: none; text-align: center; margin: 8px 0 16px; }
  #reviewsBody #reviewsDefault ul.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
  #reviewsBody #reviewsDefault ul.pagination li { list-style: none; margin: 0; }
  #reviewsBody #reviewsDefault ul.pagination li > a,
  #reviewsBody #reviewsDefault 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, #e3e4dd); border-radius: var(--m-radius, 10px);
    font-size: 15px; text-decoration: none; color: var(--m-ink, #363636);
  }
  #reviewsBody #reviewsDefault ul.pagination li.current {
    background: var(--m-brand, #4f665a); border-color: var(--m-brand, #4f665a);
    color: var(--m-brand-ink, #fff); font-weight: 600;
  }

  /* product reviews (one product): cover centred at the content width, card below */
  #productreviewsBody #reviews-top { display: flow-root; text-align: center; }
  #productreviewsBody :is(#productReviewsDefaultProductImage, #productMainImage, #reviews-middle) {
    float: none; width: auto; margin: 0 auto 12px; text-align: center;
  }
  #productreviewsBody #productMainImage img {
    width: min(100%, 320px); height: auto; border-radius: var(--m-radius-cover, 6px);
  }
  #productreviewsBody #reviews-top > .buttonRow,
  #productreviewsBody #reviewsDefault > .buttonRow { float: none; text-align: center; margin: 0 0 12px; }
  #productreviewsBody #productReviewsDefaultNoReviews {
    clear: both;
    padding: 16px;
    margin: 0 0 16px;
    background: var(--m-surface-2, #f4f5ef);
    border-radius: var(--m-radius-lg, 14px);
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }

  /* one review: inline 39% / 61% columns squeezed the text; stack cover over a card */
  #productreviewsinfoBody #reviewsInfoDefault .tie {
    padding: 16px;
    border: 1px solid var(--m-line, #e3e4dd);
    border-radius: var(--m-radius-lg, 14px);
    background: var(--m-surface, #fff);
    box-shadow: none;
    height: auto;
  }
  #productreviewsinfoBody #reviewsInfoDefault .tie-indent { padding: 0; }
  #productreviewsinfoBody #reviewsInfoDefault .wrapper > .fleft {
    float: none; width: auto !important; /* inline style="width:39%/61%" */
  }
  #productreviewsinfoBody :is(#reviewsInfoDefaultProductImage, #productMainImage) {
    float: none; margin: 0 auto 16px; text-align: center;
  }
  #productreviewsinfoBody #productMainImage img {
    width: min(100%, 320px); height: auto; border-radius: var(--m-radius-cover, 6px);
  }
  #productreviewsinfoBody .name-type { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0 0 4px; }
  #productreviewsinfoBody .rating { margin: 0 0 4px; }
  #productreviewsinfoBody #reviewsInfoDefaultPrice { font-size: 17px; margin: 0 0 4px; }
  #productreviewsinfoBody .date-added { font-size: 13px; color: var(--m-ink-2, #6b6e6f); margin: 0 0 12px; }
  #productreviewsinfoBody #reviewsInfoDefaultMainContent { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
  #productreviewsinfoBody .button-padding { display: flex; flex-direction: column; gap: 8px; padding: 0; }
  #productreviewsinfoBody .button-padding .btn1 { float: none; margin: 0; height: auto; padding: 0; text-align: center; }

  /* write a review: cover centred, label above a 48px+ textarea, stars as tap rows */
  #productreviewswriteBody :is(#reviewWriteMainImage, #productMainImage) {
    float: none; height: auto !important; /* inline style="height:281px" */
    margin: 0 auto 12px; text-align: center;
  }
  #productreviewswriteBody #productMainImage img {
    width: min(100%, 320px); height: auto; border-radius: var(--m-radius-cover, 6px);
  }
  #productreviewswriteBody #reviewsWritePrice { text-align: center; font-size: 17px; }
  #productreviewswriteBody :is(#reviewsWriteProductPageLink, .buttonRow.reviews-page) {
    float: none; text-align: center; margin: 0 0 12px;
  }
  #productreviewswriteBody #reviews-right { float: none; width: auto; margin: 0; padding: 0; }
  #productreviewswriteBody #reviewsWriteReviewsRate { text-align: left; font-size: 15px; line-height: 1.5; margin: 16px 0 8px; }
  #productreviewswriteBody .ratingRow {
    display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: center; margin: 0 0 16px;
  }
  #productreviewswriteBody .ratingRow label {
    display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; cursor: pointer;
  }
  #productreviewswriteBody .ratingRow input[type=radio] { width: 24px; height: 24px; margin: 0; }
  #productreviewswriteBody #textAreaReviews {
    display: block; float: none; width: auto; font-size: 15px; line-height: 1.5; font-weight: 600; margin: 16px 0 8px;
  }
  #productreviewswriteBody #review-text {
    display: block; width: 100%; box-sizing: border-box; min-height: 160px;
    padding: 12px 14px; font-size: 16px; line-height: 1.5;
    border: 1px solid #b9bcb2; border-radius: var(--m-radius, 10px);
  }
  #productreviewswriteBody #reviews-right > .buttonRow.forward { float: none; margin: 16px 0 12px; text-align: center; }
  #productreviewswriteBody #reviews-right > .buttonRow :is(input[type=submit], .ns-btn) { width: 100%; }
  #productreviewswriteBody #reviewsWriteReviewsNotice { font-size: 13px; line-height: 1.5; color: var(--m-ink-2, #6b6e6f); }
}

/* 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) .centerColumn { font-size: 16px; }
  :is(#pageBody, #aboutusBody, #contactusBody, #page2Body, #page3Body, #page4Body,
      #privacyBody, #conditionsBody, #shippinginfoBody, #accessibilityBody, #cookieusageBody,
      #sitemapBody, #pagenotfoundBody, #reviewsBody, #productreviewsBody,
      #productreviewsinfoBody, #productreviewswriteBody, #askaquestionBody, #infoShoppingCart) .centerColumn h1,
  #infoShoppingCart h1 { font-size: 30px; }
  /* one review: cover beside the text once there is room */
  #productreviewsinfoBody #reviewsInfoDefault .wrapper { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
}

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

/* ------------------------------------------------------------ Artists page
   The artist grid (restored in tpl_page_default.php, EZ page 23) is v1's 240px floats
   with 30px left margins and 1.8em names; here it is a card grid like the listings:
   2 across, 3 from 600px, 4 from 860px, names on the type scale, a 44px View button. */
@media (max-width: 1023px) {
  #pageBody #artistGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    margin: 16px 0 0;
  }
  #pageBody #artistGrid .artistwrap { width: auto; float: none; margin: 0; }
  #pageBody #artistGrid .artistwrap img { display: block; border-radius: var(--m-radius-cover, 6px); }
  #pageBody #artistGrid .artistwrap strong {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 6px 0 4px;
    margin: 0 0 10px;
    border-bottom-width: 1px;
  }
  /* the name is a link: a 26px tall band, not a 17px line */
  #pageBody #artistGrid .artistwrap strong a { display: block; padding: 4px 0; }
  #pageBody #artistGrid .artistwrap a.v {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap, 44px);
    padding: 0 14px;
    border-radius: var(--m-radius, 10px);
    font-size: 14px;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #pageBody #artistGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) and (max-width: 1023px) {
  #pageBody #artistGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}