/* Shell: the header, its navigation, and the main column every page sits in. */

/* Wrapping is a base rule, not a narrow-screen override: the nav grows with the
   account's email and shop name, so the width where it stops fitting depends on
   the content, not on the page's column count. Behind a breakpoint it overflowed
   the whole document horizontally just above that breakpoint. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 1.25rem 2.75rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--serif);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand:hover { color: var(--ink); }

/* Brand above, current shop below: one left column answering "where am I".
   Start-aligned so the shop name hangs from the brand's left edge. */
.site-header__context {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  row-gap: 0.5rem;
}

.site-nav__link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 2px;
}

.site-nav__link:hover { color: var(--ink); }

/* The current page is marked by a rule under it, not by a filled pill: the
   whole direction prefers a line to a box. */
.site-nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}

.site-nav__email { font-size: 0.8125rem; color: var(--ink-muted); }

/* The account menu. Relative so the panel can hang under the address without
   widening the header: the bar wraps on content, and a menu taking part in that
   flow would push the nav onto a second line while closed. */
.site-nav__account { position: relative; }

.site-nav__account > summary { list-style: none; cursor: pointer; }
.site-nav__account > summary::-webkit-details-marker { display: none; }
.site-nav__account[open] > summary { color: var(--ink); }

/* Stacked and start-aligned, so the panel reads as a list once it holds more
   than the one action.

   Anchored on the left edge of the address, not the right: the nav wraps on
   content, and once it does this trigger sits at the left of its own line, where
   right: 0 pinned the panel against the viewport edge. Its own min-width keeps
   each item on one line, whatever the trigger's width. */
.site-nav__account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: max-content;
  padding: 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Navigation, not an action: it takes the nav link's voice, not a button's. */
.site-nav__account-link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.site-nav__account-link:hover { color: var(--ink); }

/* Signing out reads as one more entry of this menu, but it stays a form: a GET
   sign-out is triggered by any third party able to place an <img src> on a page
   the merchant visits. The appearance is shared, the method is not. */
.site-nav__account-form { margin: 0; }

.site-nav__account-action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  cursor: pointer;
}

.site-nav__account-action:hover { color: var(--ink); }

.site-main {
  display: flex;
  justify-content: center;
  padding: 3.5rem 2.75rem 4rem;
}