/* Native horizontal rows: swiping, trackpads and links also work without JS. */
.rail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 16px; min-height: 44px; }
.collection .rail-toolbar { margin-top: -14px; }
.rail-hint { font-size: 12px; font-weight: 700; }
.rail-hint span { margin-left: 18px; color: var(--muted); font-size: 11px; font-weight: 400; }
.rail-controls { display: flex; gap: 10px; flex: 0 0 auto; }
.rail-controls[hidden] { display: none; }
.rail-controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ededed; color: #111; cursor: pointer; font: 20px Arial, sans-serif; }
.rail-controls button:hover:not(:disabled) { background: #111; color: #fff; }
.rail-controls button:disabled { color: #aaa; background: #f5f5f5; cursor: default; }
.card-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 2.4);
  gap: 24px;
  align-items: stretch;
  margin: 0 -6px;
  padding: 6px 6px 34px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: #a3a3a3 #f0f0f0;
}
.card-rail:focus-visible { outline: 3px solid #245eea; outline-offset: 5px; }
.card-rail > a { min-width: 0; scroll-snap-align: start; scroll-margin-inline: 0; }
.card-rail > a:focus-visible { outline-offset: 2px; }
.card-rail > .product-card { display: flex; flex-direction: column; margin: 0; }
.card-rail .product-image { aspect-ratio: 4 / 3; flex: 0 0 auto; }
.card-rail .product-image img { width: 100%; height: 100%; }
.card-rail .product-heading h3 { font-size: 21px; }
.card-rail .product-meta { margin-top: auto; padding-top: 18px; }
.card-rail > .gallery-card:nth-child(n) { display: flex; flex-direction: column; align-items: stretch; gap: 0; grid-row: auto; }
.card-rail > .gallery-card:nth-child(n) > img { width: 100%; aspect-ratio: 4 / 3; }
.card-rail > .gallery-card:nth-child(n) > div { padding-top: 18px; }
.card-rail .gallery-card h3 { font-size: 21px; }
.collection-note { margin-top: 20px; }
@media (max-width: 1050px) {
  .card-rail { grid-auto-columns: calc((100% - 24px) / 1.8); }
}
@media (max-width: 800px) {
  .card-rail { grid-auto-columns: 87%; gap: 16px; padding-bottom: 28px; }
  .rail-toolbar, .collection .rail-toolbar { margin-top: 18px; margin-bottom: 12px; gap: 8px; }
  .rail-hint { font-size: 11px; }
  .rail-hint span { display: block; margin: 2px 0 0; font-size: 10px; }
  .rail-controls { gap: 8px; }
  .card-rail .product-heading h3, .card-rail .gallery-card h3 { font-size: 19px; }
  .card-rail .product-heading { gap: 8px; }
  .card-rail .product-meta { gap: 9px; font-size: 10px; }
  .card-rail .product-meta span:last-child { padding: 4px 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rail-controls button { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
  .rail-controls button:active:not(:disabled) { transform: scale(.94); }
}