/* kit v1.11.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit/ui/carousel — scroll-snap slide track with optional prev/next controls and counter.
 *
 * NEW WORK (kit 1.4.0), not an extraction — kit.json's `planned` block records why: the theme's
 * component-slider.css is Dawn's carousel CSS with its behaviour living in global.js's
 * SliderComponent, which is not a component file and was never extracted. What WAS proven is
 * the pattern: Stellar M22's reviews carousel is a native scroll-snap track that degrades to
 * swipe with the arrows gone (its page.json nojs record), and that is the architecture here.
 *
 * WHEN A PAGE USES THIS (operator rule, 2026-08-23): supporting nice-to-know detail — benefit
 * cards, secondary treatment facts, reviews where the brand permits them — content worth
 * scanning but not worth the vertical space of stacking. Critical content (price, mechanism,
 * suitability) never goes in a carousel: a slide is skippable by design.
 * See docs/carousel.md §When to use.
 *
 * ARM A: the track is a real overflow-x scroller with snap points — swipe, trackpad, scrollbar
 * and keyboard (the viewport is focusable in the markup) all work with zero JS. The controls
 * are authored `hidden`; carousel.js removes the attribute only once it has something real to
 * drive (the jump-nav honesty pattern). So no JS = no dead arrows, just a scroller.
 */

lp-carousel {
  display: block;
}

.lp-car__viewport {
  /* Focusable in the markup (tabindex="0" + role="group" + aria-label) so keyboard users can
   * arrow through the track in every arm. */
  display: block;
}

.lp-car__viewport:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 4px;
}

.lp-car__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--car-slide-w, min(78%, 360px));
  gap: var(--car-gap, var(--space-m));
  margin: 0;
  padding: 0 0 var(--space-s);   /* room for the scrollbar so it never overlaps a slide */
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.lp-car__slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* Mouse drag (kit 1.7.0) — both attributes are set by carousel.js, so no JS = no grab cursor
 * promising a drag that cannot happen. During a drag, snap and smooth scrolling are suspended
 * (each would fight the pointer's direct scrollLeft writes) and text selection is off. */
.lp-car__track[data-car-draggable] {
  cursor: grab;
}

.lp-car__track[data-car-dragging] {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

/* Controls: authored hidden, revealed by carousel.js — and only when the track actually
 * overflows, so a three-slide carousel on a wide screen shows no arrows to do nothing. */
.lp-car__controls {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

/* display: flex beats the UA's [hidden] rule — without this the authored-hidden controls
 * would render in the no-JS arm as dead arrows, the exact thing `hidden` exists to prevent. */
.lp-car__controls[hidden] {
  display: none;
}

.lp-car__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--btn-outline-border);
  border-radius: 50%;
  color: var(--btn-outline-text);
  background: var(--btn-outline);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.lp-car__btn:hover {
  background: var(--btn-secondary-hover);
}

.lp-car__btn:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 3px;
}

/* Ends are DISABLED, not hidden: a control that vanishes underfoot moves its sibling and
 * steals the click aimed at it. */
.lp-car__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.lp-car__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lp-car__counter {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums; /* "3 / 6" must not wobble as the numerals change */
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .lp-car__track {
    scroll-behavior: auto;
  }
}