/*
 * Product rail — full-bleed scrolling row of cards.
 *
 * The track is padded by the page gutter rather than sitting inside a centred
 * container, so the first card lines up with the logo. Exactly --rail-per
 * whole cards are shown, never a part-visible one: the arrows are the scroll
 * affordance. See the track's grid-auto-columns for how that lands.
 *
 * Global, not a component stylesheet.
 *
 * This lived in components/bestsellers/styles.css. Component stylesheets are
 * only enqueued on pages that actually render that component, so once the rail
 * was reused for related products (inc/product-rail.php) the product page got
 * the markup with none of the CSS: the track lost its grid, and a single card
 * stretched to the full 2501px width of the page.
 *
 * It sits beside nesa-card.css for the same reason — both are shared furniture
 * now, not the property of one component.
 */

.nesa-rail {
  padding-block: clamp(var(--oxa-space-5), 6vw, var(--oxa-space-7));
  background: var(--nesa-bg);
}

.nesa-rail__head {
  padding-inline: var(--nesa-gutter);
  margin-bottom: var(--oxa-space-5);
  text-align: center;
}

.nesa-rail__eyebrow {
  margin: 0 0 var(--oxa-space-2);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-wide);
  color: var(--nesa-ink-soft);
}

.nesa-rail__title {
  margin: 0;
  font-family: var(--nesa-font-serif);
  font-size: var(--oxa-fs-3xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--nesa-ink);
}

.nesa-rail__viewport { position: relative; }

.nesa-rail__track {
  display: grid;
  grid-auto-flow: column;

  /*
   * Exactly --rail-per whole cards, with the next one off-screen.
   *
   * `100%` here resolves against the track's CONTENT box, which already has
   * the two gutters taken out of it. The old formula subtracted
   * `--nesa-gutter * 2` on top of that, so each card came out ~5px narrow, the
   * five of them stopped 40px short of the content edge, and a 44px sliver of
   * card six sat at the right edge.
   *
   * Setting --rail-gap to the gutter is what guarantees no sliver at any
   * width: card six starts at gutter + contentWidth + gap, and with
   * gap == gutter that is gutter + (W - 2*gutter) + gutter == W — the viewport
   * edge exactly, whatever W and --rail-per are.
   */
  --rail-gap: var(--nesa-gutter);
  grid-auto-columns: calc(
    (100% - (var(--rail-per, 5) - 1) * var(--rail-gap)) / var(--rail-per, 5)
  );
  gap: var(--rail-gap);

  margin: 0;
  padding: 0 var(--nesa-gutter);
  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--nesa-gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.nesa-rail__track::-webkit-scrollbar { display: none; }

.nesa-rail__item {
  min-width: 0;
  scroll-snap-align: start;
}

/* ── Arrows ────────────────────────────────────────────────────────────── */

.nesa-rail__arrow {
  position: absolute;
  top: 38%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .92);
  color: var(--nesa-ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / .12);
  cursor: pointer;
  transition: background var(--oxa-dur) var(--oxa-ease);
}
.nesa-rail__arrow:hover { background: #fff; }
.nesa-rail__arrow[hidden] { display: none; }
/* On the content edge, overlapping the outermost card. A third of the gutter
 * put them 21px in while the gutter was 64px; at a 20px gutter that same
 * fraction would have left them 7px from the browser edge. */
.nesa-rail__arrow--prev { left: var(--nesa-gutter); }
.nesa-rail__arrow--next { right: var(--nesa-gutter); }

.nesa-rail__foot { margin-top: var(--oxa-space-5); text-align: center; }

.nesa-rail__cta {
  display: inline-block;
  padding: 1rem 2.25rem;
  border: 1px solid var(--nesa-ink);
  color: var(--nesa-ink);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  transition: background var(--oxa-dur) var(--oxa-ease), color var(--oxa-dur) var(--oxa-ease);
}
.nesa-rail__cta:hover { background: var(--nesa-ink); color: #fff; }

@media (max-width: 1100px) { .nesa-rail__track { --rail-per: 4; } }
@media (max-width: 860px)  { .nesa-rail__track { --rail-per: 3; } }
@media (max-width: 600px)  {
  .nesa-rail__track { --rail-per: 2; }
  .nesa-rail__arrow { display: none; }
}