/*
 * A row of product cards that scrolls sideways (Checkout\Suggestions::rail()): the
 * thank-you page's "You may also like", the account's "Picked for you". As the cart's
 * carousel (cart.css): swipe, scroll snap, and arrows (rail.js) that scroll by what is
 * visible, shown only when the row scrolls. The arrows sit over the pictures' outer
 * edges, or in the head (`.hs-rail--head-arrows`). Concentric from the inside out: the
 * cards keep their R 20 (product-tile.css) and sit --hs-rail-p inside, so the box's
 * radius is 20 + that. Selectors start with `.hs-rail` so they outrank the theme's
 * content rules (lists, links, buttons).
 */
.hs-rail {
  --hs-rail-p: 12px;
  --hs-rail-gap: 16px;

  display: grid;
  grid-template-areas:
    'head'
    'row';
  margin-top: 16px;
  overflow: hidden;
  padding-top: 10px;
  border: 1px solid var(--hs-line, #e6e9f0);
  border-radius: calc(var(--hs-radius-lg, 20px) * var(--hs-corner-scale, 1) + var(--hs-rail-p));
  corner-shape: var(--hs-corner-shape, round);
  background: #fff;
  box-shadow: var(--hs-shadow-sm, 0 1px 2px rgb(31 37 71 / 6%), 0 2px 8px rgb(31 37 71 / 5%));
}

.hs-rail *,
.hs-rail *::before,
.hs-rail *::after {
  box-sizing: border-box;
}

.hs-rail .hs-rail__head {
  display: grid;
  grid-area: head;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 24px;
}

.hs-rail .hs-rail__icon {
  display: flex;
  color: #f5b400;
}

.hs-rail .hs-rail__title {
  margin: 0;
  color: var(--hs-ink, #1f2547);
  font-family: inherit;
  font-size: 24px;
  font-weight: var(--hs-fw-heading, 900);
  line-height: 1.2;
  text-transform: none;
}

.hs-rail .hs-rail__lead {
  margin: 4px 0 0;
  color: var(--hs-muted, #5b6180);
  font-size: 16px;
}

.hs-rail .hs-rail__all {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  align-self: start;
  min-height: 44px;
  margin: -6px 0 0;
  color: var(--hs-blue-600, #0070e0);
  font-size: 16px;
  font-weight: var(--hs-fw-strong, 800);
  text-decoration: none;
  white-space: nowrap;
}

.hs-rail .hs-rail__all:is(:hover, :focus, :active) {
  color: var(--hs-blue-700, #185c9f);
}

.hs-rail .hs-rail__viewport {
  --n: 5;

  position: relative;
  grid-area: row;
  min-width: 0;
  container: hs-rail / inline-size;
}

/* Room above for the lifted card on hover; the inset at the ends and at the bottom. */
.hs-rail .hs-rail__list {
  display: grid;
  grid-auto-columns: calc((100% - (var(--n) - 1) * var(--hs-rail-gap)) / var(--n));
  grid-auto-flow: column;
  gap: var(--hs-rail-gap);
  margin: 0;
  padding: 6px var(--hs-rail-p) var(--hs-rail-p);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--hs-rail-p);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hs-rail .hs-rail__list::-webkit-scrollbar {
  display: none;
}

.hs-rail .hs-rail__item {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

/* The arrows: on the middle of the (square) pictures, over the cards' outer edges. */
.hs-rail .hs-rail__arrow {
  position: absolute;
  top: calc(6px + (100cqi - 2 * var(--hs-rail-p) - (var(--n) - 1) * var(--hs-rail-gap)) / var(--n) / 2 - 22px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 24px -10px rgb(31 37 71 / 40%),
    0 1px 3px rgb(31 37 71 / 10%);
  color: var(--hs-ink, #1f2547);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.hs-rail .hs-rail__arrow:is(:hover, :focus, :active) {
  border: 0;
  background: #fff;
  box-shadow:
    0 10px 24px -10px rgb(31 37 71 / 40%),
    0 1px 3px rgb(31 37 71 / 10%);
  color: var(--hs-ink, #1f2547);
}

.hs-rail .hs-rail__arrow:hover {
  color: var(--hs-orange-700, #c2410c);
  transform: scale(1.06);
}

.hs-rail .hs-rail__arrow:focus-visible {
  outline: 3px solid var(--hs-focus, #1f2547);
  outline-offset: 2px;
}

.hs-rail .hs-rail__arrow--prev {
  left: 6px;
}

.hs-rail .hs-rail__arrow--next {
  right: 6px;
}

.hs-rail .hs-rail__arrow[hidden] {
  display: none;
}

/* At an end: gone, not greyed. */
.hs-rail .hs-rail__arrow:disabled {
  visibility: hidden;
  opacity: 0;
}

/* The arrows in the head, side by side (the account's design); greyed at an end. */
.hs-rail .hs-rail__arrows {
  display: flex;
  gap: 10px;
  align-self: center;
}

.hs-rail--head-arrows .hs-rail__arrow {
  position: static;
  width: 40px;
  height: 40px;
}

.hs-rail--head-arrows .hs-rail__arrow:disabled {
  visibility: visible;
  opacity: 0.4;
  cursor: default;
  transform: none;
}

@container hs-rail (max-width: 999px) {
  .hs-rail .hs-rail__list,
  .hs-rail .hs-rail__viewport > .hs-rail__arrow {
    --n: 4;
  }
}

@container hs-rail (max-width: 739px) {
  .hs-rail .hs-rail__list,
  .hs-rail .hs-rail__viewport > .hs-rail__arrow {
    --n: 3;
  }
}

/* Phones: swipe, the next card peeks in; no arrows. */
@container hs-rail (max-width: 599px) {
  .hs-rail .hs-rail__list,
  .hs-rail .hs-rail__viewport > .hs-rail__arrow {
    --n: 2.3;
  }

  .hs-rail .hs-rail__viewport > .hs-rail__arrow {
    display: none;
  }
}

@container hs-rail (max-width: 419px) {
  .hs-rail .hs-rail__list,
  .hs-rail .hs-rail__viewport > .hs-rail__arrow {
    --n: 1.6;
  }
}

/* Phones: "See all" under the lead; no arrows in the head either. */
@media (max-width: 599px) {
  .hs-rail {
    --hs-rail-p: 16px;
  }

  .hs-rail .hs-rail__head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 16px 12px;
  }

  .hs-rail .hs-rail__title {
    font-size: 21px;
  }

  .hs-rail .hs-rail__lead {
    font-size: 15px;
  }

  .hs-rail .hs-rail__all {
    grid-column: 2;
    justify-self: start;
    min-height: 36px;
    margin: -8px 0 0;
  }

  .hs-rail .hs-rail__arrows {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-rail .hs-rail__arrow {
    transition: none;
  }
}