/* Component: GlobalHeader (default variant) ------------------------------- */
@layer components {
  .tp-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 30px;
    padding: 14px var(--tp-gutter);
    background: var(--tp-color-header-bg);
    border-bottom: var(--tp-border);
  }

  /* Mobile-only controls, hidden on tablet/desktop. */
  .tp-header__burger,
  .tp-header__wordmark {
    display: none;
  }

  .tp-header__brand {
    flex: none;
    display: block;
  }

  .tp-header__logo {
    display: block;
    width: var(--tp-header-logo-width);
    height: auto;
  }

  .tp-header__nav {
    min-width: 0;
  }

  .tp-header__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 12px 22px;
    font-size: var(--tp-size-nav);
    letter-spacing: var(--tp-track-nav-header);
    text-transform: uppercase;
    font-weight: var(--tp-weight-semibold);
  }

  .tp-header__item {
    position: relative;
  }

  .tp-header__link {
    display: inline-block;
    color: var(--tp-color-text);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
  }

  .tp-header__link:hover {
    color: var(--tp-color-cobalt);
  }

  .tp-header__link.is-active {
    color: var(--tp-color-ink);
    border-bottom-color: var(--tp-color-brass);
  }

  /* Dropdown (values from the Salon export's Collection panel). Shown on
     hover, keyboard focus within, or when the script marks it open. */
  .tp-header__dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 8px;
    min-width: 210px;
    background: var(--tp-color-card);
    border: 1px solid var(--tp-color-brass-border);
    box-shadow: var(--tp-shadow-dropdown);
    text-align: left;
    white-space: nowrap;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tp-dur-dropdown) ease;
  }

  /* A transparent bridge so the pointer can travel from the link to the panel. */
  .tp-header__dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9px;
    height: 9px;
  }

  @media (hover: hover) {
    .tp-header__item--has-children:hover .tp-header__dropdown {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .tp-header__item--has-children:focus-within .tp-header__dropdown,
  .tp-header__item--has-children.is-open .tp-header__dropdown {
    opacity: 1;
    pointer-events: auto;
  }

  .tp-header__sublink {
    display: block;
    padding: 8px 13px;
    font-size: var(--tp-size-label-xl);
    letter-spacing: var(--tp-track-h);
    font-weight: var(--tp-weight-semibold);
    text-transform: uppercase;
    color: var(--tp-color-text);
    border-bottom: var(--tp-border-soft);
    transition: background-color var(--tp-dur-fast) ease, color var(--tp-dur-fast) ease;
  }

  .tp-header__sublink:last-child {
    border-bottom: 0;
  }

  .tp-header__sublink:hover {
    color: var(--tp-color-cobalt);
    background: var(--tp-color-paper-dropdown-hover);
  }

  /* 2026-09-15: set in caps at the same size as its siblings, so the three
     dropdown items read as one list. It stays italic and ink-navy -- that is
     what marks it as the destination rather than a filter. */
  .tp-header__sublink--italic {
    color: var(--tp-color-ink);
    font-style: italic;
  }

  /* Icon cluster. */
  .tp-header__icons {
    flex: none;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--tp-color-text);
  }

  .tp-header__icon {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tp-color-text);
  }

  .tp-header__icon:hover {
    color: var(--tp-color-cobalt);
  }

  .tp-header__icon .tp-icon {
    width: 19px;
    height: 19px;
    stroke-width: 1.5;
  }

  .tp-header__count {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-meta);
    color: var(--tp-color-gold-text-deep);
  }

  .tp-header__count:empty {
    display: none;
  }

  /* ---- Tablet 700–1099 ---------------------------------------------- */
  @media (max-width: 1099px) {
    .tp-header {
      padding: 12px 22px;
      gap: 12px 30px;
    }

    .tp-header__logo {
      width: var(--tp-header-logo-width-tablet);
    }

    .tp-header__list {
      gap: 16px;
      font-size: var(--tp-size-nav-tablet);
      letter-spacing: var(--tp-track-meta);
      white-space: nowrap;
    }

    .tp-header__icons {
      gap: 16px;
    }

    .tp-header__sublink {
      padding: 10px 14px;
      font-size: var(--tp-size-label-l);
    }
  }

  /* ---- Mobile < 700 ------------------------------------------------- */
  @media (max-width: 699px) {
    .tp-header {
      flex-wrap: nowrap;
      gap: 8px;
      padding: 6px 10px;
    }

    .tp-header__brand,
    .tp-header__nav,
    .tp-header__icon--account,
    .tp-header__count {
      display: none;
    }

    .tp-header__burger {
      flex: none;
      width: var(--tp-tap-target);
      height: var(--tp-tap-target);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
    }

    .tp-header__burger-bar {
      display: block;
      width: 20px;
      height: 1px;
      background: var(--tp-color-text);
    }

    .tp-header__wordmark {
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: var(--tp-size-wordmark);
      letter-spacing: var(--tp-track-wide);
      text-transform: uppercase;
      font-weight: var(--tp-weight-semibold);
      color: var(--tp-color-ink);
      white-space: nowrap;
    }

    .tp-header__icons {
      gap: 0;
    }

    .tp-header__icon {
      width: var(--tp-tap-target);
      height: var(--tp-tap-target);
      justify-content: center;
      gap: 0;
    }

    .tp-header__icon .tp-icon {
      stroke-width: 1.6;
    }
  }

  /* ---- Narrow phones (< 430) ------------------------------------------
     The approved Collection mobile screen is drawn at 430. Its bar is a
     44px burger, three 44px icon targets and a wordmark centred on the
     VIEWPORT, not on the space between them — and the wordmark's own centre
     is therefore fixed while the right-hand cluster marches inward as the
     screen narrows. At 430 they clear by 14px; below roughly 418 they meet,
     and at 390 "The Collection" runs 6px under the search icon.

     The look depends on that true centring, so the fix buys the room back
     rather than moving the wordmark off centre: the bar's outer gutter and
     each icon's BOX narrow, and the label loses a little size and tracking.
     Every target keeps its full 44px height and the three approved icons all
     stay. 430 and above is the approved drawing, untouched.

     Applies to the default (Collection / shop / cart / account) variant only;
     the Salon and the narrative screens set their own geometry below. */
  @media (max-width: 429px) {
    .tp-header--default {
      /* One source of geometry, so the guard below cannot drift from it. */
      --tp-hdr-pad-x: 6px;
      --tp-hdr-icon-w: 40px;
      --tp-hdr-icon-count: 3;
      --tp-hdr-gutter: 8px;

      padding: 6px var(--tp-hdr-pad-x);
    }

    .tp-header--default .tp-header__icon {
      width: var(--tp-hdr-icon-w);
      height: var(--tp-tap-target);
    }

    .tp-header--default .tp-header__wordmark {
      font-size: 9.5px;
      letter-spacing: 0.16em;
      /* A centred box can only use twice its clearance to the cluster. If the
         label ever outgrows that, it clamps here instead of sliding under an
         icon. */
      max-width: calc(
        100vw
        - 2 * (var(--tp-hdr-icon-count) * var(--tp-hdr-icon-w)
               + var(--tp-hdr-pad-x) + var(--tp-hdr-gutter))
      );
      overflow: hidden;
    }
  }
}

/* ==========================================================================
   Salon variant — LOCKED (values from The Salon.dc.html / Tablet / Mobile).
   Literal values by ruling: Salon geometry is isolated from global tokens.
   ========================================================================== */
@layer components {
  /* ---- Desktop (≥ 1100) ---------------------------------------------- */
  .tp-header--salon {
    position: fixed;
    left: 0;
    top: var(--wp-admin--admin-bar--height, 0px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    background: none;
    border-bottom: 0;
    z-index: 8;
    container-type: inline-size;
    opacity: 1;
    transition: opacity 0.6s ease 0.3s;
  }

  .tp-header--salon .tp-header__nav {
    display: flex;
    align-items: center;
    padding: 1.8cqw 9cqw 3.2cqw;
    background: radial-gradient(ellipse 118% 118% at 50% 0%, rgba(246, 240, 229, 1) 0%, rgba(246, 240, 229, 0.9974) 4%, rgba(246, 240, 229, 0.9899) 8%, rgba(246, 240, 229, 0.9782) 12%, rgba(246, 240, 229, 0.9628) 16%, rgba(246, 240, 229, 0.9443) 20%, rgba(246, 240, 229, 0.9231) 24%, rgba(246, 240, 229, 0.9) 28%, rgba(246, 240, 229, 0.8735) 31.14%, rgba(246, 240, 229, 0.8336) 34.29%, rgba(246, 240, 229, 0.7838) 37.43%, rgba(246, 240, 229, 0.7273) 40.57%, rgba(246, 240, 229, 0.6673) 43.71%, rgba(246, 240, 229, 0.6071) 46.86%, rgba(246, 240, 229, 0.55) 50%, rgba(246, 240, 229, 0.5022) 52.57%, rgba(246, 240, 229, 0.4496) 55.14%, rgba(246, 240, 229, 0.395) 57.71%, rgba(246, 240, 229, 0.341) 60.29%, rgba(246, 240, 229, 0.2904) 62.86%, rgba(246, 240, 229, 0.2458) 65.43%, rgba(246, 240, 229, 0.21) 68%, rgba(246, 240, 229, 0.1839) 70.29%, rgba(246, 240, 229, 0.16) 72.57%, rgba(246, 240, 229, 0.1381) 74.86%, rgba(246, 240, 229, 0.1182) 77.14%, rgba(246, 240, 229, 0.1003) 79.43%, rgba(246, 240, 229, 0.0842) 81.71%, rgba(246, 240, 229, 0.07) 84%, rgba(246, 240, 229, 0.0563) 86.29%, rgba(246, 240, 229, 0.0425) 88.57%, rgba(246, 240, 229, 0.0294) 90.86%, rgba(246, 240, 229, 0.0178) 93.14%, rgba(246, 240, 229, 0.0084) 95.43%, rgba(246, 240, 229, 0.0022) 97.71%, rgba(246, 240, 229, 0) 100%);
  }

  .tp-header--salon .tp-header__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: max(9px, 1cqw);
    font-size: max(10.5px, 0.86cqw);
    letter-spacing: 0.13em;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 600;
    color: #2A2723;
  }

  /* Pipe separators between items (rendered as a pseudo so the menu stays data-driven). */
  .tp-header--salon .tp-header__item {
    display: inline-flex;
    align-items: center;
    gap: max(9px, 1cqw);
  }

  .tp-header--salon .tp-header__item + .tp-header__item::before {
    content: "|";
    color: #C9BFA8;
    font-weight: 600;
  }

  .tp-header--salon .tp-header__link {
    color: #2A2723;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
  }

  .tp-header--salon .tp-header__link:hover {
    color: #2F5DA8;
    border-bottom-color: #B08D4F;
  }

  .tp-header--salon .tp-header__link.is-active {
    color: #1E3A63;
    border-bottom-color: #B08D4F;
  }

  .tp-header--salon .tp-header__dropdown {
    margin-top: 0.5cqw;
    min-width: 15cqw;
    box-shadow: 0 0.4cqw 1cqw rgba(30, 58, 99, 0.16);
    background: rgba(252, 250, 244, 0.95);
    border: 1px solid #CBB98D;
  }

  .tp-header--salon .tp-header__sublink {
    padding: 0.55cqw 0.9cqw;
    font-size: max(9.5px, 0.78cqw);
    letter-spacing: 0.1em;
    color: #2A2723;
    border-bottom: 1px solid #EDE6D4;
  }

  .tp-header--salon .tp-header__sublink:last-child {
    border-bottom: 0;
  }

  .tp-header--salon .tp-header__sublink:hover {
    color: #2F5DA8;
    background: #F6F1E4;
  }

  .tp-header--salon .tp-header__sublink--italic {
    color: #1E3A63;
    font-style: italic;
  }

  .tp-header--salon .tp-header__icons {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 1.8cqw 7cqw 3.2cqw;
    background: radial-gradient(ellipse 118% 118% at 50% 0%, rgba(246, 240, 229, 1) 0%, rgba(246, 240, 229, 0.9974) 4%, rgba(246, 240, 229, 0.9899) 8%, rgba(246, 240, 229, 0.9782) 12%, rgba(246, 240, 229, 0.9628) 16%, rgba(246, 240, 229, 0.9443) 20%, rgba(246, 240, 229, 0.9231) 24%, rgba(246, 240, 229, 0.9) 28%, rgba(246, 240, 229, 0.8735) 31.14%, rgba(246, 240, 229, 0.8336) 34.29%, rgba(246, 240, 229, 0.7838) 37.43%, rgba(246, 240, 229, 0.7273) 40.57%, rgba(246, 240, 229, 0.6673) 43.71%, rgba(246, 240, 229, 0.6071) 46.86%, rgba(246, 240, 229, 0.55) 50%, rgba(246, 240, 229, 0.5022) 52.57%, rgba(246, 240, 229, 0.4496) 55.14%, rgba(246, 240, 229, 0.395) 57.71%, rgba(246, 240, 229, 0.341) 60.29%, rgba(246, 240, 229, 0.2904) 62.86%, rgba(246, 240, 229, 0.2458) 65.43%, rgba(246, 240, 229, 0.21) 68%, rgba(246, 240, 229, 0.1839) 70.29%, rgba(246, 240, 229, 0.16) 72.57%, rgba(246, 240, 229, 0.1381) 74.86%, rgba(246, 240, 229, 0.1182) 77.14%, rgba(246, 240, 229, 0.1003) 79.43%, rgba(246, 240, 229, 0.0842) 81.71%, rgba(246, 240, 229, 0.07) 84%, rgba(246, 240, 229, 0.0563) 86.29%, rgba(246, 240, 229, 0.0425) 88.57%, rgba(246, 240, 229, 0.0294) 90.86%, rgba(246, 240, 229, 0.0178) 93.14%, rgba(246, 240, 229, 0.0084) 95.43%, rgba(246, 240, 229, 0.0022) 97.71%, rgba(246, 240, 229, 0) 100%);
    gap: max(9px, 1.1cqw);
    color: #2A2723;
  }

  .tp-header--salon .tp-header__icon {
    gap: 0;
  }

  .tp-header--salon .tp-header__icon .tp-icon {
    width: 1.35cqw;
    height: 1.35cqw;
    min-width: 15px;
    min-height: 15px;
    stroke-width: 1.7;
  }

  .tp-header--salon .tp-header__count {
    display: none;
  }

  /* ---- Tablet (700–1099) --------------------------------------------- */
  @media (max-width: 1099px) {
    .tp-header--salon {
      align-items: flex-start;
      padding: 0;
    }

    .tp-header--salon .tp-header__nav {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 8px;
      padding: 14px 150px 14px 24px;
      background: radial-gradient(ellipse 140% 118% at 50% 0%, rgba(246, 240, 229, 1) 0%, rgba(246, 240, 229, 0.998) 4.86%, rgba(246, 240, 229, 0.9924) 9.71%, rgba(246, 240, 229, 0.9834) 14.57%, rgba(246, 240, 229, 0.9713) 19.43%, rgba(246, 240, 229, 0.9565) 24.29%, rgba(246, 240, 229, 0.9393) 29.14%, rgba(246, 240, 229, 0.92) 34%, rgba(246, 240, 229, 0.8987) 37.43%, rgba(246, 240, 229, 0.8651) 40.86%, rgba(246, 240, 229, 0.8217) 44.29%, rgba(246, 240, 229, 0.7709) 47.71%, rgba(246, 240, 229, 0.7154) 51.14%, rgba(246, 240, 229, 0.6576) 54.57%, rgba(246, 240, 229, 0.6) 58%, rgba(246, 240, 229, 0.5518) 60.57%, rgba(246, 240, 229, 0.495) 63.14%, rgba(246, 240, 229, 0.4334) 65.71%, rgba(246, 240, 229, 0.3712) 68.29%, rgba(246, 240, 229, 0.3122) 70.86%, rgba(246, 240, 229, 0.2605) 73.43%, rgba(246, 240, 229, 0.22) 76%, rgba(246, 240, 229, 0.175) 79.43%, rgba(246, 240, 229, 0.1308) 82.86%, rgba(246, 240, 229, 0.0897) 86.29%, rgba(246, 240, 229, 0.0538) 89.71%, rgba(246, 240, 229, 0.0254) 93.14%, rgba(246, 240, 229, 0.0067) 96.57%, rgba(246, 240, 229, 0) 100%);
    }

    .tp-header--salon .tp-header__list {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 10px;
      font-size: 11px;
      letter-spacing: 0.13em;
      white-space: nowrap;
    }

    .tp-header--salon .tp-header__item {
      gap: 10px;
    }

    .tp-header--salon .tp-header__dropdown {
      margin-top: 8px;
      min-width: 210px;
      box-shadow: 0 6px 16px rgba(30, 58, 99, 0.16);
    }

    .tp-header--salon .tp-header__sublink {
      padding: 10px 14px;
      font-size: 10.5px;
    }

    .tp-header--salon .tp-header__icons {
      flex-wrap: nowrap;
      white-space: nowrap;
      padding: 14px 18px 22px 30px;
      background: radial-gradient(ellipse 140% 118% at 50% 0%, rgba(246, 240, 229, 1) 0%, rgba(246, 240, 229, 0.998) 4.86%, rgba(246, 240, 229, 0.9924) 9.71%, rgba(246, 240, 229, 0.9834) 14.57%, rgba(246, 240, 229, 0.9713) 19.43%, rgba(246, 240, 229, 0.9565) 24.29%, rgba(246, 240, 229, 0.9393) 29.14%, rgba(246, 240, 229, 0.92) 34%, rgba(246, 240, 229, 0.8987) 37.43%, rgba(246, 240, 229, 0.8651) 40.86%, rgba(246, 240, 229, 0.8217) 44.29%, rgba(246, 240, 229, 0.7709) 47.71%, rgba(246, 240, 229, 0.7154) 51.14%, rgba(246, 240, 229, 0.6576) 54.57%, rgba(246, 240, 229, 0.6) 58%, rgba(246, 240, 229, 0.5518) 60.57%, rgba(246, 240, 229, 0.495) 63.14%, rgba(246, 240, 229, 0.4334) 65.71%, rgba(246, 240, 229, 0.3712) 68.29%, rgba(246, 240, 229, 0.3122) 70.86%, rgba(246, 240, 229, 0.2605) 73.43%, rgba(246, 240, 229, 0.22) 76%, rgba(246, 240, 229, 0.175) 79.43%, rgba(246, 240, 229, 0.1308) 82.86%, rgba(246, 240, 229, 0.0897) 86.29%, rgba(246, 240, 229, 0.0538) 89.71%, rgba(246, 240, 229, 0.0254) 93.14%, rgba(246, 240, 229, 0.0067) 96.57%, rgba(246, 240, 229, 0) 100%);
      gap: 16px;
    }

    .tp-header--salon .tp-header__icon .tp-icon {
      width: 20px;
      height: 20px;
    }
  }

  /* ---- Mobile (< 700) ------------------------------------------------ */
  @media (max-width: 699px) {
    .tp-header--salon {
      position: sticky;
      top: var(--wp-admin--admin-bar--height, 0px);
      z-index: 12;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 10px;
      background: rgba(246, 240, 229, 0.97);
      border-bottom: 1px solid #E4DBC4;
      container-type: normal;
      transition: none;
    }

    .tp-header--salon .tp-header__nav,
    .tp-header--salon .tp-header__brand {
      display: none;
    }

    .tp-header--salon .tp-header__wordmark {
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 600;
      color: #1E3A63;
      white-space: nowrap;
    }

    .tp-header--salon .tp-header__icons {
      position: static;
      padding: 0;
      background: none;
      gap: 0;
    }

    .tp-header--salon .tp-header__icon--account,
    .tp-header--salon .tp-header__icon--wishlist {
      display: none;
    }

    .tp-header--salon .tp-header__icon {
      width: 44px;
      height: 44px;
      justify-content: center;
    }

    .tp-header--salon .tp-header__icon .tp-icon {
      width: 19px;
      height: 19px;
      stroke-width: 1.7;
    }
  }

  /* ---- editorial variant ------------------------------------------------
     The Salon's own treatment on the Salon-tag pages and Note Bene: no bar,
     no wordmark plate, just two separately faded groups floating over the
     artwork. Each fade is local to its own group and reaches complete
     transparency inside its own box, so there is no edge, no cutoff line and
     no full-width cream strip — the artwork stays visible between and around
     them. */
  /* 2026-09-15: sized to the Salon. These are the Salon's own screens, so
     the header reads at the Salon's scale. The heights below are the Salon
     header's measured heights at each breakpoint (95px fluid on desktop --
     6.6vw -- then 49px through tablet and 57px on phones), and
     --tp-editorial-band-top in tokens.css carries the same numbers: the band
     starts at the header's height, so if the two disagree the plate reframes
     at the Salon handoff. */
  .tp-header--editorial {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6.6vw;
    padding: 0 40px;
    background: none;
    border: 0;
  }

  .tp-header--editorial .tp-header__nav {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 9px;
    padding: 6px 20px 10px;
    margin: 0 auto;
    width: fit-content;
    max-width: min(100% - 300px, 980px);
    overflow: visible;
  }

  .tp-header--editorial .tp-header__list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 9px;
  }

  .tp-header--editorial .tp-header__link {
    font-size: max(10.5px, 0.86vw);
    letter-spacing: 0.13em;
    font-weight: var(--tp-weight-semibold);
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 3px;
  }

  /* The piped separators the design sets between items. */
  .tp-header--editorial .tp-header__item + .tp-header__item::before {
    content: "|";
    margin-right: 9px;
    color: #C9BFA8;
  }

  .tp-header--editorial .tp-header__icons {
    position: absolute;
    right: 34px;
    top: 12px;
    margin-left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 8px 14px 12px;
  }

  .tp-header--editorial .tp-header__icon {
    position: relative;
    z-index: 1;
  }

  /* One localized parchment fade per group. The vertical gradient does the
     long fade-out; a horizontal mask fades the left and right ends, so the
     band has no straight edge anywhere. It is painted behind its group's
     content and extends past the box so it is already invisible at the end. */
  .tp-header__fade {
    display: block;
    position: absolute;
    top: -40px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 240, 229, 0.99) 0%, rgba(246, 240, 229, 0.9874) 2.29%, rgba(246, 240, 229, 0.9801) 4.57%, rgba(246, 240, 229, 0.969) 6.86%, rgba(246, 240, 229, 0.9546) 9.14%, rgba(246, 240, 229, 0.9378) 11.43%, rgba(246, 240, 229, 0.9194) 13.71%, rgba(246, 240, 229, 0.9) 16%, rgba(246, 240, 229, 0.8783) 18%, rgba(246, 240, 229, 0.8489) 20%, rgba(246, 240, 229, 0.8139) 22%, rgba(246, 240, 229, 0.7755) 24%, rgba(246, 240, 229, 0.7356) 26%, rgba(246, 240, 229, 0.6964) 28%, rgba(246, 240, 229, 0.66) 30%, rgba(246, 240, 229, 0.6254) 32%, rgba(246, 240, 229, 0.5905) 34%, rgba(246, 240, 229, 0.5554) 36%, rgba(246, 240, 229, 0.5206) 38%, rgba(246, 240, 229, 0.4862) 40%, rgba(246, 240, 229, 0.4526) 42%, rgba(246, 240, 229, 0.42) 44%, rgba(246, 240, 229, 0.3926) 45.71%, rgba(246, 240, 229, 0.3652) 47.43%, rgba(246, 240, 229, 0.3382) 49.14%, rgba(246, 240, 229, 0.3119) 50.86%, rgba(246, 240, 229, 0.2865) 52.57%, rgba(246, 240, 229, 0.2625) 54.29%, rgba(246, 240, 229, 0.24) 56%, rgba(246, 240, 229, 0.2185) 57.71%, rgba(246, 240, 229, 0.1975) 59.43%, rgba(246, 240, 229, 0.1773) 61.14%, rgba(246, 240, 229, 0.1581) 62.86%, rgba(246, 240, 229, 0.1402) 64.57%, rgba(246, 240, 229, 0.1241) 66.29%, rgba(246, 240, 229, 0.11) 68%, rgba(246, 240, 229, 0.0974) 69.71%, rgba(246, 240, 229, 0.0856) 71.43%, rgba(246, 240, 229, 0.0747) 73.14%, rgba(246, 240, 229, 0.0646) 74.86%, rgba(246, 240, 229, 0.0554) 76.57%, rgba(246, 240, 229, 0.0472) 78.29%, rgba(246, 240, 229, 0.04) 80%, rgba(246, 240, 229, 0.0345) 81.43%, rgba(246, 240, 229, 0.0292) 82.86%, rgba(246, 240, 229, 0.0243) 84.29%, rgba(246, 240, 229, 0.0198) 85.71%, rgba(246, 240, 229, 0.0158) 87.14%, rgba(246, 240, 229, 0.0125) 88.57%, rgba(246, 240, 229, 0.01) 90%, rgba(246, 240, 229, 0.0079) 91.43%, rgba(246, 240, 229, 0.0058) 92.86%, rgba(246, 240, 229, 0.004) 94.29%, rgba(246, 240, 229, 0.0024) 95.71%, rgba(246, 240, 229, 0.0011) 97.14%, rgba(246, 240, 229, 0.0003) 98.57%, rgba(246, 240, 229, 0) 100%);
  }

  .tp-header__fade--nav {
    left: -22%;
    right: -22%;
    height: calc(100% + 140px);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 2.57%, rgba(0, 0, 0, 0.1983) 5.14%, rgba(0, 0, 0, 0.3936) 7.71%, rgba(0, 0, 0, 0.6064) 10.29%, rgba(0, 0, 0, 0.8017) 12.86%, rgba(0, 0, 0, 0.9446) 15.43%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 39.33%, rgba(0, 0, 0, 1) 60.67%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0.9446) 84.57%, rgba(0, 0, 0, 0.8017) 87.14%, rgba(0, 0, 0, 0.6064) 89.71%, rgba(0, 0, 0, 0.3936) 92.29%, rgba(0, 0, 0, 0.1983) 94.86%, rgba(0, 0, 0, 0.0554) 97.43%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 2.57%, rgba(0, 0, 0, 0.1983) 5.14%, rgba(0, 0, 0, 0.3936) 7.71%, rgba(0, 0, 0, 0.6064) 10.29%, rgba(0, 0, 0, 0.8017) 12.86%, rgba(0, 0, 0, 0.9446) 15.43%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 39.33%, rgba(0, 0, 0, 1) 60.67%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0.9446) 84.57%, rgba(0, 0, 0, 0.8017) 87.14%, rgba(0, 0, 0, 0.6064) 89.71%, rgba(0, 0, 0, 0.3936) 92.29%, rgba(0, 0, 0, 0.1983) 94.86%, rgba(0, 0, 0, 0.0554) 97.43%, rgba(0, 0, 0, 0) 100%);
  }

  .tp-header__fade--icons {
    left: -16%;
    right: -24%;
    height: calc(100% + 130px);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 3.14%, rgba(0, 0, 0, 0.1983) 6.29%, rgba(0, 0, 0, 0.3936) 9.43%, rgba(0, 0, 0, 0.6064) 12.57%, rgba(0, 0, 0, 0.8017) 15.71%, rgba(0, 0, 0, 0.9446) 18.86%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 40.67%, rgba(0, 0, 0, 1) 59.33%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0.9446) 81.14%, rgba(0, 0, 0, 0.8017) 84.29%, rgba(0, 0, 0, 0.6064) 87.43%, rgba(0, 0, 0, 0.3936) 90.57%, rgba(0, 0, 0, 0.1983) 93.71%, rgba(0, 0, 0, 0.0554) 96.86%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 3.14%, rgba(0, 0, 0, 0.1983) 6.29%, rgba(0, 0, 0, 0.3936) 9.43%, rgba(0, 0, 0, 0.6064) 12.57%, rgba(0, 0, 0, 0.8017) 15.71%, rgba(0, 0, 0, 0.9446) 18.86%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 40.67%, rgba(0, 0, 0, 1) 59.33%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0.9446) 81.14%, rgba(0, 0, 0, 0.8017) 84.29%, rgba(0, 0, 0, 0.6064) 87.43%, rgba(0, 0, 0, 0.3936) 90.57%, rgba(0, 0, 0, 0.1983) 93.71%, rgba(0, 0, 0, 0.0554) 96.86%, rgba(0, 0, 0, 0) 100%);
  }

  /* A dropdown must clear every vignette, note card and botanical. */
  .tp-header--editorial .tp-header__dropdown {
    z-index: 900;
  }

  /* Nested level: Reflections sits inline beneath On Procuring, indented,
     with no hover gap to cross. */
  .tp-header__subgroup {
    display: block;
    border-top: var(--tp-border-soft);
  }

  /* Reflections sits under On Procuring in the menu tree and stays there —
     the nesting is the navigation's own structure and screen readers still
     get it. Visually the three titles read as one list, so the third is no
     longer stepped in: same left edge, same padding, same rhythm. */
  .tp-header__sublink--nested {
    padding-left: 13px;
  }

  @media (max-width: 1099px) {
    .tp-header--editorial {
      min-height: 49px;
    }

    /* One row through tablet, as the Salon's own nav does, so the header
       keeps the Salon's 49px rather than wrapping to a second line. */
    .tp-header--editorial .tp-header__nav {
      max-width: calc(100% - 40px);
    }

    .tp-header--editorial .tp-header__list {
      flex-wrap: nowrap;
      gap: 0 8px;
      white-space: nowrap;
    }

    .tp-header--editorial {
      padding: 12px 26px 0;
    }

    .tp-header--editorial .tp-header__nav {
      max-width: min(100% - 250px, 720px);
    }

    .tp-header--editorial .tp-header__icons {
      right: 18px;
      top: 8px;
      gap: 16px;
    }
  }

  /* Mobile keeps the shared bar: burger, wordmark, icons, drawer.
     The design's narrative screens ship the same bar as the Salon — burger,
     centred screen name, search, bag — at `2px 10px`, so the bar is 49px and
     the icon cluster is two 44px targets with no gap. Anything wider pushes
     the search target back under the centred wordmark, which is what was
     colliding with the title on every narrative page. */
  @media (max-width: 699px) {
    .tp-header--editorial {
      min-height: 57px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 2px 10px;
      background: rgba(246, 240, 229, 0.97);
      border-bottom: 1px solid #E4DBC4;
    }

    .tp-header--editorial .tp-header__nav {
      display: none;
    }

    .tp-header--editorial .tp-header__icons {
      position: static;
      padding: 0;
      gap: 0;
    }

    /* The narrative screens carry search and bag only. Objects of Desire
       stays in the Collection's mobile bar, where the design puts it. */
    .tp-header--editorial .tp-header__icon--wishlist {
      display: none;
    }

    .tp-header--editorial .tp-header__icon {
      width: 44px;
      height: 44px;
      justify-content: center;
    }

    .tp-header--editorial .tp-header__icon .tp-icon {
      width: 19px;
      height: 19px;
      stroke-width: 1.7;
    }

    .tp-header--editorial .tp-header__fade {
      display: none;
    }
  }
}