/* ==========================================================================
   Shop by genre as a switchable shelf (hero-b.html only; index.html keeps the plain chips).
   Loaded after theme.css. The genre chips become tabs; the shelf under them reuses
   .shelf, .shelf-nav and .card from theme.css, so it looks like "New this week".
   ========================================================================== */

/* Tabs: one swipeable row on phones, wrapped rows on desktop */
.genre-tabs {
  display: flex; gap: var(--sp-2);
  margin: 0 calc(var(--gutter) * -1) var(--sp-5);
  padding: 4px var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  /* fade the right edge so it is clear the row scrolls */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.genre-tabs::-webkit-scrollbar { display: none; }

.chip--tab {
  flex-shrink: 0; scroll-snap-align: start;
  min-height: 44px; padding: 0 var(--sp-4);
  font: inherit; font-weight: 700; white-space: nowrap;
  background: #fff; color: var(--c-ink); cursor: pointer;
}
.chip--tab.chip--feature { background: var(--c-ink); color: #fff; }
.chip--tab[aria-selected="true"] {
  background: var(--c-red); border-color: var(--c-red); color: #fff;
  box-shadow: 0 4px 0 var(--c-ink);
  transform: translateY(-2px);
}
.chip--tab[aria-selected="true"] .chip__dot { background: #fff; }
.chip--tab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .chip--tab:not([aria-selected="true"]):hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }
}

/* The shelf fades in when the genre changes */
.genre-panel.is-swapping .shelf { animation: genre-in 320ms var(--ease) both; }
@keyframes genre-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .genre-tabs {
    flex-wrap: wrap; overflow: visible;
    margin-inline: 0; padding-inline: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .chip--tab { min-height: 48px; padding: 0 var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .genre-panel.is-swapping .shelf { animation: none; }
  .chip--tab[aria-selected="true"] { transform: none; }
}