.row-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-3);
}

.carousel-controls {
  display: flex;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.carousel-nav {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.carousel-nav:hover:not([disabled]) {
  background: var(--color-canvas-2);
  border-color: var(--color-primary);
  color: var(--color-primary-700);
}

.carousel-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.carousel-nav:focus-visible {
  outline: none;
  box-shadow: var(--sh-glow-focus);
}

.carousel-nav svg {
  width: 18px;
  height: 18px;
}

/* variant for use over imagery */
.carousel-nav--overlay {
  border: 0;
  background: transparent;
  color: var(--color-overlay-surface);
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--color-overlay-ink) 55%, transparent));
}

.carousel-nav--overlay:hover:not([disabled]) {
  background: transparent;
  color: var(--color-overlay-surface);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-nav { transition: none; }
}