.item-lineup {
  --lineup-gap: calc(2 * var(--pad));
  position: relative;
  z-index: 1;
  min-height: calc(2 * var(--cell));
  padding-bottom: calc(48 * var(--u));
}

.item-lineup__heading {
  height: calc(284 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(20 * var(--u));
  padding: 0 calc(80 * var(--u)) calc(28 * var(--u));
  border-bottom: 1px solid var(--ink);
}

.item-lineup__heading .section-title { margin: 0; }
.item-lineup__count {
  margin-bottom: calc(9 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}

.item-lineup__slider { position: relative; margin-top: var(--pad); }
.item-lineup__viewport {
  margin-inline: calc(var(--gutter) + var(--pad));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.item-lineup__viewport::-webkit-scrollbar { display: none; }
.item-lineup__viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.item-lineup__viewport.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}
.item-lineup__viewport.is-dragging * { cursor: grabbing !important; }
.item-lineup__track { position: relative; display: flex; gap: var(--lineup-gap); width: 100%; }
.item-lineup__card {
  flex: 0 0 calc(var(--cell) - 2 * var(--pad));
  min-width: 0;
  display: block;
  scroll-snap-align: start;
  color: var(--ink);
  user-select: none;
  cursor: grab;
}
.item-lineup__image {
  display: block;
  height: calc(var(--cell) - 2 * var(--pad) - 54 * var(--u));
  overflow: hidden;
  background: #fff;
}
.item-lineup__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
a.item-lineup__card:hover .item-lineup__image img { transform: scale(1.035); }
a.item-lineup__card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.item-lineup__meta {
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  border-bottom: 1px solid rgba(26, 26, 26, .24);
}
.item-lineup__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(18 * var(--u));
  letter-spacing: .08em;
}
.item-lineup__go {
  flex: none;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: calc(19 * var(--u));
  line-height: 1;
}
.item-lineup__card--pending .item-lineup__go { background: #777; }
.item-lineup__arrow {
  position: absolute;
  z-index: 2;
  top: 38%;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.item-lineup__arrow::before {
  content: "";
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.item-lineup__arrow--prev::before { transform: translateX(calc(3 * var(--u))) rotate(-135deg); }
.item-lineup__arrow--next::before { transform: translateX(calc(-3 * var(--u))) rotate(45deg); }
.item-lineup__arrow--prev { left: calc(27 * var(--u)); }
.item-lineup__arrow--next { right: calc(27 * var(--u)); }
.item-lineup__arrow[hidden] { display: none; }
.item-lineup__arrow:disabled { opacity: .45; cursor: default; }
.item-lineup__arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.item-lineup__dots {
  min-height: calc(10 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  margin-top: calc(80 * var(--u));
}
.item-lineup__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #a7a7a7;
}
.item-lineup__dots button[aria-current="true"] { background: var(--ink); }
.item-lineup__dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 767px) {
  .item-lineup { --lineup-gap: 3vw; min-height: 0; padding-bottom: 12vw; }
  .item-lineup__heading { height: auto; min-height: 25vw; gap: 2vw; padding: 0 5vw 4vw; }
  .item-lineup__heading .section-title { font-size: clamp(20px, 5.7vw, 30px); letter-spacing: .04em; }
  .item-lineup__heading .cross { width: 4vw; height: 4vw; }
  .item-lineup__count { margin-bottom: .8vw; font-size: 2.4vw; }
  .item-lineup__slider { margin-top: 5vw; }
  .item-lineup__viewport { margin-inline: 4vw; }
  .item-lineup__card { flex-basis: 78vw; }
  .item-lineup__image { height: auto; aspect-ratio: 1; }
  .item-lineup__meta { height: auto; min-height: 12vw; gap: 2vw; }
  .item-lineup__name { font-size: 3vw; }
  .item-lineup__go { width: 7vw; height: 7vw; font-size: 4vw; }
  .item-lineup__arrow { top: 34vw; width: 9vw; height: 9vw; }
  .item-lineup__arrow::before { width: 2vw; height: 2vw; }
  .item-lineup__arrow--prev::before { transform: translateX(.5vw) rotate(-135deg); }
  .item-lineup__arrow--next::before { transform: translateX(-.5vw) rotate(45deg); }
  .item-lineup__arrow--prev { left: 1vw; }
  .item-lineup__arrow--next { right: 1vw; }
  .item-lineup__dots { gap: 2vw; }
  .item-lineup__dots button { width: 6px; height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .item-lineup__viewport { scroll-behavior: auto; }
  .item-lineup__image img { transition: none; }
}

/* Floating access to the product gallery from the lineup through the details. */
.detail-lineup-nav {
  position: fixed;
  z-index: 12;
  right: max(var(--gutter), calc(50vw - 960px + var(--gutter)));
  bottom: calc(35 * var(--u) + 16px);
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear .55s;
}

.detail-lineup-nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1),
              visibility 0s;
}

/* The floating-button variant fades in only after ITEM DETAILS begins. */
.detail-lineup-nav:not(.detail-lineup-nav--bar) {
  transform: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.detail-lineup-nav:not(.detail-lineup-nav--bar).is-visible {
  transform: none;
  transition: opacity .7s ease, visibility 0s;
}

.detail-lineup-nav__panel[hidden] { display: none; }

.detail-lineup-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 17px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-size: clamp(12px, calc(16 * var(--u)), 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.detail-lineup-nav__toggle-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor 0 0) left top / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) right top / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 5px 5px no-repeat;
}

.detail-lineup-nav__toggle-icon::before,
.detail-lineup-nav__toggle-icon::after {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1px;
  background: currentColor;
}

.detail-lineup-nav__toggle[aria-expanded="true"] .detail-lineup-nav__toggle-icon { background: none; }
.detail-lineup-nav__toggle[aria-expanded="true"] .detail-lineup-nav__toggle-icon::before,
.detail-lineup-nav__toggle[aria-expanded="true"] .detail-lineup-nav__toggle-icon::after { content: ""; display: block; }
.detail-lineup-nav__toggle[aria-expanded="true"] .detail-lineup-nav__toggle-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.detail-lineup-nav__toggle[aria-expanded="true"] .detail-lineup-nav__toggle-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

.detail-lineup-nav__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.detail-lineup-nav__panel {
  --lineup-gap: calc(2 * var(--pad));
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(calc(100vw - 2 * var(--gutter)), 1280px);
  max-height: calc(100svh - 35 * var(--u) - 125px);
  overflow-y: auto;
  padding: calc(22 * var(--u)) 0 calc(24 * var(--u));
  border: 1px solid var(--ink);
  background: rgba(219, 219, 219, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, .12);
}

.detail-lineup-nav__panel-heading {
  padding: 0 calc(32 * var(--u)) calc(14 * var(--u));
  font-size: clamp(18px, calc(28 * var(--u)), 28px);
  line-height: 1;
  letter-spacing: .06em;
}
.detail-lineup-nav__panel-heading small { margin-left: .7em; font-size: .5em; white-space: nowrap; }

.detail-lineup-nav__panel:not([hidden]) {
  animation: detail-lineup-open .3s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes detail-lineup-open {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-lineup-nav__panel .item-lineup__slider { margin-top: 0; }
.detail-lineup-nav__panel .item-lineup__viewport { margin-inline: calc(32 * var(--u)); }
.detail-lineup-nav__panel .item-lineup__arrow--prev { left: calc(9 * var(--u)); }
.detail-lineup-nav__panel .item-lineup__arrow--next { right: calc(9 * var(--u)); }
.detail-lineup-nav__panel .item-lineup__image { height: calc(300 * var(--u)); }
.detail-lineup-nav__panel .item-lineup__dots { margin-top: calc(24 * var(--u)); }

@media (max-width: 767px) {
  .detail-lineup-nav { right: 4vw; bottom: calc(8vw + 12px + env(safe-area-inset-bottom, 0px)); }
  .detail-lineup-nav__toggle { min-height: 44px; padding: 11px 14px; font-size: 12px; }
  .detail-lineup-nav__panel {
    --lineup-gap: 3vw;
    width: 92vw;
    max-height: calc(100dvh - 8vw - 100px - env(safe-area-inset-bottom, 0px));
    padding: 4vw 0 5vw;
  }
  .detail-lineup-nav__panel-heading { padding: 0 4vw 3vw; font-size: 4.5vw; }
  .detail-lineup-nav__panel .item-lineup__viewport { margin-inline: 4vw; }
  .detail-lineup-nav__panel .item-lineup__arrow--prev { left: 1vw; }
  .detail-lineup-nav__panel .item-lineup__arrow--next { right: 1vw; }
  .detail-lineup-nav__panel .item-lineup__image { height: auto; aspect-ratio: 1; }
  .detail-lineup-nav__panel .item-lineup__dots { margin-top: 4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-lineup-nav,
  .detail-lineup-nav.is-visible { transition: none; transform: none; }
  .detail-lineup-nav:not(.detail-lineup-nav--bar),
  .detail-lineup-nav:not(.detail-lineup-nav--bar).is-visible { transition: none; }
  .detail-lineup-nav__panel:not([hidden]) { animation: none; }
}