/* SecurPlanet homepage brands — scoped to .sp-brands */
.sp-brands {
  --sp-brands-fg: var(--sp-night, #0b1220);
  --sp-brands-muted: #64748b;
  --sp-brands-accent: var(--sp-electric, #2563eb);
  --sp-brands-accent-hover: var(--sp-electric-hover, #1d4ed8);
  --sp-brands-bg: var(--sp-white, #ffffff);
  --sp-brands-visible: 2.2;
  --sp-brands-gap: 1rem;
  --sp-brands-slot-h: 2.75rem;
  --sp-brands-zoom-max: 1.08;
  background: var(--sp-brands-bg);
  color: var(--sp-brands-fg);
  padding: 1.5rem 0;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

@media (min-width: 768px) {
  .sp-brands {
    --sp-brands-visible: 4;
    --sp-brands-gap: 1rem;
    --sp-brands-slot-h: 3.25rem;
    --sp-brands-zoom-max: 1.45;
    padding: 1.85rem 0;
  }
}

@media (min-width: 992px) {
  .sp-brands {
    --sp-brands-visible: 6;
    --sp-brands-gap: 1.25rem;
    --sp-brands-slot-h: 3.5rem;
    --sp-brands-zoom-max: 2.2;
    padding: 2.25rem 0;
  }
}

.sp-brands .container {
  max-width: 100%;
}

.sp-brands__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sp-brands__nav:focus-visible,
.sp-brands__link:focus-visible,
.sp-brands__viewport:focus-visible {
  outline: 2px solid var(--sp-brands-accent);
  outline-offset: 0.2rem;
  border-radius: 0.15rem;
}

.sp-brands__stage {
  position: relative;
  max-width: 100%;
}

.sp-brands__viewport {
  min-height: var(--sp-brands-slot-h);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.sp-brands__viewport::-webkit-scrollbar {
  display: none;
}

.sp-brands--static .sp-brands__viewport {
  overflow: hidden;
}

.sp-brands--scrollable .sp-brands__viewport {
  margin-inline: 2.4rem;
}

.sp-brands__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-brands-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-brands__item {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--sp-brands-visible) - 1) * var(--sp-brands-gap)) / var(--sp-brands-visible));
  width: calc((100% - (var(--sp-brands-visible) - 1) * var(--sp-brands-gap)) / var(--sp-brands-visible));
  max-width: calc((100% - (var(--sp-brands-visible) - 1) * var(--sp-brands-gap)) / var(--sp-brands-visible));
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}

.sp-brands__link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--sp-brands-slot-h);
  min-height: var(--sp-brands-slot-h);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0.15rem;
}

.sp-brands__link:hover {
  opacity: 0.88;
}

.sp-brands__slot {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: paint;
}

.sp-brands__logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(min(var(--sp-brands-zoom, 1), var(--sp-brands-zoom-max, 1)));
  transform-origin: center center;
}

.sp-brands__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: var(--sp-brands-bg);
  color: var(--sp-brands-muted);
  box-shadow: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.sp-brands__nav .material-icons {
  font-size: 1.25rem;
  line-height: 1;
}

.sp-brands__nav--prev {
  left: 0;
}

.sp-brands__nav--next {
  right: 0;
}

.sp-brands__nav:hover:not(:disabled) {
  color: var(--sp-brands-fg);
  border-color: #cbd5e1;
}

.sp-brands__nav:disabled,
.sp-brands__nav[hidden] {
  opacity: 0;
  pointer-events: none;
}

.sp-brands:not(.sp-brands--scrollable) .sp-brands__nav {
  display: none;
}

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