/* ==========================================================================
   Mobile shell (2026-10-24, MOBILE-REDESIGN-SPEC.md "Shell (all pages)").
   Phones and tablets only: every visible rule sits inside @media (max-width: 1023px).
   The shell markup (common/tpl_mobile_shell.php) and the button labels the shell script
   adds are display:none by default, so from 1024px up nothing here can show.

   Owns: the --m-* tokens, the top bar, the drawer, the bottom tab bar, .ns-btn, the
   hidden #header, the compact footer, the page gutter, body type and the heading scale.
   Page sheets (stylesheet_zz_9star_m_<area>.css) load after this one and read the tokens
   with fallbacks.

   Same file, same class names on theme9star; only the colour tokens differ.
   ========================================================================== */

/* desktop: the shell is never drawn, the injected button labels never shown */
.ns-m,
.ns-btn__label { display: none; }

@media (max-width: 1023px) {
  /* ------------------------------------------------------------------ tokens */
  :root {
    /* page side margin: content is 90% of the screen; never under an iPhone's notch on its
       side (the viewport meta has viewport-fit=cover, so the insets are real) */
    --m-gutter: max(16px, 5vw, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --m-measure: 720px;              /* max text width on tablets */
    --m-top-h: 56px;                 /* top bar */
    --m-tab-h: 62px;                 /* tab bar, before the safe area */
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-tab-total: calc(var(--m-tab-h) + var(--m-safe-b));
    --m-radius: 10px;                /* buttons, inputs, chips, segmented controls */
    --m-radius-lg: 14px;             /* cards, sheets, the drawer */
    --m-radius-cover: 6px;           /* album covers */
    --m-tap: 44px;                   /* minimum tap target */
    --m-btn-h: 48px;                 /* primary actions */

    /* 9 Star Media: charcoal and amber (the header band, the buttons and legends) */
    --m-brand: #e8a900;              /* amber: primary buttons, legends (a fill colour) */
    --m-brand-ink: #2d2d2d;          /* text on amber: charcoal (white on amber is 2.1:1) */
    --m-brand-text: #8a6400;         /* the brand as text, icon, outline or focus ring on white (5.4:1) */
    --m-brand-hover: #d39a00;        /* primary buttons, pressed or hovered */
    --m-brand-soft: #fff8e1;         /* amber wash (stylesheet_zz_shop.css --ns-amber-wash) */
    --m-accent: #e8a900;             /* sparingly: cart badge, sale */
    --m-ink: #2d2d2d;
    --m-ink-2: #5f6264;
    --m-line: #e4e2df;
    --m-surface: #ffffff;
    --m-surface-2: #f7f6f3;
    /* the top bar is the desktop header's charcoal band: the wordmark's "9" is white */
    --m-top-bg: #363636;
    --m-top-ink: #ffffff;
    --m-top-ink-2: #b3b3b3;          /* the globe */
    --m-top-line: #363636;
    --m-top-press: rgb(255 255 255 / .12);
    --m-top-focus: #e8a900;

    --m-font: Arial, Helvetica, sans-serif;   /* the theme's own stack */
    --m-fs-body: 15px;
    --m-fs-small: 13px;
    --m-fs-h1: 26px;
    --m-fs-h2: 20px;
    --m-fs-h3: 17px;
    --m-ease: cubic-bezier(.2, .8, .2, 1);
    --m-dur: 220ms;
    --m-shadow: 0 1px 2px rgb(30 30 30 / .08), 0 8px 28px rgb(30 30 30 / .14);
  }

  /* ----------------------------------------------------------------- buttons
     .ns-btn: Zen Cart's image buttons, upgraded by jscript_ns_mobile.js (an
     input[type=image] becomes a submit with its alt as the label; a link around a
     /buttons/ image gets this class and an .ns-btn__label span). Page sheets place and
     size them (width, order); the look lives here. :is(a, input, button) lifts these
     rules over the theme's bare `input` and `a` rules. */
  :is(a, input, button).ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--m-btn-h);
    height: auto;
    min-width: var(--m-tap);
    margin: 0;
    padding: 0 20px;
    border: 1.5px solid var(--m-brand-text, var(--m-brand));
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-brand-text, var(--m-brand));
    font: 600 16px/1.2 var(--m-font);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 120ms var(--m-ease), background-color 120ms linear, border-color 120ms linear, color 120ms linear;
  }
  :is(a, input, button).ns-btn--primary {
    background: var(--m-brand);
    border-color: var(--m-brand);
    color: var(--m-brand-ink);
  }
  :is(a, input, button).ns-btn--secondary {
    background: var(--m-surface);
    border-color: var(--m-brand-text, var(--m-brand));
    color: var(--m-brand-text, var(--m-brand));
  }
  :is(a, input, button).ns-btn--quiet {
    min-height: var(--m-tap);
    padding: 0 12px;
    background: transparent;
    border-color: transparent;
    color: var(--m-brand-text, var(--m-brand));
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  :is(a, input, button).ns-btn--block { display: flex; width: 100%; }
  :is(a, input, button).ns-btn--icon { width: var(--m-btn-h); padding: 0; }
  :is(a, input, button).ns-btn svg { width: 20px; height: 20px; flex: none; }
  @media (hover: hover) {
    :is(a, input, button).ns-btn--primary:hover { background: var(--m-brand-hover, #435a4e); border-color: var(--m-brand-hover, #435a4e); color: var(--m-brand-ink); }
    :is(a, input, button).ns-btn--secondary:hover { background: var(--m-surface-2); color: var(--m-brand-text, var(--m-brand)); }
    :is(a, input, button).ns-btn--quiet:hover { color: var(--m-ink); }
  }
  :is(a, input, button).ns-btn:active { transform: scale(.98); }
  :is(a, input, button).ns-btn:focus-visible { outline: 2px solid var(--m-brand-text, var(--m-brand)); outline-offset: 2px; }
  :is(a, input, button).ns-btn:is(:disabled, [disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; transform: none; }
  /* sidebox pickers (Music Genres, Artists) go to the choice as soon as it is picked, so
     their Go button stays disabled for good; a half-faded button reads as broken */
  form:has(select[data-ninestar-autosubmit]) .ns-btn:disabled { display: none; }
  /* an upgraded link keeps its image for desktop and shows the label instead */
  .ns-btn > img { display: none !important; } /* the theme sizes button images with ids and inline widths */
  .ns-btn > .ns-btn__label { display: inline; }

  /* ------------------------------------------------------------- page shell
     The old two-row header (logo, cart, social row, search, menu bar) took the first
     screen on a phone. The shell's top bar, drawer and tab bar replace it. */
  #header { display: none; }
  .ns-m { display: contents; } /* its children are sticky / fixed against the page, not this box */

  html { scroll-padding-top: calc(var(--m-top-h) + 8px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    /* the theme's 12px/15px grey type and its grey header gradient were sized for the
       1050px page; on a phone the type is 15px and the page plain white */
    background: var(--m-surface);
    color: var(--m-ink);
    font-family: var(--m-font);
    font-size: var(--m-fs-body);
    line-height: 1.55;
    /* nothing hides under the tab bar */
    padding-bottom: calc(var(--m-tab-total) + 8px);
  }
  html.ns-locked,
  html.ns-locked body { overflow: hidden; }

  /* the page gutter: content takes 90% of the screen (16px minimum each side) */
  .column-center-padding { padding: 16px var(--m-gutter) 32px; }
  #column-left .box { margin-left: var(--m-gutter); margin-right: var(--m-gutter); }

  /* the category sidebox's chip row above every page: the drawer's Categories list and
     the Browse tab carry the same links now */
  #contentMainWrapper #column-left #categories { display: none; }

  /* video embeds in descriptions and artist bios carry fixed sizes (YouTube's width="781"
     on /ali-youssefi): the description box clipped them, play button off-screen */
  #column-center iframe:is([src*="youtube"], [src*="vimeo"]) { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* heading scale (same selectors as stylesheet_zz_9star.css's 32px rule, which this
     sheet follows): h1 26px on phones, 30px on tablets; h2 20px; h3 17px */
  #column-center h1:not(#h1),
  #column-center h2.centerBoxHeading,
  #column-center #specialsListingHeading {
    font-size: var(--m-fs-h1);
    line-height: 1.2;
    letter-spacing: -.3px;
  }
  #column-center h2:not(.centerBoxHeading) { font-size: var(--m-fs-h2); line-height: 1.3; }
  #column-center h3 { font-size: var(--m-fs-h3); line-height: 1.35; }

  /* ---------------------------------------------------------------- top bar */
  .ns-top {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    /* BMS (owner, 2026-10-24): the logo at the left, then the globe, then the menu button.
       The order is in hooks so a store can keep the logo centred:
       --m-top-cols: var(--m-tap) minmax(0, 1fr) var(--m-tap); --m-top-logo-order: 2;
       --m-top-menu-order: 0; --m-top-logo-justify: center; --m-top-logo-pad: 0 */
    grid-template-columns: var(--m-top-cols, minmax(0, 1fr) var(--m-tap) var(--m-tap));
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--m-top-h);
    padding: 0 max(6px, calc(var(--m-gutter) - 10px)); /* icons' 10px inner space lines their glyphs up with the gutter */
    background: var(--m-top-bg, var(--m-surface));
    border-bottom: 1px solid var(--m-top-line, var(--m-line));
  }
  .ns-top .ns-iconbtn { color: var(--m-top-ink, var(--m-ink)); }
  .ns-top .ns-iconbtn:active { background: var(--m-top-press, var(--m-surface-2)); }
  .ns-top .ns-iconbtn:focus-visible,
  .ns-top .ns-top__cur:focus-within { outline-color: var(--m-top-focus, var(--m-brand-text, var(--m-brand))); }
  .ns-iconbtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--m-radius);
    background: transparent;
    color: var(--m-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ns-iconbtn svg { width: 24px; height: 24px; }
  .ns-iconbtn:focus-visible,
  .ns-top__cur:focus-within { outline: 2px solid var(--m-brand-text, var(--m-brand)); outline-offset: 0; }
  .ns-iconbtn:active { background: var(--m-surface-2); }

  .ns-top__menu { order: var(--m-top-menu-order, 3); }
  .ns-top__cur { order: 2; }
  /* left-aligned, the logo starts on the gutter line (the icons' 10px inner space is
     already taken off the bar's padding) */
  .ns-top__logo {
    order: var(--m-top-logo-order, 1);
    display: flex;
    justify-content: var(--m-top-logo-justify, flex-start);
    align-items: center;
    height: 100%;
    min-width: 0;
    padding-inline-start: var(--m-top-logo-pad, 10px);
  }
  .ns-top__logo img { display: block; width: auto; height: 36px; max-width: 100%; object-fit: contain; }

  /* the currency choice: the store's own select, invisible over a grey globe, so a tap
     opens the phone's native picker; 16px text, under which iOS would zoom on focus */
  .ns-top__cur { position: relative; margin: 0; color: var(--m-top-ink-2, var(--m-ink-2)); border-radius: var(--m-radius); }
  .ns-top__cur svg { width: 24px; height: 24px; }
  .ns-top__cur select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }

  /* ----------------------------------------------------------------- drawer */
  .ns-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 86%;
    max-width: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + var(--m-safe-b));
    background: var(--m-surface);
    border-radius: 0 var(--m-radius-lg) var(--m-radius-lg) 0;
    box-shadow: var(--m-shadow);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--m-dur) var(--m-ease), visibility 0s linear var(--m-dur);
  }
  /* .is-open: the script. :target: no script, the menu button is a plain #ns-drawer link */
  /* :has() is in a forgiving :is() list, so a browser without it still reads the rest */
  .ns-drawer:is(.is-open, :target, :has(:target)) {
    transform: none;
    visibility: visible;
    transition: transform var(--m-dur) var(--m-ease), visibility 0s;
  }
  .ns-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    background: rgb(30 36 33 / .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--m-dur) var(--m-ease), visibility 0s linear var(--m-dur);
    -webkit-tap-highlight-color: transparent;
  }
  .ns-drawer:is(.is-open, :target, :has(:target)) ~ .ns-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--m-dur) var(--m-ease), visibility 0s;
  }

  .ns-drawer__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--m-top-h);
    padding: 0 6px 0 20px;
    background: var(--m-surface);
  }
  .ns-drawer__title { margin: 0; font: 600 17px/1.3 var(--m-font); color: var(--m-ink); }

  .ns-search { display: flex; gap: 8px; margin: 4px 20px 8px; }
  .ns-search__field {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: var(--m-btn-h);
    margin: 0;
    padding: 0 14px;
    border: 1px solid #c9cbc1;   /* 3:1 against white, for a visible field edge */
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-ink);
    font: 16px/1.2 var(--m-font);
    -webkit-appearance: none;
    appearance: none;
  }
  .ns-search__field::placeholder { color: var(--m-ink-2); opacity: 1; }
  .ns-search__field:focus { outline: 2px solid var(--m-brand-text, var(--m-brand)); outline-offset: -1px; border-color: var(--m-brand-text, var(--m-brand)); }

  .ns-nav { margin: 0; padding: 12px 0 0; }
  .ns-nav + .ns-nav { margin-top: 8px; border-top: 1px solid var(--m-line); }
  .ns-nav__heading {
    margin: 0;
    padding: 4px 20px 4px;
    font: 600 var(--m-fs-small)/1.4 var(--m-font);
    color: var(--m-ink-2);
  }
  .ns-nav__heading:focus { outline: none; }
  .ns-nav__list { margin: 0; padding: 0; list-style: none; }
  .ns-nav__list li { margin: 0; padding: 0; list-style: none; background: none; border: 0; }
  .ns-nav__list a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--m-btn-h);
    padding: 0 20px;
    color: var(--m-ink);
    font: 400 16px/1.3 var(--m-font);
    text-decoration: none;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ns-nav__list a:active { background: var(--m-surface-2); }
  .ns-nav__list a:focus-visible { outline: 2px solid var(--m-brand-text, var(--m-brand)); outline-offset: -2px; }
  .ns-nav__list a[aria-current="page"] { color: var(--m-brand-text, var(--m-brand)); font-weight: 600; }
  .ns-nav__list a > svg { width: 22px; height: 22px; flex: none; color: var(--m-ink-2); }
  .ns-nav__list .ns-nav__sub a { padding-left: 36px; font-size: 15px; color: var(--m-ink-2); }
  .ns-nav__list .ns-nav__sub2 a { padding-left: 52px; }
  .ns-nav__list .ns-nav__count { margin-left: auto; color: var(--m-ink-2); font-size: var(--m-fs-small); }
  .ns-nav__extra { margin-top: 4px; }

  /* the store's social links, spread over one row (BMS has seven: 7 x 44px did not fit a
     322px drawer); each at least 40px wide and 44px tall, wrapping only on the narrowest */
  .ns-social { display: flex; flex-wrap: wrap; margin: 16px 0 0; padding: 12px 8px 0; border-top: 1px solid var(--m-line); }
  .ns-social .ns-iconbtn { flex: 1 1 0; min-width: 40px; max-width: 56px; }
  .ns-social[hidden] { display: none; }
  .ns-social a { color: var(--m-ink-2); }
  .ns-social a:hover { color: var(--m-brand-text, var(--m-brand)); }

  /* ---------------------------------------------------------------- tab bar */
  .ns-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    box-sizing: border-box;
    height: var(--m-tab-total);
    /* five tabs spread over a 1000px tablet sat 200px apart; they keep a 600px row, centred */
    padding: 0 max(0px, calc(var(--m-gutter) - 16px), calc((100% - 600px) / 2)) var(--m-safe-b);
    background: var(--m-surface);
    border-top: 1px solid var(--m-line);
  }
  .ns-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: var(--m-tap);
    padding: 0 2px;
    color: var(--m-ink-2);
    font: 400 11px/1.2 var(--m-font);
    letter-spacing: .1px;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ns-tab svg { width: 24px; height: 24px; flex: none; }
  .ns-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ns-tab[aria-current="page"] { color: var(--m-brand-text, var(--m-brand)); font-weight: 600; }
  .ns-tab:focus-visible { outline: 2px solid var(--m-brand-text, var(--m-brand)); outline-offset: -4px; border-radius: var(--m-radius); }
  .ns-tab:active svg { transform: scale(.92); }
  .ns-tab__icon { position: relative; display: flex; }
  .ns-badge {
    position: absolute;
    top: -5px;
    left: 15px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--m-accent);
    box-shadow: 0 0 0 2px var(--m-surface);
    color: var(--m-ink);
    font: 700 11px/18px var(--m-font);
    text-align: center;
  }

  /* --------------------------------------------------------------- footer
     compact: copyright and the privacy link, centred. The footer menu's links are in
     the drawer (Menu section), which also opens without JavaScript. */
  #footer {
    margin: 0;
    padding: 20px var(--m-gutter) 24px;
    background: var(--m-surface-2);
    border-top: 1px solid var(--m-line);
    text-align: center;
  }
  #footer .wrapper { overflow: visible; }
  #footer .footer-menu { display: none; }
  #footer .copyright { padding: 0; color: var(--m-ink-2); font-size: var(--m-fs-small); line-height: 1.6; }
  #footer .copyright a { display: inline-block; padding: 12px 4px; color: var(--m-brand-text, var(--m-brand)); }

  /* ----------------------------------------------------------- utilities */
  .ns-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* tablets: 16px body, 30px h1 */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --m-fs-body: 16px; --m-fs-h1: 30px; }
}

/* motion off on request: drawer, scrim and button press appear instantly */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .ns-drawer, .ns-drawer:is(.is-open, :target, :has(:target)),
  .ns-scrim, .ns-drawer:is(.is-open, :target, :has(:target)) ~ .ns-scrim {
    transition: none;
  }
  :is(a, input, button).ns-btn { transition: none; }
  :is(a, input, button).ns-btn:active,
  .ns-tab:active svg { transform: none; }
}

/* ==========================================================================
   theme9star only (kept at the end of this shared file by the 9 Star sync): the top-bar
   wordmark. The members site's "9star" logo (images/logo_9star.png, 400x147, the "9" and
   "star" set tight), larger than the shell's 36px. As on the desktop header, the bar ends at
   the foot of "star": the rule under "star" (77.2% of the picture's height) sits 3px above
   the bar's bottom edge (the owner's eye: lined up exactly, it read as too low), and the "9"
   hangs about 7px below the bar, over the page, as a badge (owner, 2026-10-24).
   ========================================================================== */
@media (max-width: 1023px) {
  .ns-top__logo { align-items: flex-start; overflow: visible; }
  .ns-top__logo img {
    position: relative;
    z-index: 1;
    height: 68px;
    max-width: none;
    margin-top: 0.5px;  /* 0.5 + 77.2% of 68 = 53: the rule's bottom 3px above the bar's edge */
  }
}
/* the narrowest phones: a little smaller, so the globe and menu keep their room */
@media (max-width: 359px) {
  .ns-top__logo img { height: 62px; margin-top: 5.1px; }  /* 5.1 + 77.2% of 62 = 53 */
}