/* ==========================================================================
   Desktop base, theme-bahai (bahaimusicstore.com). 2026-10-25, DESKTOP-REFRESH-BMS.md
   sections 2-5 (group "base").
   Covers: the .ns-btn button system (primary, secondary, quiet; submits and links, with
   the link's button image hidden and its label shown; hover, active, focus, disabled),
   form controls (text fields, selects, textareas, checkboxes, radios, labels, helper
   text, fieldsets and legends), generic centre-column links, the h1-h3 type scale in
   the centre column, messageStack boxes and the global :focus-visible ring.
   Desktop only: every rule sits inside @media (min-width: 1024px), so phones and tablets
   (1023px and below) never see it. Reads the --d-* tokens in stylesheet_zzz_d_tokens.css.
   Other groups size and place buttons and fields in context (small / large buttons,
   field widths); this sheet owns only the generic look.
   ========================================================================== */

@media (min-width: 1024px) {
  /* ------------------------------------------------------------- focus ring
     The theme removes every link outline (stylesheet_tm.css: a { outline: none }) and
     gives fields no focus state at all. :where() keeps this at (0,1,0) so any group can
     restyle a ring in context (white on sage blocks, sage-black on olive). */
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
  ):focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }
  /* stylesheet_main.css kills outlines on some centre links by id (#prevOrders td a,
     #accountHistInfo td a at 1,0,3; #shoppingCartDefault .text_v_c a at 1,1,1) */
  #column-center a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* ---------------------------------------------------------------- buttons
     .ns-btn: Zen Cart's image buttons, upgraded at every width by jscript_ns_mobile.js
     (input[type=image] becomes a submit labelled by its alt; a link around a /buttons/
     image gets .ns-btn and an .ns-btn__label span, the image staying inside). (0,1,1)
     ties .buttonRow input (stylesheet.css) and wins by load order; context groups size
     and place buttons with their own, more specific, selectors. */
  :is(a, input, button).ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    float: none;
    width: auto;
    min-width: 40px;
    height: auto;
    min-height: var(--d-btn-h);
    margin: 0;
    padding: var(--d-btn-pad);
    border: var(--d-btn-border) solid var(--d-brand);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    box-shadow: none;
    color: var(--d-brand);
    font: 600 var(--d-fs-btn) / 1.2 var(--d-font);
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  :is(a, input, button).ns-btn--primary {
    background: var(--d-brand);
    border-color: var(--d-brand);
    color: var(--d-brand-ink);
  }
  :is(a, input, button).ns-btn--secondary {
    background: var(--d-surface);
    border-color: var(--d-brand);
    color: var(--d-brand);
  }
  :is(a, input, button).ns-btn--quiet {
    min-height: 32px;
    padding: 0 8px;
    background: transparent;
    border-color: transparent;
    color: var(--d-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* a link button keeps its GIF for nothing: the label is the button now. !important:
     the theme sizes button images with ids and inline width/height attributes. */
  a.ns-btn > img {
    display: none !important;
  }
  a.ns-btn > .ns-btn__label {
    display: inline;
  }

  @media (hover: hover) {
    :is(a, input, button).ns-btn--primary:hover:not(
        :disabled,
        [aria-disabled="true"]
      ) {
      background: var(--d-brand-hover);
      border-color: var(--d-brand-hover);
      color: var(--d-brand-ink);
    }
    :is(a, input, button).ns-btn--secondary:hover:not(
        :disabled,
        [aria-disabled="true"]
      ) {
      background: var(--d-surface-2);
      border-color: var(--d-brand);
      color: var(--d-brand);
    }
    :is(a, input, button).ns-btn--quiet:hover:not(
        :disabled,
        [aria-disabled="true"]
      ) {
      background: transparent;
      color: var(--d-ink);
    }
  }
  :is(a, input, button).ns-btn--primary:active:not(
      :disabled,
      [aria-disabled="true"]
    ) {
    background: var(--d-brand-press);
    border-color: var(--d-brand-press);
  }
  :is(a, input, button).ns-btn--secondary:active:not(
      :disabled,
      [aria-disabled="true"]
    ) {
    background: var(--d-surface-3);
  }
  :is(a, input, button).ns-btn:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }
  :is(a, input, button).ns-btn:is(
      :disabled,
      [disabled],
      [aria-disabled="true"]
    ) {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* stylesheet_main.css underlines and recolours links inside some account and cart
     tables by id (1,0,3); a link button there keeps the button look */
  :is(#prevOrders, #accountHistInfo) td a.ns-btn,
  #shoppingCartDefault .text_v_c a.ns-btn {
    text-decoration: none;
  }
  #cartContentsDisplay td a.ns-btn--primary {
    color: var(--d-brand-ink);
  }
  #cartContentsDisplay td a.ns-btn--secondary {
    color: var(--d-brand);
  }

  /* -------------------------------------------------------------- text fields
     #contentMainWrapper (the page table: left and centre columns) keeps the header's
     search and currency fields out; the shell sheet styles those. (1,1,1): field ids in
     stylesheet_main.css (input#firstname at 1,0,1) keep their widths and margins, which
     this rule never sets. Hidden honeypot and state fields stay hidden: their inline
     display:none is untouched (no display here). */
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      input:not([type]),
      select,
      textarea
    ) {
    box-sizing: border-box;
    max-width: 100%;
    height: var(--d-field-h);
    padding: 0 12px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    box-shadow: none;
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.3 var(--d-font);
    vertical-align: middle;
  }
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      input:not([type]),
      select,
      textarea
    )::placeholder {
    color: var(--d-ink-2);
    opacity: 1;
  }
  @media (hover: hover) {
    #contentMainWrapper
      :is(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        input[type="url"],
        input:not([type]),
        select,
        textarea
      ):hover:not(:disabled) {
      border-color: var(--d-field-hover);
    }
  }
  /* a field always shows its focus (mouse or keyboard): sage edge plus a soft halo; the
     transparent outline keeps a ring in forced-colours mode */
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      input:not([type]),
      select,
      textarea
    ):focus {
    border-color: var(--d-brand);
    box-shadow: 0 0 0 3px var(--d-brand-ring);
    outline: 2px solid transparent;
    outline-offset: 0;
  }
  /* after the visitor has typed: a field the browser finds invalid (required, email) */
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      select,
      textarea
    ):user-invalid {
    border-color: var(--d-error-ink);
  }
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      input:not([type]),
      select,
      textarea
    ):disabled {
    border-color: var(--d-line);
    background-color: var(--d-surface-2);
    color: var(--d-ink-2);
    cursor: not-allowed;
  }

  /* stylesheet_tm.css pins the login page's text fields at 20px and greys their focus
     edge (1,1,3 and 1,2,3); the same selectors, later, put the base field back */
  body#loginBody fieldset input[type="text"],
  body#loginBody fieldset input[type="password"] {
    height: var(--d-field-h);
  }
  body#loginBody fieldset input[type="text"]:focus,
  body#loginBody fieldset input[type="password"]:focus {
    border-color: var(--d-brand);
  }

  /* selects: native arrow off, a CSS-gradient chevron in secondary ink */
  #contentMainWrapper select {
    padding: 0 36px 0 12px;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--d-ink-2) 50%),
      linear-gradient(135deg, var(--d-ink-2) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
  }
  #contentMainWrapper :is(select[multiple], select[size]:not([size="1"])) {
    height: auto;
    padding: 6px 8px;
    background-image: none;
  }
  /* !important: stylesheet_tm.css pins the login page's selects at 26px with !important
     (body#loginBody fieldset select, 1,0,3) */
  body#loginBody fieldset select:not([multiple]) {
    height: var(--d-field-h) !important;
  }

  #contentMainWrapper textarea {
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
  }

  /* --------------------------------------------------- checkboxes and radios
     Native controls in the brand colour; margin-left stays the theme's (the create-account
     radios use it to space their pairs) */
  #contentMainWrapper :is(input[type="checkbox"], input[type="radio"]) {
    width: var(--d-check);
    height: var(--d-check);
    margin-top: 0;
    margin-right: 4px;
    margin-bottom: 0;
    accent-color: var(--d-brand);
    vertical-align: middle;
    cursor: pointer;
  }
  #contentMainWrapper
    :is(input[type="checkbox"], input[type="radio"]):disabled {
    cursor: not-allowed;
  }
  /* a box after its label ("Subscribe to Our Newsletter.", the second e-mail format) */
  #contentMainWrapper label + :is(input[type="checkbox"], input[type="radio"]) {
    margin-left: 8px;
  }

  /* ------------------------------------------------------------------ labels
     Field labels 13px semibold ink; float and width stay the theme's (create account's
     9em label column, stylesheet.css LABEL.inputLabel). Labels of a box or a dot read
     as a sentence: 14px regular. */
  #contentMainWrapper label {
    color: var(--d-ink);
    font-family: var(--d-font);
    font-size: var(--d-fs-ui);
    font-weight: 600;
    line-height: 1.4;
  }
  #contentMainWrapper
    :is(
      label.checkboxLabel,
      label.radioButtonLabel,
      input[type="checkbox"] + label,
      input[type="radio"] + label,
      label:has(> :is(input[type="checkbox"], input[type="radio"]))
    ) {
    font-size: var(--d-fs-body);
    font-weight: 400;
    cursor: pointer;
  }
  /* the theme's floated label column (LABEL.inputLabel, margin 5px 0) sat at the top of
     a 20px field; beside a 38px field its first line is centred on the field's text
     (fields keep stylesheet_main.css's 4px top margin): 5 + 9 + 9 = 23 = 4 + 19 */
  #contentMainWrapper label.inputLabel {
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 18px;
  }

  /* helper text: the required star and "* Required information" were #a3a3a3 11px (2.5:1) */
  #contentMainWrapper :is(.alert, .inputRequirement) {
    color: var(--d-ink-2);
    font-size: var(--d-fs-small);
    line-height: 1.4;
  }
  /* the star after a field sits on the field's middle, not its top edge */
  #contentMainWrapper :is(input, select, textarea) ~ .alert {
    vertical-align: middle;
  }
  #contentMainWrapper .information {
    color: var(--d-ink-2);
    font-size: var(--d-fs-ui);
    line-height: 1.5;
  }

  /* ----------------------------------------------------- fieldsets, legends
     A fieldset is a hairline card (the mobile radius-14 card, not the theme's grey box);
     the legend is its title on the top edge, no tab. Margin-bottom matches
     stylesheet_main.css's 20px !important. */
  #contentMainWrapper fieldset {
    box-sizing: border-box;
    min-width: 0;
    margin: 0 0 20px;
    padding: 20px 24px 24px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
    color: var(--d-ink);
  }
  #contentMainWrapper legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--d-brand);
    font: 700 var(--d-fs-h3) / 1.3 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
  }
  /* stylesheet_tm.css draws the login page's legends white on olive (2.48:1, and olive
     is a surface, never a chip); the same selector, later, gives them the base title */
  body#loginBody legend {
    background: none;
    color: var(--d-brand);
  }

  /* ------------------------------------------------------------- headings
     Font metrics only; the shell sheet owns the page title's margin. #column-center h1
     (1,0,1) beats the 60px/-4px id rules in stylesheet_main.css (1,0,0) and ties
     h1#cartDefaultHeading (stylesheet.css), winning by load order. */
  #column-center h1 {
    color: var(--d-ink);
    font: 700 var(--d-fs-h1) / 1.15 var(--d-font);
    letter-spacing: var(--d-track-h1);
    text-align: left;
    text-transform: none;
  }
  /* The catalogue title is a deliberate part of the current desktop identity, not a
     generic page title. Keep its live 60px metrics and near-black colour. */
  #column-center #productListHeading {
    color: #525554;
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: -4px;
  }
  #column-center h2,
  #column-center h2.centerBoxHeading {
    color: var(--d-ink);
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-transform: none;
  }
  #column-center h3 {
    color: var(--d-ink);
    font: 700 var(--d-fs-h3) / 1.35 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
  }

  /* ---------------------------------------------------------------- links
     Centre-column links keep the site's #414141 (stylesheet_tm.css; owner, 2026-10-25:
     the category heading and artist names stay black, not brand-coloured); the theme's
     underline logic stays (prose underlined, UI lists set their own). Buttons are
     excluded: they carry their own colours. Hover turns ink and, where a link is
     underlined, thickens its underline; never amber or orange.
     The product page's category heading (#categoryIcon, "Devotional Music", 60px) is
     excluded too (owner, 2026-10-25: it stays exactly as the live site draws it, so
     stylesheet_main.css keeps its hover colour and underline). :where() keeps the
     exclusion at zero specificity, so this rule stays (1,1,1) and other groups' link
     rules still win or lose by the same order as before. */
  #column-center a:not(.ns-btn):not(:where(#categoryIcon a)) {
    color: #414141; /* 10.0:1 on white */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  @media (hover: hover) {
    #column-center a:not(.ns-btn):not(:where(#categoryIcon a)):hover {
      color: var(--d-ink);
      text-decoration-thickness: 2px;
    }
  }

  /* --------------------------------------------------------------- messages
     Zen Cart's messageStack: <div class="messageStackError larger"><img> text</div>.
     A tinted box, radius 10, with the theme's own icon at the left of the first line.
     body (0,1,1) beats stylesheet.css's (0,1,0) colour rules. */
  body
    :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    ) {
    display: block;
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--d-error-line);
    border-radius: var(--d-radius);
    background: var(--d-error-bg);
    color: var(--d-error-ink);
    font: 400 var(--d-fs-body) / 20px var(--d-font);
    text-align: left;
  }
  body .messageStackSuccess {
    border-color: var(--d-success-line);
    background: var(--d-success-bg);
    color: var(--d-success-ink);
  }
  body .messageStackCaution {
    border-color: var(--d-caution-line);
    background: var(--d-caution-bg);
    color: var(--d-caution-ink);
  }
  body
    :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    ):has(> img:first-child) {
    padding-left: 44px;
  }
  /* the icon PNGs are 25-30px wide, 27-37px tall: drawn 20px tall on the first line */
  body
    :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    )
    > img:first-child {
    position: absolute;
    top: 12px;
    left: 14px;
    width: auto;
    height: 20px;
    margin: 0;
    vertical-align: -3px;
  }
  body
    :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    )
    a:not(.ns-btn),
  #column-center
    :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    )
    a:not(.ns-btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ------------------------------------------------------------------ motion
     Colour and a 2% press only, 120ms; nothing moves for visitors who ask for less. */
  @media (prefers-reduced-motion: no-preference) {
    :is(a, input, button).ns-btn {
      transition:
        transform var(--d-dur) var(--d-ease),
        background-color var(--d-dur) linear,
        border-color var(--d-dur) linear,
        color var(--d-dur) linear;
    }
    :is(a, input, button).ns-btn:active:not(:disabled, [aria-disabled="true"]) {
      transform: scale(0.98);
    }
    #contentMainWrapper
      :is(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        input[type="url"],
        input:not([type]),
        select,
        textarea
      ) {
      transition:
        border-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }
    #column-center a:not(.ns-btn):not(:where(#categoryIcon a)) {
      transition: color var(--d-dur) linear;
    }
  }
}