/* =============================================================================
   Brand header controls — shared by every brand layout
   =============================================================================
   Layout only: no colour is painted here. The account link takes whatever
   ink the brand's own header gives its links. Kept apart from
   brand_partials.css, whose guard holds paint rules to the --checkout-*
   family; nothing here is paint.
   ========================================================================== */
/* ── shared/_brand_account_nav_link — Sign In / Account in every header ── */
/* On a phone the header's right column is a quarter of the screen. The
   word "Sign In" wrapped to two lines and was drawn on top of the
   wordmark on BacWater and Glam (2026-10-04). In those two Vela headers
   (burger · wordmark · cluster on ONE row), below the breakpoint where
   the nav collapses into the burger, the word is visually hidden and
   the person icon carries the link — the anchor's aria-label keeps its
   accessible name. The link is never
   removed: sign-in has to stay reachable from the header on a phone.
   The Nutreko headers (PepRally, MyPeptides, SurfPeptides) put the
   cluster on its own row on a phone, where the word fits — it stays.
   Guard: test/system/every_brand_header_controls_do_not_overlap_test.rb */

a.brand-account-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

a.brand-account-link .brand-account-link__label {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .velaHeaderRight a.brand-account-link {
    gap: 0;
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
  }

  .velaHeaderRight a.brand-account-link .brand-account-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
}