/* ==========================================================================
   Desktop shell, theme9star (9starmedia.com). 2026-10-25, docs/DESKTOP-REFRESH-9STAR.md
   section 9 (S.*). DESKTOP ONLY: every rule sits inside @media (min-width: 1024px), so
   phones and tablets (1023px and below) are untouched.

   Covers the page chrome, in the charcoal band + amber language the phone site set:
     1. header band: nav (amber text + 3px bar on hover / current), utility links, cart
        cart link, currency globe, search as one unit. The wordmark, tagline, band texture and
        every position stay as they are.
     2. page title frame and breadcrumbs
     3. footer (flat panel, 13px nav, legal links)
     4. EZ pages (/about, /faq): measure, type, prose links; the FAQ accordion
     5. reviews listing (/index.php?main_page=reviews): cards, small buttons, pagination

   Colour roles: amber (--d-brand) is a FILL, or text only on the charcoal band (5.82:1).
   On white the brand as text / ring is --d-brand-text. Reads var(--d-*) from
   stylesheet_zzz_d_tokens.css (it sorts before this file, and custom properties resolve at
   computed time anyway). This file sorts after every other sheet, so equal specificity wins.
   Buttons (.ns-btn) are looked after by stylesheet_zzz_d_base.css; this file only sizes and
   places them. No webfonts, transitions only
   inside prefers-reduced-motion: no-preference.
   ========================================================================== */

@media (min-width: 1024px) {
  /* ------------------------------------------------------------------------
     1. HEADER BAND
     tm: .wrapper and #header .menu are overflow:hidden (a float container), which
     would cut the focus rings off at their edges. flow-root contains the floats the
     same way without clipping.
     ------------------------------------------------------------------------ */
  #header .main-width2 .wrapper {
    overflow: visible;
    display: flow-root;
  }
  #header .main-width2 .menu {
    overflow: visible;
    display: flow-root;
  }

  /* ---- top nav: white uppercase; hover and current = amber text + a 3px bar, so the
     state is never colour alone. The link becomes an inline-block with the same 35px
     line box (text and list positions unchanged); its box stops 5px short and the margin
     gives the 5px back, so the bar sits clear of the "9" below the first item. */
  #header .main-width2 .menu ul li a {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    padding: 0 4px;
    margin: 0 -4px 5px;
    color: var(--d-top-ink);
    text-decoration: none;
    box-shadow: inset 0 -3px 0 transparent;
  }
  #header .main-width2 .menu ul li a:hover,
  #header .main-width2 .menu ul li.selected a {
    color: var(--d-top-hover);
    box-shadow: inset 0 -3px 0 var(--d-brand);
  }

  /* ---- utility links (Log In / Shopping Cart / Checkout) and their ">" separators */
  #header .right-head .navigation {
    color: var(--d-top-ink-2);
  }
  #header .right-head .navigation a {
    display: inline-block;
    padding: 2px 4px; /* a 24px-high target; the negative margin keeps the old line box */
    margin: -2px -4px;
    border-radius: 4px;
    color: var(--d-top-ink-2);
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
  }
  #header .right-head .navigation a:hover {
    color: var(--d-top-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Native currency picker over the same globe used on mobile. The row keeps
     its original height so the search remains aligned with the page edge. */
  #header .right-head .currencies:has(> form.ns-desktop-currency) {
    width: 44px;
    padding: 32px 0 14px;
    margin-right: 16px;
    color: var(--d-top-ink-2);
  }
  #header .currencies form.ns-desktop-currency {
    width: 44px;
    height: 44px;
    margin: 0;
  }
  #header .currencies .ns-desktop-currency__control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--d-radius);
  }
  #header .currencies .ns-desktop-currency__control svg {
    width: 24px;
    height: 24px;
    flex: none;
    pointer-events: none;
  }
  #header .currencies .ns-desktop-currency__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #header .right-head .currencies .ns-desktop-currency select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-ink);
    opacity: 0;
    font: 400 16px/1.2 var(--d-font);
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
  }
  #header .currencies form:focus-within .ns-desktop-currency__control {
    outline: var(--d-focus-w) solid var(--d-focus-on-dark);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    #header .currencies .ns-desktop-currency__control:hover {
      background: rgb(255 255 255 / 0.12);
      color: var(--d-top-hover);
    }
  }

  /* ---- search: one unit. Same footprint as before (about 360 x 38, flush on the foot of
     the band, where the white page begins), so the corners that dock into the page stay
     square and the two top corners take the radius-10 system. The white field and the
     amber button are flush; the frame carries the edge and the focus ring. */
  #header .right-head .search {
    position: relative;
    left: var(--ns-search-edge-offset, 0px);
    padding-top: 14px; /* keep the search aligned with the page edge */
    overflow: visible; /* tm clips it; the focus ring has to show */
  }
  @media (max-width: 1139px) {
    #header .right-head .search {
      padding-right: 0;
    }
  }
  #header .search form > div {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    width: 360px;
    height: 38px;
    border-radius: var(--d-radius) var(--d-radius) 0 0;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22);
    clip-path: inset(
      -3px -3px 0 -3px
    ); /* ring on the top and sides only, never over the page */
  }
  #header .search form > div:focus-within {
    box-shadow: 0 0 0 2px var(--d-focus-on-dark);
  }
  #header .search .corner {
    display: none;
  }
  #header .right-head .search .input1 {
    flex: 1 1 auto;
    float: none;
    min-width: 0;
    width: auto;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--d-radius) 0 0 0;
    background: var(--d-surface);
    color: var(--d-ink);
    font: 400 14px/1.3 var(--d-font);
    outline: 0; /* the frame shows :focus-within */
    -webkit-appearance: none;
    appearance: none;
  }
  #header .right-head .search input.input2.ns-btn {
    flex: 0 0 auto;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0 var(--d-radius) 0 0;
    background: var(--d-brand) none;
    color: var(--d-brand-ink);
    font: 600 14px/1 var(--d-font);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #header .right-head .search input.input2.ns-btn:active {
    background: var(--d-brand-press);
    transform: none; /* no press-scale inside a flush unit */
  }

  /* ---- focus on the band: amber (5.82:1) */
  #header .main-width2 .menu ul li a:focus-visible,
  #header .right-head .navigation a:focus-visible,
  #header .right-head .lang a:focus-visible,
  #header .right-head .currencies select:focus-visible,
  #header .logo a:focus-visible,
  #header .logo2 a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-dark);
    outline-offset: var(--d-focus-offset);
  }
  #header .right-head .search input.input2.ns-btn:focus-visible {
    outline: var(--d-focus-w) solid var(--d-brand-ink); /* inside the amber, charcoal */
    outline-offset: -5px;
  }
  /* ---- band transitions (dial 3: colour and bar only, 120ms) */
  @media (prefers-reduced-motion: no-preference) {
    #header .main-width2 .menu ul li a {
      transition:
        color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }
    #header .right-head .navigation a {
      transition: color var(--d-dur) linear;
    }
    #header .right-head .search input.input2.ns-btn {
      transition: background-color var(--d-dur) linear;
    }
  }
  @media (hover: hover) {
    #header .right-head .search input.input2.ns-btn:hover {
      background: var(--d-brand-hover);
    }
  }

  /* ------------------------------------------------------------------------
     2. PAGE TITLE FRAME AND BREADCRUMBS
     The font of h1 is the base sheet's; here only its frame. The product's own #h1 is
     the product sheet's.
     ------------------------------------------------------------------------ */
  /* The fixed 1050px background image ends early in the wider fluid tier. */
  #contentMainWrapper {
    background-color: var(--d-surface);
  }
  #column-center {
    color: var(--d-ink);
  }
  #column-center h1:not(#h1, #productListHeading):not(#categoryIcon h1) {
    margin: 0 0 var(--d-gap);
    padding: 0;
    border: 0;
  }
  #column-center #navBreadCrumb {
    margin: 0 0 12px;
    padding: 0;
    color: var(--d-ink-2);
    font: 400 12px/1.5 var(--d-font);
  }
  #column-center #navBreadCrumb a {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #column-center #navBreadCrumb a:hover {
    color: var(--d-ink);
  }
  #column-center .content {
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }

  /* ------------------------------------------------------------------------
     3. FOOTER: flat panel and a hairline instead of the bed-sheet texture. The nav
     was spaced with runs of  : as a flex row with the text at font-size 0 the
     spacing is margins, as on the phone.
     ------------------------------------------------------------------------ */
  #footer {
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line);
  }
  #footer .footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 24px 16px 6px;
    font-size: 0;
  }
  #footer .footer-menu a {
    display: inline-block;
    margin-right: 28px;
    padding: 6px 0;
    color: var(--d-ink-2);
    font: 700 13px/1.2 var(--d-font);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
  }
  #footer .footer-menu a:last-child {
    margin-right: 0;
  }
  #footer .footer-menu a:hover {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  #footer .copyright {
    padding: 4px 16px 28px;
    color: var(--d-ink-2);
    font: 400 12px/1.6 var(--d-font);
  }
  #footer .copyright a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #footer .copyright a:hover {
    color: var(--d-brand-text);
  }
  #footer .copyright .legalLinks a {
    margin-left: 14px;
    color: var(--d-brand-text);
  }
  #footer .copyright .legalLinks a:first-child {
    margin-left: 6px;
  }
  #footer .copyright .legalLinks a:hover {
    color: var(--d-ink);
  }
  #footer a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
    border-radius: 4px;
  }
  @media (prefers-reduced-motion: no-preference) {
    #footer a {
      transition: color var(--d-dur) linear;
    }
  }

  /* ------------------------------------------------------------------------
     4. EZ PAGES (/about, /faq). Page content is a bare <div> of text and <br>s under
     #ezPageDefault. The artists page (#artistGrid) is the listings sheet's: its grid
     keeps the full width and its link look.
     ------------------------------------------------------------------------ */
  #ezPageDefault > div:not(:has(#artistGrid)) {
    max-width: var(--d-measure);
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: 1.6;
  }
  #ezPageDefault > div:not(:has(#artistGrid)) a:not(.ns-btn) {
    color: #414141;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #ezPageDefault > div:not(:has(#artistGrid)) a:not(.ns-btn):hover {
    color: var(--d-ink);
  }
  #ezPageDefault > div:not(:has(#artistGrid)) img:not(.logo) {
    border-radius: var(--d-radius-cover);
  }
  #ezPageDefault > div:not(:has(#artistGrid)) h2 {
    margin: 28px 0 8px;
  }
  #ezPageDefault > div:not(:has(#artistGrid)) h3 {
    margin: 20px 0 6px;
  }
  #ezPageDefault > div:not(:has(#artistGrid)) :is(h2, h3):first-child {
    margin-top: 0;
  }

  /* the FAQ is rows, not prose: they take the column's width (the answers keep the measure) */
  #pageBody #ezPageDefault > div:has(> details.faq-item) {
    max-width: none;
  }

  /* ---- FAQ: its page has a second h1 inside the content ("Frequently Asked
     Questions"). Under the page title it reads as a section heading, so it takes the h2
     look and a calm gap. The accordion follows below. */
  #pageBody #ezPageDefault > div > h1 {
    margin: 0 0 12px;
    padding: 0;
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
    text-transform: none;
  }

  /* ---- FAQ accordion: hairline rows of 44px at least, a CSS chevron at the right
     that turns when open, an open question in the brand as text (never amber on white) */
  #pageBody details.faq-item {
    padding: 0;
    border-bottom: 1px solid var(--d-line);
  }
  #pageBody details.faq-item:first-of-type {
    border-top: 1px solid var(--d-line);
  }
  /* the question text stays on the column's left edge: 6px of padding is given back by a
     -6px margin, so the focus ring below has room round the text (the hairlines belong to
     the <details>, so they do not move) */
  #pageBody details.faq-item > summary {
    position: relative;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 -6px;
    padding: 12px 38px 12px 6px;
    list-style: none;
    color: var(--d-ink);
    font: 600 var(--d-fs-body) / 1.4 var(--d-font);
    cursor: pointer;
  }
  #pageBody details.faq-item > summary::-webkit-details-marker {
    display: none;
  }
  #pageBody details.faq-item > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--d-ink-2);
    border-bottom: 2px solid var(--d-ink-2);
    transform: rotate(45deg);
  }
  #pageBody details.faq-item[open] > summary {
    color: var(--d-brand-text);
  }
  #pageBody details.faq-item[open] > summary::after {
    margin-top: -2px;
    border-color: var(--d-brand-text);
    transform: rotate(225deg);
  }
  #pageBody details.faq-item > summary:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: 0;
    border-radius: 6px;
  }
  #pageBody details.faq-item .faq-answer {
    max-width: var(--d-measure);
    padding: 0 32px 16px 0;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: 1.6;
  }
  #pageBody details.faq-item .faq-answer p {
    margin: 0 0 10px;
  }
  #pageBody details.faq-item .faq-answer :is(ol, ul) {
    margin: 0 0 10px;
    padding-left: 22px;
  }
  #pageBody details.faq-item .faq-answer ol {
    list-style: decimal;
  }
  #pageBody details.faq-item .faq-answer ul {
    list-style: disc;
  }
  #pageBody details.faq-item .faq-answer li {
    margin: 0 0 4px;
    padding-left: 2px;
  }
  #pageBody details.faq-item .faq-answer > :last-child {
    margin-bottom: 0;
  }
  #pageBody details.faq-item .faq-answer a {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #pageBody details.faq-item .faq-answer a:hover {
    color: var(--d-ink);
  }
  @media (prefers-reduced-motion: no-preference) {
    #pageBody details.faq-item > summary {
      transition: color var(--d-dur) linear;
    }
    #pageBody details.faq-item > summary::after {
      transition:
        transform var(--d-dur) var(--d-ease),
        margin-top var(--d-dur) var(--d-ease),
        border-color var(--d-dur) linear;
    }
  }
  @media (hover: hover) {
    #pageBody details.faq-item > summary:hover {
      color: var(--d-brand-text);
    }
    #pageBody details.faq-item > summary:hover::after {
      border-color: var(--d-brand-text);
    }
  }

  /* ------------------------------------------------------------------------
     5. REVIEWS LISTING. Each review is a card: hairline, radius 14, the cover beside
     the title, stars, date and excerpt as before (the floats stay), small secondary
     buttons on one line. The button look is the base sheet's; here its size and place.
     ------------------------------------------------------------------------ */
  #reviewsDefault .navSplitPagesResult {
    float: none;
    margin: 0 0 12px;
    color: var(--d-ink-2);
    font-size: var(--d-fs-ui);
    line-height: 1.4;
  }
  #reviewsDefault .navSplitPagesResult strong {
    color: var(--d-ink);
  }
  #reviewsDefault .navSplitPagesLinks {
    float: none;
    margin: 0 0 20px;
  }
  #reviewsDefault .tie {
    margin: 0 0 var(--d-gap);
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
  }
  #reviewsDefault .tie .tie-indent {
    padding: 16px 20px;
  }
  #reviewsDefault .smallProductImage {
    width: 150px; /* one slot for every cover, so the text column lines up */
    margin: 0;
    padding: 0 24px 0 0; /* stylesheet_main.css pads it 40px */
  }
  /* stylesheet_main.css:54 frames .image with a 1px grey line and 2px of white */
  #reviewsDefault .smallProductImage .image,
  #reviewsDefault .smallProductImage .image a {
    display: block;
    padding: 0;
    border: 0;
  }
  #reviewsDefault .smallProductImage img {
    display: block;
    border: 0;
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  #reviewsDefault .name-type {
    display: block;
    color: var(--d-ink);
    font: 700 15px/1.3 var(--d-font);
    text-decoration: none;
  }
  #reviewsDefault .name-type a {
    color: inherit;
    text-decoration: none;
  }
  #reviewsDefault .name-type a:hover {
    color: var(--d-brand-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #reviewsDefault .rating {
    padding: 4px 0 0;
  }
  #reviewsDefault .date-added {
    margin: 0 0 10px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: var(--d-fs-ui);
    line-height: 1.4;
  }
  #reviewsDefault .content {
    margin: 0;
    color: var(--d-ink);
    font-size: var(--d-fs-body);
    line-height: var(--d-lh-body);
  }
  #reviewsDefault .rev-but {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
  }
  #reviewsDefault .rev-but .btn1 {
    float: none;
    margin: 0;
  }
  #reviewsDefault .rev-but .ns-btn {
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
    white-space: nowrap;
  }

  /* pagination placed as a row of chips (the list stacks one number per line otherwise);
     same chip as the listings: 32px, radius 10, a control edge, the current page amber
     with charcoal text */
  #reviewsDefault ul.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #reviewsDefault ul.pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #reviewsDefault ul.pagination li > a,
  #reviewsDefault ul.pagination li.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    color: var(--d-brand-text);
    font: 600 var(--d-fs-ui) / 1 var(--d-font);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  #reviewsDefault ul.pagination li.current {
    border-color: var(--d-brand);
    background: var(--d-brand);
    color: var(--d-brand-ink);
  }
  #reviewsDefault ul.pagination li > a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }
  @media (hover: hover) {
    #reviewsDefault ul.pagination li > a:hover {
      background: var(--d-brand-soft);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #reviewsDefault ul.pagination li > a {
      transition: background-color var(--d-dur) linear;
    }
  }
}