/* ------------------------------------------------------------------
   Carousel nav pill - .cc-carousel-nav
   Source of truth: Figma "The Velobarn" file. The design draws this pill
   three times and draws it identically each time: node 21:834 (under the
   hero), 21:883 (under the Best Sellers carousel) and 21:906 (under the
   Our Work gallery). Same 141x31 box, same 5x11 chevrons, same 7px dots
   with a 20px active pill.

   It started life inside home/hero-banner.css and was lifted out here
   when the second carousel needed it. If you are adding a third, use
   this block - do not copy it again.

   This IS .splide__arrows / .splide__pagination - Splide adopts the
   markup rather than building its own - so most of what follows is
   undoing splide.min.css defaults, not fighting a second element.
   /splide/css/splide.min.css MUST load BEFORE this file.

   Depends on --space-2xs / --space-3xs (spacing.css) and
   --surface-panel / --foreground (colors.css).
   ------------------------------------------------------------------ */

/* The pill itself. Centred by the carousel that owns it - the margin
   above is the section's spacing decision, not the pill's, so callers
   set it (the hero uses 40px, Best Sellers 80px). */
.cc-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: max-content;
  /* 10px all round, which lands the pill on its designed 141x31.
     Figma reports 12px vertical because it measures against the 7px dot
     row; the 11px arrow is the tallest child, so in CSS the same 31px
     total comes from 10 + 11 + 10. Using 12 here would give 35. */
  padding: var(--space-3xs);
  background: var(--surface-panel);
  border-radius: 40px;
}

/* One page means nothing to page through. Splide signals that by
   withholding .is-overflow; it already hides its own pagination on
   that basis, this extends it to the whole pill. */
.splide:not(.is-overflow) .cc-carousel-nav {
  display: none;
}

/* Arrows -------------------------------------------------------------- */

/* splide.min.css absolutely positions these as 2em grey circles at the
   track edges; all of that has to go. The box stays the designed 5x11 so
   the pill measures 141x31 as drawn - the tap target is added back as a
   pseudo-element below, which costs no layout. */
.cc-carousel-nav__arrow {
  /* relative, not static: it still has to escape splide.min.css's
     absolute positioning, and it anchors the tap target below. */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 5px;
  height: 11px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
}

/* 44x44 pointer/touch target, centred on the 5x11 glyph. */
.cc-carousel-nav__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.cc-carousel-nav__arrow:hover:not(:disabled),
.cc-carousel-nav__arrow:focus-visible {
  opacity: 0.7;
}

.cc-carousel-nav__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Explicit dimensions rather than a fill rule: this is a 6.0457x11.6727
   leaf inside a 5x11 box, and the overflow is the stroke bleed, so it
   must not be sized to its container. */
.cc-carousel-nav__chevron {
  display: block;
  width: 6.0457px;
  height: 11.6727px;
  flex: none;
  overflow: visible;
}

/* The design draws the prev chevron as the next one mirrored. */
.splide__arrow--prev .cc-carousel-nav__chevron {
  transform: scaleX(-1);
}

.splide__arrow--next .cc-carousel-nav__chevron {
  transform: none;
}

/* Dots ---------------------------------------------------------------- */

/* Splide populates this <ul> in place. Defaults to override: absolute
   positioning, 1em side padding, flex-wrap and pointer-events are all
   set by splide.min.css. pointer-events:none is deliberate there (the
   <li> re-enable it), so it is left alone. */
.cc-carousel-nav__dots {
  position: static;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3xs);
  bottom: auto;
  left: auto;
  right: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cc-carousel-nav__dots li {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 0;
}

/* 7px circle. Splide's default is an 8px grey circle with a 3px margin
   and 0.7 opacity - the margin in particular has to go, the pill's
   spacing is the 10px gap above. */
.cc-carousel-nav__dots .splide__pagination__page {
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--foreground);
  opacity: 1;
  transform: none;
  transition: width 0.3s ease;
  cursor: pointer;
}

/* Active state is a 20px-wide pill, not a scaled-up dot - so the
   default transform:scale(1.4) is cleared rather than adjusted. */
.cc-carousel-nav__dots .splide__pagination__page.is-active {
  width: 20px;
  background: var(--foreground);
  transform: none;
}