.site-header {
  position: sticky;
  top: 0;
  z-index: var(--mg-z-sticky);
  background: var(--mg-bg);
  border-bottom: 1px solid var(--mg-color-border);
  transition: box-shadow var(--mg-transition);
}
.site-header.is-scrolled { box-shadow: var(--mg-shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  /* Not space-between: with the search icon there are three children, and
     space-between strands the menu in the middle of the header. Whichever
     of the two comes first claims the free space instead, so they sit
     together on the right whatever else is added later. */
  justify-content: flex-start;
  gap: var(--mg-space-5);
  height: var(--mg-header-height);
}

.site-header__logo { flex: none; }

/* The markup runs logo → search → menu, which is the phone layout exactly:
   the hamburger keeps the right edge and the search icon sits just inside
   it. Nothing is reordered here, so what a keyboard reaches matches what an
   eye sees. Only the desktop layout below asks for a different order. */
@media (max-width: 768px) {
  .site-header__inner { gap: var(--mg-space-2); }
  .mg-search { margin-left: auto; }
}

.site-header__logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-3);
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-bold);
  font-size: var(--mg-text-lg);
  color: var(--mg-color-primary);
}
.site-header__logo img { max-height: 44px; width: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--mg-space-6);
}
.site-nav__list a {
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-text-sm);
  color: var(--mg-color-primary);
  padding-block: var(--mg-space-2);
  position: relative;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--mg-color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mg-transition);
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--mg-radius-md);
  color: var(--mg-color-primary);
  align-items: center;
  justify-content: center;
}
.site-nav__toggle:hover { background: var(--mg-color-surface); }
.site-nav__toggle:focus-visible { outline: 2px solid var(--mg-color-accent); outline-offset: 2px; }

/* One button, two faces — the same pattern as the search toggle, so the way
   out of the menu is where the way in was. */
.site-nav__icon--close { display: none; }
.site-nav.is-open .site-nav__icon--open { display: none; }
.site-nav.is-open .site-nav__icon--close { display: block; }

@media (max-width: 768px) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav__list {
    position: fixed;
    inset: var(--mg-header-height) 0 0;
    background: var(--mg-bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--mg-space-5) max(var(--mg-space-4), 4vw)
             calc(var(--mg-space-5) + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--mg-transition);
  }
  .site-nav.is-open .site-nav__list { transform: translateX(0); }
  .site-nav__list a {
    display: block;
    padding-block: var(--mg-space-4);
    border-bottom: 1px solid var(--mg-color-border);
  }
  .site-nav__list a::after { display: none; }
}

/* ==========================================================================
   Catalog search — an icon until it is asked for.

   The field grows out of the icon rather than appearing, so it is obvious
   where it came from and where it goes back to. Width is the only thing
   animated on the wrapper; the input fades and slides slightly behind it,
   which reads as one movement.
   ========================================================================== */

.mg-search {
  --mg-search-w: min(320px, 42vw);

  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.mg-search__form {
  position: relative;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width var(--mg-transition-slow),
    opacity 160ms var(--mg-ease);
}

.mg-search.is-open .mg-search__form {
  width: var(--mg-search-w);
  opacity: 1;
}

.mg-search__field {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--mg-text-sm);
  color: var(--mg-fg);
  background: var(--mg-color-surface);
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-pill);
  padding: 9px var(--mg-space-4) 9px calc(var(--mg-space-6) + 4px);
  transform: translateX(10px);
  transition: transform var(--mg-transition-slow), border-color var(--mg-transition);
}

.mg-search.is-open .mg-search__field { transform: translateX(0); }

.mg-search__field:focus,
.mg-search__field:focus-visible {
  /* A 2px outline offset around a pill reads as a second, wrong-shaped
     border. A ring drawn with box-shadow follows the radius exactly. The
     transparent outline is not decoration — it is what forced-colors mode
     paints when box-shadow is thrown away. */
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--mg-color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-color-accent) 20%, transparent);
}

.mg-search__field::-webkit-search-cancel-button { cursor: pointer; }

.mg-search__glass {
  position: absolute;
  left: var(--mg-search-glass-x, var(--mg-space-3));
  display: flex;
  color: var(--mg-fg-muted);
  pointer-events: none;
}

.mg-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--mg-radius-pill);
  color: var(--mg-color-primary);
  transition: background var(--mg-transition), color var(--mg-transition);
}

.mg-search__toggle:hover { background: var(--mg-color-surface); }
.mg-search__toggle:focus-visible { outline: 2px solid var(--mg-color-accent); outline-offset: 2px; }

/* One button, two faces */
.mg-search__icon { transition: opacity 140ms var(--mg-ease), transform 140ms var(--mg-ease); }
.mg-search__icon--close { display: none; }
.mg-search.is-open .mg-search__icon--open { display: none; }
.mg-search.is-open .mg-search__icon--close { display: block; }

/* The menu steps aside rather than being pushed, so nothing reflows */
@media (min-width: 769px) {
  /* Wide enough for the links, so the menu goes back in front of the search
     icon. Reaching search first by keyboard is a sensible order in its own
     right, which is why the swap sits on this side. */
  .site-header .site-nav { order: 2; margin-left: auto; }
  .mg-search { order: 3; }

  .site-header .site-nav {
    transition: opacity var(--mg-transition), transform var(--mg-transition);
  }
  .site-header.is-searching .site-nav {
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
  }
}

/* Below the desktop layout there is no room beside the menu, so the field
   drops onto its own row under the header instead of squeezing in. */
/* Below the desktop layout there is no room beside the menu, so the field
   becomes a full-width bar under the header instead of squeezing in. */
@media (max-width: 768px) {
  /* Static, so the bar is positioned against the header and can span its
     whole width rather than the container's. */
  .mg-search { position: static; }

  .mg-search__form {
    --mg-search-glass-x: calc(max(var(--mg-space-4), 4vw) + var(--mg-space-3));

    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: auto;
    max-height: 0;
    padding-inline: max(var(--mg-space-4), 4vw);
    background: var(--mg-color-bg);
    border-bottom: 1px solid var(--mg-color-border);
    box-shadow: var(--mg-shadow-md);
    transition:
      max-height var(--mg-transition),
      padding-block var(--mg-transition),
      opacity 160ms var(--mg-ease);
  }

  .mg-search.is-open .mg-search__form {
    width: auto;
    max-height: 96px;
    padding-block: var(--mg-space-4);
  }

  /* The slide-in belongs to the desktop animation, where the field grows
     sideways out of the icon. Here it grows downwards. */
  .mg-search__field,
  .mg-search.is-open .mg-search__field { transform: none; }

  .mg-search__field { font-size: var(--mg-text-md); padding-block: 11px; }
}

/* The results page repeats the form, always open and never animated */
.mg-search__form--page {
  width: min(520px, 100%);
  opacity: 1;
  overflow: visible;
  transition: none;
}
.mg-search__form--page .mg-search__field { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mg-search__form,
  .mg-search__field,
  .site-header .site-nav { transition-duration: 1ms; }
}