/* ═══════════════════════════════════════════
   WV SHOP NAV — horizontal pill scroller  (v1, draft)
   Partial: parts/shop-nav.php

   DRAFT — iterating outside the frozen layer. Folds into
   wv-components.css after designer sign-off across all consumers
   (Phase 2: page-shop-benefit.php; Phase 3: woocommerce/archive-product.php
   replacing parts/shop-cats.php).

   Visual mirrors the frozen .wv-shop-cats design (wv-components.css
   lines 1322–1378) — 55px pill, 48px horizontal padding, text-primary
   border, --wv-radius-sm, active fills text-primary bg + text-inverse
   text. Designer-approved in the frozen layer; preserved here.

   Typography applied via .wv-label-nav in PHP (GG Demi 600 15px) +
   local text-transform: uppercase (text-transform is not covered by
   the typography class and is the only local font-related prop here
   per CLAUDE.md Rule 3).

   CHANGELOG
   ─────────
   v1 — 2026-04-24: Initial draft. Mirrors frozen .wv-shop-cats visual.
   ═══════════════════════════════════════════ */

.wv-shop-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.wv-shop-nav__arrow {
  flex-shrink: 0;
}

.wv-shop-nav__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-block: 4px;
  flex: 1;
}

.wv-shop-nav__track::-webkit-scrollbar {
  display: none;
}

.wv-shop-nav__pill {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 48px 2px;
  border: 1px solid var(--wv-color-text-primary);
  border-radius: var(--wv-radius-sm);
  background: transparent;
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--wv-transition-color);
}

.wv-shop-nav__pill:hover {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

.wv-shop-nav__pill--active {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

/* ── Responsive — mobile-first: smaller pills on mobile, restored ≥768px */
.wv-shop-nav__pill {
  height: 40px;
  padding: 0 20px 2px;
}

@media (min-width: 768px) {
  .wv-shop-nav__pill {
    height: 55px;
    padding: 0 48px 2px;
  }
}