/* ClayMart's header, stages 1 to 8: only its layout. The aisles sit in the pill from 980 px up; on narrower screens
   they become a row of clay chips under it, so the pill never overflows. Made of the page's own clay (style.css tokens).
   Stage 9 makes every control work (nav.js) and adds their parts here: the search well, the account popover / sheet,
   the empty shelf.

   1 the pill and the aisles   5 narrow screens: the chip row   6 a phone   7 reduced motion */

/* ---- 1. the pill and the aisles ---- */
.site-pill { position: relative; }
/* the aisles are always reachable (style.css hid them under 1180 px): in the pill from 980 px, as chips below that.
   Every header control is at least 44 px tall, for fingers on tablets and phones */
.site .links { display: flex; }
.site .links a { display: inline-flex; align-items: center; min-height: 44px; }
.site .brand { min-height: 44px; min-width: 44px; justify-content: center; }
.site .links a { position: relative; transition: color var(--dur-fast), box-shadow var(--dur), background-color var(--dur); touch-action: manipulation; }
.site .links a:active { box-shadow: var(--clay-pressed); }
.site .links a:focus-visible { outline-offset: 2px; }
.site .brand:focus-visible { outline-offset: 4px; }

/* ---- 5. narrow screens: the aisles leave the pill and become a row of clay chips under it ---- */
/* a phone on its side (wide but short): the chips would take a third of the screen, so the aisles stay in the pill
   and the wordmark steps aside (the mark keeps the brand; the link keeps its name for screen readers) */
@media (min-width: 761px) and (max-width: 979px) and (max-height: 540px) {
  .site .wordmark { display: none; }
  .site .site-pill { gap: var(--space-4); }
  .site .links { margin-left: 0; gap: 2px; }
  .site .links a { padding: 0 13px; font-size: 14.5px; }
}
@media (max-width: 979px) and (min-height: 541px), (max-width: 760px) {
  :root { --header-h: 140px; }
  .site .links { position: absolute; z-index: 1; top: calc(100% + 6px); left: -6px; right: -6px; display: flex; gap: 8px; margin: 0; padding: 6px 6px 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site .links::-webkit-scrollbar { display: none; }
  .site .links a { flex: none; scroll-snap-align: start; padding: 0 18px; font-size: 15px; font-weight: 600; color: var(--text-muted);
    background: linear-gradient(180deg, var(--surface-hi), var(--surface)); box-shadow: var(--clay-s); }
  .site .links a:hover { box-shadow: var(--clay-s); color: var(--text); }
  .site .links a[aria-current] { color: var(--brown-700); background: var(--cream-200); box-shadow: var(--clay-pressed); }
}

/* ---- 6. a phone ---- */
@media (max-width: 760px) {
  :root { --header-h: 124px; }
  .site .links { padding: 6px 6px 10px; }
  .site .links a { padding: 0 16px; font-size: 14.5px; }
  .site .icon-btn { width: 44px; height: 44px; }
  .site .site-pill { gap: var(--space-2); }
  .site .tools { gap: 8px; }
}

/* the smallest phones: the mark alone carries the brand */
@media (max-width: 359px) {
  .site .wordmark { display: none; }
  .site .links { gap: 6px; }
  .site .links a { padding: 0 12px; font-size: 14px; }   /* all four chips fit at 320 px; the row still scrolls if text is enlarged */
}
@media (min-width: 360px) and (max-width: 400px) {
  .site .wordmark { font-size: 17px; letter-spacing: .03em; }
}

/* ---- 7. reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .site .links a { transition: none; }
}