/* Card rails (31 Oct 2026). House rule: a row of five or more cards never
   wraps to a second line. card-rails.js (and, on the catalog pages,
   membrane-interactions.js) marks the list .is-rail and puts the portfolio
   rail's arrows beside its heading. Four in view on desktop, two on tablet,
   one and a bit on phones; .is-rail--2 keeps two in view where the row sits
   in a narrow column. The tripled class outranks the section sheets' own
   column rules for these lists, and :is(body, #main-content) lifts it over
   the section sheets that scope their grids to #main-content. Pages outside
   the catalog load this sheet; the catalog keeps its own copy of the rules in
   standard-products.css. Hand-edited, no src twin. */
.card-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-rail__head--intro { align-items: flex-end; }
.card-rail__head > .card-rail__nav:only-child { margin-left: auto; }
.card-rail__head--solo { margin-bottom: 16px; }
.card-rail__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.card-rail__nav[hidden] { display: none; }
.card-rail__nav .memrail__btn {
  width: 52px; height: 52px; border-radius: 50%; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-utility-dark, #0a2740); border: 0; color: #fff;
  box-shadow: 0 6px 16px rgba(10, 39, 64, .22);
  cursor: pointer; transition: background-color .25s ease, opacity .25s ease;
}
.card-rail__nav .memrail__btn svg { width: 22px; height: 22px; stroke-width: 2.25; }
.card-rail__nav .memrail__btn:hover:not(:disabled) { background: var(--brand-primary, #007cc3); }
.card-rail__nav .memrail__btn:disabled { opacity: 0.32; cursor: default; }
.card-rail__nav .memrail__btn--prev svg { transform: rotate(180deg); }
:is(body, #main-content) .is-rail.is-rail.is-rail {
  --rail-gap: 16px;
  /* inline-size containment: the cards never widen the column the rail sits
     in (a grid track sized by its content would otherwise grow to fit them). */
  contain: inline-size;
  /* relative: screen-reader-only labels inside the tiles (position: absolute)
     are clipped by the rail instead of widening the page. */
  position: relative;
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--rail-gap); max-width: none;
  grid-template-columns: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 4px 18px; margin-bottom: -18px;
}
:is(body, #main-content) .is-rail.is-rail.is-rail::-webkit-scrollbar { display: none; }
/* height: auto lets every card stretch to the tallest (equal heights); a card
   sized height: 100% for its old grid cell would otherwise keep its own height. */
:is(body, #main-content) .is-rail.is-rail.is-rail > * { flex: none; width: calc((100% - 3 * var(--rail-gap)) / 4); max-width: none; height: auto; scroll-snap-align: start; }
:is(body, #main-content) .is-rail.is-rail.is-rail.is-rail--2 > * { width: calc((100% - var(--rail-gap)) / 2); }
@media (max-width: 1080px) {
  :is(body, #main-content) .is-rail.is-rail.is-rail > * { width: calc((100% - var(--rail-gap)) / 2); }
}
@media (max-width: 600px) {
  :is(body, #main-content) .is-rail.is-rail.is-rail > *,
  :is(body, #main-content) .is-rail.is-rail.is-rail.is-rail--2 > * { width: 82%; }
  .card-rail__nav .memrail__btn { width: 44px; height: 44px; }
}