
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel {
  --pv: var(--pv-base);
  --gap: 0.625rem;
  position: relative;
  min-width: 0;
}

@media (min-width: 640px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel {
    --pv: var(--pv-sm);
  }
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel {
    --pv: var(--pv-md);
    --gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel {
    --pv: var(--pv-lg);
  }
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__viewport, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__viewport, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__viewport, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__viewport, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__viewport, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__viewport {
  position: relative;
}

/* Desktop, arrows "outside": prev | slides | next as a 3-column grid. The arrows live in their own
   columns (44px + 16px gap), so they can never overlap a card whatever the slide widths are. */
@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-outside .bike-carousel__viewport, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-outside .bike-carousel__viewport, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-outside .bike-carousel__viewport, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-outside .bike-carousel__viewport, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-outside .bike-carousel__viewport, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-outside .bike-carousel__viewport {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    column-gap: 1rem;
    align-items: center;
  }

  /* keepWidth with fewer slides than fit: the row is as wide as its slides, centred, arrows right beside it */
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-outside.is-short .bike-carousel__viewport, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-outside.is-short .bike-carousel__viewport, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-outside.is-short .bike-carousel__viewport, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-outside.is-short .bike-carousel__viewport, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-outside.is-short .bike-carousel__viewport, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-outside.is-short .bike-carousel__viewport {
    grid-template-columns: 2.75rem minmax(0, var(--row-w)) 2.75rem;
    justify-content: center;
  }

  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel.is-short:not(.bike-carousel--arrows-outside) .bike-carousel__track {
    max-width: var(--row-w);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Small padding so the first/last card's 1px border and hover shadow are not clipped by the
   scroll container; the negative margin keeps the row aligned with the container edges. */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel {
  /* the track's room above / below the slides; a parent that wants none sets both to 0 on its .bike-carousel */
  --track-pt: 0.25rem;
  --track-pb: 0.5rem;
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__track, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__track, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__track, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__track, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__track, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__track {
  gap: var(--gap);
  margin: calc(-1 * var(--track-pt)) -1px;
  padding: var(--track-pt) 1px var(--track-pb);
  scroll-padding-inline: 1px;
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__slide, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__slide, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__slide, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__slide, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__slide, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__slide {
  flex: 0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
  min-width: 0;
  scroll-snap-align: start;
}

/* Arrows: desktop only (touch devices swipe). */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-icon-btn.bike-carousel__arrow {
  display: none;
  z-index: 2;
}

/* Without arrowAnchor the arrows sit on the vertical centre of the slide row — the cards' full height, whatever their
   content (2026-10-29). The track's box is (--track-pb − --track-pt) taller than the slides (margin −pt on both
   sides), so the centre is moved up by half of that. */

/* inside (banners, hero products): overlaid on the slide */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow {
  position: absolute;
  top: var(--arrow-top, calc(50% - (var(--track-pb) - var(--track-pt)) / 2));
  transform: translateY(-50%);
}

/* outside: centred in the grid row (align-items: center); the bottom margin cancels the track's extra height */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-outside:not(.is-anchored) .bike-icon-btn.bike-carousel__arrow {
  margin-bottom: calc(var(--track-pb) - var(--track-pt));
}

/* outside with arrowAnchor: on the vertical centre of that element (e.g. a blog card image) once measured */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-outside.is-anchored .bike-icon-btn.bike-carousel__arrow {
  align-self: start;
  margin-top: calc(var(--arrow-top) - 1.375rem);
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-icon-btn.bike-carousel__arrow, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-icon-btn.bike-carousel__arrow {
    display: inline-flex;
  }
}

/* cannot move further: stays visible, dimmed, not clickable */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-icon-btn.bike-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--prev {
  left: 0.75rem;
}
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel--arrows-inside .bike-icon-btn.bike-carousel__arrow--next {
  right: 0.75rem;
}

/* Dots */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dots, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dots, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dots, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dots, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dots, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dots, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dots, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dots, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dots, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dots, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dots {
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dots--mobile, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dots--mobile, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dots--mobile, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dots--mobile, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dots--mobile, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dots--mobile {
    display: none;
  }
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dot, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dot, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dot, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dot, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dot, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dot {
  position: relative;
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--bike-radius-pill);
  background: var(--bike-dot);
  cursor: pointer;
  transition: width 200ms ease, background-color 200ms ease;
}

/* 44px-ish hit area without changing the visual size */
.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dot::before, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dot::before, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dot::before, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dot::before, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dot::before, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dot::before {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem;
}

.cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dot.is-active {
  width: 1.125rem;
  background: var(--bike-navy);
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dot, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dot, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dot, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dot, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dot, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dot {
    width: 0.5rem;
    height: 0.5rem;
  }
  .cc_J2aTpvNHJ1_D5672WmB8a .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_w7MsQCv0KJ .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_7hpqQ4VG3Z .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_BCgjxgJnd4 .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_J2uocFzFzM .bike-carousel__dot.is-active, .cc_J2aTpvNHJ1_q3GtcfQXGx .bike-carousel__dot.is-active {
    width: 1.375rem;
  }
}
