/* The shop switcher, under the brand on every full page.

   It replaces a plain label that said which shop the screen was about. The
   label answered "where am I" and left "how do I leave" to a detour through the
   shops screen; this answers both in the same place. No word beside the name:
   sitting under the brand is what says what the name is. */

.shop-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Relative for the same reason the account menu is: the header wraps on
   content, and a panel taking part in that flow would push the nav onto a
   second line while still closed. */
.shop-switch__menu { position: relative; }

.shop-switch__menu > summary { list-style: none; cursor: pointer; }
.shop-switch__menu > summary::-webkit-details-marker { display: none; }

/* The current shop is the trigger, so it reads as the answer to "which one",
   heavier than the label beside it. */
.shop-switch__current {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.shop-switch__menu[open] > summary { color: var(--accent); }

/* Anchored left, like the account menu and for the same reason: once the nav
   wraps, this trigger sits at the start of its own line, where right: 0 pinned
   the panel against the viewport edge. */
.shop-switch__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: max-content;
  padding: 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.shop-switch__form { margin: 0; }

/* A button because it posts, styled as a menu entry because that is what it is
   to the merchant: switching is navigation, not a form they fill in. */
.shop-switch__choice {
  padding: 0.25rem 0.375rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
}

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