/* css-shared-menu-shop.css — styles that only matter when one of these sections is on the page:
 * main-menu, main-shop.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

/* The bar is full-bleed; this keeps its contents on the page's own measure so
 * the first link lines up with the headings above and below it. */
.menu-rail__inner { padding-inline: var(--gutter); }

.menu-rail__list {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* The rail is wider than a phone on any real menu, so it scrolls sideways —
   * and the scrollbar itself is noise on a nav this short. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}

.menu-rail__list::-webkit-scrollbar { display: none; }

.menu-rail__link {
  display: block;
  padding: 0.85rem 0.15rem;
  white-space: nowrap;
  scroll-snap-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  /* A transparent border at rest, so the active state does not change the
   * link's height and shunt the row by two pixels as it moves. */
  border-bottom: 2px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

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

.menu-rail__link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Folded to a button at the end of the tabs (theme.js, "Rail search"): the
 * field opens above the tabs on a tap and folds back when left empty. The
 * fold only exists once the script has set it up — with the script off the
 * field simply stays open. */
.menu-rail__inner { display: flex; align-items: center; gap: 0.5rem; }

.menu-rail__inner .menu-rail__list { flex: 1 1 auto; min-width: 0; }