/* ==========================================================================
   Desktop base, theme9star (9starmedia.com). 2026-10-25, docs/DESKTOP-REFRESH-9STAR.md
   sections 2-5.

   Covers the generic desktop look every page shares:
     2. buttons: .ns-btn (primary / secondary / quiet), input submits and link buttons
        (the <img> stays in the <a>, hidden; .ns-btn__label shown), hover, press, focus,
        disabled
     3. form controls in the page body: text fields, selects, textareas, checkboxes and
        radios, labels, helper text, fieldsets and legends
     4. h1-h3 in the centre column, generic links, the global :focus-visible ring
     5. messageStack boxes (error, warning, success, caution)
   Context groups only size and place these (small / large buttons, field widths):
   stylesheet_zzz_d_listings, _product, _commerce, _shell.

   DESKTOP ONLY: every rule sits inside @media (min-width: 1024px). Phones and tablets
   (1023px and below) keep the mobile sheets (stylesheet_zz_9star_m_*.css) untouched.
   Tokens: var(--d-*) from stylesheet_zzz_d_tokens.css; literal fallbacks inside var().

   Specificity: generic defaults use :where() so they replace the theme's element-level
   rules (stylesheet_tm.css a, stylesheet_main.css h2 / h3) without outranking the
   context groups; ids appear only where a theme rule with an id must be beaten (the
   60px heading ids, the login page's body#loginBody rules, zz_shop's body:is() lists).
   ========================================================================== */

@media (min-width: 1024px) {
  /* =============================================================== 4. LINKS
     stylesheet_tm.css makes every link #414141 and kills its outline. Links keep that
     #414141 (owner, 2026-10-25: artist names and the category heading must not turn
     brown); hover turns ink. Prose links stay underlined; owners drop the underline on UI
     lists (tile titles, artist names) with their own, more specific rules. Declared before
     the buttons so a link button keeps its own colours on hover. */
  :where(#column-center, #column-left) a {
    color: #414141; /* stylesheet_tm.css, 10.0:1 on white */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  :where(#column-center, #column-left) a:hover {
    color: var(--d-ink, #2d2d2d);
  }

  /* ======================================================== GLOBAL FOCUS RING
     Beats stylesheet_tm.css `a { outline: none }`. The header band (shell) and the
     category / social tiles (listings) swap the colour for their own surfaces. */
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  /* ============================================================= 2. BUTTONS
     jscript_ns_mobile.js turns Zen Cart's image buttons into input[type=submit].ns-btn
     or a.ns-btn (image kept inside, label span added). :is(a, input, button) lifts the
     look over the theme's bare `input` and `.buttonRow input` rules (stylesheet.css:583,
     stylesheet_tm.css:444). The background shorthand drops any GIF background. */
  :is(a, input, button).ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--d-btn-h, 40px);
    height: auto;
    min-width: 40px;
    width: auto;
    margin: 0;
    padding: var(--d-btn-pad, 0 18px);
    border: var(--d-btn-border, 1.5px) solid transparent;
    border-radius: var(--d-radius, 10px);
    background: var(--d-surface, #ffffff) none;
    color: var(--d-brand-text, #8a6400);
    font: 600 var(--d-fs-btn, 14px) / 1.2
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* the display above would otherwise beat the browser's own [hidden] rule */
  :is(a, input, button).ns-btn[hidden] {
    display: none;
  }

  /* link buttons: the theme sizes the button images with ids and inline widths, hence
     !important on the hide; the injected label is display:none globally
     (stylesheet_zz_9star_m_shell.css:17) and shown here */
  a.ns-btn > img {
    display: none !important;
  }
  a.ns-btn > .ns-btn__label {
    display: inline;
  }

  /* primary: amber fill, charcoal text (6.63:1; hover 5.50:1, press 4.66:1) */
  :is(a, input, button).ns-btn--primary {
    background-color: var(--d-brand, #e8a900);
    border-color: var(--d-brand, #e8a900);
    color: var(--d-brand-ink, #2d2d2d);
  }

  /* secondary: white with a dark amber edge and text (5.38:1) */
  :is(a, input, button).ns-btn--secondary {
    background-color: var(--d-surface, #ffffff);
    border-color: var(--d-brand-text, #8a6400);
    color: var(--d-brand-text, #8a6400);
  }

  /* quiet: an underlined text action */
  :is(a, input, button).ns-btn--quiet {
    min-height: 32px;
    padding: 0 8px;
    background-color: transparent;
    border-color: transparent;
    color: var(--d-brand-text, #8a6400);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  @media (hover: hover) {
    :is(a, input, button).ns-btn--primary:not(
        :disabled,
        [disabled],
        [aria-disabled="true"]
      ):hover {
      background-color: var(--d-brand-hover, #d39a00);
      border-color: var(--d-brand-hover, #d39a00);
      color: var(--d-brand-ink, #2d2d2d);
    }
    :is(a, input, button).ns-btn--secondary:not(
        :disabled,
        [disabled],
        [aria-disabled="true"]
      ):hover {
      background-color: var(--d-brand-soft, #fff8e1);
      border-color: var(--d-brand-text, #8a6400);
      color: var(--d-brand-text, #8a6400);
    }
    :is(a, input, button).ns-btn--quiet:not(
        :disabled,
        [disabled],
        [aria-disabled="true"]
      ):hover {
      color: var(--d-ink, #2d2d2d);
    }
  }

  :is(a, input, button).ns-btn--primary:not(
      :disabled,
      [disabled],
      [aria-disabled="true"]
    ):active {
    background-color: var(--d-brand-press, #c28d00);
    border-color: var(--d-brand-press, #c28d00);
    color: var(--d-brand-ink, #2d2d2d);
  }
  :is(a, input, button).ns-btn--secondary:not(
      :disabled,
      [disabled],
      [aria-disabled="true"]
    ):active {
    background-color: var(--d-brand-soft-2, #fcefc7);
  }

  :is(a, input, button).ns-btn:focus-visible {
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: var(--d-focus-offset, 2px);
  }

  :is(a, input, button).ns-btn:is(
      :disabled,
      [disabled],
      [aria-disabled="true"]
    ) {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* press and colour changes, only for people who have not asked for less motion */
  @media (prefers-reduced-motion: no-preference) {
    :is(a, input, button).ns-btn {
      transition:
        transform var(--d-dur, 120ms)
          var(--d-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
        background-color var(--d-dur, 120ms) linear,
        border-color var(--d-dur, 120ms) linear,
        color var(--d-dur, 120ms) linear;
    }
    :is(a, input, button).ns-btn:not(
        :disabled,
        [disabled],
        [aria-disabled="true"]
      ):active {
      transform: scale(0.98);
    }
  }

  /* ======================================================= 3. FORM CONTROLS
     Page body only (the header search and currency belong to the shell). Fields keep
     the widths the theme and the context groups give them. */
  #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;
    height: var(--d-field-h, 38px);
    max-width: 100%;
    padding: 0 12px;
    border: 1px solid var(--d-field, #928e88);
    border-radius: var(--d-radius, 10px);
    background-color: var(--d-surface, #ffffff);
    color: var(--d-ink, #2d2d2d);
    font: 400 var(--d-fs-body, 14px) / 1.3
      var(--d-font, Arial, Helvetica, sans-serif);
    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]),
      textarea
    )::placeholder {
    color: var(--d-ink-2, #5f6264);
    opacity: 1;
  }

  /* select: native arrow off, a two-gradient chevron in its place. The :not() keeps a
     list box out and lifts this rule (1,2,1) over the shared field rule above (1,1,1:
     :is() counts its most specific entry, input[type=text]), which would otherwise put
     the long option text under the chevron. */
  #contentMainWrapper select:not([multiple], [size]:not([size="1"])) {
    padding-right: 36px;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--d-ink-2, #5f6264) 50%),
      linear-gradient(135deg, var(--d-ink-2, #5f6264) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  #contentMainWrapper select:is([multiple], [size]:not([size="1"])) {
    height: auto;
    padding: 6px 8px;
  }

  /* textarea: the attribute test only lifts the rule to (1,1,1) so it beats the shared
     field rule's 38px height and padding (same reason as the select above) */
  #contentMainWrapper textarea:not([type]) {
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
  }

  @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
      ):not(:focus, :disabled):hover {
      border-color: var(--d-field-hover, #6e6a65);
    }
  }

  /* focus: dark amber edge plus the same solid 2px ring every other control gets (5.38:1
     on white, a real outline so forced-colours mode keeps it too). The ring sits 1px off
     the edge, so a white gap separates it from the field and the two read as one frame.
     This replaces a 22% amber halo (1.4:1 on white) that was barely there; it also
     replaces the empty input:focus of stylesheet.css:72 */
  #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-text, #8a6400);
    box-shadow: none;
    outline: var(--d-focus-w, 2px) solid var(--d-focus, #8a6400);
    outline-offset: 1px;
  }

  #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 {
    background-color: var(--d-surface-2, #f7f6f3);
    color: var(--d-ink-2, #5f6264);
    cursor: not-allowed;
  }

  /* a field the browser has flagged after the customer touched it */
  #contentMainWrapper
    :is(
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="number"],
      input[type="url"],
      textarea
    ):user-invalid {
    border-color: var(--d-error-ink, #a3261b);
  }

  @media (prefers-reduced-motion: no-preference) {
    #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, 120ms) linear,
        box-shadow var(--d-dur, 120ms) linear;
    }
  }

  /* login page: stylesheet_tm.css:456-466 pins its fields with body#loginBody (one id,
     three elements) and the select height with !important, hence the extra id here and
     the !important on the select */
  #loginBody
    #contentMainWrapper
    fieldset
    :is(input[type="text"], input[type="email"], input[type="password"]) {
    height: var(--d-field-h, 38px);
  }
  #loginBody #contentMainWrapper fieldset select {
    height: var(
      --d-field-h,
      38px
    ) !important; /* stylesheet_tm.css:462 height:26px!important */
    padding: 0 36px 0 12px;
  }

  /* checkboxes and radios: the same amber as every primary fill and price pill, with a
     charcoal mark on it (6.63:1). Drawn in CSS rather than with accent-color because
     WebKit paints a white tick on an amber accent (2.08:1) and a pale grey edge on the
     empty box (under 3:1). Empty: a 1.5px #928e88 edge (3.26:1). Small controls take
     the 6px step of the radius system; radios stay round. The tick is a rotated border
     corner; a browser that draws no pseudo-element on an input (Firefox) still shows
     the amber fill and the dark edge. accent-color stays as the native fallback. */
  #contentMainWrapper :is(input[type="checkbox"], input[type="radio"]) {
    position: relative;
    box-sizing: border-box;
    width: var(--d-check, 18px);
    height: var(--d-check, 18px);
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 8px;
    padding: 0;
    border: 1.5px solid var(--d-field, #928e88);
    border-radius: var(--d-radius-cover, 6px);
    background: var(--d-surface, #ffffff) none;
    accent-color: var(--d-brand, #e8a900);
    vertical-align: middle;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #contentMainWrapper input[type="radio"] {
    border-radius: 50%;
  }
  #contentMainWrapper :is(input[type="checkbox"], input[type="radio"]):checked {
    border-color: var(--d-brand-text, #8a6400);
    background-color: var(--d-brand, #e8a900);
  }
  #contentMainWrapper input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 9%;
    left: 34%;
    box-sizing: border-box;
    width: 34%;
    height: 62%;
    border: solid var(--d-brand-ink, #2d2d2d);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  #contentMainWrapper input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 22%;
    width: 56%;
    height: 2px;
    background: var(--d-ink, #2d2d2d);
  }
  #contentMainWrapper input[type="radio"]:checked {
    background-image: radial-gradient(
      circle,
      var(--d-brand-ink, #2d2d2d) 0 28%,
      transparent 31%
    );
  }
  @media (hover: hover) {
    #contentMainWrapper
      :is(input[type="checkbox"], input[type="radio"]):not(
        :checked,
        :disabled
      ):hover {
      border-color: var(--d-field-hover, #6e6a65);
    }
  }
  #contentMainWrapper
    :is(input[type="checkbox"], input[type="radio"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* labels (the 9em label column of create account and contact keeps its float and
     width, stylesheet.css:98) */
  :where(#column-center) label {
    color: var(--d-ink, #2d2d2d);
    font-size: var(--d-fs-ui, 13px);
    font-weight: 600;
    line-height: 1.4;
  }
  :where(#column-center) :is(label.checkboxLabel, label.radioButtonLabel) {
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
  }

  /* helper text: the required star, "* Required information", notes */
  #column-center :is(.alert, .inputRequirement, .information) {
    color: var(--d-ink-2, #5f6264);
    font-size: var(--d-fs-small, 12px);
  }
  #column-center .information {
    font-size: var(--d-fs-ui, 13px);
    line-height: 1.45;
  }
  /* the cart's stock warning shares the class but is a real alert */
  #column-center span.alert.bold {
    color: var(--d-error-ink, #a3261b);
    font-size: var(--d-fs-ui, 13px);
    font-weight: 700;
  }

  /* fieldsets: a white card on the 14px radius (zz_shop's pages are refreshed by the
     commerce sheet; its own selectors outrank this one) */
  #contentMainWrapper fieldset {
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 20px 24px 24px;
    border: 1px solid var(--d-line, #e4e2df);
    border-radius: var(--d-radius-lg, 14px);
    background: var(--d-surface, #ffffff);
    color: var(--d-ink, #2d2d2d);
  }
  /* legend: an ink heading on the card edge, never the amber tab with white text
     (stylesheet_tm.css:446, one id and two elements, hence fieldset > legend) */
  #contentMainWrapper fieldset > legend {
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h3, 17px) / 1.35
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: 0;
    text-transform: none;
  }
  #contentMainWrapper fieldset > legend strong {
    font-weight: inherit;
  }

  /* ========================================================== 4. HEADINGS
     Font metrics only; the shell owns the page-title margins. The theme's page titles
     are 60px with -4px tracking on single ids (stylesheet_main.css:102-160) and zz_shop
     sets 44px on the cart and account pages (one id, one class, one element), hence
     the id and the attribute test. The product title (#h1) is the product sheet's. */
  #column-center h1:not(#h1, #productListHeading):not(#categoryIcon h1) {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h1, 34px) / 1.15
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: var(--d-track-h1, -0.6px);
    text-transform: none;
  }
  /* an h1 written inside page content (the FAQ's "Frequently Asked Questions") sits
     under the page title: it takes the h2 size */
  #column-center h1:not([id]):not(#categoryIcon h1) {
    font-size: var(--d-fs-h2, 22px);
    line-height: 1.25;
    letter-spacing: -0.2px;
  }

  :where(#column-center) h2,
  #column-center h2.centerBoxHeading {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h2, 22px) / 1.25
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: -0.2px;
    text-transform: none;
  }

  :where(#column-center) h3 {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h3, 17px) / 1.35
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: 0;
    text-transform: none;
  }

  /* zz_shop's cart, checkout and account headings: same selectors as
     stylesheet_zz_shop.css:26-56, so this later sheet wins at equal specificity */
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    .centerColumn
    h1,
  body#checkoutsuccessBody .centerColumn > h2.h2dl:first-of-type {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h1, 34px) / 1.15
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: var(--d-track-h1, -0.6px);
    text-transform: none;
  }
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    .centerColumn
    h2 {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h2, 22px) / 1.25
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: -0.2px;
    text-transform: none;
  }
  body:is(
      #shoppingcartBody,
      #checkoutshippingBody,
      #checkoutshippingaddressBody,
      #checkoutpaymentBody,
      #checkoutpaymentaddressBody,
      #checkoutconfirmationBody,
      #checkoutsuccessBody,
      #accountBody,
      #accounthistoryBody,
      #accounthistoryinfoBody,
      #addressbookBody,
      #addressbookprocessBody,
      #accounteditBody,
      #accountpasswordBody,
      #accountnewslettersBody,
      #accountnotificationsBody,
      #gvsendBody
    )
    .centerColumn
    h3:not(.addressBookDefaultName) {
    color: var(--d-ink, #2d2d2d);
    font: 700 var(--d-fs-h3, 17px) / 1.35
      var(--d-font, Arial, Helvetica, sans-serif);
    letter-spacing: 0;
    text-transform: none;
  }

  /* ========================================================== 5. MESSAGES
     stylesheet.css:137-155 printed red text beside a 30px icon; now a tinted box on the
     10px radius, the icon at 20px beside the text. A block box (not flex) so a link
     inside a message stays in its sentence; the icon hangs in the left padding. */
  :is(
    .messageStackError,
    .messageStackWarning,
    .messageStackSuccess,
    .messageStackCaution
  ) {
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--d-error-line, #f0c7c2);
    border-radius: var(--d-radius, 10px);
    background: var(--d-error-bg, #fdf2f1);
    color: var(--d-error-ink, #a3261b);
    font: 400 var(--d-fs-body, 14px) / 1.45
      var(--d-font, Arial, Helvetica, sans-serif);
    text-align: left;
  }
  .messageStackSuccess {
    border-color: var(--d-success-line, #bfe0d3);
    background: var(--d-success-bg, #eef8f4);
    color: var(--d-success-ink, #1d6b55);
  }
  .messageStackCaution {
    border-color: var(--d-caution-line, #ecd9a0);
    background: var(--d-caution-bg, #fff8e1);
    color: var(--d-caution-ink, #6b5200);
  }
  :is(
    .messageStackError,
    .messageStackWarning,
    .messageStackSuccess,
    .messageStackCaution
  ):has(> img:first-child) {
    padding-left: 46px;
  }
  :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    )
    > img:first-child {
    position: absolute;
    top: 12px;
    left: 16px;
    width: 20px;
    height: auto;
    margin: 0;
  }
  :is(
      .messageStackError,
      .messageStackWarning,
      .messageStackSuccess,
      .messageStackCaution
    )
    a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}