/* ==========================================================================
   Desktop shell, theme-bahai (bahaimusicstore.com). 2026-10-25.
   Spec: docs/DESKTOP-REFRESH-BMS.md, section 9 (group "shell").

   Covers the desktop chrome: header (top Log In / account links, cart block, flag,
   currency select, search frame and Search button, social icons, olive menu bar), the page
   title spacing and text colour of the centre column, breadcrumbs, the footer band, EZ
   pages (/about, /faq and the other #ezPageDefault pages, plus the static info pages),
   the FAQ accordion and the All Reviews listing.

   DESKTOP ONLY. Every rule sits inside @media (min-width: 1024px); phones and tablets
   (1023px and below) are not changed by a single pixel. The --d-* tokens come from
   stylesheet_zzz_d_tokens.css (also desktop only). This sheet sorts after every other
   stylesheet (stylesheet_zzz_d_* follows stylesheet_zz_*), so at equal specificity it wins.

   Surfaces and ink: olive #a4a87e stays the surface of the menu bar, footer band and cart
   block; text on olive is --d-olive-ink (#1f2a24, 5.99:1), never white. Dark sage
   (--d-brand) is the one accent. Radius system: controls 10px, cards 14px, covers 6px.
   Layout, link order and the 505px right half of the header (the 1024-1139 tier in
   stylesheet_zz_9star.css reserves exactly that) are unchanged.
   Local custom properties are prefixed --sh- (this sheet only).
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --sh-olive-rule: rgb(
      31 42 36 / 0.25
    ); /* hairlines on olive: menu separators, footer rule */
    --sh-olive-wash: rgb(255 255 255 / 0.18); /* menu hover and current wash */
    --sh-caret: var(--d-ink-2); /* select caret */
  }

  /* ------------------------------------------------------------ page text colour */
  /* the theme's #4d5255 becomes the shared ink; headings, links and buttons set their own */
  body {
    color: var(--d-ink);
  }
  #column-center {
    color: var(--d-ink);
  }

  /* ====================================================================== header */

  /* top links: "Log In", or Log Off / My Account / Cart / Checkout. The ">" between them
     is white text on the white header and stays invisible, as it always was. */
  #header .navigation a {
    padding: 2px 0;
    border-radius: 3px;
    color: var(--d-ink-2);
    font: 400 13px/20px var(--d-font);
    text-decoration: none;
  }
  #header .navigation a:hover {
    color: var(--d-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #header .navigation a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* cart block: olive surface and cart.gif kept, digits turn from sage (2.5:1) to olive ink.
     The whole block is the link (it was the digits only): a stretched ::before. */
  #header .cart {
    position: relative;
    border-radius: var(--d-radius);
  }
  #header .cart a {
    color: var(--d-olive-ink);
  }
  #header .cart a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  #header .cart a:hover {
    color: var(--d-olive-ink);
  }
  @media (hover: hover) {
    #header .cart:hover {
      box-shadow: inset 0 0 0 2px var(--d-olive-ink);
    }
  }
  /* the ring goes round the whole block, in olive ink; without :has() the link's own ring stays */
  @supports selector(:has(*)) {
    #header .cart a:focus-visible {
      outline: 0;
    }
    #header .cart:has(a:focus-visible) {
      outline: var(--d-focus-w) solid var(--d-focus-on-olive);
      outline-offset: var(--d-focus-offset);
    }
  }

  /* language flag */
  #header .lang a {
    border-radius: 3px;
  }
  #header .lang a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* currency select: 32px, radius 10, #8f928b edge, caret from gradients. 108px wide (was 73px,
     which cut "US Dollar" to "US Dolla"; the row has the room and the right half stays 505px).
     Vertical centre lines up with the cart block (the label text is white and unseen). */
  #header .currencies {
    padding-top: 26px;
  }
  #header .currencies form > div {
    display: flex;
    align-items: center;
    height: var(--d-field-h-sm);
  }
  #header .currencies select {
    box-sizing: border-box;
    width: 108px;
    height: var(--d-field-h-sm);
    margin: 0;
    padding: 0 28px 0 10px;
    border: 1px solid var(--d-field);
    border-radius: var(--d-radius);
    background-color: var(--d-surface);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--sh-caret) 50%),
      linear-gradient(135deg, var(--sh-caret) 50%, transparent 50%);
    background-position:
      calc(100% - 15px) 50%,
      calc(100% - 11px) 50%;
    background-size:
      4px 4px,
      4px 4px;
    background-repeat: no-repeat;
    color: var(--d-ink);
    font: 400 12px/1.3 var(--d-font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #header .currencies select:hover {
    border-color: var(--d-field-hover);
  }
  #header .currencies select:focus {
    border-color: var(--d-brand);
  }
  #header .currencies select:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* search: a 2px sage frame (radius 10, 37px inside, 305px outside as before) with a white
     field and a flush primary Search button. */
  #header .search {
    box-sizing: content-box;
    width: 301px;
    padding: 0;
    border: 2px solid var(--d-brand);
    border-radius: var(--d-radius);
    background: var(--d-surface);
    overflow: hidden;
  }
  #header .search form > div {
    display: flex;
    align-items: stretch;
    height: 37px;
  }
  #header .search .corner {
    display: none;
  }
  #header .search .input1 {
    box-sizing: border-box;
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    height: 37px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: var(--d-surface);
    color: var(--d-ink);
    font: 400 14px / normal var(--d-font);
  }
  /* the field's focus shows on the frame: a white gap and a sage ring (the field's own outline
     would sit outside the frame's overflow clip and never be seen) */
  #header .search .input1:focus {
    outline: 0;
  }
  #header .search:has(.input1:focus-visible) {
    box-shadow:
      0 0 0 2px var(--d-surface),
      0 0 0 4px var(--d-brand);
  }
  @supports not selector(:has(*)) {
    #header .search .input1:focus-visible {
      outline: var(--d-focus-w) solid var(--d-focus);
      outline-offset: -4px;
    }
  }
  /* beats #header .search input[type="submit"] in stylesheet_tm.css (1,2,1) and the base
     button rules; hover and press are written out here because this selector outranks theirs */
  #header .search input.ns-btn[type="submit"] {
    flex: 0 0 auto;
    float: none;
    clear: none;
    box-sizing: border-box;
    width: auto;
    height: 37px;
    min-height: 0;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: var(--d-brand);
    color: var(--d-brand-ink);
    font: 600 var(--d-fs-btn) / 1 var(--d-font);
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transform: none;
  }
  @media (hover: hover) {
    #header .search input.ns-btn[type="submit"]:hover {
      background: var(--d-brand-hover);
    }
  }
  #header .search input.ns-btn[type="submit"]:active {
    background: var(--d-brand-press);
  }
  #header .search input.ns-btn[type="submit"]:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-brand);
    outline-offset: -4px;
  }

  /* social icons: same 23px icons and 26px pitch, each its own link box so the ring fits */
  #header_social a {
    display: block;
    float: left;
    margin: 0 3px 0 0;
    border-radius: 4px;
  }
  #header_social img {
    display: block;
    float: none;
    margin: 0;
    border-radius: 4px;
  }
  @media (hover: hover) {
    #header_social a:hover {
      opacity: 0.8;
    }
  }
  #header_social a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* menu bar: olive surface, olive-ink text (white on olive was 2.48:1), hairline separators,
     hover and current = a light wash plus a 3px inset underline. The 15px that sat in the li
     moves into the link so the wash covers the whole item (item width is unchanged). */
  #header .menu {
    border-radius: var(--d-radius);
  }
  #header .menu ul li {
    padding-right: 0;
  }
  #header .menu ul li a {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 35px;
    padding: 0 16px;
    border-left: 0;
    color: var(--d-olive-ink);
    font: 700 13px/35px var(--d-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: top;
  }
  #header .menu ul li:not(:first-child) a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--sh-olive-rule);
  }
  #header .menu ul li a:hover,
  #header .menu ul li.selected a {
    color: var(--d-olive-ink);
  }
  #header .menu ul li.selected a {
    background: var(--sh-olive-wash);
    box-shadow: inset 0 -3px 0 var(--d-olive-ink);
  }
  @media (hover: hover) {
    #header .menu ul li a:hover {
      background: var(--sh-olive-wash);
      box-shadow: inset 0 -3px 0 var(--d-olive-ink);
    }
  }
  #header .menu ul li a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-olive);
    outline-offset: -4px;
  }

  /* logo link: the inline <a> boxed only the strut line above the image, so its focus ring was a
     thin bar over the logo. inline-block + top alignment makes the link box the image box; the
     header does not move (logo block stays 172px at 1440, menu top stays 216px). */
  #header .logo a {
    display: inline-block;
    vertical-align: top;
  }
  #header .logo a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
    border-radius: 4px;
  }

  /* ============================================================ centre column frame */

  /* page titles: spacing only (the type metrics belong to the base sheet). The theme gave
     every title padding 5px 0 and margin-bottom 5px, sized for 60px type. */
  #column-center h1 {
    margin: 4px 0 16px;
    padding: 0;
  }

  /* breadcrumbs (this theme draws none today; if #navBreadCrumb ever appears) */
  #navBreadCrumb {
    margin: 0 0 12px;
    padding: 4px 0 0;
    color: var(--d-ink-2);
    font: 400 12px/1.4 var(--d-font);
  }
  #navBreadCrumb a {
    color: var(--d-brand);
    text-decoration: none;
  }
  #navBreadCrumb a:hover {
    color: var(--d-brand-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* =================================================================== footer band */

  /* olive band kept; its links and copyright take olive ink. A hairline now parts the links
     from the copyright (the 20px gap between them is 10 + 1 + 9).
     The theme's .wrapper is overflow:hidden and sat flush on the text, so every focus ring was cut
     off at its top (and the first one at its left, the copyright links at their bottom). The band's
     20px padding is split into 8/12/14 on #footer plus 12/8/6 on the wrapper (border-box, so the
     link rows keep their 1010px measure): the band measures the same, the rings now fit. */
  #footer {
    padding: 8px 12px 14px;
  }
  #footer .wrapper {
    box-sizing: border-box;
    padding: 12px 8px 6px;
  }
  #footer .footer-menu {
    margin-bottom: 10px;
  }
  #footer .footer-menu a {
    padding: 6px 0;
    border-radius: 2px;
    color: var(--d-olive-ink);
    font: 700 13px/14px var(--d-font);
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
  }
  #footer .footer-menu a:hover {
    color: var(--d-olive-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  #footer .copyright {
    padding-top: 9px;
    border-top: 1px solid var(--sh-olive-rule);
    color: var(--d-olive-ink);
    font: 400 var(--d-fs-small) / 14px var(--d-font);
  }
  #footer .copyright a {
    border-radius: 2px;
    color: var(--d-olive-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  #footer .copyright a:hover {
    color: var(--d-olive-ink);
    text-decoration: none;
  }
  #footer a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus-on-olive);
    outline-offset: var(--d-focus-offset);
  }

  /* ================================================================== EZ pages */
  /* #ezPageDefault holds /about, /faq, the blog and the other EZ pages; the artist page
     (#artistGrid, the listings sheet's) is excluded. The About text is one div of text and
     <br> pairs, so the measure goes on the div. */
  #ezPageDefault > div:not(#artistGrid) {
    max-width: var(--d-measure);
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.6 var(--d-font);
  }
  /* (the artist page starts with an empty div: no margin on that) */
  #ezPageDefault > div:not(#artistGrid):not(:empty) {
    margin-bottom: 16px;
  }
  #ezPageDefault > div:not(#artistGrid) p {
    margin: 0 0 12px;
  }
  #ezPageDefault > div:not(#artistGrid) :is(ul, ol) {
    margin: 0 0 12px;
    padding-left: 30px; /* room for the two-digit numbers of the FAQ's 12-step list */
  }
  #ezPageDefault > div:not(#artistGrid) ul {
    list-style: disc;
  }
  #ezPageDefault > div:not(#artistGrid) ol {
    list-style: decimal;
  }
  #ezPageDefault > div:not(#artistGrid) li {
    margin: 0 0 4px;
  }
  #ezPageDefault > div:not(#artistGrid) h2 {
    margin: 28px 0 10px;
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
  }
  #ezPageDefault > div:not(#artistGrid) h3 {
    margin: 22px 0 8px;
    font: 700 var(--d-fs-h3) / 1.35 var(--d-font);
  }
  /* the FAQ's content carries a second <h1> ("Frequently Asked Questions"): it reads as the
     page's sub-heading, so it takes the h2 size */
  #ezPageDefault > div:not(#artistGrid) h1 {
    margin: 0 0 14px;
    padding: 0;
    font: 700 var(--d-fs-h2) / 1.25 var(--d-font);
    letter-spacing: -0.2px;
  }
  /* body links keep the site's #414141 (owner, 2026-10-25), underlined; hover thickens
     the underline and turns ink, as the generic centre-column link rule does */
  #ezPageDefault > div:not(#artistGrid) a {
    color: #414141; /* 10.0:1 on white */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  #ezPageDefault > div:not(#artistGrid) a:hover {
    color: var(--d-ink);
    text-decoration-thickness: 2px;
  }
  #ezPageDefault > div:not(#artistGrid) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--d-radius-cover);
  }
  /* the FAQ rows take the column's full width; only the answers keep the measure */
  #ezPageDefault > div:not(#artistGrid):has(details.faq-item) {
    max-width: none;
  }

  /* the static info pages (privacy, conditions, shipping, accessibility, site map intro)
     share the same text frame */
  :is(#privacy, #conditions, #shippingInfo, #accessibility, #siteMap)
    > .content {
    max-width: var(--d-measure);
    margin-bottom: 16px;
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.6 var(--d-font);
  }
  :is(#privacy, #conditions, #shippingInfo, #accessibility, #siteMap)
    > .content
    p {
    margin: 0 0 12px;
  }
  :is(#privacy, #conditions, #shippingInfo, #accessibility, #siteMap)
    > .content
    a {
    color: #414141; /* the site's body-link colour, 10.0:1 on white */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  :is(#privacy, #conditions, #shippingInfo, #accessibility, #siteMap)
    > .content
    a:hover {
    color: var(--d-ink);
    text-decoration-thickness: 2px;
  }

  /* ================================================================ FAQ accordion */
  /* rows divided by hairlines (no box), a CSS chevron at the right, the open question in sage
     (it was amber) */
  details.faq-item {
    padding: 0;
    border-bottom: 1px solid var(--d-line);
  }
  details.faq-item:first-of-type {
    border-top: 1px solid var(--d-line);
  }
  details.faq-item > summary {
    position: relative;
    display: block;
    padding: 12px 28px 12px 0;
    border-radius: 4px;
    color: var(--d-ink);
    font: 600 var(--d-fs-body) / 1.4 var(--d-font);
    list-style: none;
    cursor: pointer;
  }
  details.faq-item > summary::marker {
    content: "";
  }
  details.faq-item > summary::-webkit-details-marker {
    display: none;
  }
  details.faq-item > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-right: 2px solid var(--d-ink-2);
    border-bottom: 2px solid var(--d-ink-2);
    transform: rotate(45deg);
  }
  details.faq-item[open] > summary {
    color: var(--d-brand);
  }
  details.faq-item[open] > summary::after {
    margin-top: -2px;
    border-color: var(--d-brand);
    transform: rotate(225deg);
  }
  @media (hover: hover) {
    details.faq-item > summary:hover {
      color: var(--d-brand);
    }
    details.faq-item > summary:hover::after {
      border-color: var(--d-brand);
    }
  }
  details.faq-item > summary:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
    border-radius: 6px;
  }
  details.faq-item .faq-answer {
    max-width: var(--d-measure);
    padding: 0 28px 16px 0;
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / 1.6 var(--d-font);
  }
  /* a closed answer takes no space (Chrome keeps the boxes of a closed <details>) */
  details.faq-item:not([open]) > .faq-answer {
    display: none;
  }
  details.faq-item .faq-answer > :last-child {
    margin-bottom: 0;
  }

  /* ================================================== All Reviews listing (reviews) */
  /* one card per review: 1px hairline, radius 14, cover at 6px with its hairline ring, title
     15px, date 13px, the excerpt, then two small secondary buttons. #reviewsBody keeps this to
     the list; the one-product review pages share #reviewsDefault. */
  #reviewsBody #reviewsDefault .tie {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-lg);
    background: var(--d-surface);
  }
  #reviewsBody #reviewsDefault .tie-indent {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 20px;
    align-items: start;
    padding: 0;
  }
  #reviewsBody #reviewsDefault .tie-indent > .smallProductImage {
    grid-column: 1;
    grid-row: 1 / span 5;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }
  #reviewsBody
    #reviewsDefault
    .tie-indent
    > :is(.name-type, .rating, .date-added, .content, .rev-but) {
    grid-column: 2;
  }
  #reviewsBody #reviewsDefault .tie-indent > .clear {
    display: none;
  }
  /* the theme frames the cover with a bordered, padded span.image */
  #reviewsBody #reviewsDefault .smallProductImage .image {
    display: block;
    padding: 0;
    border: 0;
  }
  #reviewsBody #reviewsDefault .smallProductImage .image a {
    display: block;
  }
  #reviewsBody #reviewsDefault .smallProductImage img {
    display: block;
    border: 0;
    border-radius: var(--d-radius-cover);
    box-shadow: var(--d-cover-edge);
  }
  #reviewsBody #reviewsDefault .name-type {
    color: var(--d-ink);
    font: 700 15px/1.3 var(--d-font);
  }
  #reviewsBody #reviewsDefault .rating {
    margin: 6px 0 0;
    padding: 0;
  }
  #reviewsBody #reviewsDefault .rating img {
    display: block;
  }
  #reviewsBody #reviewsDefault .date-added {
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    color: var(--d-ink-2);
    font: 400 var(--d-fs-ui) / 1.4 var(--d-font);
  }
  #reviewsBody #reviewsDefault .content {
    margin: 12px 0 0;
    color: var(--d-ink);
    font: 400 var(--d-fs-body) / var(--d-lh-body) var(--d-font);
  }
  #reviewsBody #reviewsDefault .rev-but {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
  }
  #reviewsBody #reviewsDefault .rev-but .btn1 {
    float: none;
    margin: 0;
  }
  /* small buttons (the look is the base sheet's; the link buttons show their label, not the GIF) */
  #reviewsBody #reviewsDefault .rev-but a.ns-btn {
    min-height: var(--d-btn-h-sm);
    padding: var(--d-btn-pad-sm);
    font-size: var(--d-fs-btn-sm);
  }
  #reviewsBody #reviewsDefault .rev-but a.ns-btn > img {
    display: none;
  }
  #reviewsBody #reviewsDefault .rev-but a.ns-btn > .ns-btn__label {
    display: inline;
  }

  /* "Displaying 1 to 6 (of 7 Reviews)" and the page chips */
  #reviewsBody #reviewsDefault .navSplitPagesResult {
    margin: 0 0 10px;
    padding: 0;
    color: var(--d-ink-2);
    font: 400 var(--d-fs-ui) / 1.4 var(--d-font);
  }
  #reviewsBody #reviewsDefault .navSplitPagesResult strong {
    color: var(--d-ink);
  }
  #reviewsBody #reviewsDefault .navSplitPagesLinks {
    margin: 0 0 20px;
  }
  #reviewsBody #reviewsDefault .tie + .navSplitPagesResult {
    margin-top: 8px;
  }
  #reviewsBody #reviewsDefault ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #reviewsBody #reviewsDefault ul.pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #reviewsBody #reviewsDefault ul.pagination :is(li > a, li.current) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--d-radius);
    background: var(--d-surface-2);
    color: var(--d-brand);
    font: 600 var(--d-fs-ui) / 1 var(--d-font);
    text-decoration: none;
  }
  @media (hover: hover) {
    #reviewsBody #reviewsDefault ul.pagination li > a:hover {
      background: var(--d-surface-3);
    }
  }
  #reviewsBody #reviewsDefault ul.pagination li.current {
    background: var(--d-brand);
    color: var(--d-brand-ink);
  }
  #reviewsBody #reviewsDefault ul.pagination li > a:focus-visible {
    outline: var(--d-focus-w) solid var(--d-focus);
    outline-offset: var(--d-focus-offset);
  }

  /* ==================================================================== motion */
  /* colour, shadow, opacity and the chevron turn only; 120ms, nothing on load */
  @media (prefers-reduced-motion: no-preference) {
    #header .navigation a,
    #header .menu ul li a,
    #footer .footer-menu a,
    #footer .copyright a,
    details.faq-item > summary,
    #reviewsBody #reviewsDefault ul.pagination li > a {
      transition:
        color var(--d-dur) linear,
        background-color var(--d-dur) linear,
        box-shadow var(--d-dur) linear;
    }
    #header .cart,
    #header .search {
      transition: box-shadow var(--d-dur) linear;
    }
    #header .currencies select {
      transition: border-color var(--d-dur) linear;
    }
    #header .search input.ns-btn[type="submit"] {
      transition: background-color var(--d-dur) linear;
    }
    #header_social a {
      transition: opacity var(--d-dur) linear;
    }
    details.faq-item > summary::after {
      transition:
        transform var(--d-dur) var(--d-ease),
        border-color var(--d-dur) linear;
    }
  }
}