.customer-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: inherit; text-decoration: none; border-radius: 50%; flex: 0 0 44px; }
.customer-link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.customer-link:hover { background: var(--accent-tint); }
.customer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.customer-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* Third column of a three-column header, so the wordmark can hold the middle
   one. Stated explicitly because auto placement would move these into column 2
   on any page where the navigation is hidden. */
.pp-header-actions, .info-header-actions { grid-column: 3; display: flex; align-items: center; gap: 10px; justify-self: end; }
.v4 .mobile-nav .customer-mobile-link { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--accent-line); margin-top: 6px; padding-top: 14px; }
.customer-mobile-link svg { width: 22px; height: 22px; flex: 0 0 22px; }
@media (max-width: 760px) {
  .v4 .header-actions > .customer-link { display: none; }
  .pp-header-actions, .info-header-actions { gap: 3px; }
}
@media (max-width: 370px) {
  /* The navigation goes away here, but the wordmark still holds column 2, so
     the header keeps the three columns product-page.css gives it and the first
     one simply sits empty. This block used to restate the columns as
     minmax(0,1fr), which let the right column shrink under the sign-in link
     and the cart button at 320px and put them over the wordmark; the
     max-content minimum in product-page.css is what stops that, so it must not
     be overridden here. */
  .pp-header > nav { display: none; }
}